mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 22:41:09 +02:00
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>
This commit is contained in:
parent
ad4ae93f29
commit
be365a0c1e
2 changed files with 117 additions and 0 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue