feat(frontend): don't break signup pages on reload

Foxnouns.Frontend/src/routes/auth/callback/discord/+page.server.ts

@@ -1,8 +1,3 @@
 import createCallbackLoader from "$lib/actions/callback";
-import createRegisterAction from "$lib/actions/register";
 
 export const load = createCallbackLoader("discord");
-
-export const actions = {
-	default: createRegisterAction("/auth/discord/register"),
-};

Foxnouns.Frontend/src/routes/auth/callback/discord/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import Error from "$components/Error.svelte";
 	import NewAuthMethod from "$components/settings/NewAuthMethod.svelte";
-	import OauthRegistrationForm from "$components/settings/OauthRegistrationForm.svelte";
 	import { t } from "$lib/i18n";
-	import type { ActionData, PageData } from "./$types";
+	import type { PageData } from "./$types";
 
-	type Props = { data: PageData; form: ActionData };
-	let { data, form }: Props = $props();
+	type Props = { data: PageData };
+	let { data }: Props = $props();
 </script>
 
 <svelte:head>
@@ -17,15 +16,7 @@
 	{#if data.error}
 		<h1>{$t("auth.register-with-discord")}</h1>
 		<Error error={data.error} />
-	{:else if data.isLinkRequest}
-		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{:else}
-		<OauthRegistrationForm
-			title={$t("auth.register-with-discord")}
-			remoteLabel={$t("auth.remote-discord-account-label")}
-			remoteUser={data.remoteUser!}
-			ticket={data.ticket!}
-			error={form?.error}
-		/>
+		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{/if}
 </div>

Foxnouns.Frontend/src/routes/auth/callback/google/+page.server.ts

@@ -1,8 +1,3 @@
 import createCallbackLoader from "$lib/actions/callback";
-import createRegisterAction from "$lib/actions/register";
 
 export const load = createCallbackLoader("google");
-
-export const actions = {
-	default: createRegisterAction("/auth/google/register"),
-};

Foxnouns.Frontend/src/routes/auth/callback/google/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import Error from "$components/Error.svelte";
 	import NewAuthMethod from "$components/settings/NewAuthMethod.svelte";
-	import OauthRegistrationForm from "$components/settings/OauthRegistrationForm.svelte";
 	import { t } from "$lib/i18n";
-	import type { ActionData, PageData } from "./$types";
+	import type { PageData } from "./$types";
 
-	type Props = { data: PageData; form: ActionData };
-	let { data, form }: Props = $props();
+	type Props = { data: PageData };
+	let { data }: Props = $props();
 </script>
 
 <svelte:head>
@@ -17,15 +16,7 @@
 	{#if data.error}
 		<h1>{$t("auth.register-with-google")}</h1>
 		<Error error={data.error} />
-	{:else if data.isLinkRequest}
-		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{:else}
-		<OauthRegistrationForm
-			title={$t("auth.register-with-google")}
-			remoteLabel={$t("auth.remote-google-account-label")}
-			remoteUser={data.remoteUser!}
-			ticket={data.ticket!}
-			error={form?.error}
-		/>
+		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{/if}
 </div>

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

@@ -1,6 +1,5 @@
 import ApiError, { ErrorCode } from "$api/error";
 import createCallbackLoader from "$lib/actions/callback";
-import createRegisterAction from "$lib/actions/register";
 
 export const load = createCallbackLoader("fediverse", async ({ params, url }) => {
 	const code = url.searchParams.get("code") as string | null;
@@ -10,7 +9,3 @@ export const load = createCallbackLoader("fediverse", async ({ params, url }) =>
 
 	return { code: code || token, state, instance: params.instance! };
 });
-
-export const actions = {
-	default: createRegisterAction("/auth/fediverse/register"),
-};

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

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import type { ActionData, PageData } from "./$types";
-	import { t } from "$lib/i18n";
 	import Error from "$components/Error.svelte";
-	import OauthRegistrationForm from "$components/settings/OauthRegistrationForm.svelte";
 	import NewAuthMethod from "$components/settings/NewAuthMethod.svelte";
+	import { t } from "$lib/i18n";
+	import type { PageData } from "./$types";
 
-	type Props = { data: PageData; form: ActionData };
-	let { data, form }: Props = $props();
+	type Props = { data: PageData };
+	let { data }: Props = $props();
 </script>
 
 <svelte:head>
@@ -17,15 +16,7 @@
 	{#if data.error}
 		<h1>{$t("auth.register-with-mastodon")}</h1>
 		<Error error={data.error} />
-	{:else if data.isLinkRequest}
-		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{:else}
-		<OauthRegistrationForm
-			title={$t("auth.register-with-mastodon")}
-			remoteLabel={$t("auth.remote-fediverse-account-label")}
-			remoteUser={data.remoteUser!}
-			ticket={data.ticket!}
-			error={form?.error}
-		/>
+		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{/if}
 </div>

Foxnouns.Frontend/src/routes/auth/callback/register/[ticket]/+page.server.ts

@@ -0,0 +1,48 @@
+import { apiRequest } from "$api";
+import ApiError, { ErrorCode, type RawApiError } from "$api/error";
+import type { AuthResponse } from "$api/models/auth";
+import { setToken } from "$lib";
+import log from "$lib/log";
+import { isRedirect, redirect } from "@sveltejs/kit";
+
+export type TicketData = {
+	type: string;
+	ticket: string;
+	remoteUsername: string;
+};
+
+export const load = async ({ params }) => {
+	const data = JSON.parse(atob(params.ticket)) as TicketData;
+	return data;
+};
+
+export const actions = {
+	default: async ({ request, fetch, cookies, params }) => {
+		const type = (JSON.parse(atob(params.ticket)) as TicketData).type;
+
+		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/${type}/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/register/[ticket]/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import OauthRegistrationForm from "$components/settings/OauthRegistrationForm.svelte";
+	import { t } from "$lib/i18n";
+	import type { ActionData, PageData } from "./$types";
+
+	type Props = { data: PageData; form: ActionData };
+	let { data, form }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{$t(`auth.register-with-${data.type}`)} • pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	<OauthRegistrationForm
+		title={$t(`auth.register-with-${data.type}`)}
+		remoteLabel={$t(`auth.remote-${data.type}-account-label`)}
+		remoteUser={data.remoteUsername}
+		ticket={data.ticket}
+		error={form?.error}
+	/>
+</div>

Foxnouns.Frontend/src/routes/auth/callback/tumblr/+page.server.ts

@@ -1,8 +1,3 @@
 import createCallbackLoader from "$lib/actions/callback";
-import createRegisterAction from "$lib/actions/register";
 
 export const load = createCallbackLoader("tumblr");
-
-export const actions = {
-	default: createRegisterAction("/auth/tumblr/register"),
-};

Foxnouns.Frontend/src/routes/auth/callback/tumblr/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import Error from "$components/Error.svelte";
 	import NewAuthMethod from "$components/settings/NewAuthMethod.svelte";
-	import OauthRegistrationForm from "$components/settings/OauthRegistrationForm.svelte";
 	import { t } from "$lib/i18n";
-	import type { ActionData, PageData } from "./$types";
+	import type { PageData } from "./$types";
 
-	type Props = { data: PageData; form: ActionData };
-	let { data, form }: Props = $props();
+	type Props = { data: PageData };
+	let { data }: Props = $props();
 </script>
 
 <svelte:head>
@@ -17,15 +16,7 @@
 	{#if data.error}
 		<h1>{$t("auth.register-with-tumblr")}</h1>
 		<Error error={data.error} />
-	{:else if data.isLinkRequest}
-		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{:else}
-		<OauthRegistrationForm
-			title={$t("auth.register-with-tumblr")}
-			remoteLabel={$t("auth.remote-tumblr-account-label")}
-			remoteUser={data.remoteUser!}
-			ticket={data.ticket!}
-			error={form?.error}
-		/>
+		<NewAuthMethod method={data.newAuthMethod!} user={data.meUser!} />
 	{/if}
 </div>