feat: add dashboard shell and shared components

2026-06-05 23:25:30 +01:00
parent 7bb19e1be3
commit 930e83344c
7 changed files with 473 additions and 0 deletions
@@ -0,0 +1,116 @@
+<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.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 } = 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 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="bg-primary text-primary-foreground flex size-9 items-center justify-center rounded-md">
+						<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>
+			<FormField form={loginForm} name="email">
+				<Field.Field>
+					<Control id="email-{id}">
+						{#snippet children({ props })}
+							<Field.Label>Email</Field.Label>
+							<Input
+								{...props}
+								type="email"
+								autocomplete="email"
+								placeholder="admin@example.com"
+								bind:value={$formData.email}
+							/>
+						{/snippet}
+					</Control>
+					<Field.Error><FieldErrors /></Field.Error>
+				</Field.Field>
+			</FormField>
+			<FormField form={loginForm} name="password">
+				<Field.Field>
+					<Control id="password-{id}">
+						{#snippet children({ props })}
+							<Field.Label>Password</Field.Label>
+							<Input
+								{...props}
+								type="password"
+								autocomplete="current-password"
+								bind:value={$formData.password}
+							/>
+						{/snippet}
+					</Control>
+					<Field.Error><FieldErrors /></Field.Error>
+				</Field.Field>
+				<Field.Description>
+					New users are created manually by an administrator; public registration is disabled.
+				</Field.Description>
+			</FormField>
+			<Field.Field>
+				<Button type="submit" class="w-full">Sign in</Button>
+			</Field.Field>
+		</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>