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>