fix use confirm modals for sensitive company actions

Signed-off-by: Ronni Skansing <rskansing@gmail.com>

frontend/src/lib/components/Alert.svelte

@@ -17,6 +17,8 @@
 
 	let isLoading = false;
 	let error = '';
+	// typed value when verification is required before confirming
+	let verificationText = '';
 	let alertElement;
 	let previousActiveElement;
 	let focusableElements = [];
@@ -183,6 +185,8 @@
 	};
 
 	const handleAlertClose = () => {
+		// reset the typed confirmation so it is empty next time the alert opens
+		verificationText = '';
 		// Restore focus to the previously focused element
 		if (previousActiveElement && typeof previousActiveElement.focus === 'function') {
 			previousActiveElement.focus();
@@ -214,6 +218,16 @@
 
 	const onClickConfirm = async (e) => {
 		e.preventDefault();
+		// require the user to type the verification word before proceeding
+		if (verification) {
+			const ele = /** @type {HTMLInputElement} */ (document.querySelector('#confirmVerification'));
+			if (verificationText !== verification) {
+				ele?.setCustomValidity(`Enter '${verification}' to confirm`);
+				ele?.reportValidity();
+				return;
+			}
+			ele?.setCustomValidity('');
+		}
 		isLoading = true;
 		try {
 			const res = await onConfirm();
@@ -306,7 +320,17 @@
 
 				{#if verification}
 					<div class="mt-4">
-						<TextField>Enter '{verification}' to confirm the action</TextField>
+						<TextField
+							bind:value={verificationText}
+							required
+							id="confirmVerification"
+							on:keydown={(e) => {
+								const ele = /** @type {HTMLInputElement} */ (e.target);
+								ele.setCustomValidity('');
+							}}
+						>
+							Enter '{verification}' to confirm the action
+						</TextField>
 					</div>
 				{/if}
 

frontend/src/lib/components/modal/ScimModal.svelte

@@ -389,6 +389,7 @@
 	headline="Rotate SCIM Token"
 	bind:visible={isRotateAlertVisible}
 	onConfirm={onConfirmRotateToken}
+	verification="rotate"
 >
 	<p>
 		Are you sure you want to rotate the SCIM bearer token for
@@ -401,7 +402,12 @@
 </Alert>
 
 <!-- prune disabled recipients confirmation -->
-<Alert headline="Remove disabled recipients" bind:visible={isPruneAlertVisible} onConfirm={onConfirmPrune}>
+<Alert
+	headline="Remove disabled recipients"
+	bind:visible={isPruneAlertVisible}
+	onConfirm={onConfirmPrune}
+	verification="purge"
+>
 	<p>
 		Permanently remove all <strong>disabled</strong> recipients for
 		<strong>{company?.name}</strong> now?
@@ -417,6 +423,7 @@
 	headline="Delete SCIM Config"
 	bind:visible={isDeleteAlertVisible}
 	onConfirm={onConfirmDelete}
+	verification="delete"
 >
 	<p>
 		Are you sure you want to delete the SCIM configuration for

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

@@ -359,6 +359,7 @@
 		list={['All data related to the company such as domains, campaign, recipients will be lost']}
 		name={company?.name}
 		onClick={onConfirmDelete}
+		confirm
 		bind:isVisible={isDeleteAlertVisible}
 	/>
 </main>