From 45fcad52307ba326a519a3aec03da82495da9d68 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 24 Sep 2024 17:05:42 +0530
Subject: [PATCH] add: confirmation to policy deletion.

---
 .../database-[database]/backups/policy.svelte | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
index 2f62d85da..1e49e5e0e 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
@@ -13,6 +13,7 @@
     import { Dependencies } from '$lib/constants';
     import { parseExpression } from 'cron-parser';
     import { toLocaleDateTime } from '$lib/helpers/date';
+    import { FormList, InputCheckbox } from '$lib/elements/forms/index.js';
 
     let showDropdown = [];
     let showDelete = false;
@@ -247,11 +248,25 @@
     bind:show={showDelete}
     headerDivider={false}
     onSubmit={deletePolicy}>
-    <!-- TODO: Add `This will also delete all the backups associated with this backups.` -->
-    <p class="text" data-private>
-        Are you sure you want to delete <b>{selectedPolicy.name}</b> policy?
-        <br />This action is irreversible.
-    </p>
+    <FormList>
+        <div class="u-flex-vertical u-gap-16">
+            <p class="text" data-private>
+                Are you sure you want to delete the <b>{selectedPolicy.name}</b> policy?
+            </p>
+
+            <p class="text" data-private>
+                <b
+                    >This will also delete all backups associated with this policy. This action is
+                    irreversible.</b>
+            </p>
+
+            <InputCheckbox
+                required
+                size="small"
+                id="delete_policy"
+                label="I understand and confirm" />
+        </div>
+    </FormList>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
         <Button secondary submit>Delete</Button>