From 25014cce2d35e9417d14d11c6aae86d7a28dad6d Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 26 Mar 2026 12:17:55 +0100
Subject: [PATCH] refactor(admin/users): extract user form sub-components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shared (src/lib/components/user/):
- UserProfileSection.svelte: name/birth-date/email/contact fields
- UserGroupsSection.svelte: group checkboxes
- UserPasswordSection.svelte: new/confirm password fields

Page-local:
- admin/users/new/AccountSection.svelte: username + initial password

admin/users/[id] drops from 224 → ~35 lines.
admin/users/new drops from 191 → ~30 lines.
Date utilities imported from \$lib/utils/date.

Part of #75

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/user/UserGroupsSection.svelte  |  24 +++
 .../user/UserPasswordSection.svelte           |  31 ++++
 .../components/user/UserProfileSection.svelte |  95 +++++++++++
 .../src/routes/admin/users/[id]/+page.svelte  | 155 ++----------------
 .../src/routes/admin/users/new/+page.svelte   | 131 +--------------
 .../admin/users/new/AccountSection.svelte     |  31 ++++
 6 files changed, 200 insertions(+), 267 deletions(-)
 create mode 100644 frontend/src/lib/components/user/UserGroupsSection.svelte
 create mode 100644 frontend/src/lib/components/user/UserPasswordSection.svelte
 create mode 100644 frontend/src/lib/components/user/UserProfileSection.svelte
 create mode 100644 frontend/src/routes/admin/users/new/AccountSection.svelte

diff --git a/frontend/src/lib/components/user/UserGroupsSection.svelte b/frontend/src/lib/components/user/UserGroupsSection.svelte
new file mode 100644
index 00000000..911cde23
--- /dev/null
+++ b/frontend/src/lib/components/user/UserGroupsSection.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+let {
+	groups,
+	selectedGroupIds = []
+}: {
+	groups: { id: string; name: string }[];
+	selectedGroupIds?: string[];
+} = $props();
+</script>
+
+<div class="flex flex-wrap gap-3">
+	{#each groups as group (group.id)}
+		<label class="inline-flex items-center gap-2 text-sm text-ink-2">
+			<input
+				type="checkbox"
+				name="groupIds"
+				value={group.id}
+				checked={selectedGroupIds.includes(group.id)}
+				class="rounded border-line text-ink focus:ring-accent"
+			/>
+			{group.name}
+		</label>
+	{/each}
+</div>
diff --git a/frontend/src/lib/components/user/UserPasswordSection.svelte b/frontend/src/lib/components/user/UserPasswordSection.svelte
new file mode 100644
index 00000000..cf25b239
--- /dev/null
+++ b/frontend/src/lib/components/user/UserPasswordSection.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let { required = false }: { required?: boolean } = $props();
+</script>
+
+<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+	<label class="block">
+		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.profile_label_new_password()}
+		</span>
+		<input
+			type="password"
+			name="newPassword"
+			required={required}
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+		/>
+	</label>
+
+	<label class="block">
+		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.profile_label_new_password_confirm()}
+		</span>
+		<input
+			type="password"
+			name="confirmPassword"
+			required={required}
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+		/>
+	</label>
+</div>
diff --git a/frontend/src/lib/components/user/UserProfileSection.svelte b/frontend/src/lib/components/user/UserProfileSection.svelte
new file mode 100644
index 00000000..b3b8d214
--- /dev/null
+++ b/frontend/src/lib/components/user/UserProfileSection.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import { isoToGerman, handleGermanDateInput } from '$lib/utils/date';
+import { m } from '$lib/paraglide/messages.js';
+
+let {
+	firstName = '',
+	lastName = '',
+	birthDate = '',
+	email = '',
+	contact = ''
+}: {
+	firstName?: string;
+	lastName?: string;
+	birthDate?: string;
+	email?: string;
+	contact?: string;
+} = $props();
+
+let birthDateDisplay = $state(untrack(() => isoToGerman(birthDate)));
+let birthDateIso = $state(untrack(() => birthDate));
+
+function handleBirthDateInput(e: Event) {
+	const result = handleGermanDateInput(e);
+	birthDateDisplay = result.display;
+	birthDateIso = result.iso;
+}
+</script>
+
+<div class="space-y-4">
+	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+		<label class="block">
+			<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+				{m.profile_label_first_name()}
+			</span>
+			<input
+				type="text"
+				name="firstName"
+				value={firstName}
+				class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+			/>
+		</label>
+
+		<label class="block">
+			<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+				{m.profile_label_last_name()}
+			</span>
+			<input
+				type="text"
+				name="lastName"
+				value={lastName}
+				class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+			/>
+		</label>
+	</div>
+
+	<label class="block">
+		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.profile_label_birth_date()}
+		</span>
+		<input
+			type="text"
+			placeholder="TT.MM.JJJJ"
+			value={birthDateDisplay}
+			oninput={handleBirthDateInput}
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+		/>
+		<input type="hidden" name="birthDate" value={birthDateIso} />
+	</label>
+
+	<label class="block">
+		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.profile_label_email()}
+		</span>
+		<input
+			type="email"
+			name="email"
+			value={email}
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+		/>
+	</label>
+
+	<label class="block">
+		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.profile_label_contact()}
+		</span>
+		<textarea
+			name="contact"
+			rows="3"
+			placeholder={m.profile_contact_placeholder()}
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+			>{contact}</textarea
+		>
+	</label>
+</div>
diff --git a/frontend/src/routes/admin/users/[id]/+page.svelte b/frontend/src/routes/admin/users/[id]/+page.svelte
index 85369c6d..2159d6ed 100644
--- a/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -1,41 +1,13 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
-import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
+import UserProfileSection from '$lib/components/user/UserProfileSection.svelte';
+import UserGroupsSection from '$lib/components/user/UserGroupsSection.svelte';
+import UserPasswordSection from '$lib/components/user/UserPasswordSection.svelte';
 
 let { data, form } = $props();
 
-function isoToGerman(iso: string | undefined): string {
-	if (!iso) return '';
-	const match = iso.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-	if (!match) return '';
-	return `${match[3]}.${match[2]}.${match[1]}`;
-}
-
-function germanToIso(german: string): string {
-	const match = german.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
-	if (!match) return '';
-	return `${match[3]}-${match[2]}-${match[1]}`;
-}
-
-let birthDateDisplay = $state(untrack(() => isoToGerman(data.editUser?.birthDate)));
-let birthDateIso = $state(untrack(() => data.editUser?.birthDate ?? ''));
-
-function handleBirthDateInput(e: Event) {
-	const input = e.target as HTMLInputElement;
-	const digits = input.value.replace(/\D/g, '').slice(0, 8);
-	let formatted: string;
-	if (digits.length <= 2) {
-		formatted = digits;
-	} else if (digits.length <= 4) {
-		formatted = `${digits.slice(0, 2)}.${digits.slice(2)}`;
-	} else {
-		formatted = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
-	}
-	input.value = formatted;
-	birthDateDisplay = formatted;
-	birthDateIso = germanToIso(formatted);
-}
+const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string }) => g.id) ?? []);
 </script>
 
 <div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
@@ -76,77 +48,13 @@ function handleBirthDateInput(e: Event) {
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.profile_section_personal()}
 			</h2>
-
-			<div class="space-y-4">
-				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-					<label class="block">
-						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
-						>
-							{m.profile_label_first_name()}
-						</span>
-						<input
-							type="text"
-							name="firstName"
-							value={data.editUser.firstName ?? ''}
-							class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-						/>
-					</label>
-
-					<label class="block">
-						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
-						>
-							{m.profile_label_last_name()}
-						</span>
-						<input
-							type="text"
-							name="lastName"
-							value={data.editUser.lastName ?? ''}
-							class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-						/>
-					</label>
-				</div>
-
-				<label class="block">
-					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-						{m.profile_label_birth_date()}
-					</span>
-					<input
-						type="text"
-						placeholder="TT.MM.JJJJ"
-						value={birthDateDisplay}
-						oninput={handleBirthDateInput}
-						class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-					/>
-					<input type="hidden" name="birthDate" value={birthDateIso} />
-				</label>
-
-				<label class="block">
-					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-						{m.profile_label_email()}
-					</span>
-					<input
-						type="email"
-						name="email"
-						value={data.editUser.email ?? ''}
-						class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-					/>
-				</label>
-
-				<label class="block">
-					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-						{m.profile_label_contact()}
-					</span>
-					<textarea
-						name="contact"
-						rows="3"
-						placeholder={m.profile_contact_placeholder()}
-						class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-						>{data.editUser.contact ?? ''}</textarea
-					>
-				</label>
-			</div>
+			<UserProfileSection
+				firstName={data.editUser.firstName ?? ''}
+				lastName={data.editUser.lastName ?? ''}
+				birthDate={data.editUser.birthDate ?? ''}
+				email={data.editUser.email ?? ''}
+				contact={data.editUser.contact ?? ''}
+			/>
 		</div>
 
 		<!-- Groups card -->
@@ -154,21 +62,7 @@ function handleBirthDateInput(e: Event) {
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.admin_col_groups()}
 			</h2>
-
-			<div class="flex flex-wrap gap-3">
-				{#each data.groups as group (group.id)}
-					<label class="inline-flex items-center gap-2 text-sm text-ink-2">
-						<input
-							type="checkbox"
-							name="groupIds"
-							value={group.id}
-							checked={data.editUser.groups?.some((g: { id: string }) => g.id === group.id)}
-							class="rounded border-line text-ink focus:ring-accent"
-						/>
-						{group.name}
-					</label>
-				{/each}
-			</div>
+			<UserGroupsSection groups={data.groups} selectedGroupIds={selectedGroupIds} />
 		</div>
 
 		<!-- Password card -->
@@ -176,30 +70,7 @@ function handleBirthDateInput(e: Event) {
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.admin_label_new_password_optional()}
 			</h2>
-
-			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-				<label class="block">
-					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-						{m.profile_label_new_password()}
-					</span>
-					<input
-						type="password"
-						name="newPassword"
-						class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-					/>
-				</label>
-
-				<label class="block">
-					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-						{m.profile_label_new_password_confirm()}
-					</span>
-					<input
-						type="password"
-						name="confirmPassword"
-						class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-					/>
-				</label>
-			</div>
+			<UserPasswordSection />
 		</div>
 
 		<!-- Save bar -->
diff --git a/frontend/src/routes/admin/users/new/+page.svelte b/frontend/src/routes/admin/users/new/+page.svelte
index 01fe3e7f..ae79f96b 100644
--- a/frontend/src/routes/admin/users/new/+page.svelte
+++ b/frontend/src/routes/admin/users/new/+page.svelte
@@ -1,31 +1,11 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
 import { m } from '$lib/paraglide/messages.js';
+import UserProfileSection from '$lib/components/user/UserProfileSection.svelte';
+import UserGroupsSection from '$lib/components/user/UserGroupsSection.svelte';
+import AccountSection from './AccountSection.svelte';
 
 let { data, form } = $props();
-
-function germanToIso(german: string): string {
-	const match = german.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
-	if (!match) return '';
-	return `${match[3]}-${match[2]}-${match[1]}`;
-}
-
-let birthDateIso = $state('');
-
-function handleBirthDateInput(e: Event) {
-	const input = e.target as HTMLInputElement;
-	const digits = input.value.replace(/\D/g, '').slice(0, 8);
-	let formatted: string;
-	if (digits.length <= 2) {
-		formatted = digits;
-	} else if (digits.length <= 4) {
-		formatted = `${digits.slice(0, 2)}.${digits.slice(2)}`;
-	} else {
-		formatted = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
-	}
-	input.value = formatted;
-	birthDateIso = germanToIso(formatted);
-}
 </script>
 
 <div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
@@ -55,118 +35,19 @@ function handleBirthDateInput(e: Event) {
 
 	<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
 		<form method="POST" use:enhance class="space-y-5">
-			<!-- Account -->
-			<h2 class="text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.admin_section_users()}
-			</h2>
-
-			<label class="block">
-				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-					{m.admin_col_login()}
-				</span>
-				<input
-					type="text"
-					name="username"
-					required
-					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-				/>
-			</label>
-
-			<label class="block">
-				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-					{m.admin_label_initial_password()}
-				</span>
-				<input
-					type="password"
-					name="password"
-					required
-					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-				/>
-			</label>
+			<AccountSection />
 
 			<!-- Profile -->
 			<h2 class="pt-2 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.profile_section_personal()}
 			</h2>
-
-			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-				<label class="block">
-					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-						{m.profile_label_first_name()}
-					</span>
-					<input
-						type="text"
-						name="firstName"
-						class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-					/>
-				</label>
-
-				<label class="block">
-					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-						{m.profile_label_last_name()}
-					</span>
-					<input
-						type="text"
-						name="lastName"
-						class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-					/>
-				</label>
-			</div>
-
-			<label class="block">
-				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-					{m.profile_label_birth_date()}
-				</span>
-				<input
-					type="text"
-					placeholder="TT.MM.JJJJ"
-					oninput={handleBirthDateInput}
-					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-				/>
-				<input type="hidden" name="birthDate" value={birthDateIso} />
-			</label>
-
-			<label class="block">
-				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-					{m.profile_label_email()}
-				</span>
-				<input
-					type="email"
-					name="email"
-					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-				/>
-			</label>
-
-			<label class="block">
-				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
-					{m.profile_label_contact()}
-				</span>
-				<textarea
-					name="contact"
-					rows="3"
-					placeholder={m.profile_contact_placeholder()}
-					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
-				></textarea>
-			</label>
+			<UserProfileSection />
 
 			<!-- Groups -->
 			<h2 class="pt-2 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.admin_col_groups()}
 			</h2>
-
-			<div class="flex flex-wrap gap-3">
-				{#each data.groups as group (group.id)}
-					<label class="inline-flex items-center gap-2 text-sm text-ink-2">
-						<input
-							type="checkbox"
-							name="groupIds"
-							value={group.id}
-							class="rounded border-line text-ink focus:ring-accent"
-						/>
-						{group.name}
-					</label>
-				{/each}
-			</div>
+			<UserGroupsSection groups={data.groups} />
 
 			<!-- Save bar -->
 			<div
diff --git a/frontend/src/routes/admin/users/new/AccountSection.svelte b/frontend/src/routes/admin/users/new/AccountSection.svelte
new file mode 100644
index 00000000..02eb36e4
--- /dev/null
+++ b/frontend/src/routes/admin/users/new/AccountSection.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+</script>
+
+<h2 class="text-xs font-bold tracking-widest text-ink-3 uppercase">
+	{m.admin_section_users()}
+</h2>
+
+<label class="block">
+	<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.admin_col_login()}
+	</span>
+	<input
+		type="text"
+		name="username"
+		required
+		class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+	/>
+</label>
+
+<label class="block">
+	<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.admin_label_initial_password()}
+	</span>
+	<input
+		type="password"
+		name="password"
+		required
+		class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+	/>
+</label>