From 32f2a5956ea6a858c06f34989f6bdd2fe1545d09 Mon Sep 17 00:00:00 2001
From: Anirudh Oppiliappan <anirudh@tangled.org>
Date: Tue, 25 Aug 2026 15:44:02 +0300
Subject: [PATCH] web: add public verify-email page

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
---
 web/src/routes/verify/email/+page.svelte | 64 ++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 web/src/routes/verify/email/+page.svelte

diff --git a/web/src/routes/verify/email/+page.svelte b/web/src/routes/verify/email/+page.svelte
new file mode 100644
index 000000000..4cbf7b4c4
--- /dev/null
+++ b/web/src/routes/verify/email/+page.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { page } from "$app/state";
+	import { VerificationError, verifyEmailByToken } from "$lib/api/emails";
+	import Button from "$lib/components/ui/Button.svelte";
+	import MailCheck from "$icon/mail-check";
+	import TriangleAlert from "$icon/triangle-alert";
+	import Settings from "$icon/settings";
+
+	const deliberiUrl = $derived(page.data.publicConfig?.deliberiUrl as string | undefined);
+
+	let state = $state<
+		{ kind: "verifying" } | { kind: "done"; email: string } | { kind: "error"; message: string }
+	>({ kind: "verifying" });
+
+	let fired = false;
+	$effect(() => {
+		if (fired || state.kind !== "verifying") return;
+		fired = true;
+		const url = deliberiUrl;
+		const token = page.url.searchParams.get("token") ?? "";
+		if (!url || !token) {
+			state = { kind: "error", message: "This verification link is missing its token." };
+			return;
+		}
+		verifyEmailByToken(url, token)
+			.then(({ email }) => {
+				state = { kind: "done", email };
+			})
+			.catch((cause: unknown) => {
+				const message =
+					cause instanceof VerificationError
+						? cause.message
+						: "Could not reach the verification service. Please try again.";
+				state = { kind: "error", message };
+			});
+	});
+</script>
+
+<div class="flex min-h-64 w-full items-center justify-center">
+	<div
+		class="flex w-full max-w-md flex-col items-center gap-4 rounded-sm border border-border-default p-8 text-center"
+	>
+		{#if state.kind === "verifying"}
+			<span class="typography-paragraph-regular text-foreground-muted"
+				>Verifying your email address…</span
+			>
+		{:else if state.kind === "done"}
+			<MailCheck class="size-8 text-foreground-success" aria-hidden="true" />
+			<h1 class="typography-heading-2 text-foreground-default">Email verified</h1>
+			<p class="typography-paragraph-regular text-foreground-muted">
+				<span class="font-medium text-foreground-default">{state.email}</span> is now verified
+				on your account.
+			</p>
+			<Button variant="primary" icon={Settings} href="/settings/emails"
+				>Go to email settings</Button
+			>
+		{:else}
+			<TriangleAlert class="size-8 text-foreground-danger" aria-hidden="true" />
+			<h1 class="typography-heading-2 text-foreground-default">Verification failed</h1>
+			<p class="typography-paragraph-regular text-foreground-muted">{state.message}</p>
+			<Button icon={Settings} href="/settings/emails">Go to email settings</Button>
+		{/if}
+	</div>
+</div>
-- 
2.51.2