feat(frontend): add profile page and public user profile page

/profile: two-card layout with personal info form (name, birth date,
email, contact) and password change form, each with independent actions.
/users/[id]: read-only public view showing name, username, email, contact
with avatar circle initials.

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

frontend/src/app.d.ts

@@ -6,10 +6,17 @@ declare global {
 		interface User {
 			id: string;
 			username: string;
+			firstName?: string;
+			lastName?: string;
+			birthDate?: string;
+			email?: string;
+			contact?: string;
 			groups: {
 				name: string;
 				permissions: string[];
 			}[];
+			enabled: boolean;
+			createdAt: string;
 		}
 
 		interface Locals {

frontend/src/routes/profile/+page.server.ts

@@ -0,0 +1,54 @@
+import { fail } from '@sveltejs/kit';
+import type { PageServerLoad, Actions } from './$types';
+import { createApiClient } from '$lib/api.server';
+import { getErrorMessage } from '$lib/errors';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	return { user: locals.user };
+};
+
+export const actions: Actions = {
+	updateProfile: async ({ request, fetch }) => {
+		const formData = await request.formData();
+		const body = {
+			firstName: formData.get('firstName')?.toString().trim() || undefined,
+			lastName: formData.get('lastName')?.toString().trim() || undefined,
+			birthDate: (formData.get('birthDate')?.toString() || undefined) as string | undefined,
+			email: formData.get('email')?.toString().trim() || undefined,
+			contact: formData.get('contact')?.toString().trim() || undefined
+		};
+
+		const api = createApiClient(fetch);
+		const result = await api.PUT('/api/users/me', { body });
+
+		if (!result.response.ok) {
+			const code = (result.error as unknown as { code?: string })?.code;
+			return fail(result.response.status, { updateError: getErrorMessage(code) });
+		}
+
+		return { updateSuccess: true };
+	},
+
+	changePassword: async ({ request, fetch }) => {
+		const formData = await request.formData();
+		const currentPassword = formData.get('currentPassword')?.toString() ?? '';
+		const newPassword = formData.get('newPassword')?.toString() ?? '';
+		const confirmPassword = formData.get('confirmPassword')?.toString() ?? '';
+
+		if (newPassword !== confirmPassword) {
+			return fail(400, { passwordError: 'PASSWORDS_DO_NOT_MATCH' });
+		}
+
+		const api = createApiClient(fetch);
+		const result = await api.POST('/api/users/me/password', {
+			body: { currentPassword, newPassword }
+		});
+
+		if (!result.response.ok) {
+			const code = (result.error as unknown as { code?: string })?.code;
+			return fail(result.response.status, { passwordError: getErrorMessage(code) });
+		}
+
+		return { passwordSuccess: true };
+	}
+};

frontend/src/routes/profile/+page.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+let { data, form } = $props();
+</script>
+
+<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+	<!-- Back link -->
+	<a
+		href="/"
+		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+	>
+		<svg
+			class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			stroke-width="2"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+		</svg>
+		{m.btn_back_to_overview()}
+	</a>
+
+	<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.profile_heading()}</h1>
+
+	<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+		<!-- Personal info card -->
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+				{m.profile_section_personal()}
+			</h2>
+
+			{#if form?.updateSuccess}
+				<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
+					{m.profile_saved()}
+				</div>
+			{/if}
+			{#if form?.updateError}
+				<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+					{form.updateError}
+				</div>
+			{/if}
+
+			<form method="POST" action="?/updateProfile" use:enhance>
+				<div class="space-y-4">
+					<label class="block">
+						<span
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						>
+							{m.profile_label_first_name()}
+						</span>
+						<input
+							type="text"
+							name="firstName"
+							value={data.user?.firstName ?? ''}
+							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						/>
+					</label>
+
+					<label class="block">
+						<span
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						>
+							{m.profile_label_last_name()}
+						</span>
+						<input
+							type="text"
+							name="lastName"
+							value={data.user?.lastName ?? ''}
+							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						/>
+					</label>
+
+					<label class="block">
+						<span
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						>
+							{m.profile_label_birth_date()}
+						</span>
+						<input
+							type="date"
+							name="birthDate"
+							value={data.user?.birthDate ?? ''}
+							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						/>
+					</label>
+
+					<label class="block">
+						<span
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						>
+							{m.profile_label_email()}
+						</span>
+						<input
+							type="email"
+							name="email"
+							value={data.user?.email ?? ''}
+							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						/>
+					</label>
+
+					<label class="block">
+						<span
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						>
+							{m.profile_label_contact()}
+						</span>
+						<textarea
+							name="contact"
+							rows="3"
+							placeholder={m.profile_contact_placeholder()}
+							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+							>{data.user?.contact ?? ''}</textarea
+						>
+					</label>
+				</div>
+
+				<button
+					type="submit"
+					class="mt-5 rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+				>
+					{m.btn_save()}
+				</button>
+			</form>
+		</div>
+
+		<!-- Password change card -->
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+				{m.profile_section_password()}
+			</h2>
+
+			{#if form?.passwordSuccess}
+				<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
+					{m.profile_password_changed()}
+				</div>
+			{/if}
+			{#if form?.passwordError}
+				<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+					{#if form.passwordError === 'PASSWORDS_DO_NOT_MATCH'}
+						{m.profile_password_mismatch()}
+					{:else}
+						{form.passwordError}
+					{/if}
+				</div>
+			{/if}
+
+			<form method="POST" action="?/changePassword" use:enhance>
+				<div class="space-y-4">
+					<label class="block">
+						<span
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						>
+							{m.profile_label_current_password()}
+						</span>
+						<input
+							type="password"
+							name="currentPassword"
+							required
+							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						/>
+					</label>
+
+					<label class="block">
+						<span
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						>
+							{m.profile_label_new_password()}
+						</span>
+						<input
+							type="password"
+							name="newPassword"
+							required
+							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						/>
+					</label>
+
+					<label class="block">
+						<span
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						>
+							{m.profile_label_new_password_confirm()}
+						</span>
+						<input
+							type="password"
+							name="confirmPassword"
+							required
+							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						/>
+					</label>
+				</div>
+
+				<button
+					type="submit"
+					class="mt-5 rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+				>
+					{m.btn_save()}
+				</button>
+			</form>
+		</div>
+	</div>
+</div>

frontend/src/routes/users/[id]/+page.server.ts

@@ -0,0 +1,16 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import { createApiClient } from '$lib/api.server';
+import { getErrorMessage } from '$lib/errors';
+
+export const load: PageServerLoad = async ({ params, fetch }) => {
+	const api = createApiClient(fetch);
+	const result = await api.GET('/api/users/{id}', { params: { path: { id: params.id } } });
+
+	if (!result.response.ok) {
+		const code = (result.error as unknown as { code?: string })?.code;
+		throw error(result.response.status, getErrorMessage(code));
+	}
+
+	return { profileUser: result.data! };
+};

frontend/src/routes/users/[id]/+page.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let { data } = $props();
+
+const fullName = $derived.by(() => {
+	const first = data.profileUser.firstName;
+	const last = data.profileUser.lastName;
+	return first || last ? [first, last].filter(Boolean).join(' ') : data.profileUser.username;
+});
+
+const initials = $derived.by(() => {
+	const first = data.profileUser.firstName;
+	const last = data.profileUser.lastName;
+	if (first && last) return `${first[0]}${last[0]}`.toUpperCase();
+	if (first) return first[0].toUpperCase();
+	if (last) return last[0].toUpperCase();
+	return null;
+});
+</script>
+
+<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+	<!-- Back link -->
+	<a
+		href="/"
+		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+	>
+		<svg
+			class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			stroke-width="2"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+		</svg>
+		Zurück
+	</a>
+
+	<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.user_profile_heading()}</h1>
+
+	<div class="max-w-md">
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<!-- Avatar -->
+			<div class="mb-5 flex justify-center">
+				{#if initials}
+					<div
+						class="flex h-16 w-16 items-center justify-center rounded-full bg-brand-navy text-white"
+					>
+						<span class="font-serif text-xl font-bold">{initials}</span>
+					</div>
+				{:else}
+					<div
+						class="flex h-16 w-16 items-center justify-center rounded-full bg-brand-navy text-white"
+					>
+						<svg
+							class="h-8 w-8"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="1.5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+							/>
+						</svg>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Name and username -->
+			<div class="mb-5 text-center">
+				<h2 class="font-serif text-xl font-bold text-brand-navy">{fullName}</h2>
+				{#if data.profileUser.firstName || data.profileUser.lastName}
+					<p class="mt-0.5 font-sans text-sm text-gray-400">@{data.profileUser.username}</p>
+				{/if}
+			</div>
+
+			<!-- Field rows -->
+			<div class="flex flex-col gap-4">
+				{#if data.profileUser.email}
+					<div class="flex flex-col gap-0.5">
+						<span class="font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							>E-Mail</span
+						>
+						<span class="font-serif text-sm text-brand-navy">{data.profileUser.email}</span>
+					</div>
+				{/if}
+
+				{#if data.profileUser.contact}
+					<div class="flex flex-col gap-0.5">
+						<span class="font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							>Kontakt</span
+						>
+						<span class="font-serif text-sm text-brand-navy">{data.profileUser.contact}</span>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>