104 lines
3.3 KiB
Svelte
104 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { toast } from 'svelte-sonner';
|
|
import GalleryVerticalEndIcon from '@lucide/svelte/icons/gallery-vertical-end';
|
|
import * as Form from '$lib/components/ui/form/index.js';
|
|
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.js';
|
|
import { firstFormError } from '$lib/form-feedback';
|
|
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 ?? firstFormError(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 } = loginForm;
|
|
</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>
|
|
<Field.Description>
|
|
Use the administrator account created for this workspace.
|
|
</Field.Description>
|
|
</div>
|
|
<Form.Field form={loginForm} name="email">
|
|
<Form.Control id="email-{id}">
|
|
{#snippet children({ props })}
|
|
<Form.Label>Email</Form.Label>
|
|
<Input
|
|
{...props}
|
|
type="email"
|
|
autocomplete="email"
|
|
placeholder="admin@example.com"
|
|
bind:value={$formData.email}
|
|
/>
|
|
{/snippet}
|
|
</Form.Control>
|
|
<Form.FieldErrors />
|
|
</Form.Field>
|
|
<Form.Field form={loginForm} name="password">
|
|
<Form.Control id="password-{id}">
|
|
{#snippet children({ props })}
|
|
<Form.Label>Password</Form.Label>
|
|
<Input
|
|
{...props}
|
|
type="password"
|
|
autocomplete="current-password"
|
|
bind:value={$formData.password}
|
|
/>
|
|
{/snippet}
|
|
</Form.Control>
|
|
<Form.FieldErrors />
|
|
<Field.Description>
|
|
New users are created manually by an administrator; public registration is disabled.
|
|
</Field.Description>
|
|
</Form.Field>
|
|
<Button type="submit" class="w-full">Sign in</Button>
|
|
</Field.Group>
|
|
</form>
|
|
<Field.Description class="px-6 text-center">
|
|
Business and sport centre management for clients, bookings, rooms, services, and invoices.
|
|
</Field.Description>
|
|
</div>
|