feat(admin): phase 8 — unsaved-changes guard on all detail panels

Add beforeNavigate + isDirty tracking to users/[id], users/new,
groups/[id], groups/new, and tags/[id] edit panels. When a user
navigates away with unsaved changes, the navigation is cancelled and
an inline amber warning banner appears with a Discard button that
resumes navigation. Saving successfully clears the dirty flag.

Add i18n key admin_unsaved_warning (de/en/es).
Add spec files for groups/[id] and tags/[id] panels.

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

frontend/messages/de.json

@@ -160,6 +160,7 @@
 	"admin_tags_select_prompt": "W\u00e4hle ein Schlagwort aus der Liste.",
 	"admin_tag_edit_heading": "Schlagwort: {name}",
 	"admin_tag_updated": "Schlagwort umbenannt.",
+	"admin_unsaved_warning": "Du hast ungespeicherte Änderungen – speichere oder verwerfe, bevor du wechselst.",
 	"admin_btn_edit_tag_label": "Schlagwort bearbeiten",
 	"admin_tag_delete_confirm": "Wirklich löschen? Das Schlagwort wird aus allen Dokumenten entfernt.",
 	"admin_btn_delete_tag_label": "Schlagwort löschen",

frontend/messages/en.json

@@ -160,6 +160,7 @@
 	"admin_tags_select_prompt": "Select a tag from the list.",
 	"admin_tag_edit_heading": "Tag: {name}",
 	"admin_tag_updated": "Tag renamed.",
+	"admin_unsaved_warning": "You have unsaved changes — save or discard before switching.",
 	"admin_btn_edit_tag_label": "Edit tag",
 	"admin_tag_delete_confirm": "Really delete? The tag will be removed from all documents.",
 	"admin_btn_delete_tag_label": "Delete tag",

frontend/messages/es.json

@@ -160,6 +160,7 @@
 	"admin_tags_select_prompt": "Selecciona una etiqueta de la lista.",
 	"admin_tag_edit_heading": "Etiqueta: {name}",
 	"admin_tag_updated": "Etiqueta renombrada.",
+	"admin_unsaved_warning": "Tienes cambios sin guardar — guarda o descarta antes de cambiar.",
 	"admin_btn_edit_tag_label": "Editar etiqueta",
 	"admin_tag_delete_confirm": "¿Realmente eliminar? La etiqueta se eliminará de todos los documentos.",
 	"admin_btn_delete_tag_label": "Eliminar etiqueta",

frontend/src/routes/admin/groups/[id]/+page.svelte

@@ -1,9 +1,29 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
+import { beforeNavigate, goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 
 let { data, form } = $props();
 
+let isDirty = $state(false);
+let showUnsavedWarning = $state(false);
+let discardTarget = $state<string | null>(null);
+
+beforeNavigate(({ cancel, to }) => {
+	if (isDirty) {
+		cancel();
+		showUnsavedWarning = true;
+		discardTarget = to?.url.href ?? null;
+	}
+});
+
+$effect(() => {
+	if (form?.success) {
+		isDirty = false;
+		showUnsavedWarning = false;
+	}
+});
+
 const STANDARD_PERMISSIONS: { value: string; label: string }[] = [
 	{ value: 'WRITE_ALL', label: 'Lesen & Schreiben' }
 ];
@@ -43,6 +63,24 @@ const ADMIN_PERMISSIONS: { value: string; label: string }[] = [
 
 	<!-- Scrollable body -->
 	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#if showUnsavedWarning}
+			<div
+				class="mb-5 flex items-center justify-between rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300"
+			>
+				<span>{m.admin_unsaved_warning()}</span>
+				<button
+					type="button"
+					onclick={() => {
+						isDirty = false;
+						showUnsavedWarning = false;
+						if (discardTarget) goto(discardTarget);
+					}}
+					class="ml-4 shrink-0 font-sans text-xs font-bold tracking-widest text-amber-800 uppercase hover:text-amber-900 dark:text-amber-300"
+				>
+					{m.person_discard_changes()}
+				</button>
+			</div>
+		{/if}
 		{#if form?.success}
 			<div
 				class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700 dark:border-green-800 dark:bg-green-950/40 dark:text-green-400"
@@ -58,7 +96,16 @@ const ADMIN_PERMISSIONS: { value: string; label: string }[] = [
 			</div>
 		{/if}
 
-		<form id="edit-group-form" method="POST" action="?/update" use:enhance>
+		<form
+			id="edit-group-form"
+			method="POST"
+			action="?/update"
+			use:enhance
+			oninput={() => {
+				isDirty = true;
+				showUnsavedWarning = false;
+			}}
+		>
 			<!-- Group name card -->
 			<div class="mb-5 rounded-sm border border-line bg-surface p-5 shadow-sm">
 				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">

frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts

@@ -0,0 +1,113 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import Page from './+page.svelte';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
+
+import { beforeNavigate, goto } from '$app/navigation';
+
+const baseGroup = { id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] };
+const baseData = { group: baseGroup };
+
+afterEach(cleanup);
+
+// ─── Rendering ────────────────────────────────────────────────────────────────
+
+describe('Admin edit group page – rendering', () => {
+	it('renders the heading with group name', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/Gruppe: Editoren/i)).toBeInTheDocument();
+	});
+
+	it('pre-fills the name input', async () => {
+		render(Page, { data: baseData, form: null });
+		const input = document.querySelector<HTMLInputElement>('input[name="name"]');
+		expect(input?.value).toBe('Editoren');
+	});
+
+	it('pre-checks permissions that the group already has', async () => {
+		render(Page, { data: baseData, form: null });
+		const checkbox = document.querySelector<HTMLInputElement>(
+			'input[type="checkbox"][name="permissions"][value="WRITE_ALL"]'
+		);
+		expect(checkbox?.checked).toBe(true);
+	});
+
+	it('renders the cancel link pointing to /admin/groups', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect
+			.element(page.getByRole('link', { name: /Abbrechen/i }))
+			.toHaveAttribute('href', '/admin/groups');
+	});
+});
+
+// ─── Unsaved-changes guard ────────────────────────────────────────────────────
+
+describe('Admin edit group page – unsaved-changes guard', () => {
+	beforeEach(() => vi.clearAllMocks());
+
+	it('does not show unsaved warning initially', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
+	});
+
+	it('cancels navigation and shows warning when form is dirty', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="name"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/groups/g2') } });
+
+		expect(cancel).toHaveBeenCalled();
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
+	});
+
+	it('does not cancel navigation when form is clean', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/groups/g2') } });
+
+		expect(cancel).not.toHaveBeenCalled();
+	});
+
+	it('discard button calls goto with the target URL', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="name"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/groups/g2') } });
+
+		await page.getByRole('button', { name: /verwerfen/i }).click();
+
+		expect(vi.mocked(goto)).toHaveBeenCalledWith('http://localhost/admin/groups/g2');
+	});
+
+	it('clears dirty state when form saves successfully', async () => {
+		const { rerender } = render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="name"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/groups/g2') } });
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
+
+		await rerender({ data: baseData, form: { success: true } });
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/groups/g2') } });
+		expect(cancel).not.toHaveBeenCalled();
+	});
+});

frontend/src/routes/admin/groups/new/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
+import { beforeNavigate, goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 
 const availableStandard = [{ value: 'WRITE_ALL', label: 'Lesen & Schreiben' }];
@@ -11,6 +12,18 @@ const availableAdmin = [
 ];
 
 let { form } = $props();
+
+let isDirty = $state(false);
+let showUnsavedWarning = $state(false);
+let discardTarget = $state<string | null>(null);
+
+beforeNavigate(({ cancel, to }) => {
+	if (isDirty) {
+		cancel();
+		showUnsavedWarning = true;
+		discardTarget = to?.url.href ?? null;
+	}
+});
 </script>
 
 <div class="flex flex-1 flex-col overflow-hidden">
@@ -25,13 +38,40 @@ let { form } = $props();
 
 	<!-- Scrollable body -->
 	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#if showUnsavedWarning}
+			<div
+				class="mb-5 flex items-center justify-between rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300"
+			>
+				<span>{m.admin_unsaved_warning()}</span>
+				<button
+					type="button"
+					onclick={() => {
+						isDirty = false;
+						showUnsavedWarning = false;
+						if (discardTarget) goto(discardTarget);
+					}}
+					class="ml-4 shrink-0 font-sans text-xs font-bold tracking-widest text-amber-800 uppercase hover:text-amber-900 dark:text-amber-300"
+				>
+					{m.person_discard_changes()}
+				</button>
+			</div>
+		{/if}
 		{#if form?.error}
 			<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
 				{form.error}
 			</div>
 		{/if}
 
-		<form id="new-group-form" method="POST" use:enhance class="space-y-5">
+		<form
+			id="new-group-form"
+			method="POST"
+			use:enhance
+			oninput={() => {
+				isDirty = true;
+				showUnsavedWarning = false;
+			}}
+			class="space-y-5"
+		>
 			<!-- Name card -->
 			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
 				<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">

frontend/src/routes/admin/tags/[id]/+page.svelte

@@ -1,11 +1,31 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
+import { beforeNavigate, goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 
 let { data, form } = $props();
 
 let deleteConfirmName = $state('');
 const deleteEnabled = $derived(deleteConfirmName === data.tag.name);
+
+let isDirty = $state(false);
+let showUnsavedWarning = $state(false);
+let discardTarget = $state<string | null>(null);
+
+beforeNavigate(({ cancel, to }) => {
+	if (isDirty) {
+		cancel();
+		showUnsavedWarning = true;
+		discardTarget = to?.url.href ?? null;
+	}
+});
+
+$effect(() => {
+	if (form?.success) {
+		isDirty = false;
+		showUnsavedWarning = false;
+	}
+});
 </script>
 
 <div class="flex flex-1 flex-col overflow-hidden">
@@ -18,6 +38,24 @@ const deleteEnabled = $derived(deleteConfirmName === data.tag.name);
 
 	<!-- Scrollable body -->
 	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#if showUnsavedWarning}
+			<div
+				class="mb-5 flex items-center justify-between rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300"
+			>
+				<span>{m.admin_unsaved_warning()}</span>
+				<button
+					type="button"
+					onclick={() => {
+						isDirty = false;
+						showUnsavedWarning = false;
+						if (discardTarget) goto(discardTarget);
+					}}
+					class="ml-4 shrink-0 font-sans text-xs font-bold tracking-widest text-amber-800 uppercase hover:text-amber-900 dark:text-amber-300"
+				>
+					{m.person_discard_changes()}
+				</button>
+			</div>
+		{/if}
 		{#if form?.success}
 			<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
 				{m.admin_tag_updated()}
@@ -30,7 +68,17 @@ const deleteEnabled = $derived(deleteConfirmName === data.tag.name);
 		{/if}
 
 		<!-- Rename form -->
-		<form id="edit-tag-form" method="POST" action="?/update" use:enhance class="mb-5">
+		<form
+			id="edit-tag-form"
+			method="POST"
+			action="?/update"
+			use:enhance
+			oninput={() => {
+				isDirty = true;
+				showUnsavedWarning = false;
+			}}
+			class="mb-5"
+		>
 			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
 				<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
 					{m.admin_col_name()}

frontend/src/routes/admin/tags/[id]/page.svelte.spec.ts

@@ -0,0 +1,93 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import Page from './+page.svelte';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
+
+import { beforeNavigate, goto } from '$app/navigation';
+
+const baseTag = { id: 't1', name: 'Familie' };
+const baseData = { tag: baseTag };
+
+afterEach(cleanup);
+
+// ─── Rendering ────────────────────────────────────────────────────────────────
+
+describe('Admin edit tag page – rendering', () => {
+	it('renders the heading with tag name', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/Schlagwort: Familie/i)).toBeInTheDocument();
+	});
+
+	it('pre-fills the name input', async () => {
+		render(Page, { data: baseData, form: null });
+		const input = document.querySelector<HTMLInputElement>('input[name="name"]');
+		expect(input?.value).toBe('Familie');
+	});
+
+	it('renders the cancel link pointing to /admin/tags', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect
+			.element(page.getByRole('link', { name: /Abbrechen/i }))
+			.toHaveAttribute('href', '/admin/tags');
+	});
+
+	it('delete button is disabled until tag name is typed in confirm field', async () => {
+		render(Page, { data: baseData, form: null });
+		const deleteBtn = document.querySelector<HTMLButtonElement>('button[type="submit"]');
+		expect(deleteBtn?.disabled).toBe(true);
+	});
+});
+
+// ─── Unsaved-changes guard ────────────────────────────────────────────────────
+
+describe('Admin edit tag page – unsaved-changes guard', () => {
+	beforeEach(() => vi.clearAllMocks());
+
+	it('does not show unsaved warning initially', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
+	});
+
+	it('cancels navigation and shows warning when rename form is dirty', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="name"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/tags/t2') } });
+
+		expect(cancel).toHaveBeenCalled();
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
+	});
+
+	it('does not cancel navigation when form is clean', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/tags/t2') } });
+
+		expect(cancel).not.toHaveBeenCalled();
+	});
+
+	it('discard button calls goto with the target URL', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="name"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/tags/t2') } });
+
+		await page.getByRole('button', { name: /verwerfen/i }).click();
+
+		expect(vi.mocked(goto)).toHaveBeenCalledWith('http://localhost/admin/tags/t2');
+	});
+});

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
+import { beforeNavigate, goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 import UserProfileSection from '$lib/components/user/UserProfileSection.svelte';
 import UserGroupsSection from '$lib/components/user/UserGroupsSection.svelte';
@@ -8,6 +9,25 @@ import UserPasswordSection from '$lib/components/user/UserPasswordSection.svelte
 let { data, form } = $props();
 
 const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string }) => g.id) ?? []);
+
+let isDirty = $state(false);
+let showUnsavedWarning = $state(false);
+let discardTarget = $state<string | null>(null);
+
+beforeNavigate(({ cancel, to }) => {
+	if (isDirty) {
+		cancel();
+		showUnsavedWarning = true;
+		discardTarget = to?.url.href ?? null;
+	}
+});
+
+$effect(() => {
+	if (form?.success) {
+		isDirty = false;
+		showUnsavedWarning = false;
+	}
+});
 </script>
 
 <div class="flex flex-1 flex-col overflow-hidden">
@@ -39,6 +59,24 @@ const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string })
 
 	<!-- Scrollable body -->
 	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#if showUnsavedWarning}
+			<div
+				class="mb-5 flex items-center justify-between rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300"
+			>
+				<span>{m.admin_unsaved_warning()}</span>
+				<button
+					type="button"
+					onclick={() => {
+						isDirty = false;
+						showUnsavedWarning = false;
+						if (discardTarget) goto(discardTarget);
+					}}
+					class="ml-4 shrink-0 font-sans text-xs font-bold tracking-widest text-amber-800 uppercase hover:text-amber-900 dark:text-amber-300"
+				>
+					{m.person_discard_changes()}
+				</button>
+			</div>
+		{/if}
 		{#if form?.success}
 			<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
 				{m.admin_user_updated()}
@@ -50,7 +88,16 @@ const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string })
 			</div>
 		{/if}
 
-		<form id="edit-user-form" method="POST" use:enhance class="space-y-5">
+		<form
+			id="edit-user-form"
+			method="POST"
+			use:enhance
+			oninput={() => {
+				isDirty = true;
+				showUnsavedWarning = false;
+			}}
+			class="space-y-5"
+		>
 			<!-- Profile card -->
 			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
 				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">

frontend/src/routes/admin/users/[id]/page.svelte.spec.ts

@@ -1,9 +1,12 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import Page from './+page.svelte';
 
 vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
+
+import { beforeNavigate, goto } from '$app/navigation';
 
 const groups = [
 	{ id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] },
@@ -141,3 +144,72 @@ describe('Admin edit user page – feedback', () => {
 		await expect.element(page.getByText(/Änderungen gespeichert/i)).not.toBeInTheDocument();
 	});
 });
+
+// ─── Unsaved-changes guard ────────────────────────────────────────────────────
+
+describe('Admin edit user page – unsaved-changes guard', () => {
+	beforeEach(() => vi.clearAllMocks());
+
+	it('does not show unsaved warning initially', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
+	});
+
+	it('cancels navigation and shows warning when form is dirty', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="firstName"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/users/u2') } });
+
+		expect(cancel).toHaveBeenCalled();
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
+	});
+
+	it('does not cancel navigation when form is clean', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/users/u2') } });
+
+		expect(cancel).not.toHaveBeenCalled();
+	});
+
+	it('discard button calls goto with the target URL', async () => {
+		render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="firstName"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/users/u2') } });
+
+		await page.getByRole('button', { name: /verwerfen/i }).click();
+
+		expect(vi.mocked(goto)).toHaveBeenCalledWith('http://localhost/admin/users/u2');
+	});
+
+	it('clears dirty state when form saves successfully', async () => {
+		const { rerender } = render(Page, { data: baseData, form: null });
+		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
+
+		document
+			.querySelector<HTMLInputElement>('input[name="firstName"]')!
+			.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/users/u2') } });
+		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
+
+		await rerender({ data: baseData, form: { success: true } });
+
+		const cancel = vi.fn();
+		callback({ cancel, to: { url: new URL('http://localhost/admin/users/u2') } });
+		expect(cancel).not.toHaveBeenCalled();
+	});
+});

frontend/src/routes/admin/users/new/+page.svelte

@@ -1,11 +1,24 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
+import { beforeNavigate, goto } from '$app/navigation';
 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();
+
+let isDirty = $state(false);
+let showUnsavedWarning = $state(false);
+let discardTarget = $state<string | null>(null);
+
+beforeNavigate(({ cancel, to }) => {
+	if (isDirty) {
+		cancel();
+		showUnsavedWarning = true;
+		discardTarget = to?.url.href ?? null;
+	}
+});
 </script>
 
 <div class="flex flex-1 flex-col overflow-hidden">
@@ -16,13 +29,40 @@ let { data, form } = $props();
 
 	<!-- Scrollable body -->
 	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#if showUnsavedWarning}
+			<div
+				class="mb-5 flex items-center justify-between rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300"
+			>
+				<span>{m.admin_unsaved_warning()}</span>
+				<button
+					type="button"
+					onclick={() => {
+						isDirty = false;
+						showUnsavedWarning = false;
+						if (discardTarget) goto(discardTarget);
+					}}
+					class="ml-4 shrink-0 font-sans text-xs font-bold tracking-widest text-amber-800 uppercase hover:text-amber-900 dark:text-amber-300"
+				>
+					{m.person_discard_changes()}
+				</button>
+			</div>
+		{/if}
 		{#if form?.error}
 			<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
 				{form.error}
 			</div>
 		{/if}
 
-		<form id="new-user-form" method="POST" use:enhance class="space-y-5">
+		<form
+			id="new-user-form"
+			method="POST"
+			use:enhance
+			oninput={() => {
+				isDirty = true;
+				showUnsavedWarning = false;
+			}}
+			class="space-y-5"
+		>
 			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
 				<AccountSection />
 			</div>