you know what let's just change frontend framework again

Foxnouns.Frontend/src/routes/auth/callback/mastodon/[instance]/+page.server.ts

@@ -0,0 +1,62 @@
+import { apiRequest } from "$api";
+import ApiError, { ErrorCode, type RawApiError } from "$api/error";
+import type { AuthResponse, CallbackResponse } from "$api/models/auth.js";
+import { setToken } from "$lib";
+import log from "$lib/log.js";
+import { isRedirect, redirect } from "@sveltejs/kit";
+
+export const load = async ({ parent, params, url, fetch, cookies }) => {
+	const { meUser } = await parent();
+	if (meUser) redirect(303, `/@${meUser.username}`);
+
+	const code = url.searchParams.get("code") as string | null;
+	const state = url.searchParams.get("state") as string | null;
+	if (!code || !state) throw new ApiError(undefined, ErrorCode.BadRequest).obj;
+
+	const resp = await apiRequest<CallbackResponse>("POST", "/auth/fediverse/callback", {
+		body: { code, state, instance: params.instance },
+		isInternal: true,
+		fetch,
+	});
+
+	if (resp.has_account) {
+		setToken(cookies, resp.token!);
+		redirect(303, `/@${resp.user!.username}`);
+	}
+
+	return {
+		hasAccount: false,
+		instance: params.instance,
+		ticket: resp.ticket!,
+		remoteUser: resp.remote_username!,
+	};
+};
+
+export const actions = {
+	default: async ({ request, fetch, cookies }) => {
+		const data = await request.formData();
+		const username = data.get("username") as string | null;
+		const ticket = data.get("ticket") as string | null;
+
+		if (!username || !ticket)
+			return {
+				error: { message: "Bad request", code: ErrorCode.BadRequest, status: 403 } as RawApiError,
+			};
+
+		try {
+			const resp = await apiRequest<AuthResponse>("POST", "/auth/fediverse/register", {
+				body: { username, ticket },
+				isInternal: true,
+				fetch,
+			});
+
+			setToken(cookies, resp.token);
+			redirect(303, "/auth/welcome");
+		} catch (e) {
+			if (isRedirect(e)) throw e;
+			log.error("Could not sign up user with username %s:", username, e);
+			if (e instanceof ApiError) return { error: e.obj };
+			throw e;
+		}
+	},
+};

Foxnouns.Frontend/src/routes/auth/callback/mastodon/[instance]/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Button, Input, Label } from "@sveltestrap/sveltestrap";
+	import type { ActionData, PageData } from "./$types";
+	import { t } from "$lib/i18n";
+	import { enhance } from "$app/forms";
+	import ErrorAlert from "$components/ErrorAlert.svelte";
+
+	type Props = { data: PageData; form: ActionData };
+	let { data, form }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{$t("auth.register-with-mastodon")} • pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	<h1>{$t("auth.register-with-mastodon")}</h1>
+
+	{#if form?.error}
+		<ErrorAlert error={form?.error} />
+	{/if}
+
+	<form method="POST" use:enhance>
+		<div class="mb-3">
+			<Label>{$t("auth.remote-fediverse-account-label")}</Label>
+			<Input type="text" readonly value={data.remoteUser} />
+		</div>
+		<div class="mb-3">
+			<Label>{$t("auth.register-username-label")}</Label>
+			<Input type="text" name="username" required />
+		</div>
+		<input type="hidden" name="ticket" value={data.ticket} />
+		<Button color="primary" type="submit">{$t("auth.register-button")}</Button>
+	</form>
+</div>

Foxnouns.Frontend/src/routes/auth/log-in/+page.server.ts

@@ -0,0 +1,79 @@
+import { isRedirect, redirect } from "@sveltejs/kit";
+
+import { apiRequest } from "$api";
+import type { AuthResponse, AuthUrls } from "$api/models/auth";
+import { setToken } from "$lib";
+import ApiError, { ErrorCode } from "$api/error";
+
+export const load = async ({ fetch, parent }) => {
+	const parentData = await parent();
+	if (parentData.meUser) redirect(303, `/@${parentData.meUser.username}`);
+
+	const urls = await apiRequest<AuthUrls>("POST", "/auth/urls", { fetch, isInternal: true });
+	return { urls };
+};
+
+export const actions = {
+	login: async ({ request, fetch, cookies }) => {
+		const body = await request.formData();
+		const email = body.get("email") as string | null;
+		const password = body.get("password") as string | null;
+
+		try {
+			const resp = await apiRequest<AuthResponse>("POST", "/auth/email/login", {
+				body: { email, password },
+				fetch,
+				isInternal: true,
+			});
+
+			setToken(cookies, resp.token);
+			redirect(303, `/@${resp.user.username}`);
+		} catch (e) {
+			if (isRedirect(e)) throw e;
+
+			if (e instanceof ApiError) return { error: e.obj };
+			throw e;
+		}
+	},
+	fediToggle: () => {
+		return { error: null, showFediBox: true };
+	},
+	fedi: async ({ request, fetch }) => {
+		const body = await request.formData();
+		const instance = body.get("instance") as string | null;
+		if (!instance) return { error: new ApiError(undefined, ErrorCode.BadRequest).obj };
+
+		try {
+			const resp = await apiRequest<{ url: string }>(
+				"GET",
+				`/auth/fediverse?instance=${encodeURIComponent(instance)}`,
+				{ fetch, isInternal: true },
+			);
+			redirect(303, resp.url);
+		} catch (e) {
+			if (isRedirect(e)) throw e;
+
+			if (e instanceof ApiError) return { error: e.obj };
+			throw e;
+		}
+	},
+	fediForceRefresh: async ({ request, fetch }) => {
+		const body = await request.formData();
+		const instance = body.get("instance") as string | null;
+		if (!instance) return { error: new ApiError(undefined, ErrorCode.BadRequest).obj };
+
+		try {
+			const resp = await apiRequest<{ url: string }>(
+				"GET",
+				`/auth/fediverse?instance=${encodeURIComponent(instance)}&forceRefresh=true`,
+				{ fetch, isInternal: true },
+			);
+			redirect(303, resp.url);
+		} catch (e) {
+			if (isRedirect(e)) throw e;
+
+			if (e instanceof ApiError) return { error: e.obj };
+			throw e;
+		}
+	},
+};

Foxnouns.Frontend/src/routes/auth/log-in/+page.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { ActionData, PageData } from "./$types";
+	import { t } from "$lib/i18n";
+	import { enhance } from "$app/forms";
+	import { Button, ButtonGroup, Input, InputGroup } from "@sveltestrap/sveltestrap";
+	import ErrorAlert from "$components/ErrorAlert.svelte";
+
+	type Props = { data: PageData; form: ActionData };
+	let { data, form }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{$t("title.log-in")} • pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	<div class="row">
+		{#if form?.error}
+			<ErrorAlert error={form.error} />
+		{/if}
+	</div>
+	<div class="row">
+		{#if data.urls.email_enabled}
+			<div class="col col-md mb-4">
+				<h2>{$t("auth.log-in-form-title")}</h2>
+				<form method="POST" action="?/login" use:enhance>
+					<div class="mb-2">
+						<label class="form-label" for="email">{$t("auth.log-in-form-email-label")}</label>
+						<Input type="email" id="email" name="email" placeholder="me@example.com" />
+					</div>
+					<div class="mb-2">
+						<label class="form-label" for="password">{$t("auth.log-in-form-password-label")}</label>
+						<Input type="password" id="password" name="password" />
+					</div>
+					<ButtonGroup>
+						<Button type="submit" color="primary">{$t("auth.log-in-button")}</Button>
+						<a class="btn btn-secondary" href="/auth/register">
+							{$t("auth.register-with-email-button")}
+						</a>
+					</ButtonGroup>
+				</form>
+			</div>
+		{:else}
+			<div class="col-lg-3"></div>
+		{/if}
+		<div class="col col-md">
+			<h3>{$t("auth.log-in-3rd-party-header")}</h3>
+			<p>{$t("auth.log-in-3rd-party-desc")}</p>
+			<form method="POST" action="?/fediToggle" use:enhance>
+				<div class="list-group">
+					{#if data.urls.discord}
+						<a href={data.urls.discord} class="list-group-item list-group-item-action">
+							{$t("auth.log-in-with-discord")}
+						</a>
+					{/if}
+					{#if data.urls.google}
+						<a href={data.urls.google} class="list-group-item list-group-item-action">
+							{$t("auth.log-in-with-google")}
+						</a>
+					{/if}
+					{#if data.urls.tumblr}
+						<a href={data.urls.tumblr} class="list-group-item list-group-item-action">
+							{$t("auth.log-in-with-tumblr")}
+						</a>
+					{/if}
+					<button type="submit" class="list-group-item list-group-item-action">
+						{$t("auth.log-in-with-the-fediverse")}
+					</button>
+				</div>
+			</form>
+			{#if form?.showFediBox}
+				<h4 class="mt-4">{$t("auth.log-in-with-the-fediverse")}</h4>
+				<form method="POST" action="?/fedi" use:enhance>
+					<InputGroup>
+						<Input name="instance" type="text" placeholder="Your instance (i.e. mastodon.social)" />
+						<Button type="submit" color="secondary">{$t("auth.log-in-button")}</Button>
+					</InputGroup>
+					<p>
+						{$t("auth.log-in-with-fediverse-error-blurb")}
+						<Button formaction="?/fediForceRefresh" type="submit" color="link">
+							{$t("auth.log-in-with-fediverse-force-refresh-button")}
+						</Button>
+					</p>
+				</form>
+			{/if}
+		</div>
+	</div>
+</div>

Foxnouns.Frontend/src/routes/auth/welcome/+page.server.ts

@@ -0,0 +1,6 @@
+import { redirect } from "@sveltejs/kit";
+
+export const load = async ({ parent }) => {
+	const { meUser } = await parent();
+	if (!meUser) redirect(303, "/auth/log-in");
+};

Foxnouns.Frontend/src/routes/auth/welcome/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { t } from "$lib/i18n";
+	import type { PageData } from "./$types";
+
+	type Props = { data: PageData };
+	let { data }: Props = $props();
+	let user = $derived(data.meUser!);
+</script>
+
+<svelte:head>
+	<title>{$t("title.welcome")} • pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	<h2>Welcome to pronouns.cc!</h2>
+
+	<div class="alert alert-secondary">
+		<a href="/@{user.username}">If you just want to go to your profile, click here</a>
+	</div>
+
+	<h3>Customize your profile</h3>
+	<!-- TODO: this needs actual content, obviously -->
+	<p>(todo)</p>
+
+	<h3>Create members</h3>
+	<p>(todo)</p>
+
+	<h3>Create custom preferences</h3>
+	<p>(todo)</p>
+
+	<p>
+		<a class="btn btn-primary btn-lg" href="/@{user.username}">Check out your profile</a>
+	</p>
+</div>