add: confirm checkbox on deletion.

src/routes/(console)/project-[project]/functions/function-[function]/settings/deleteModal.svelte

@@ -2,15 +2,18 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
+    import { Button, InputCheckbox } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { FormList } from '$lib/elements/forms/index.js';
 
     export let showDelete = false;
     const functionId = $page.params.function;
 
+    let confirmedDeletion = false;
+
     const handleSubmit = async () => {
         try {
             await sdk.forProject.functions.delete(functionId);
@@ -38,12 +41,23 @@
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <p data-private>
-        Are you sure you want to delete this function and all associated deployments from your
-        project?
-    </p>
+    <FormList>
+        <p data-private>
+            Are you sure you want to delete this function and all associated deployments from your
+            project?
+        </p>
+
+        <div class="input-check-box-friction">
+            <InputCheckbox
+                required
+                size="s"
+                id="delete_policy"
+                bind:checked={confirmedDeletion}
+                label="I understand and confirm" />
+        </div>
+    </FormList>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button secondary submit>Delete</Button>
+        <Button secondary submit disabled={!confirmedDeletion}>Delete</Button>
     </svelte:fragment>
 </Modal>

src/routes/(console)/project-[project]/sites/site-[site]/settings/deleteModal.svelte

@@ -2,15 +2,18 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
+    import { Button, InputCheckbox } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { FormList } from '$lib/elements/forms/index.js';
 
     export let showDelete = false;
     const siteId = $page.params.site;
 
+    let confirmedDeletion = false;
+
     const handleSubmit = async () => {
         try {
             await sdk.forProject.sites.delete(siteId);
@@ -37,12 +40,23 @@
     onSubmit={handleSubmit}
     icon="exclamation"
     state="warning">
-    <p data-private>
-        Are you sure you want to delete this site and all associated deployments from your
-        project?
-    </p>
+    <FormList>
+        <p data-private>
+            Are you sure you want to delete this site and all associated deployments from your
+            project?
+        </p>
+
+        <div class="input-check-box-friction">
+            <InputCheckbox
+                required
+                size="s"
+                id="delete_policy"
+                bind:checked={confirmedDeletion}
+                label="I understand and confirm" />
+        </div>
+    </FormList>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button secondary submit>Delete</Button>
+        <Button secondary submit disabled={!confirmedDeletion}>Delete</Button>
     </svelte:fragment>
 </Modal>