Files
familienarchiv/frontend/src/routes/reset-password/+page.svelte
Marcel 567612761d refactor: move lib-root files to lib/shared/ and finalize domain structure
- Move api.server.ts, errors.ts, types.ts, utils.ts, relativeTime.ts to lib/shared/
- Move person relationship components to lib/person/relationship/
- Move Stammbaum components to lib/person/genealogy/
- Move HelpPopover to lib/shared/primitives/
- Update all import paths across routes, specs, and lib files
- Update vi.mock() paths in server-project test files
- Remove now-empty legacy directories (components/, hooks/, server/, etc.)
- Update vite.config.ts coverage include paths for new structure
- Update frontend/CLAUDE.md to reflect domain-based lib/ layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-05 14:53:31 +02:00

107 lines
3.3 KiB
Svelte

<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { getErrorMessage } from '$lib/shared/errors';
let {
data,
form
}: {
data: { token: string | null };
form?: { error?: string; success?: boolean };
} = $props();
</script>
<div class="relative flex min-h-screen flex-col bg-surface">
<div class="flex flex-1 items-center justify-center px-4">
<div class="w-full max-w-sm">
<!-- Logo -->
<div class="mb-10 text-center">
<a href="/" class="inline-flex items-center" aria-label="Familienarchiv">
<span class="font-sans text-2xl font-bold tracking-widest text-ink uppercase"
>Familienarchiv</span
>
</a>
</div>
<!-- Card -->
<div class="rounded-sm border border-line bg-surface p-8 shadow-sm">
<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-ink uppercase">
{m.reset_password_heading()}
</h1>
{#if form?.success}
<div class="mb-5 rounded-sm border border-green-200 bg-green-50 px-4 py-3">
<p class="font-sans text-xs text-green-700">{m.reset_password_success()}</p>
</div>
<a href="/login" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
>{m.forgot_password_back_to_login()}</a
>
{:else}
<form method="POST" class="space-y-5">
<input type="hidden" name="token" value={data.token ?? ''} />
<div>
<label
for="newPassword"
class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
>{m.reset_password_label()}</label
>
<input
type="password"
name="newPassword"
id="newPassword"
required
autocomplete="new-password"
class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
/>
</div>
<div>
<label
for="confirmPassword"
class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
>{m.reset_password_confirm_label()}</label
>
<input
type="password"
name="confirmPassword"
id="confirmPassword"
required
autocomplete="new-password"
class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
/>
</div>
{#if form?.error}
<div class="text-center font-sans text-xs font-medium text-red-600">
{form.error === 'MISMATCH'
? m.reset_password_mismatch()
: getErrorMessage(form.error)}
</div>
{/if}
<button
type="submit"
class="mt-2 w-full bg-primary py-2.5 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
>
{m.reset_password_submit()}
</button>
<div class="mt-4 text-center">
<a href="/login" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
>{m.forgot_password_back_to_login()}</a
>
</div>
</form>
{/if}
</div>
</div>
</div>
<!-- Footer -->
<div class="py-4 text-center">
<p class="font-sans text-xs tracking-widest text-ink-3 uppercase">Familienarchiv</p>
</div>
</div>