From 385366cdae28f2a11e1b503bce3674624f5a217e Mon Sep 17 00:00:00 2001
From: melinoix <titouan.ameline@gmail.com>
Date: Mon, 3 Feb 2025 12:28:46 +0100
Subject: [PATCH] feat: add extra confirmation when deleting domain or
 importing a backup  (#1391)

* Add word confirmation when deleting domain/import a backup

* New promptModal & fix modal boolean validation & fix flash errors

* ruff format

* added promptmodal for the supression of a domain and corrected useless action.ts delete hidden input on forms

* tolowercase yes to have m.yes = Yes instead of yes

* corrected tests

* changed tests and test-ids

* corrected tests

* correct tests

---------

Co-authored-by: Mohamed-Hacene <mohamedhacene.b@gmail.com>
---
 frontend/messages/en.json                     |   3 +
 frontend/messages/fr.json                     |   3 +
 .../Modals/DeleteConfirmModal.svelte          |   1 -
 .../Modals/PromptConfirmModal.svelte          | 103 ++++++++++++++++++
 .../TableRowActions/TableRowActions.svelte    |  63 +++++++++--
 frontend/src/lib/utils/actions.ts             |  47 ++++----
 .../[id=uuid]/+page.server.ts                 |   1 +
 .../(internal)/backup-restore/+page.server.ts |  24 ++--
 .../(internal)/backup-restore/+page.svelte    |  26 ++++-
 .../detailed/compliance-assessments.test.ts   |   5 +-
 .../tests/functional/user-permissions.test.ts |   6 +-
 frontend/tests/functional/user-route.test.ts  |   6 +-
 frontend/tests/utils/page-content.ts          |  12 ++
 13 files changed, 247 insertions(+), 53 deletions(-)
 create mode 100644 frontend/src/lib/components/Modals/PromptConfirmModal.svelte

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 30af4ac5c..3ef3e21f1 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -785,6 +785,9 @@
 	"startDate": "Start date",
 	"startDateHelpText": "Start date (useful for timeline)",
 	"backupLoadingError": "An error occurred while loading the backup.",
+	"backupVersionError": "Can't load the backup, the version of the backup is invalid",
+	"confirmYes": "Confirm by typing 'yes' below:",
+	"confirmYesPlaceHolder": "Type 'yes' to confirm",
 	"backupGreaterVersionError": "Can't load the backup, the version of the backup is higher than the current version of your application.",
 	"backupLowerVersionError": "An error occurred, the backup version may be too old, if so it must be updated before retrying.",
 	"entityAssessmentEvidenceHelpText": "An external questionnaire",
diff --git a/frontend/messages/fr.json b/frontend/messages/fr.json
index 5788f259f..8ab2aa4d2 100644
--- a/frontend/messages/fr.json
+++ b/frontend/messages/fr.json
@@ -1131,6 +1131,9 @@
 	"errorOccuredDuringImport": "Une erreur s'est produite lors de l'import",
 	"successfullyImportedFolder": "Domaine importé avec succès",
 	"missingLibrariesInImport": "Certaines bibliothèques sont manquantes, voir la liste ci-dessus",
+	"backupVersionError": "Impossible de charger la sauvegarde, la version de la sauvegarde est invalide",
+	"confirmYes": "Confirmez en écrivant 'oui' puis validez:",
+	"confirmYesPlaceHolder": "Écrivez 'oui' puis validez",
 	"loadMissingLibraries": "Charger les librairies manquantes",
 	"loadMissingLibrariesHelpText": "Charger les librairies manquantes pour compléter l'import si elles sont disponibles.",
 	"yes": "Oui",
diff --git a/frontend/src/lib/components/Modals/DeleteConfirmModal.svelte b/frontend/src/lib/components/Modals/DeleteConfirmModal.svelte
index a3f044ef3..665a98866 100644
--- a/frontend/src/lib/components/Modals/DeleteConfirmModal.svelte
+++ b/frontend/src/lib/components/Modals/DeleteConfirmModal.svelte
@@ -42,7 +42,6 @@
 			<!-- prettier-ignore -->
 			<footer class="modal-footer {parent.regionFooter}">
         <button type="button" class="btn {parent.buttonNeutral}" data-testid="delete-cancel-button" on:click={parent.onClose}>{m.cancel()}</button>
-        <input type="hidden" name="delete" />
         <input type="hidden" name="urlmodel" value={URLModel} />
         <input type="hidden" name="id" value={id} />
         <button class="btn variant-filled-error" data-testid="delete-confirm-button" type="submit" on:click={parent.onClose}>{m.submit()}</button>
diff --git a/frontend/src/lib/components/Modals/PromptConfirmModal.svelte b/frontend/src/lib/components/Modals/PromptConfirmModal.svelte
new file mode 100644
index 000000000..905a883d9
--- /dev/null
+++ b/frontend/src/lib/components/Modals/PromptConfirmModal.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+	import type { urlModel } from '$lib/utils/types';
+
+	// Props
+	/** Exposes parent props to this component. */
+	export let parent: any;
+
+	// Stores
+	import { getModalStore } from '@skeletonlabs/skeleton';
+	import type { ModalStore } from '@skeletonlabs/skeleton';
+
+	import * as m from '$paraglide/messages';
+
+	const modalStore: ModalStore = getModalStore();
+
+	export let _form = {};
+	export let URLModel: urlModel | '' = '';
+	export let id: string = '';
+	export let formAction: string = '';
+	export let bodyComponent: ComponentType | undefined;
+	export let bodyProps: Record<string, unknown> = {};
+
+	import { superForm } from 'sveltekit-superforms';
+
+	const { form } = _form
+		? superForm(_form, {
+				dataType: 'json',
+				id: `confirm-modal-form-${crypto.randomUUID()}`
+			})
+		: null;
+
+	// Base Classes
+	const cBase = 'card p-4 w-modal shadow-xl space-y-4';
+	const cHeader = 'text-2xl font-bold';
+	const cForm = 'p-4 space-y-4 rounded-container-token';
+
+	import SuperDebug from 'sveltekit-superforms';
+	import type { ComponentType } from 'svelte';
+	import { enhance } from '$app/forms';
+	export let debug = false;
+
+	let userInput = '';
+</script>
+
+{#if $modalStore[0]}
+	<div class="modal-example-form {cBase}">
+		<header class={cHeader}>{$modalStore[0].title ?? '(title missing)'}</header>
+		<article>{$modalStore[0].body ?? '(body missing)'}</article>
+
+		<p class="text-red-500 font-bold">{m.confirmYes()}</p>
+		<input
+			type="text"
+			data-testid="delete-prompt-confirm-textfield"
+			bind:value={userInput}
+			placeholder={m.confirmYesPlaceHolder()}
+			class="w-full mt-2 p-2 border border-gray-300 rounded"
+		/>
+
+		{#if bodyComponent}
+			<div class="max-h-96 overflow-y-scroll scroll card">
+				<svelte:component this={bodyComponent} {...bodyProps} />
+			</div>
+		{/if}
+		{#if _form && Object.keys(_form).length > 0}
+			<form method="POST" action={formAction} use:enhance class="modal-form {cForm}">
+				<footer class="modal-footer {parent.regionFooter}">
+					<button type="button" class="btn {parent.buttonNeutral}" on:click={parent.onClose}
+						>{m.cancel()}</button
+					>
+					<input type="hidden" name="urlmodel" value={URLModel} />
+					<input type="hidden" name="id" value={id} />
+					<button
+						class="btn variant-filled-error"
+						type="submit"
+						data-testid="delete-prompt-confirm-button"
+						on:click={parent.onConfirm}
+						disabled={!userInput || userInput.trim().toLowerCase() !== m.yes().toLowerCase()}
+					>
+						{m.submit()}
+					</button>
+				</footer>
+			</form>
+
+			{#if debug === true}
+				<SuperDebug data={$form} />
+			{/if}
+		{:else}
+			<footer class="modal-footer {parent.regionFooter}">
+				<button type="button" class="btn {parent.buttonNeutral}" on:click={parent.onClose}
+					>{m.cancel()}</button
+				>
+				<button
+					class="btn variant-filled-error"
+					type="button"
+					on:click={parent.onConfirm}
+					disabled={!userInput || userInput.trim().toLowerCase() !== m.yes().toLowerCase()}
+				>
+					{m.submit()}
+				</button>
+			</footer>
+		{/if}
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/TableRowActions/TableRowActions.svelte b/frontend/src/lib/components/TableRowActions/TableRowActions.svelte
index 0a15d1b05..64d5262f9 100644
--- a/frontend/src/lib/components/TableRowActions/TableRowActions.svelte
+++ b/frontend/src/lib/components/TableRowActions/TableRowActions.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import DeleteConfirmModal from '$lib/components/Modals/DeleteConfirmModal.svelte';
+	import PromptConfirmModal from '$lib/components/Modals/PromptConfirmModal.svelte';
 	import type { ModelMapEntry } from '$lib/utils/crud';
 	import type { urlModel } from '$lib/utils/types';
 	import type { ModalComponent, ModalSettings, ModalStore } from '@skeletonlabs/skeleton';
@@ -60,6 +61,38 @@
 		modalStore.trigger(modal);
 	}
 
+	function promptModalConfirmDelete(
+		id: string,
+		row: { [key: string]: string | number | boolean | null }
+	): void {
+		const modalComponent: ModalComponent = {
+			ref: PromptConfirmModal,
+			props: {
+				_form: deleteForm,
+				id: id,
+				debug: false,
+				URLModel: URLModel,
+				formAction: '?/delete'
+			}
+		};
+		const name =
+			URLModel === 'users' && row.first_name
+				? `${row.first_name} ${row.last_name} (${row.email})`
+				: (row.name ?? Object.values(row)[0]);
+		const body =
+			URLModel === 'users'
+				? m.deleteUserMessage({ name: name })
+				: m.deleteModalMessage({ name: name });
+		const modal: ModalSettings = {
+			type: 'component',
+			component: modalComponent,
+			// Data
+			title: m.deleteModalTitle(),
+			body: body
+		};
+		modalStore.trigger(modal);
+	}
+
 	const user = $page.data.user;
 	$: canDeleteObject = Object.hasOwn(user.permissions, `delete_${model?.name}`) && !preventDelete;
 	$: canEditObject = Object.hasOwn(user.permissions, `change_${model?.name}`);
@@ -98,15 +131,27 @@
 			>
 		{/if}
 		{#if displayDelete}
-			<button
-				on:click={(_) => {
-					modalConfirmDelete(row.meta[identifierField], row);
-					stopPropagation(_);
-				}}
-				on:keydown={() => modalConfirmDelete(row.meta.id, row)}
-				class="cursor-pointer hover:text-primary-500"
-				data-testid="tablerow-delete-button"><i class="fa-solid fa-trash" /></button
-			>
+			{#if URLModel === 'folders'}
+				<button
+					on:click={(_) => {
+						promptModalConfirmDelete(row.meta[identifierField], row);
+						stopPropagation(_);
+					}}
+					on:keydown={() => promptModalConfirmDelete(row.meta.id, row)}
+					class="cursor-pointer hover:text-primary-500"
+					data-testid="tablerow-delete-button"><i class="fa-solid fa-trash" /></button
+				>
+			{:else}
+				<button
+					on:click={(_) => {
+						modalConfirmDelete(row.meta[identifierField], row);
+						stopPropagation(_);
+					}}
+					on:keydown={() => modalConfirmDelete(row.meta.id, row)}
+					class="cursor-pointer hover:text-primary-500"
+					data-testid="tablerow-delete-button"><i class="fa-solid fa-trash" /></button
+				>
+			{/if}
 		{/if}
 	{/if}
 	<slot name="tail" />
diff --git a/frontend/src/lib/utils/actions.ts b/frontend/src/lib/utils/actions.ts
index 6d194dd09..7e7e9a43a 100644
--- a/frontend/src/lib/utils/actions.ts
+++ b/frontend/src/lib/utils/actions.ts
@@ -216,33 +216,30 @@ export async function defaultDeleteFormAction({
 		return fail(400, { form: deleteForm });
 	}
 
-	if (formData.has('delete')) {
-		const requestInitOptions: RequestInit = {
-			method: 'DELETE'
-		};
-		const res = await event.fetch(endpoint, requestInitOptions);
-		if (!res.ok) {
-			const response = await res.json();
-			if (response.error) {
-				setFlash({ type: 'error', message: safeTranslate(response.error) }, event);
-				return fail(403, { form: deleteForm });
-			}
-			if (response.non_field_errors) {
-				setError(deleteForm, 'non_field_errors', response.non_field_errors);
-			}
-			return fail(400, { form: deleteForm });
+	const requestInitOptions: RequestInit = {
+		method: 'DELETE'
+	};
+	const res = await event.fetch(endpoint, requestInitOptions);
+	if (!res.ok) {
+		const response = await res.json();
+		if (response.error) {
+			setFlash({ type: 'error', message: safeTranslate(response.error) }, event);
+			return fail(403, { form: deleteForm });
 		}
-		const model: string = urlParamModelVerboseName(urlModel!);
-		setFlash(
-			{
-				type: 'success',
-				message: m.successfullyDeletedObject({
-					object: safeTranslate(model).toLowerCase()
-				})
-			},
-			event
-		);
+		if (response.non_field_errors) {
+			setError(deleteForm, 'non_field_errors', response.non_field_errors);
+		}
+		return fail(400, { form: deleteForm });
 	}
+	setFlash(
+		{
+			type: 'success',
+			message: m.successfullyDeletedObject({
+				object: safeTranslate(model.localName).toLowerCase()
+			})
+		},
+		event
+	);
 
 	return { deleteForm };
 }
diff --git a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/+page.server.ts b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/+page.server.ts
index b750918ff..60a25d13e 100644
--- a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/+page.server.ts
@@ -77,6 +77,7 @@ export const actions: Actions = {
 		return nestedWriteFormAction({ event, action: 'create', redirectToWrittenObject });
 	},
 	delete: async (event) => {
+		console.log('delete');
 		return nestedDeleteFormAction({ event });
 	},
 	duplicate: async (event) => {
diff --git a/frontend/src/routes/(app)/(internal)/backup-restore/+page.server.ts b/frontend/src/routes/(app)/(internal)/backup-restore/+page.server.ts
index 53029e602..f3a8594cb 100644
--- a/frontend/src/routes/(app)/(internal)/backup-restore/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/backup-restore/+page.server.ts
@@ -13,7 +13,7 @@ export const actions: Actions = {
 	default: async (event) => {
 		const { request, fetch } = event;
 		const formData = Object.fromEntries(await request.formData());
-		if (!(formData.file as File).name || (formData.file as File).name === 'undefined') {
+		if (!(formData.file as File)?.name || (formData.file as File)?.name === 'undefined') {
 			return fail(400, {
 				error: true,
 				message: 'You must provide a file to upload'
@@ -32,13 +32,21 @@ export const actions: Actions = {
 			body: file
 		});
 		const data = await response.json();
-
-		if (response.status >= 400 && !data.error) {
-			setFlash({ type: 'error', message: m.backupLoadingError() }, event);
-		} else if (data.error === 'GreaterBackupVersion') {
-			setFlash({ type: 'error', message: m.backupGreaterVersionError() }, event);
-		} else if (data.error === 'LowerBackupVersion') {
-			setFlash({ type: 'error', message: m.backupLowerVersionError() }, event);
+		if (response.status >= 400) {
+			switch (data.error) {
+				case 'errorBackupInvalidVersion':
+					setFlash({ type: 'error', message: m.backupVersionError() }, event);
+					break;
+				case 'GreaterBackupVersion':
+					setFlash({ type: 'error', message: m.backupGreaterVersionError() }, event);
+					break;
+				case 'LowerBackupVersion':
+					setFlash({ type: 'error', message: m.backupLowerVersionError() }, event);
+					break;
+				default:
+					setFlash({ type: 'error', message: m.backupLoadingError() }, event);
+					break;
+			}
 		}
 
 		return {
diff --git a/frontend/src/routes/(app)/(internal)/backup-restore/+page.svelte b/frontend/src/routes/(app)/(internal)/backup-restore/+page.svelte
index c987bcc52..87e7ab006 100644
--- a/frontend/src/routes/(app)/(internal)/backup-restore/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/backup-restore/+page.svelte
@@ -2,21 +2,35 @@
 	import { enhance } from '$app/forms';
 	import { page } from '$app/stores';
 	import * as m from '$paraglide/messages';
+	import type { PageData } from './$types';
 
-	import { getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
+	export let data: PageData;
 
-	const modalStore = getModalStore();
+	import type { ModalSettings, ModalComponent, ModalStore } from '@skeletonlabs/skeleton';
+	import { getModalStore } from '@skeletonlabs/skeleton';
+	import PromptConfirmModal from '$lib/components/Modals/PromptConfirmModal.svelte';
+
+	const modalStore: ModalStore = getModalStore();
 
 	let form: HTMLFormElement;
 	let file: HTMLInputElement;
 
-	function modalConfirmUpload(): void {
+	// Function to handle modal confirmation for any action
+	function modalConfirm(): void {
+		const modalComponent: ModalComponent = {
+			ref: PromptConfirmModal
+		};
+
 		const modal: ModalSettings = {
-			type: 'confirm',
+			type: 'component',
+			component: modalComponent,
 			title: m.importBackup(),
 			body: m.confirmImportBackup(),
-			response: () => form.requestSubmit()
+			response: (r: boolean) => {
+				if (r) form.requestSubmit();
+			}
 		};
+
 		if (file) modalStore.trigger(modal);
 	}
 
@@ -56,7 +70,7 @@
 				<button
 					class="btn variant-filled mt-2 lg:mt-0 {uploadButtonStyles}"
 					type="button"
-					on:click={modalConfirmUpload}>{m.upload()}</button
+					on:click={modalConfirm}>{m.upload()}</button
 				>
 			</form>
 		</div>
diff --git a/frontend/tests/functional/detailed/compliance-assessments.test.ts b/frontend/tests/functional/detailed/compliance-assessments.test.ts
index 1d4f447ca..f5ca5e4cc 100644
--- a/frontend/tests/functional/detailed/compliance-assessments.test.ts
+++ b/frontend/tests/functional/detailed/compliance-assessments.test.ts
@@ -1,6 +1,7 @@
 import { LoginPage } from '../../utils/login-page.js';
 import { PageContent } from '../../utils/page-content.js';
 import { TestContent, test, expect } from '../../utils/test-utils.js';
+import * as m from '$paraglide/messages';
 
 let vars = TestContent.generateTestVars();
 let testObjectsData: { [k: string]: any } = TestContent.itemBuilder(vars);
@@ -209,6 +210,8 @@ test.afterAll('cleanup', async ({ browser }) => {
 	await loginPage.login();
 	await foldersPage.goto();
 	await foldersPage.deleteItemButton(vars.folderName).click();
-	await foldersPage.deleteModalConfirmButton.click();
+	await expect(foldersPage.deletePromptConfirmTextField()).toBeVisible();
+	await foldersPage.deletePromptConfirmTextField().fill(m.yes());
+	await foldersPage.deletePromptConfirmButton().click();
 	await expect(foldersPage.getRow(vars.folderName)).not.toBeVisible();
 });
diff --git a/frontend/tests/functional/user-permissions.test.ts b/frontend/tests/functional/user-permissions.test.ts
index 412cb716b..559d92117 100644
--- a/frontend/tests/functional/user-permissions.test.ts
+++ b/frontend/tests/functional/user-permissions.test.ts
@@ -1,5 +1,7 @@
 import { LoginPage } from '../utils/login-page.js';
 import { SideBar } from '../utils/sidebar.js';
+import * as m from '$paraglide/messages';
+
 import {
 	test,
 	expect,
@@ -221,7 +223,9 @@ Object.entries(userGroups).forEach(([userGroup, userGroupData]) => {
 			await loginPage.login();
 			await foldersPage.goto();
 			await foldersPage.deleteItemButton(vars.folderName).click();
-			await foldersPage.deleteModalConfirmButton.click();
+			await expect(foldersPage.deletePromptConfirmTextField()).toBeVisible();
+			await foldersPage.deletePromptConfirmTextField().fill(m.yes());
+			await foldersPage.deletePromptConfirmButton().click();
 			await expect(foldersPage.getRow(vars.folderName)).not.toBeVisible();
 			await usersPage.goto();
 			await usersPage.deleteItemButton(vars.user.email).click();
diff --git a/frontend/tests/functional/user-route.test.ts b/frontend/tests/functional/user-route.test.ts
index f1ea777f2..75645e240 100644
--- a/frontend/tests/functional/user-route.test.ts
+++ b/frontend/tests/functional/user-route.test.ts
@@ -1,6 +1,6 @@
 import { LoginPage } from '../utils/login-page.js';
 import { test, expect, setHttpResponsesListener, TestContent } from '../utils/test-utils.js';
-
+import * as m from '$paraglide/messages';
 const vars = TestContent.generateTestVars();
 
 test('user usual routine actions are working correctly', async ({
@@ -256,7 +256,9 @@ test('user usual routine actions are working correctly', async ({
 test.afterEach('cleanup', async ({ foldersPage, usersPage, page }) => {
 	await foldersPage.goto();
 	await foldersPage.deleteItemButton(vars.folderName).click();
-	await foldersPage.deleteModalConfirmButton.click();
+	await expect(foldersPage.deletePromptConfirmTextField()).toBeVisible();
+	await foldersPage.deletePromptConfirmTextField().fill(m.yes());
+	await foldersPage.deletePromptConfirmButton().click();
 	await expect(foldersPage.getRow(vars.folderName)).not.toBeVisible();
 
 	await usersPage.goto();
diff --git a/frontend/tests/utils/page-content.ts b/frontend/tests/utils/page-content.ts
index 90a34a935..eee9cc7b2 100644
--- a/frontend/tests/utils/page-content.ts
+++ b/frontend/tests/utils/page-content.ts
@@ -12,6 +12,8 @@ export class PageContent extends BasePage {
 	readonly deleteModalTitle: Locator;
 	readonly deleteModalConfirmButton: Locator;
 	readonly deleteModalCancelButton: Locator;
+	readonly deleteModalPromptConfirmButton: Locator;
+	readonly deleteModalPromptConfirmText: Locator;
 
 	constructor(
 		public readonly page: Page,
@@ -34,6 +36,8 @@ export class PageContent extends BasePage {
 		this.deleteModalTitle = this.page.getByTestId('modal-title');
 		this.deleteModalConfirmButton = this.page.getByTestId('delete-confirm-button');
 		this.deleteModalCancelButton = this.page.getByTestId('delete-cancel-button');
+		this.deleteModalPromptConfirmButton = this.page.getByTestId('delete-prompt-confirm-button');
+		this.deleteModalPromptConfirmText = this.page.getByTestId('delete-prompt-confirm-text');
 	}
 
 	async createItem(values: { [k: string]: any }, dependency?: any) {
@@ -136,6 +140,14 @@ export class PageContent extends BasePage {
 		return this.getRow(value).getByTestId('tablerow-delete-button');
 	}
 
+	deletePromptConfirmTextField() {
+		return this.page.getByTestId('delete-prompt-confirm-textfield');
+	}
+
+	deletePromptConfirmButton() {
+		return this.page.getByTestId('delete-prompt-confirm-button');
+	}
+
 	importItemButton(value: string, language?: string) {
 		return language
 			? this.getRow(value, language).getByTestId('tablerow-import-button')