diff --git a/frontend/src/lib/components/Alert.svelte b/frontend/src/lib/components/Alert.svelte index 6c61b61..d0efa79 100644 --- a/frontend/src/lib/components/Alert.svelte +++ b/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}
Are you sure you want to rotate the SCIM bearer token for
@@ -401,7 +402,12 @@
-
Permanently remove all disabled recipients for
{company?.name} now?
@@ -417,6 +423,7 @@
headline="Delete SCIM Config"
bind:visible={isDeleteAlertVisible}
onConfirm={onConfirmDelete}
+ verification="delete"
>
Are you sure you want to delete the SCIM configuration for
diff --git a/frontend/src/routes/company/[id]/+page.svelte b/frontend/src/routes/company/[id]/+page.svelte
index 77a9d09..ef112e0 100644
--- a/frontend/src/routes/company/[id]/+page.svelte
+++ b/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}
/>