50 lines
1.5 KiB
Svelte
50 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import FlowForm from '$lib/components/FlowForm.svelte';
|
|
import type { PageData } from './$types';
|
|
|
|
let { data }: { data: PageData } = $props();
|
|
|
|
// Derive UI text based on recovery flow state
|
|
const flowState = $derived(data.flow.state as string);
|
|
const heading = $derived(
|
|
flowState === 'sent_email' || flowState === 'passed_challenge'
|
|
? 'Enter recovery code'
|
|
: 'Recover your password'
|
|
);
|
|
const description = $derived(
|
|
flowState === 'sent_email'
|
|
? 'Enter the 6-digit recovery code sent to your email'
|
|
: flowState === 'passed_challenge'
|
|
? 'Recovery successful! Update your password below'
|
|
: 'Enter your email address to receive a recovery code'
|
|
);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Password Recovery - Nexus Nexus</title>
|
|
</svelte:head>
|
|
|
|
<div class="flex min-h-full flex-col justify-center px-4 py-12 sm:px-6 lg:px-8">
|
|
<div class="mx-auto w-full max-w-sm sm:max-w-md">
|
|
<h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-theme sm:text-3xl">
|
|
{heading}
|
|
</h2>
|
|
<p class="mt-2 text-center text-sm text-theme-secondary">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto mt-8 w-full max-w-sm sm:max-w-md">
|
|
<div class="card-padded shadow-theme">
|
|
<FlowForm flow={data.flow} groups={['default', 'code', 'link']} />
|
|
</div>
|
|
|
|
<p class="mt-6 text-center text-sm text-theme-secondary">
|
|
Remember your password?
|
|
<a href="/login" class="font-semibold leading-6 text-primary-500 hover:text-primary-600">
|
|
Sign in here
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|