From b6466fcd955d06a3d45ed93d755ece3549c67690 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 19 Apr 2026 18:07:06 +0200
Subject: [PATCH] fix(admin): wire delete-user button via enhance callback
 instead of requestSubmit()

The delete button used type=button + requestSubmit() to trigger the form,
which did not reliably fire SvelteKit's enhance submit listener. Replaced
with a type=submit button and an async enhance callback that guards with
the confirm dialog and calls cancel() on rejection.

Also clears the unsaved-changes dirty flag before the redirect so
beforeNavigate doesn't silently block the post-delete navigation.

Closes #277

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/admin/users/[id]/+page.svelte  | 29 +++++++++--------
 .../admin/users/[id]/page.svelte.spec.ts      | 32 ++++++++++++-------
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/frontend/src/routes/admin/users/[id]/+page.svelte b/frontend/src/routes/admin/users/[id]/+page.svelte
index 9296e057..ac94b9a8 100644
--- a/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -15,16 +15,6 @@ const unsaved = createUnsavedWarning();
 
 const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string }) => g.id) ?? []);
 
-let deleteFormEl = $state<HTMLFormElement | null>(null);
-
-async function handleDelete() {
-	const confirmed = await confirm({
-		title: m.admin_user_delete_confirm({ username: data.editUser.email }),
-		destructive: true
-	});
-	if (confirmed) deleteFormEl!.requestSubmit();
-}
-
 $effect(() => {
 	if (form?.success) unsaved.clearOnSuccess();
 });
@@ -51,10 +41,23 @@ $effect(() => {
 		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
 			{m.admin_user_edit_heading({ username: data.editUser.email })}
 		</h2>
-		<form bind:this={deleteFormEl} method="POST" action="?/delete" use:enhance>
+		<form
+			method="POST"
+			action="?/delete"
+			use:enhance={async ({ cancel }) => {
+				const confirmed = await confirm({
+					title: m.admin_user_delete_confirm({ username: data.editUser.email }),
+					destructive: true
+				});
+				if (!confirmed) {
+					cancel();
+				} else {
+					unsaved.clearOnSuccess();
+				}
+			}}
+		>
 			<button
-				type="button"
-				onclick={handleDelete}
+				type="submit"
 				class="rounded-sm border border-red-200 bg-red-50 px-3 py-1 font-sans text-xs font-bold tracking-widest text-red-700 uppercase transition-colors hover:bg-red-100 dark:border-red-900 dark:bg-red-950/30 dark:text-red-400"
 			>
 				{m.btn_delete()}…
diff --git a/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts b/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts
index 4afb89fa..558c6969 100644
--- a/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts
+++ b/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts
@@ -4,7 +4,17 @@ import { page } from 'vitest/browser';
 import Page from './+page.svelte';
 import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
 
-vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+const cancelMock = vi.hoisted(() => vi.fn());
+
+vi.mock('$app/forms', () => ({
+	enhance: (form: HTMLFormElement, callback?: (args: { cancel: () => void }) => Promise<void>) => {
+		form.addEventListener('submit', async (e) => {
+			e.preventDefault();
+			if (callback) await callback({ cancel: cancelMock });
+		});
+		return () => {};
+	}
+}));
 vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
 
 import { beforeNavigate, goto } from '$app/navigation';
@@ -161,39 +171,39 @@ describe('Admin edit user page – feedback', () => {
 // ─── Delete confirmation ──────────────────────────────────────────────────────
 
 describe('Admin edit user page – delete confirmation', () => {
-	it('delete button has type=button (does not submit natively)', async () => {
+	beforeEach(() => cancelMock.mockClear());
+
+	it('delete button has type=submit', async () => {
 		renderPage({ data: baseData, form: null });
 		const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
 		const deleteBtn = deleteForm.querySelector('button') as HTMLButtonElement;
-		expect(deleteBtn.type).toBe('button');
+		expect(deleteBtn.type).toBe('submit');
 	});
 
-	it('does not submit delete form when user cancels', async () => {
+	it('calls cancel() and does not submit when user cancels', async () => {
 		const { service } = renderPage({ data: baseData, form: null });
 		const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
-		const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
+		const deleteBtn = deleteForm.querySelector('button') as HTMLButtonElement;
 
-		const deleteBtn = deleteForm.querySelector('button[type="button"]') as HTMLButtonElement;
 		deleteBtn.click();
 		await vi.waitFor(() => expect(service.options).not.toBeNull());
 		service.settle(false);
 		await vi.waitFor(() => expect(service.options).toBeNull());
 
-		expect(requestSubmit).not.toHaveBeenCalled();
+		expect(cancelMock).toHaveBeenCalledOnce();
 	});
 
-	it('submits delete form when user confirms', async () => {
+	it('does not call cancel() and allows submit when user confirms', async () => {
 		const { service } = renderPage({ data: baseData, form: null });
 		const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
-		const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
+		const deleteBtn = deleteForm.querySelector('button') as HTMLButtonElement;
 
-		const deleteBtn = deleteForm.querySelector('button[type="button"]') as HTMLButtonElement;
 		deleteBtn.click();
 		await vi.waitFor(() => expect(service.options).not.toBeNull());
 		service.settle(true);
 		await vi.waitFor(() => expect(service.options).toBeNull());
 
-		expect(requestSubmit).toHaveBeenCalledOnce();
+		expect(cancelMock).not.toHaveBeenCalled();
 	});
 });