feat: add billing and organization workflows

src/lib/components/login-form.svelte

@@ -1,7 +1,7 @@
 <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 { 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';
@@ -9,7 +9,6 @@
 	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 {
@@ -28,7 +27,7 @@
 		resetForm: false,
 		onUpdated: ({ form }) => {
 			if (!form.valid) {
-				toast.error(form.message ?? firstFormError(form.errors), {
+				toast.error(form.message ?? firstError(form.errors), {
 					id: 'login-error',
 					position: 'top-center'
 				});
@@ -42,7 +41,17 @@
 		}
 	});
 
-	const { form: formData, enhance } = loginForm;
+	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}>
@@ -58,46 +67,49 @@
 					<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>
+			<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>
-	<Field.Description class="px-6 text-center">
-		Business and sport centre management for clients, bookings, rooms, services, and invoices.
-	</Field.Description>
 </div>