feat(frontend): remove auth method

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

@@ -1,11 +1,12 @@
 import { apiRequest, fastRequest } from "$api";
 import ApiError, { ErrorCode, type RawApiError } from "$api/error.js";
 import type { AuthUrls } from "$api/models/auth";
+import { alertKey } from "$lib";
 import log from "$lib/log";
 
-export const load = async ({ fetch }) => {
+export const load = async ({ fetch, url }) => {
 	const urls = await apiRequest<AuthUrls>("POST", "/auth/urls", { fetch, isInternal: true });
-	return { urls };
+	return { urls, alertKey: alertKey(url) };
 };
 
 export const actions = {

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import AuthMethodList from "$components/settings/AuthMethodList.svelte";
 	import EmailSettings from "$components/settings/EmailSettings.svelte";
+	import UrlAlert from "$components/URLAlert.svelte";
 	import type { ActionData, PageData } from "./$types";
 
 	type Props = { data: PageData; form: ActionData };
@@ -14,6 +15,8 @@
 	let fediAccounts = $derived(data.user.auth_methods.filter((m) => m.type === "FEDIVERSE"));
 </script>
 
+<UrlAlert {data} />
+
 {#if data.urls.email_enabled}
 	<EmailSettings user={data.user} {canRemove} {max} {form} />
 {/if}

Foxnouns.Frontend/src/routes/settings/auth/add-email/+page.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <div class="mx-auto w-lg-75">
-	<h3>Link a new email address</h3>
+	<h3>{$t("auth.link-email-header")}</h3>
 
 	<FormStatusMarker {form} successMessage={$t("auth.check-inbox-for-link-hint")} />
 

Foxnouns.Frontend/src/routes/settings/auth/remove-method/[id]/+page.server.ts

@@ -0,0 +1,40 @@
+import { fastRequest } from "$api";
+import ApiError, { ErrorCode } from "$api/error.js";
+import log from "$lib/log.js";
+import { error, isRedirect, redirect } from "@sveltejs/kit";
+
+export const load = async ({ parent, params }) => {
+	const data = await parent();
+	if (data.user.auth_methods.length < 2) {
+		error(403, {
+			message: "You cannot remove your last authentication method.",
+			status: 403,
+			code: ErrorCode.LastAuthMethod,
+		});
+	}
+
+	const authMethod = data.meUser!.auth_methods.find((m) => m.id === params.id);
+	if (!authMethod) {
+		error(404, {
+			message: "No authentication method with that ID found.",
+			status: 404,
+			code: ErrorCode.GenericApiError,
+		});
+	}
+
+	return { authMethod };
+};
+
+export const actions = {
+	default: async ({ params, fetch, cookies }) => {
+		try {
+			fastRequest("DELETE", "/auth/methods/" + params.id, { fetch, cookies, isInternal: true });
+			redirect(303, "/settings/auth?alert=auth-method-remove-success");
+		} catch (e) {
+			if (isRedirect(e)) throw e;
+			if (e instanceof ApiError) return { error: e.obj };
+			log.error("Could not remove auth method %s:", params.id, e);
+			throw e;
+		}
+	},
+};

Foxnouns.Frontend/src/routes/settings/auth/remove-method/[id]/+page.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { AuthType } from "$api/models";
+	import ErrorAlert from "$components/ErrorAlert.svelte";
+	import { t } from "$lib/i18n";
+	import type { ActionData, PageData } from "./$types";
+
+	type Props = { data: PageData; form: ActionData };
+	let { data, form }: Props = $props();
+
+	const unlinkHeader = (type: AuthType): string => {
+		switch (type) {
+			case "DISCORD":
+				return $t("auth.unlink-discord-header");
+			case "GOOGLE":
+				return $t("auth.unlink-google-header");
+			case "TUMBLR":
+				return $t("auth.unlink-tumblr-header");
+			case "FEDIVERSE":
+				return $t("auth.unlink-fediverse-header");
+			case "EMAIL":
+				return $t("auth.unlink-email-header");
+		}
+	};
+</script>
+
+<svelte:head>
+	<title>{unlinkHeader(data.authMethod.type)} • pronouns.cc</title>
+</svelte:head>
+
+<div class="mx-auto w-lg-75">
+	<h3>{unlinkHeader(data.authMethod.type)}</h3>
+	{#if form?.error}
+		<ErrorAlert error={form.error} />
+	{/if}
+	<p>
+		{$t("auth.unlink-confirmation-1", {
+			username: data.authMethod.remote_username || data.authMethod.remote_id,
+		})}
+		<strong>{$t("auth.unlink-confirmation-2")}</strong>
+	</p>
+	<form method="POST">
+		<button type="submit" class="btn btn-danger">{$t("auth.unlink-button")}</button>
+	</form>
+</div>