From 002c02816be26d37f8dfc8ff407d71b4f301f0bd Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 20 Feb 2025 13:56:49 +0530
Subject: [PATCH] fix: confirm component spacing. use `<p>`s to separate out
 content for correct spacing.

---
 src/lib/components/confirm.svelte             | 27 ++++++++++++++++---
 src/lib/pages/domains/delete.svelte           | 20 ++++++++++----
 src/routes/(console)/account/delete.svelte    |  2 --
 src/routes/(console)/account/deleteMfa.svelte |  4 +--
 .../domains/deleteDomainModal.svelte          | 17 ++----------
 .../deleteCertificateModal.svelte             |  8 +-----
 .../platforms/[platform]/delete.svelte        |  6 ++++-
 .../domains/deleteDomainModal.svelte          |  2 +-
 8 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/src/lib/components/confirm.svelte b/src/lib/components/confirm.svelte
index 6faebac89..6e37223d5 100644
--- a/src/lib/components/confirm.svelte
+++ b/src/lib/components/confirm.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button, Form, InputCheckbox } from '$lib/elements/forms';
     import { Alert, Dialog, Layout } from '@appwrite.io/pink-svelte';
 
     export let open: boolean;
@@ -8,9 +8,13 @@
     export let action: string = 'Delete';
     export let canDelete: boolean = true;
     export let disabled: boolean = false;
+    export let confirmDeletion: boolean = false;
     export let onSubmit: (e: SubmitEvent) => Promise<void> | void = function () {
         return;
     };
+
+    let confirm = false;
+    let checkboxId = `delete_${title.replaceAll(' ', '_').toLowerCase()}`;
 </script>
 
 <Form isModal {onSubmit}>
@@ -25,13 +29,30 @@
                 {error}
             </Alert.Inline>
         {/if}
-        <slot />
+
+        <Layout.Stack gap="l">
+            <slot />
+
+            {#if confirmDeletion}
+                <InputCheckbox
+                    size="s"
+                    required
+                    id={checkboxId}
+                    bind:checked={confirm}
+                    label="I understand and confirm" />
+            {/if}
+        </Layout.Stack>
+
         <svelte:fragment slot="footer">
             <Layout.Stack direction="row" gap="s" justifyContent="flex-end">
                 <slot name="footer">
                     <Button text on:click={() => (open = false)}>Cancel</Button>
                     {#if canDelete}
-                        <Button danger submit {disabled}>{action}</Button>
+                        <Button
+                            danger
+                            submit
+                            disabled={disabled || (confirmDeletion ? !confirm : false)}
+                            >{action}</Button>
                     {/if}
                 </slot>
             </Layout.Stack>
diff --git a/src/lib/pages/domains/delete.svelte b/src/lib/pages/domains/delete.svelte
index 98090caee..317981038 100644
--- a/src/lib/pages/domains/delete.svelte
+++ b/src/lib/pages/domains/delete.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { invalidate } from '$app/navigation';
     import type { Models } from '@appwrite.io/console';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import type { Dependencies } from '$lib/constants';
     import Confirm from '$lib/components/confirm.svelte';
 
@@ -15,6 +13,18 @@
 
     let error: string;
 
+    function getCorrectMessage(): string {
+        const resourceType = selectedDomain.resourceType;
+        switch (resourceType) {
+            case 'api':
+                return `access ${resourceType}`;
+            case 'function':
+                return `execute your ${resourceType}`;
+            case 'site':
+                return `view your ${resourceType} `;
+        }
+    }
+
     async function deleteDomain() {
         try {
             await sdk.forProject.proxy.deleteRule(selectedDomain.$id);
@@ -34,6 +44,6 @@
 
 a
 <Confirm onSubmit={deleteDomain} title="Delete domain" bind:open={showDelete} bind:error>
-    Are you sure you want to delete <b>{selectedDomain?.domain}</b>? You will no longer be able to
-    execute your function by visiting this domain.
+    <p data-private>Are you sure you want to delete <b>{selectedDomain?.domain}</b>?</p>
+    <p>You will no longer be able to {getCorrectMessage()} by visiting this domain.</p>
 </Confirm>
diff --git a/src/routes/(console)/account/delete.svelte b/src/routes/(console)/account/delete.svelte
index d81d4fe7b..b7bf6fa15 100644
--- a/src/routes/(console)/account/delete.svelte
+++ b/src/routes/(console)/account/delete.svelte
@@ -3,10 +3,8 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { Dialog, Layout } from '@appwrite.io/pink-svelte';
 
     export let showDelete = false;
     let error: string;
diff --git a/src/routes/(console)/account/deleteMfa.svelte b/src/routes/(console)/account/deleteMfa.svelte
index b709f001d..e37bd9d49 100644
--- a/src/routes/(console)/account/deleteMfa.svelte
+++ b/src/routes/(console)/account/deleteMfa.svelte
@@ -38,6 +38,6 @@
     title="Delete authentication method"
     bind:open={showDelete}
     bind:error>
-    Are you sure you want to delete this authentication method? You will no longer be able to use
-    this method to authenticate your account.
+    <p>Are you sure you want to delete this authentication method?</p>
+    <p>You will no longer be able to use this method to authenticate your account.</p>
 </Confirm>
diff --git a/src/routes/(console)/organization-[organization]/domains/deleteDomainModal.svelte b/src/routes/(console)/organization-[organization]/domains/deleteDomainModal.svelte
index 56b5d9b9f..4e4d39026 100644
--- a/src/routes/(console)/organization-[organization]/domains/deleteDomainModal.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/deleteDomainModal.svelte
@@ -10,7 +10,6 @@
 
     export let show = false;
     export let selectedDomain: Models.ProxyRule;
-    let confirm = false;
     let error = '';
 
     async function deleteDomain() {
@@ -32,19 +31,7 @@
 
 <Confirm title="Delete domain" bind:open={show} onSubmit={deleteDomain} bind:error>
     {#if selectedDomain}
-        <p data-private>
-            Are you sure you want to delete <b>{selectedDomain.domain}</b>? You will no longer be
-            able to execute your function by visiting this domain.
-        </p>
+        <p data-private>Are you sure you want to delete <b>{selectedDomain.domain}</b>?</p>
+        <p>You will no longer be able to execute your function by visiting this domain.</p>
     {/if}
-    <InputCheckbox
-        required
-        bind:checked={confirm}
-        id="confirm"
-        label="I understand and confirm"
-        size="s" />
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button secondary submit disabled={!confirm}>Delete</Button>
-    </svelte:fragment>
 </Confirm>
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/certificates/deleteCertificateModal.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/certificates/deleteCertificateModal.svelte
index ef2ed13c0..f0f5ec638 100644
--- a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/certificates/deleteCertificateModal.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/certificates/deleteCertificateModal.svelte
@@ -30,11 +30,5 @@
 </script>
 
 <Confirm title="Delete certificate" bind:open={show} onSubmit={deleteCertificate} bind:error>
-    <Typography.Text>
-        Are you sure you want to delete SSL certificate? This action is irreversible.
-    </Typography.Text>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button secondary submit danger>Delete</Button>
-    </svelte:fragment>
+    Are you sure you want to delete SSL certificate? This action is irreversible.
 </Confirm>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/[platform]/delete.svelte b/src/routes/(console)/project-[project]/overview/platforms/[platform]/delete.svelte
index 2d139fb41..bb1754063 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/delete.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/delete.svelte
@@ -29,6 +29,10 @@
     }
 </script>
 
-<Confirm onSubmit={handleDelete} title="Delete platform" bind:open={showDelete} bind:error>
+<Confirm
+    onSubmit={handleDelete}
+    title="Delete platform"
+    bind:open={showDelete}
+    bind:error>
     The Platform will be permanently deleted. This action is irreversible.
 </Confirm>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/deleteDomainModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/deleteDomainModal.svelte
index 37d8c9b19..f3bcf72d9 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/deleteDomainModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/deleteDomainModal.svelte
@@ -34,7 +34,7 @@
     {#if selectedDomain}
         <p data-private>
             Are you sure you want to delete <b>{selectedDomain.domain}</b>? You will no longer be
-            able to execute your function by visiting this domain.
+            able to view your site by visiting this domain.
         </p>
     {/if}
     <InputCheckbox