From be365a0c1ecc1c95e0f0e1947967dc1983aebe0c Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Mon, 26 Jan 2026 20:43:02 +0100
Subject: [PATCH] feat(manacore): add email verification result pages

Add success and failure pages for email verification:
- /email-verified - shows success message with login button
- /verification-failed - shows error message with relevant actions

These pages are redirected to from mana-core-auth's verify-email endpoint.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/routes/email-verified/+page.svelte    | 43 +++++++++++
 .../routes/verification-failed/+page.svelte   | 74 +++++++++++++++++++
 2 files changed, 117 insertions(+)
 create mode 100644 apps/manacore/apps/web/src/routes/email-verified/+page.svelte
 create mode 100644 apps/manacore/apps/web/src/routes/verification-failed/+page.svelte

diff --git a/apps/manacore/apps/web/src/routes/email-verified/+page.svelte b/apps/manacore/apps/web/src/routes/email-verified/+page.svelte
new file mode 100644
index 000000000..469bb4f01
--- /dev/null
+++ b/apps/manacore/apps/web/src/routes/email-verified/+page.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+</script>
+
+<svelte:head>
+	<title>E-Mail bestätigt - ManaCore</title>
+</svelte:head>
+
+<div
+	class="flex min-h-screen flex-col items-center justify-center bg-gray-100 px-4 dark:bg-neutral-900"
+>
+	<div class="w-full max-w-md rounded-2xl bg-white p-8 text-center shadow-lg dark:bg-neutral-800">
+		<!-- Success Icon -->
+		<div
+			class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30"
+		>
+			<svg
+				class="h-10 w-10 text-green-600 dark:text-green-400"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+			</svg>
+		</div>
+
+		<h1 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">E-Mail bestätigt!</h1>
+
+		<p class="mb-8 text-gray-600 dark:text-gray-400">
+			Deine E-Mail-Adresse wurde erfolgreich bestätigt. Du kannst dich jetzt anmelden und alle
+			Funktionen von ManaCore nutzen.
+		</p>
+
+		<button
+			onclick={() => goto('/login')}
+			class="w-full rounded-lg bg-indigo-600 px-6 py-3 font-medium text-white transition-colors hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-800"
+		>
+			Zur Anmeldung
+		</button>
+	</div>
+
+	<p class="mt-8 text-sm text-gray-500 dark:text-gray-400">ManaCore - Dein digitales Ökosystem</p>
+</div>
diff --git a/apps/manacore/apps/web/src/routes/verification-failed/+page.svelte b/apps/manacore/apps/web/src/routes/verification-failed/+page.svelte
new file mode 100644
index 000000000..d10b6ec0f
--- /dev/null
+++ b/apps/manacore/apps/web/src/routes/verification-failed/+page.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+
+	// Get error from URL query params
+	const error = $derived($page.url.searchParams.get('error') || 'unknown_error');
+
+	// Map error codes to user-friendly messages
+	const errorMessages: Record<string, string> = {
+		missing_token: 'Der Bestätigungslink ist ungültig. Bitte fordere einen neuen Link an.',
+		invalid_or_expired_token:
+			'Der Bestätigungslink ist abgelaufen oder ungültig. Bitte fordere einen neuen Link an.',
+		verification_failed:
+			'Die E-Mail-Bestätigung ist fehlgeschlagen. Bitte versuche es später erneut.',
+		unknown_error: 'Ein unbekannter Fehler ist aufgetreten. Bitte versuche es später erneut.',
+	};
+
+	const errorMessage = $derived(errorMessages[error] || errorMessages.unknown_error);
+</script>
+
+<svelte:head>
+	<title>Bestätigung fehlgeschlagen - ManaCore</title>
+</svelte:head>
+
+<div
+	class="flex min-h-screen flex-col items-center justify-center bg-gray-100 px-4 dark:bg-neutral-900"
+>
+	<div class="w-full max-w-md rounded-2xl bg-white p-8 text-center shadow-lg dark:bg-neutral-800">
+		<!-- Error Icon -->
+		<div
+			class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30"
+		>
+			<svg
+				class="h-10 w-10 text-red-600 dark:text-red-400"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M6 18L18 6M6 6l12 12"
+				/>
+			</svg>
+		</div>
+
+		<h1 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
+			Bestätigung fehlgeschlagen
+		</h1>
+
+		<p class="mb-8 text-gray-600 dark:text-gray-400">
+			{errorMessage}
+		</p>
+
+		<div class="space-y-3">
+			<button
+				onclick={() => goto('/login')}
+				class="w-full rounded-lg bg-indigo-600 px-6 py-3 font-medium text-white transition-colors hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-800"
+			>
+				Zur Anmeldung
+			</button>
+
+			<button
+				onclick={() => goto('/register')}
+				class="w-full rounded-lg border border-gray-300 bg-white px-6 py-3 font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:border-neutral-600 dark:bg-neutral-700 dark:text-gray-200 dark:hover:bg-neutral-600 dark:focus:ring-offset-neutral-800"
+			>
+				Neues Konto erstellen
+			</button>
+		</div>
+	</div>
+
+	<p class="mt-8 text-sm text-gray-500 dark:text-gray-400">ManaCore - Dein digitales Ökosystem</p>
+</div>