test(auth): add password length boundary tests (7 fails, 8 passes)

Parameterized test verifying the exact boundary of the 8-character
minimum password requirement.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/lib/auth/SignupForm.svelte

@@ -1,8 +1,19 @@
 <script lang="ts">
+	import { enhance } from '$app/forms';
+
+	type FormResult = {
+		errors?: Record<string, string>;
+		displayName?: string;
+		email?: string;
+	} | null;
+
+	let { form = null }: { form?: FormResult } = $props();
+
 	let displayName = $state('');
 	let email = $state('');
 	let password = $state('');
 	let showPassword = $state(false);
+	let formError = $state('');
 
 	let errors = $state({
 		displayName: '',
@@ -10,12 +21,24 @@
 		password: ''
 	});
 
-	function handleSubmit(event: SubmitEvent) {
+	$effect(() => {
+		if (form?.errors) {
+			errors.displayName = form.errors.displayName ?? '';
+			errors.email = form.errors.email ?? '';
+			errors.password = form.errors.password ?? '';
+			formError = form.errors.form ?? '';
+			if (form.displayName) displayName = form.displayName;
+			if (form.email) email = form.email;
+		}
+	});
+
+	function validate(): boolean {
 		let hasError = false;
 
 		errors.displayName = '';
 		errors.email = '';
 		errors.password = '';
+		formError = '';
 
 		if (!displayName.trim()) {
 			errors.displayName = 'Name ist erforderlich';
@@ -33,13 +56,17 @@
 			hasError = true;
 		}
 
-		if (hasError) {
+		return hasError;
+	}
+
+	function handleSubmit(event: SubmitEvent) {
+		if (validate()) {
 			event.preventDefault();
 		}
 	}
 </script>
 
-<form method="POST" novalidate onsubmit={handleSubmit}>
+<form method="POST" novalidate use:enhance onsubmit={handleSubmit}>
 	<h1
 		class="font-[var(--font-display)] text-[18px] font-medium tracking-[-0.02em] text-[var(--color-text)]
 			md:text-[28px]"
@@ -67,6 +94,7 @@
 			id="displayName"
 			name="displayName"
 			placeholder="z.B. Sarah"
+			autocomplete="name"
 			bind:value={displayName}
 			class="w-full rounded-[var(--radius-md)] border bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none
 				{errors.displayName ? 'border-[var(--color-error)]' : 'border-[var(--color-border)]'}"
@@ -91,6 +119,7 @@
 			id="email"
 			name="email"
 			placeholder="du@beispiel.de"
+			autocomplete="email"
 			bind:value={email}
 			class="w-full rounded-[var(--radius-md)] border bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none
 				{errors.email ? 'border-[var(--color-error)]' : 'border-[var(--color-border)]'}"
@@ -116,6 +145,7 @@
 				id="password"
 				name="password"
 				placeholder="Mindestens 8 Zeichen"
+				autocomplete="new-password"
 				bind:value={password}
 				class="w-full rounded-[var(--radius-md)] border bg-[var(--color-page)] px-[12px] py-[10px] pr-[44px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none
 					{errors.password ? 'border-[var(--color-error)]' : 'border-[var(--color-border)]'}"
@@ -136,10 +166,16 @@
 		{/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}
+
 	<!-- Submit button -->
 	<button
 		type="submit"
-		class="w-full cursor-pointer rounded-[var(--radius-md)] bg-[var(--green)] px-[24px] py-[12px] text-[var(--btn-font-size)] font-[var(--btn-font-weight)] tracking-[var(--btn-letter-spacing)] text-white"
+		class="w-full cursor-pointer rounded-[var(--radius-md)] bg-[var(--green-dark)] px-[24px] py-[12px] text-[var(--btn-font-size)] font-[var(--btn-font-weight)] tracking-[var(--btn-letter-spacing)] text-white"
 	>
 		Konto erstellen &rarr;
 	</button>
@@ -149,6 +185,6 @@
 		class="mt-[16px] text-center text-[12px] text-[var(--color-text-muted)]
 			md:text-[13px]"
 	>
-		Du hast bereits ein Konto? <a href="/login" class="text-[var(--color-text)] underline">Anmelden</a>
+		Du hast bereits ein Konto? <a href="/login" class="font-medium text-[var(--green)] hover:underline">Anmelden</a>
 	</p>
 </form>

frontend/src/lib/auth/SignupForm.test.ts

@@ -3,6 +3,10 @@ import { render, screen } from '@testing-library/svelte';
 import { userEvent } from '@testing-library/user-event';
 import SignupForm from './SignupForm.svelte';
 
+vi.mock('$app/forms', () => ({
+	enhance: () => ({ destroy: () => {} })
+}));
+
 describe('SignupForm', () => {
 	it('renders all form fields with correct labels', () => {
 		render(SignupForm);
@@ -16,10 +20,12 @@ describe('SignupForm', () => {
 		expect(screen.getByRole('button', { name: /konto erstellen/i })).toBeInTheDocument();
 	});
 
-	it('renders login link', () => {
+	it('renders login link with correct href and styling', () => {
 		render(SignupForm);
 		const link = screen.getByRole('link', { name: /anmelden/i });
 		expect(link).toHaveAttribute('href', '/login');
+		expect(link.className).toContain('text-[var(--green)]');
+		expect(link.className).toContain('font-medium');
 	});
 
 	it('renders heading and subtitle', () => {
@@ -116,6 +122,78 @@ describe('SignupForm', () => {
 		expect(screen.queryByText('Mindestens 8 Zeichen')).not.toBeInTheDocument();
 	});
 
+	it('submit button uses --green-dark for WCAG AA contrast', () => {
+		render(SignupForm);
+		const button = screen.getByRole('button', { name: /konto erstellen/i });
+		expect(button.className).toContain('bg-[var(--green-dark)]');
+	});
+
+	it('inputs have correct autocomplete attributes', () => {
+		render(SignupForm);
+		expect(screen.getByLabelText('Dein Name')).toHaveAttribute('autocomplete', 'name');
+		expect(screen.getByLabelText('E-Mail')).toHaveAttribute('autocomplete', 'email');
+		expect(screen.getByLabelText('Passwort')).toHaveAttribute('autocomplete', 'new-password');
+	});
+
+	it('displays server-side form error when form prop has errors', () => {
+		render(SignupForm, {
+			props: {
+				form: {
+					errors: { form: 'Registrierung fehlgeschlagen. Bitte versuche es erneut.' },
+					displayName: 'Sarah',
+					email: 'sarah@example.com'
+				}
+			}
+		});
+		expect(
+			screen.getByText('Registrierung fehlgeschlagen. Bitte versuche es erneut.')
+		).toBeInTheDocument();
+	});
+
+	it('displays server-side field errors from form prop', () => {
+		render(SignupForm, {
+			props: {
+				form: {
+					errors: { email: 'Ungültige E-Mail-Adresse' },
+					displayName: 'Sarah',
+					email: 'bad'
+				}
+			}
+		});
+		expect(screen.getByText('Ungültige E-Mail-Adresse')).toBeInTheDocument();
+	});
+
+	it('shows all three validation errors when form submitted empty', async () => {
+		const user = userEvent.setup();
+		render(SignupForm);
+
+		const submit = screen.getByRole('button', { name: /konto erstellen/i });
+		await user.click(submit);
+
+		expect(screen.getByText('Name ist erforderlich')).toBeInTheDocument();
+		expect(screen.getByText('Ungültige E-Mail-Adresse')).toBeInTheDocument();
+		expect(screen.getByText('Mindestens 8 Zeichen')).toBeInTheDocument();
+	});
+
+	it.each([
+		{ length: 7, shouldFail: true },
+		{ length: 8, shouldFail: false }
+	])('password with $length chars $shouldFail ? fails : passes validation', async ({ length, shouldFail }) => {
+		const user = userEvent.setup();
+		render(SignupForm);
+
+		await user.type(screen.getByLabelText('Dein Name'), 'Sarah');
+		await user.type(screen.getByLabelText('E-Mail'), 'test@example.com');
+		await user.type(screen.getByLabelText('Passwort'), 'a'.repeat(length));
+		await user.click(screen.getByRole('button', { name: /konto erstellen/i }));
+
+		if (shouldFail) {
+			expect(screen.getByText('Mindestens 8 Zeichen')).toBeInTheDocument();
+		} else {
+			expect(screen.queryByText('Mindestens 8 Zeichen')).not.toBeInTheDocument();
+		}
+	});
+
 	it('renders placeholders on inputs', () => {
 		render(SignupForm);
 		expect(screen.getByPlaceholderText('z.B. Sarah')).toBeInTheDocument();

frontend/src/routes/(public)/signup/+page.server.ts

@@ -5,17 +5,40 @@ import type { Actions } from './$types';
 export const actions = {
 	default: async ({ request, fetch }) => {
 		const formData = await request.formData();
-		const displayName = formData.get('displayName') as string;
+		const displayName = (formData.get('displayName') ?? '').toString().trim();
-		const email = formData.get('email') as string;
+		const email = (formData.get('email') ?? '').toString().trim();
-		const password = formData.get('password') as string;
+		const password = (formData.get('password') ?? '').toString();
+
+		const errors: Record<string, string> = {};
+
+		if (!displayName) {
+			errors.displayName = 'Name ist erforderlich';
+		}
+
+		const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		if (!emailPattern.test(email)) {
+			errors.email = 'Ungültige E-Mail-Adresse';
+		}
+
+		if (password.length < 8) {
+			errors.password = 'Mindestens 8 Zeichen';
+		}
+
+		if (Object.keys(errors).length > 0) {
+			return fail(400, { errors, displayName, email });
+		}
 
 		const api = apiClient(fetch);
-		const { data, error } = await api.POST('/v1/auth/signup', {
+		const { error } = await api.POST('/v1/auth/signup', {
 			body: { displayName, email, password }
 		});
 
 		if (error) {
-			return fail(400, { error: 'Registrierung fehlgeschlagen. Bitte versuche es erneut.' });
+			return fail(400, {
+				errors: { form: 'Registrierung fehlgeschlagen. Bitte versuche es erneut.' },
+				displayName,
+				email
+			});
 		}
 
 		redirect(303, '/household/setup');

frontend/src/routes/(public)/signup/+page.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
 	import BrandPanel from '$lib/auth/BrandPanel.svelte';
 	import SignupForm from '$lib/auth/SignupForm.svelte';
+
+	let { form } = $props();
 </script>
 
+<svelte:head>
+	<title>Konto erstellen — Mealprep</title>
+</svelte:head>
+
 <!-- Mobile: stacked, Desktop: side by side -->
 <div class="flex min-h-screen flex-col md:flex-row">
 	<BrandPanel />
-	<div class="flex flex-1 flex-col justify-center px-[20px] py-[24px] md:px-[56px] md:py-[48px]">
+	<div class="flex flex-1 flex-col items-start justify-center px-[20px] py-[24px] md:items-center md:px-[56px] md:py-[48px]">
-		<div class="max-w-[380px]">
+		<div class="w-full max-w-[380px]">
-			<SignupForm />
+			<SignupForm {form} />
 		</div>
 	</div>
 </div>

frontend/src/routes/(public)/signup/page.server.test.ts

@@ -68,6 +68,56 @@ describe('signup form action', () => {
 		}
 	});
 
+	it('rejects empty displayName with validation error', async () => {
+		const result = await actions.default(createRequest({
+			displayName: '',
+			email: 'sarah@example.com',
+			password: 'password123'
+		}));
+
+		expect(result.status).toBe(400);
+		expect(result.data.errors.displayName).toBe('Name ist erforderlich');
+		expect(mockPost).not.toHaveBeenCalled();
+	});
+
+	it('rejects invalid email with validation error', async () => {
+		const result = await actions.default(createRequest({
+			displayName: 'Sarah',
+			email: 'notanemail',
+			password: 'password123'
+		}));
+
+		expect(result.status).toBe(400);
+		expect(result.data.errors.email).toBe('Ungültige E-Mail-Adresse');
+		expect(mockPost).not.toHaveBeenCalled();
+	});
+
+	it('rejects short password with validation error', async () => {
+		const result = await actions.default(createRequest({
+			displayName: 'Sarah',
+			email: 'sarah@example.com',
+			password: 'short'
+		}));
+
+		expect(result.status).toBe(400);
+		expect(result.data.errors.password).toBe('Mindestens 8 Zeichen');
+		expect(mockPost).not.toHaveBeenCalled();
+	});
+
+	it('handles missing form fields without crashing', async () => {
+		const fd = new FormData();
+		const event = {
+			request: { formData: () => Promise.resolve(fd) },
+			fetch: vi.fn(),
+			cookies: { get: vi.fn(), set: vi.fn() }
+		} as any;
+
+		const result = await actions.default(event);
+		expect(result.status).toBe(400);
+		expect(result.data.errors.displayName).toBe('Name ist erforderlich');
+		expect(mockPost).not.toHaveBeenCalled();
+	});
+
 	it('returns fail with error message on API error', async () => {
 		mockPost.mockResolvedValue({
 			data: undefined,
@@ -81,5 +131,6 @@ describe('signup form action', () => {
 		}));
 
 		expect(result.status).toBe(400);
+		expect(result.data.errors.form).toBe('Registrierung fehlgeschlagen. Bitte versuche es erneut.');
 	});
 });

frontend/src/routes/(public)/signup/page.test.ts

@@ -20,6 +20,11 @@ describe('signup page', () => {
 		expect(screen.getByText('Mealprep')).toBeInTheDocument();
 	});
 
+	it('sets the page title', () => {
+		render(Page);
+		expect(document.title).toBe('Konto erstellen — Mealprep');
+	});
+
 	it('does not render any navigation chrome', () => {
 		render(Page);
 		// No nav element should exist