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}
- Enter '{verification}' to confirm the action + { + const ele = /** @type {HTMLInputElement} */ (e.target); + ele.setCustomValidity(''); + }} + > + Enter '{verification}' to confirm the action +
{/if} diff --git a/frontend/src/lib/components/modal/ScimModal.svelte b/frontend/src/lib/components/modal/ScimModal.svelte index 1fdb34b..a90bab1 100644 --- a/frontend/src/lib/components/modal/ScimModal.svelte +++ b/frontend/src/lib/components/modal/ScimModal.svelte @@ -389,6 +389,7 @@ headline="Rotate SCIM Token" bind:visible={isRotateAlertVisible} onConfirm={onConfirmRotateToken} + verification="rotate" >

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} />