116 lines
3.5 KiB
Svelte
116 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import { toast } from 'svelte-sonner';
|
|
import GalleryVerticalEndIcon from '@lucide/svelte/icons/gallery-vertical-end';
|
|
import { Field as FormField, Control, FieldErrors } from 'formsnap';
|
|
import * as Field from '$lib/components/ui/field/index.js';
|
|
import { superForm, type SuperValidated } from 'sveltekit-superforms';
|
|
import { zod4Client } from 'sveltekit-superforms/adapters';
|
|
import type { HTMLAttributes } from 'svelte/elements';
|
|
import { Input } from '$lib/components/ui/input/index.js';
|
|
import { Button } from '$lib/components/ui/button/index.js';
|
|
import { cn, type WithElementRef } from '$lib/utils/format.js';
|
|
import { loginSchema, type LoginSchema } from '$lib/schemas/auth';
|
|
|
|
let {
|
|
ref = $bindable(null),
|
|
class: className,
|
|
form: initialForm,
|
|
...restProps
|
|
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
|
|
form: SuperValidated<LoginSchema['_output'], string>;
|
|
} = $props();
|
|
|
|
const id = $props.id();
|
|
// svelte-ignore state_referenced_locally
|
|
const loginForm = superForm(initialForm, {
|
|
validators: zod4Client(loginSchema),
|
|
resetForm: false,
|
|
onUpdated: ({ form }) => {
|
|
if (!form.valid) {
|
|
toast.error(form.message ?? firstError(form.errors), {
|
|
id: 'login-error',
|
|
position: 'top-center'
|
|
});
|
|
}
|
|
},
|
|
onError: ({ result }) => {
|
|
toast.error(result.error.message, {
|
|
id: 'login-error',
|
|
position: 'top-center'
|
|
});
|
|
}
|
|
});
|
|
|
|
const { form: formData, enhance, tainted } = loginForm;
|
|
|
|
function firstError(errors: Record<string, unknown>) {
|
|
for (const value of Object.values(errors)) {
|
|
if (Array.isArray(value) && typeof value[0] === 'string') {
|
|
return value[0];
|
|
}
|
|
}
|
|
|
|
return 'Check the highlighted fields.';
|
|
}
|
|
</script>
|
|
|
|
<div class={cn('flex flex-col gap-6', className)} bind:this={ref} {...restProps}>
|
|
<form action="?/login" method="POST" use:enhance>
|
|
<Field.Group>
|
|
<div class="flex flex-col items-center gap-2 text-center">
|
|
<div class="flex flex-col items-center gap-2 font-medium">
|
|
<div
|
|
class="flex size-9 items-center justify-center rounded-md bg-primary text-primary-foreground"
|
|
>
|
|
<GalleryVerticalEndIcon class="size-6" />
|
|
</div>
|
|
<span class="sr-only">Clearity</span>
|
|
</div>
|
|
<h1 class="text-xl font-bold">Sign in to Clearity</h1>
|
|
</div>
|
|
<FormField form={loginForm} name="email">
|
|
<Field.Field>
|
|
<Control id="email-{id}">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Email</Field.Label>
|
|
<Input
|
|
{...props}
|
|
aria-invalid={$tainted?.email ? props['aria-invalid'] : undefined}
|
|
type="email"
|
|
autocomplete="email"
|
|
placeholder="admin@example.com"
|
|
bind:value={$formData.email}
|
|
/>
|
|
{/snippet}
|
|
</Control>
|
|
{#if $tainted?.email}
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
{/if}
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={loginForm} name="password">
|
|
<Field.Field>
|
|
<Control id="password-{id}">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Password</Field.Label>
|
|
<Input
|
|
{...props}
|
|
aria-invalid={$tainted?.password ? props['aria-invalid'] : undefined}
|
|
type="password"
|
|
autocomplete="current-password"
|
|
bind:value={$formData.password}
|
|
/>
|
|
{/snippet}
|
|
</Control>
|
|
{#if $tainted?.password}
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
{/if}
|
|
</Field.Field>
|
|
</FormField>
|
|
<Field.Field>
|
|
<Button type="submit" class="w-full">Sign in</Button>
|
|
</Field.Field>
|
|
</Field.Group>
|
|
</form>
|
|
</div>
|