From 7ab98b6cba285eebb72e193970376a6877835b2b Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 3 Jan 2025 12:40:30 +0530
Subject: [PATCH] add: confirm checkbox on deletion.

---
 .../settings/deleteModal.svelte               | 28 ++++++++++++++-----
 .../site-[site]/settings/deleteModal.svelte   | 28 ++++++++++++++-----
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/deleteModal.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/deleteModal.svelte
index 589f01e39..a178284d1 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/deleteModal.svelte
+++ b/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>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/deleteModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/deleteModal.svelte
index 76dd3046b..021c067a1 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/deleteModal.svelte
+++ b/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>