frontend/src/lib/onboarding/HouseholdSetupForm.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+
+	type FormResult = {
+		errors?: Record<string, string>;
+		name?: string;
+	} | null;
+
+	let { form = null }: { form?: FormResult } = $props();
+
+	let name = $state('');
+	let touched = $state(false);
+	let submitAttempted = $state(false);
+	let formError = $state('');
+
+	const isDisabled = $derived(name.trim().length === 0);
+	const error = $derived(
+		(touched || submitAttempted) && name.trim() === '' ? 'Haushaltsname ist erforderlich' : ''
+	);
+
+	$effect(() => {
+		if (form?.errors) {
+			formError = form.errors.form ?? '';
+			name = form?.name ?? '';
+		}
+	});
+
+	function handleSubmit(event: SubmitEvent) {
+		submitAttempted = true;
+		if (name.trim() === '') {
+			event.preventDefault();
+		}
+	}
+
+	function handleInput() {
+		touched = true;
+	}
+</script>
+
+<form method="POST" novalidate use:enhance onsubmit={handleSubmit}>
+	<h1 class="mb-[8px] font-['var(--font-display)'] text-[24px] font-semibold">Haushalt benennen</h1>
+	<p class="mb-[24px] text-[14px] text-[var(--color-text-muted)]">
+		Gib deinem Haushalt einen Namen, damit du ihn leicht wiederfindest.
+	</p>
+
+	<div class="mb-[16px]">
+		<label for="name" class="mb-[6px] block text-[14px] font-medium">Haushaltsname</label>
+		<input
+			type="text"
+			id="name"
+			name="name"
+			placeholder="z.B. Familie Müller"
+			autocomplete="organization"
+			bind:value={name}
+			oninput={handleInput}
+			class="w-full rounded-[var(--radius-md)] border bg-[var(--color-page)] px-[12px] py-[10px] text-[14px] outline-none focus:ring-2 focus:ring-[var(--green-dark)] {error
+				? 'border-[var(--color-error)]'
+				: 'border-[var(--color-border)]'}"
+		/>
+		{#if error}
+			<p class="mt-1 text-[12px] text-[var(--color-error)]">{error}</p>
+		{/if}
+	</div>
+
+	{#if formError}
+		<p
+			class="mb-[16px] rounded-[var(--radius-md)] bg-[color-mix(in_srgb,var(--color-error),transparent_90%)] px-[12px] py-[10px] text-[12px] text-[var(--color-error)]"
+		>
+			{formError}
+		</p>
+	{/if}
+
+	<button
+		type="submit"
+		disabled={isDisabled}
+		class="w-full cursor-pointer rounded-[var(--radius-md)] bg-[var(--green-dark)] px-[24px] py-[12px] text-[14px] font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
+	>
+		Weiter → Vorräte einrichten
+	</button>
+</form>

frontend/src/lib/onboarding/HouseholdSetupForm.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { userEvent } from '@testing-library/user-event';
+import HouseholdSetupForm from './HouseholdSetupForm.svelte';
+
+vi.mock('$app/forms', () => ({
+	enhance: () => ({ destroy: () => {} })
+}));
+
+describe('HouseholdSetupForm', () => {
+	it('renders household name input with label', () => {
+		render(HouseholdSetupForm);
+		expect(screen.getByLabelText('Haushaltsname')).toBeInTheDocument();
+	});
+
+	it('renders heading', () => {
+		render(HouseholdSetupForm);
+		expect(screen.getByText('Haushalt benennen')).toBeInTheDocument();
+	});
+
+	it('renders Continue button', () => {
+		render(HouseholdSetupForm);
+		expect(screen.getByRole('button', { name: /weiter/i })).toBeInTheDocument();
+	});
+
+	it('Continue button is disabled when name is empty', () => {
+		render(HouseholdSetupForm);
+		const btn = screen.getByRole('button', { name: /weiter/i });
+		expect(btn).toBeDisabled();
+	});
+
+	it('Continue button is enabled when name has text', async () => {
+		const user = userEvent.setup();
+		render(HouseholdSetupForm);
+
+		await user.type(screen.getByLabelText('Haushaltsname'), 'Familie Müller');
+		expect(screen.getByRole('button', { name: /weiter/i })).not.toBeDisabled();
+	});
+
+	it('shows validation error when submitting with empty name', async () => {
+		const user = userEvent.setup();
+		render(HouseholdSetupForm);
+
+		// override disabled to allow submit attempt by typing then clearing
+		const input = screen.getByLabelText('Haushaltsname');
+		await user.type(input, 'a');
+		await user.clear(input);
+		await user.click(screen.getByRole('button', { name: /weiter/i }));
+
+		expect(screen.getByText('Haushaltsname ist erforderlich')).toBeInTheDocument();
+	});
+
+	it('shows server-side error from form prop', () => {
+		render(HouseholdSetupForm, {
+			props: {
+				form: {
+					errors: { form: 'Haushalt konnte nicht erstellt werden.' },
+					name: 'Smith family'
+				}
+			}
+		});
+		expect(screen.getByText('Haushalt konnte nicht erstellt werden.')).toBeInTheDocument();
+	});
+
+	it('repopulates name from form prop on server error', () => {
+		render(HouseholdSetupForm, {
+			props: {
+				form: {
+					errors: { form: 'Fehler' },
+					name: 'Familie Müller'
+				}
+			}
+		});
+		expect(screen.getByLabelText('Haushaltsname')).toHaveValue('Familie Müller');
+	});
+
+	it('input has correct placeholder', () => {
+		render(HouseholdSetupForm);
+		expect(screen.getByPlaceholderText('z.B. Familie Müller')).toBeInTheDocument();
+	});
+});