feat: expand first admin setup flow

src/lib/components/first-admin-form.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+	import ArrowLeftIcon from '@lucide/svelte/icons/arrow-left';
+	import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
 	import GalleryVerticalEndIcon from '@lucide/svelte/icons/gallery-vertical-end';
 	import { toast } from 'svelte-sonner';
 	import * as Form from '$lib/components/ui/form/index.js';
 	import * as Field from '$lib/components/ui/field/index.js';
+	import * as Stepper from '$lib/components/ui/stepper/index.js';
 	import { superForm, type SuperValidated } from 'sveltekit-superforms';
 	import { zod4Client } from 'sveltekit-superforms/adapters';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -22,12 +25,51 @@
 	} = $props();
 
 	const id = $props.id();
+	let step = $state(0);
+
+	const steps = [
+		{ title: 'Admin', description: 'Account details' },
+		{ title: 'Organization', description: 'Address details' },
+		{ title: 'Bank', description: 'Payment details' }
+	] as const;
+
+	type FirstAdminField = keyof FirstAdminSchema['_output'];
+
+	const stepFields = [
+		['name', 'email', 'password', 'confirmPassword'],
+		[
+			'organizationName',
+			'addressLine1',
+			'addressLine2',
+			'addressLine3',
+			'city',
+			'region',
+			'postcode',
+			'country'
+		],
+		['bankName', 'bankAccountName', 'bankAccountNumber', 'bankSortCode', 'bankIban', 'bankSwift']
+	] satisfies FirstAdminField[][];
+
+	function goToFirstErrorStep(errors: Partial<Record<FirstAdminField, unknown>>) {
+		const errorStep = stepFields.findIndex((fields) =>
+			fields.some((field) => {
+				const error = errors[field];
+				return Array.isArray(error) ? error.length > 0 : Boolean(error);
+			})
+		);
+
+		if (errorStep >= 0) {
+			step = errorStep;
+		}
+	}
+
 	// svelte-ignore state_referenced_locally
 	const firstAdminForm = superForm(initialForm, {
 		validators: zod4Client(firstAdminSchema),
 		resetForm: false,
 		onUpdated: ({ form }) => {
 			if (!form.valid) {
+				goToFirstErrorStep(form.errors as Partial<Record<FirstAdminField, unknown>>);
 				toast.error(form.message ?? firstFormError(form.errors), {
 					id: 'first-admin-error',
 					position: 'top-center'
@@ -57,58 +99,250 @@
 					</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>
+				<h1 class="text-xl font-bold">First Time Setup</h1>
+				<Field.Description class="text-center">Setup your initial admin account, organisation and bank details</Field.Description>
+			</div>
+
+			<Stepper.Root bind:value={step}>
+				{#each steps as currentStep, index (currentStep.title)}
+					<Stepper.Item step={index}>
+						<div class="flex flex-col items-center gap-2 text-center">
+							<Stepper.Indicator step={index} />
+							<div class="grid gap-1">
+								<Stepper.Title>{currentStep.title}</Stepper.Title>
+								<Stepper.Description>{currentStep.description}</Stepper.Description>
+							</div>
+						</div>
+						{#if index < steps.length - 1}
+							<Stepper.Separator />
+						{/if}
+					</Stepper.Item>
+				{/each}
+			</Stepper.Root>
+
+			<div class={['grid gap-4', step !== 0 && 'hidden']}>
+				<Form.Field form={firstAdminForm} name="name">
+					<Form.Control id={`name-${id}`}>
+						{#snippet children({ props })}
+							<Form.Label>Name</Form.Label>
+							<Input
+								{...props}
+								autocomplete="name"
+								placeholder="Jane Smith"
+								bind:value={$formData.name}
+							/>
+						{/snippet}
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.Field>
+				<Form.Field form={firstAdminForm} 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={firstAdminForm} name="password">
+					<Form.Control id={`password-${id}`}>
+						{#snippet children({ props })}
+							<Form.Label>Password</Form.Label>
+							<Input
+								{...props}
+								type="password"
+								autocomplete="new-password"
+								bind:value={$formData.password}
+							/>
+						{/snippet}
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.Field>
+				<Form.Field form={firstAdminForm} name="confirmPassword">
+					<Form.Control id={`confirm-password-${id}`}>
+						{#snippet children({ props })}
+							<Form.Label>Confirm password</Form.Label>
+							<Input
+								{...props}
+								type="password"
+								autocomplete="new-password"
+								bind:value={$formData.confirmPassword}
+							/>
+						{/snippet}
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.Field>
+			</div>
+
+			<div class={['grid gap-4', step !== 1 && 'hidden']}>
+				<Form.Field form={firstAdminForm} name="organizationName">
+					<Form.Control id={`organization-name-${id}`}>
+						{#snippet children({ props })}
+							<Form.Label>Organization</Form.Label>
+							<Input
+								{...props}
+								autocomplete="organization"
+								placeholder="Steel City Stadium"
+								bind:value={$formData.organizationName}
+							/>
+						{/snippet}
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.Field>
+				<Form.Field form={firstAdminForm} name="addressLine1">
+					<Form.Control id={`address-line-1-${id}`}>
+						{#snippet children({ props })}
+							<Form.Label>Address line 1</Form.Label>
+							<Input {...props} type="text" bind:value={$formData.addressLine1} />
+						{/snippet}
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.Field>
+				<Form.Field form={firstAdminForm} name="addressLine2">
+					<Form.Control id={`address-line-2-${id}`}>
+						{#snippet children({ props })}
+							<Form.Label>Address line 2</Form.Label>
+							<Input {...props} type="text" bind:value={$formData.addressLine2} />
+						{/snippet}
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.Field>
+				<Form.Field form={firstAdminForm} name="addressLine3">
+					<Form.Control id={`address-line-3-${id}`}>
+						{#snippet children({ props })}
+							<Form.Label>Address line 3</Form.Label>
+							<Input {...props} type="text" bind:value={$formData.addressLine3} />
+						{/snippet}
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.Field>
+				<div class="grid gap-4 sm:grid-cols-2">
+					<Form.Field form={firstAdminForm} name="city">
+						<Form.Control id={`city-${id}`}>
+							{#snippet children({ props })}
+								<Form.Label>City</Form.Label>
+								<Input {...props} type="text" bind:value={$formData.city} />
+							{/snippet}
+						</Form.Control>
+						<Form.FieldErrors />
+					</Form.Field>
+					<Form.Field form={firstAdminForm} name="region">
+						<Form.Control id={`region-${id}`}>
+							{#snippet children({ props })}
+								<Form.Label>Region</Form.Label>
+								<Input {...props} type="text" bind:value={$formData.region} />
+							{/snippet}
+						</Form.Control>
+						<Form.FieldErrors />
+					</Form.Field>
+				</div>
+				<div class="grid gap-4 sm:grid-cols-2">
+					<Form.Field form={firstAdminForm} name="postcode">
+						<Form.Control id={`postcode-${id}`}>
+							{#snippet children({ props })}
+								<Form.Label>Postcode</Form.Label>
+								<Input {...props} type="text" bind:value={$formData.postcode} />
+							{/snippet}
+						</Form.Control>
+						<Form.FieldErrors />
+					</Form.Field>
+					<Form.Field form={firstAdminForm} name="country">
+						<Form.Control id={`country-${id}`}>
+							{#snippet children({ props })}
+								<Form.Label>Country</Form.Label>
+								<Input {...props} type="text" bind:value={$formData.country} />
+							{/snippet}
+						</Form.Control>
+						<Form.FieldErrors />
+					</Form.Field>
+				</div>
+			</div>
+
+			<div class={['grid gap-4', step !== 2 && 'hidden']}>
+				<Form.Field form={firstAdminForm} name="bankName">
+					<Form.Control id={`bank-name-${id}`}>
+						{#snippet children({ props })}
+							<Form.Label>Bank name</Form.Label>
+							<Input {...props} type="text" bind:value={$formData.bankName} />
+						{/snippet}
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.Field>
+				<Form.Field form={firstAdminForm} name="bankAccountName">
+					<Form.Control id={`bank-account-name-${id}`}>
+						{#snippet children({ props })}
+							<Form.Label>Account name</Form.Label>
+							<Input {...props} type="text" bind:value={$formData.bankAccountName} />
+						{/snippet}
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.Field>
+				<div class="grid gap-4 sm:grid-cols-2">
+					<Form.Field form={firstAdminForm} name="bankAccountNumber">
+						<Form.Control id={`bank-account-number-${id}`}>
+							{#snippet children({ props })}
+								<Form.Label>Account number</Form.Label>
+								<Input {...props} type="text" bind:value={$formData.bankAccountNumber} />
+							{/snippet}
+						</Form.Control>
+						<Form.FieldErrors />
+					</Form.Field>
+					<Form.Field form={firstAdminForm} name="bankSortCode">
+						<Form.Control id={`bank-sort-code-${id}`}>
+							{#snippet children({ props })}
+								<Form.Label>Sort code</Form.Label>
+								<Input {...props} type="text" bind:value={$formData.bankSortCode} />
+							{/snippet}
+						</Form.Control>
+						<Form.FieldErrors />
+					</Form.Field>
+				</div>
+				<div class="grid gap-4 sm:grid-cols-2">
+					<Form.Field form={firstAdminForm} name="bankIban">
+						<Form.Control id={`bank-iban-${id}`}>
+							{#snippet children({ props })}
+								<Form.Label>IBAN</Form.Label>
+								<Input {...props} type="text" bind:value={$formData.bankIban} />
+							{/snippet}
+						</Form.Control>
+						<Form.FieldErrors />
+					</Form.Field>
+					<Form.Field form={firstAdminForm} name="bankSwift">
+						<Form.Control id={`bank-swift-${id}`}>
+							{#snippet children({ props })}
+								<Form.Label>SWIFT/BIC</Form.Label>
+								<Input {...props} type="text" bind:value={$formData.bankSwift} />
+							{/snippet}
+						</Form.Control>
+						<Form.FieldErrors />
+					</Form.Field>
+				</div>
+			</div>
+
+			<div class="grid gap-3 sm:grid-cols-2">
+				{#if step > 0}
+					<Button type="button" variant="outline" onclick={() => (step -= 1)}>
+						<ArrowLeftIcon data-icon="inline-start" />Back
+					</Button>
+				{/if}
+				{#if step < steps.length - 1}
+					<Button
+						type="button"
+						class={step === 0 ? 'sm:col-start-2' : ''}
+						onclick={() => (step += 1)}
+					>
+						Next step<ArrowRightIcon data-icon="inline-end" />
+					</Button>
+				{:else}
+					<Button type="submit">Create admin</Button>
+				{/if}
 			</div>
-			<Form.Field form={firstAdminForm} name="name">
-				<Form.Control id="name-{id}">
-					{#snippet children({ props })}
-						<Form.Label>Name</Form.Label>
-						<Input
-							{...props}
-							autocomplete="name"
-							placeholder="Administrator"
-							bind:value={$formData.name}
-						/>
-					{/snippet}
-				</Form.Control>
-				<Form.FieldErrors />
-			</Form.Field>
-			<Form.Field form={firstAdminForm} 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={firstAdminForm} name="password">
-				<Form.Control id="password-{id}">
-					{#snippet children({ props })}
-						<Form.Label>Password</Form.Label>
-						<Input
-							{...props}
-							type="password"
-							autocomplete="new-password"
-							bind:value={$formData.password}
-						/>
-					{/snippet}
-				</Form.Control>
-				<Form.FieldErrors />
-			</Form.Field>
-			<Button type="submit" class="w-full">Create admin</Button>
 		</Field.Group>
 	</form>
-	<Field.Description class="px-6 text-center">
-		This setup screen disappears once the first user exists.
-	</Field.Description>
 </div>

src/lib/schemas/auth.ts

@@ -1,15 +1,36 @@
 import { z } from 'zod';
+import { optionalText, requiredText } from './shared.schema';
 
 export const loginSchema = z.object({
 	email: z.email('Enter a valid email address.'),
 	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 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.'),
+		confirmPassword: z.string().min(1, 'Confirm your password.'),
+		organizationName: requiredText('Organization name'),
+		addressLine1: requiredText('Address line 1'),
+		addressLine2: optionalText(160),
+		addressLine3: optionalText(160),
+		city: optionalText(100),
+		region: optionalText(100),
+		postcode: optionalText(24),
+		country: requiredText('Country', 80).default('United Kingdom'),
+		bankName: optionalText(120),
+		bankAccountName: optionalText(120),
+		bankAccountNumber: optionalText(40),
+		bankSortCode: optionalText(40),
+		bankIban: optionalText(64),
+		bankSwift: optionalText(32)
+	})
+	.refine((data) => data.password === data.confirmPassword, {
+		message: 'Passwords must match.',
+		path: ['confirmPassword']
+	});
 
 export type LoginSchema = typeof loginSchema;
 export type FirstAdminSchema = typeof firstAdminSchema;

src/routes/login/+page.server.ts

@@ -1,11 +1,11 @@
 import { redirect } from '@sveltejs/kit';
 import { APIError } from 'better-auth/api';
-import { count } from 'drizzle-orm';
+import { count, eq } from 'drizzle-orm';
 import { message, superValidate } from 'sveltekit-superforms/server';
 import { zod4 } from 'sveltekit-superforms/adapters';
 import { auth } from '$lib/server/auth';
 import { db } from '$lib/server/db';
-import { user } from '$lib/server/db/schema';
+import { organizationMemberships, organizations, user } from '$lib/server/db/schema';
 import { firstAdminSchema, loginSchema } from '$lib/schemas/auth';
 import type { Actions, PageServerLoad } from './$types';
 
@@ -41,7 +41,22 @@ export const load: PageServerLoad = async ({ locals, url }) => {
 			{
 				name: '',
 				email: url.searchParams.get('email') ?? '',
-				password: ''
+				password: '',
+				confirmPassword: '',
+				organizationName: '',
+				addressLine1: '',
+				addressLine2: '',
+				addressLine3: '',
+				city: '',
+				region: '',
+				postcode: '',
+				country: 'United Kingdom',
+				bankName: '',
+				bankAccountName: '',
+				bankAccountNumber: '',
+				bankSortCode: '',
+				bankIban: '',
+				bankSwift: ''
 			},
 			zod4(firstAdminSchema),
 			{ id: 'first-admin', errors: false }
@@ -64,6 +79,8 @@ export const actions: Actions = {
 		}
 
 		try {
+			const organizationId = crypto.randomUUID();
+
 			await auth.api.createUser({
 				body: {
 					name: form.data.name,
@@ -73,6 +90,44 @@ export const actions: Actions = {
 				}
 			});
 
+			const [createdUser] = await db
+				.select({ id: user.id })
+				.from(user)
+				.where(eq(user.email, form.data.email))
+				.limit(1);
+
+			if (!createdUser) {
+				return message(form, 'Unable to create the first admin account.', { status: 400 });
+			}
+
+			await db.insert(organizations).values({
+				id: organizationId,
+				name: form.data.organizationName,
+				addressLine1: form.data.addressLine1,
+				addressLine2: form.data.addressLine2,
+				addressLine3: form.data.addressLine3,
+				city: form.data.city,
+				region: form.data.region,
+				postcode: form.data.postcode,
+				country: form.data.country,
+				bankName: form.data.bankName,
+				bankAccountName: form.data.bankAccountName,
+				bankAccountNumber: form.data.bankAccountNumber,
+				bankSortCode: form.data.bankSortCode,
+				bankIban: form.data.bankIban,
+				bankSwift: form.data.bankSwift,
+				createdAt: new Date(),
+				updatedAt: new Date()
+			});
+
+			await db.insert(organizationMemberships).values({
+				organizationId,
+				userId: createdUser.id,
+				role: 'admin',
+				createdAt: new Date(),
+				updatedAt: new Date()
+			});
+
 			await auth.api.signInEmail({
 				body: {
 					email: form.data.email,