refactor: replace admin bootstrap script with first-run setup

2026-06-06 00:02:43 +01:00
parent b435a92da8
commit 5be93c65ea
7 changed files with 210 additions and 114 deletions
@@ -0,0 +1,131 @@
+<script lang="ts">
+	import GalleryVerticalEndIcon from '@lucide/svelte/icons/gallery-vertical-end';
+	import { toast } from 'svelte-sonner';
+	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 { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { firstAdminSchema, type FirstAdminSchema } from '$lib/schemas/auth';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form: initialForm,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		form: SuperValidated<FirstAdminSchema['_output'], string>;
+	} = $props();
+
+	const id = $props.id();
+	// svelte-ignore state_referenced_locally
+	const firstAdminForm = superForm(initialForm, {
+		validators: zod4Client(firstAdminSchema),
+		resetForm: false,
+		onUpdated: ({ form }) => {
+			if (!form.valid) {
+				toast.error(form.message ?? firstError(form.errors), {
+					id: 'first-admin-error',
+					position: 'top-center'
+				});
+			}
+		},
+		onError: ({ result }) => {
+			toast.error(result.error.message, {
+				id: 'first-admin-error',
+				position: 'top-center'
+			});
+		}
+	});
+
+	const { form: formData, enhance } = firstAdminForm;
+
+	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" action="?/bootstrap" 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">Create the first admin</h1>
+				<Field.Description>
+					Set up the initial Better Auth admin account for this workspace.
+				</Field.Description>
+			</div>
+			<FormField form={firstAdminForm} name="name">
+				<Field.Field>
+					<Control id="name-{id}">
+						{#snippet children({ props })}
+							<Field.Label>Name</Field.Label>
+							<Input
+								{...props}
+								autocomplete="name"
+								placeholder="Administrator"
+								bind:value={$formData.name}
+							/>
+						{/snippet}
+					</Control>
+					<Field.Error><FieldErrors /></Field.Error>
+				</Field.Field>
+			</FormField>
+			<FormField form={firstAdminForm} 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={firstAdminForm} name="password">
+				<Field.Field>
+					<Control id="password-{id}">
+						{#snippet children({ props })}
+							<Field.Label>Password</Field.Label>
+							<Input
+								{...props}
+								type="password"
+								autocomplete="new-password"
+								bind:value={$formData.password}
+							/>
+						{/snippet}
+					</Control>
+					<Field.Error><FieldErrors /></Field.Error>
+				</Field.Field>
+			</FormField>
+			<Field.Field>
+				<Button type="submit" class="w-full">Create admin</Button>
+			</Field.Field>
+		</Field.Group>
+	</form>
+	<Field.Description class="px-6 text-center">
+		This setup screen disappears once the first user exists.
+	</Field.Description>
+</div>
@@ -5,4 +5,11 @@ export const loginSchema = z.object({
 	password: z.string().min(1, 'Enter your password.')
 });

+export const firstAdminSchema = z.object({
+	name: z.string().trim().min(1, 'Enter your name.'),
+	email: z.email('Enter a valid email address.').transform((value) => value.toLowerCase()),
+	password: z.string().min(8, 'Password must be at least 8 characters.')
+});
+
 export type LoginSchema = typeof loginSchema;
+export type FirstAdminSchema = typeof firstAdminSchema;