From 6d0f00c8fb155e08f2a21e8781f5bda2261b54cf Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Thu, 2 Apr 2026 15:06:21 +0200
Subject: [PATCH] feat(auth): add use:enhance and server error display to
 signup form

SignupForm now uses use:enhance for progressive enhancement.
Accepts form prop for server-side error display. Shows general
form errors in a banner and field-specific errors inline.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/auth/SignupForm.svelte       | 39 +++++++++++++++++--
 frontend/src/lib/auth/SignupForm.test.ts      | 32 +++++++++++++++
 .../src/routes/(public)/signup/+page.svelte   |  4 +-
 3 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/auth/SignupForm.svelte b/frontend/src/lib/auth/SignupForm.svelte
index 8ba5125..d04e657 100644
--- a/frontend/src/lib/auth/SignupForm.svelte
+++ b/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]"
@@ -139,6 +166,12 @@
 		{/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"
diff --git a/frontend/src/lib/auth/SignupForm.test.ts b/frontend/src/lib/auth/SignupForm.test.ts
index 20778df..8c375b8 100644
--- a/frontend/src/lib/auth/SignupForm.test.ts
+++ b/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);
@@ -131,6 +135,34 @@ describe('SignupForm', () => {
 		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('renders placeholders on inputs', () => {
 		render(SignupForm);
 		expect(screen.getByPlaceholderText('z.B. Sarah')).toBeInTheDocument();
diff --git a/frontend/src/routes/(public)/signup/+page.svelte b/frontend/src/routes/(public)/signup/+page.svelte
index db668d6..8140c3a 100644
--- a/frontend/src/routes/(public)/signup/+page.svelte
+++ b/frontend/src/routes/(public)/signup/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import BrandPanel from '$lib/auth/BrandPanel.svelte';
 	import SignupForm from '$lib/auth/SignupForm.svelte';
+
+	let { form } = $props();
 </script>
 
 <svelte:head>
@@ -12,7 +14,7 @@
 	<BrandPanel />
 	<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="w-full max-w-[380px]">
-			<SignupForm />
+			<SignupForm {form} />
 		</div>
 	</div>
 </div>