66 lines
1.9 KiB
Svelte
66 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import type { PageProps } from './$types';
|
|
import Window from '$lib/components/containers/Window.svelte';
|
|
|
|
let { data, form }: PageProps = $props();
|
|
</script>
|
|
|
|
<Window>
|
|
{#if form?.error}
|
|
<div
|
|
class="mb-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700 dark:bg-red-950/50 dark:text-red-300"
|
|
role="alert"
|
|
>
|
|
{form.error}
|
|
</div>
|
|
{/if}
|
|
|
|
<form method="POST" class="flex flex-col gap-4">
|
|
<h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
|
{data.invite ? 'Set Your Password' : 'Reset Password'}
|
|
</h1>
|
|
{#if data.invite}
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">
|
|
Welcome! Choose a password to finish setting up your account.
|
|
</p>
|
|
{/if}
|
|
|
|
<div class="flex flex-col gap-1.5">
|
|
<label for="password" class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
New Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
name="password"
|
|
placeholder="••••••••"
|
|
required
|
|
minlength="8"
|
|
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1.5">
|
|
<label for="password2" class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
Confirm New Password
|
|
</label>
|
|
<input
|
|
id="password2"
|
|
type="password"
|
|
name="password2"
|
|
placeholder="••••••••"
|
|
required
|
|
minlength="8"
|
|
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="mt-1 flex h-11 w-full items-center justify-center rounded-lg bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700"
|
|
>
|
|
Reset Password
|
|
</button>
|
|
</form>
|
|
</Window>
|