From 14fc5cbc54753d3eb370ef20fb5e72d39861ea32 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 12 Apr 2026 14:06:54 +0200
Subject: [PATCH] refactor(admin): replace window.confirm with ConfirmService
 in admin group delete

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

diff --git a/frontend/src/routes/admin/groups/[id]/+page.svelte b/frontend/src/routes/admin/groups/[id]/+page.svelte
index abe20d6b..898a8214 100644
--- a/frontend/src/routes/admin/groups/[id]/+page.svelte
+++ b/frontend/src/routes/admin/groups/[id]/+page.svelte
@@ -2,12 +2,24 @@
 import { enhance } from '$app/forms';
 import { beforeNavigate, goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
+import { getConfirmService } from '$lib/services/confirm.svelte.js';
 
 let { data, form } = $props();
 
+const { confirm } = getConfirmService();
+
 let isDirty = $state(false);
 let showUnsavedWarning = $state(false);
 let discardTarget: string | null = $state(null);
+let deleteFormEl = $state<HTMLFormElement | null>(null);
+
+async function handleDelete() {
+	const confirmed = await confirm({
+		title: m.admin_group_delete_confirm(),
+		destructive: true
+	});
+	if (confirmed) deleteFormEl!.requestSubmit();
+}
 
 beforeNavigate(({ cancel, to }) => {
 	if (isDirty) {
@@ -59,18 +71,10 @@ const ADMIN_PERMISSIONS = $derived([
 		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
 			{m.admin_group_edit_heading({ name: data.group.name })}
 		</h2>
-		<form
-			method="POST"
-			action="?/delete"
-			use:enhance={({ cancel }) => {
-				if (!confirm(m.admin_group_delete_confirm())) cancel();
-				return async ({ update }) => {
-					await update();
-				};
-			}}
-		>
+		<form bind:this={deleteFormEl} method="POST" action="?/delete" use:enhance>
 			<button
-				type="submit"
+				type="button"
+				onclick={handleDelete}
 				class="rounded-sm border border-red-200 bg-red-50 px-3 py-1.5 font-sans text-xs font-bold tracking-widest text-red-700 uppercase transition-colors hover:bg-red-100 dark:border-red-800 dark:bg-red-950/40 dark:text-red-400 dark:hover:bg-red-950/60"
 			>
 				{m.btn_delete()}
diff --git a/frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts b/frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts
index 426ca22c..79daffa1 100644
--- a/frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts
+++ b/frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts
@@ -2,6 +2,7 @@ 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';
+import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
 
 vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
 vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
@@ -11,24 +12,35 @@ import { beforeNavigate, goto } from '$app/navigation';
 const baseGroup = { id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] };
 const baseData = { group: baseGroup };
 
+type PageProps = { data: typeof baseData; form: Record<string, unknown> | null };
+
+function renderPage(props: PageProps) {
+	const service = createConfirmService();
+	const result = render(Page, {
+		props,
+		context: new Map([[CONFIRM_KEY, service]])
+	});
+	return { ...result, service };
+}
+
 afterEach(cleanup);
 
 // ─── Rendering ────────────────────────────────────────────────────────────────
 
 describe('Admin edit group page – rendering', () => {
 	it('renders the heading with group name', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ 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 });
+		renderPage({ 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 });
+		renderPage({ data: baseData, form: null });
 		const checkbox = document.querySelector<HTMLInputElement>(
 			'input[type="checkbox"][name="permissions"][value="WRITE_ALL"]'
 		);
@@ -36,14 +48,14 @@ describe('Admin edit group page – rendering', () => {
 	});
 
 	it('renders the cancel link pointing to /admin/groups', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		await expect
 			.element(page.getByRole('link', { name: /Abbrechen/i }))
 			.toHaveAttribute('href', '/admin/groups');
 	});
 
 	it('renders a READ_ALL checkbox in the standard permissions section', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const cb = document.querySelector<HTMLInputElement>(
 			'input[type="checkbox"][name="permissions"][value="READ_ALL"]'
 		);
@@ -51,7 +63,7 @@ describe('Admin edit group page – rendering', () => {
 	});
 
 	it('renders an ANNOTATE_ALL checkbox in the standard permissions section', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const cb = document.querySelector<HTMLInputElement>(
 			'input[type="checkbox"][name="permissions"][value="ANNOTATE_ALL"]'
 		);
@@ -60,7 +72,7 @@ describe('Admin edit group page – rendering', () => {
 
 	it('pre-checks READ_ALL when group has it', async () => {
 		const data = { group: { id: 'g2', name: 'Leser', permissions: ['READ_ALL'] } };
-		render(Page, { data, form: null });
+		renderPage({ data, form: null });
 		const cb = document.querySelector<HTMLInputElement>(
 			'input[type="checkbox"][name="permissions"][value="READ_ALL"]'
 		);
@@ -71,7 +83,7 @@ describe('Admin edit group page – rendering', () => {
 		const data = {
 			group: { id: 'g3', name: 'Annotatoren', permissions: ['READ_ALL', 'ANNOTATE_ALL'] }
 		};
-		render(Page, { data, form: null });
+		renderPage({ data, form: null });
 		const cb = document.querySelector<HTMLInputElement>(
 			'input[type="checkbox"][name="permissions"][value="ANNOTATE_ALL"]'
 		);
@@ -79,18 +91,57 @@ describe('Admin edit group page – rendering', () => {
 	});
 });
 
+// ─── Delete confirmation ──────────────────────────────────────────────────────
+
+describe('Admin edit group page – delete confirmation', () => {
+	it('delete button has type=button (does not submit natively)', 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');
+	});
+
+	it('does not submit delete form 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[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();
+	});
+
+	it('submits delete form 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[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();
+	});
+});
+
 // ─── 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 });
+		renderPage({ 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 });
+		renderPage({ data: baseData, form: null });
 		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
 
 		document
@@ -105,7 +156,7 @@ describe('Admin edit group page – unsaved-changes guard', () => {
 	});
 
 	it('does not cancel navigation when form is clean', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
 
 		const cancel = vi.fn();
@@ -115,7 +166,7 @@ describe('Admin edit group page – unsaved-changes guard', () => {
 	});
 
 	it('discard button calls goto with the target URL', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
 
 		document
@@ -130,7 +181,7 @@ describe('Admin edit group page – unsaved-changes guard', () => {
 	});
 
 	it('clears dirty state when form saves successfully', async () => {
-		const { rerender } = render(Page, { data: baseData, form: null });
+		const { rerender } = renderPage({ data: baseData, form: null });
 		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
 
 		document