kdaniel2410/clearity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: expand first admin setup flow

Browse Source
This commit is contained in:
Daniel Kirby
2026-06-24 18:04:29 +01:00
parent 2bb985000b
commit 92f4e54cf4
3 changed files with 369 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/first-admin-form.svelte
+246 -12
View File
@@ -1,8 +1,11 @@
<script lang="ts"> <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 GalleryVerticalEndIcon from '@lucide/svelte/icons/gallery-vertical-end';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import * as Form from '$lib/components/ui/form/index.js'; import * as Form from '$lib/components/ui/form/index.js';
import * as Field from '$lib/components/ui/field/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 { superForm, type SuperValidated } from 'sveltekit-superforms';
import { zod4Client } from 'sveltekit-superforms/adapters'; import { zod4Client } from 'sveltekit-superforms/adapters';
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements';
@@ -22,12 +25,51 @@
} = $props(); } = $props();
const id = $props.id(); 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 // svelte-ignore state_referenced_locally
const firstAdminForm = superForm(initialForm, { const firstAdminForm = superForm(initialForm, {
validators: zod4Client(firstAdminSchema), validators: zod4Client(firstAdminSchema),
resetForm: false, resetForm: false,
onUpdated: ({ form }) => { onUpdated: ({ form }) => {
if (!form.valid) { if (!form.valid) {
goToFirstErrorStep(form.errors as Partial<Record<FirstAdminField, unknown>>);
toast.error(form.message ?? firstFormError(form.errors), { toast.error(form.message ?? firstFormError(form.errors), {
id: 'first-admin-error', id: 'first-admin-error',
position: 'top-center' position: 'top-center'
@@ -57,19 +99,36 @@
</div> </div>
<span class="sr-only">Clearity</span> <span class="sr-only">Clearity</span>
</div> </div>
<h1 class="text-xl font-bold">Create the first admin</h1> <h1 class="text-xl font-bold">First Time Setup</h1>
<Field.Description> <Field.Description class="text-center">Setup your initial admin account, organisation and bank details</Field.Description>
Set up the initial Better Auth admin account for this workspace.
</Field.Description>
</div> </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.Field form={firstAdminForm} name="name">
<Form.Control id="name-{id}"> <Form.Control id={`name-${id}`}>
{#snippet children({ props })} {#snippet children({ props })}
<Form.Label>Name</Form.Label> <Form.Label>Name</Form.Label>
<Input <Input
{...props} {...props}
autocomplete="name" autocomplete="name"
placeholder="Administrator" placeholder="Jane Smith"
bind:value={$formData.name} bind:value={$formData.name}
/> />
{/snippet} {/snippet}
@@ -77,7 +136,7 @@
<Form.FieldErrors /> <Form.FieldErrors />
</Form.Field> </Form.Field>
<Form.Field form={firstAdminForm} name="email"> <Form.Field form={firstAdminForm} name="email">
<Form.Control id="email-{id}"> <Form.Control id={`email-${id}`}>
{#snippet children({ props })} {#snippet children({ props })}
<Form.Label>Email</Form.Label> <Form.Label>Email</Form.Label>
<Input <Input
@@ -92,7 +151,7 @@
<Form.FieldErrors /> <Form.FieldErrors />
</Form.Field> </Form.Field>
<Form.Field form={firstAdminForm} name="password"> <Form.Field form={firstAdminForm} name="password">
<Form.Control id="password-{id}"> <Form.Control id={`password-${id}`}>
{#snippet children({ props })} {#snippet children({ props })}
<Form.Label>Password</Form.Label> <Form.Label>Password</Form.Label>
<Input <Input
@@ -105,10 +164,185 @@
</Form.Control> </Form.Control>
<Form.FieldErrors /> <Form.FieldErrors />
</Form.Field> </Form.Field>
<Button type="submit" class="w-full">Create admin</Button> <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>
</Field.Group> </Field.Group>
</form> </form>
<Field.Description class="px-6 text-center">
This setup screen disappears once the first user exists.
</Field.Description>
</div> </div>
src/lib/schemas/auth.ts
+24 -3
View File
@@ -1,15 +1,36 @@
import { z } from 'zod'; import { z } from 'zod';
import { optionalText, requiredText } from './shared.schema';
export const loginSchema = z.object({ export const loginSchema = z.object({
email: z.email('Enter a valid email address.'), email: z.email('Enter a valid email address.'),
password: z.string().min(1, 'Enter your password.') password: z.string().min(1, 'Enter your password.')
}); });
export const firstAdminSchema = z.object({ export const firstAdminSchema = z
.object({
name: z.string().trim().min(1, 'Enter your name.'), name: z.string().trim().min(1, 'Enter your name.'),
email: z.email('Enter a valid email address.').transform((value) => value.toLowerCase()), email: z.email('Enter a valid email address.').transform((value) => value.toLowerCase()),
password: z.string().min(8, 'Password must be at least 8 characters.') 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 LoginSchema = typeof loginSchema;
export type FirstAdminSchema = typeof firstAdminSchema; export type FirstAdminSchema = typeof firstAdminSchema;
src/routes/login/+page.server.ts
+58 -3
View File
@@ -1,11 +1,11 @@
import { redirect } from '@sveltejs/kit'; import { redirect } from '@sveltejs/kit';
import { APIError } from 'better-auth/api'; 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 { message, superValidate } from 'sveltekit-superforms/server';
import { zod4 } from 'sveltekit-superforms/adapters'; import { zod4 } from 'sveltekit-superforms/adapters';
import { auth } from '$lib/server/auth'; import { auth } from '$lib/server/auth';
import { db } from '$lib/server/db'; 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 { firstAdminSchema, loginSchema } from '$lib/schemas/auth';
import type { Actions, PageServerLoad } from './$types'; import type { Actions, PageServerLoad } from './$types';
@@ -41,7 +41,22 @@ export const load: PageServerLoad = async ({ locals, url }) => {
{ {
name: '', name: '',
email: url.searchParams.get('email') ?? '', 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), zod4(firstAdminSchema),
{ id: 'first-admin', errors: false } { id: 'first-admin', errors: false }
@@ -64,6 +79,8 @@ export const actions: Actions = {
} }
try { try {
const organizationId = crypto.randomUUID();
await auth.api.createUser({ await auth.api.createUser({
body: { body: {
name: form.data.name, 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({ await auth.api.signInEmail({
body: { body: {
email: form.data.email, email: form.data.email,