Merge pull request #1597 from appwrite/add-friction-to-deletions

Add confirmation to deletions

Author: ItzNotABug

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

@@ -27,4 +27,4 @@
     </svelte:fragment>
 </CardGrid>
 
-<Delete bind:showDelete />
+<Delete projectFunction={$func} bind:showDelete />

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

@@ -6,13 +6,18 @@
     import Confirm from '$lib/components/confirm.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { type Models } from '@appwrite.io/console';
+    import { FormList, InputCheckbox } from '$lib/elements/forms';
 
     export let showDelete = false;
-    const functionId = $page.params.function;
+    export let projectFunction: Models.Function;
+
     let error: string;
+    let confirmedDeletion = false;
+
     const handleSubmit = async () => {
         try {
-            await sdk.forProject.functions.delete(functionId);
+            await sdk.forProject.functions.delete(projectFunction.$id);
             showDelete = false;
             addNotification({
                 type: 'success',
@@ -27,6 +32,25 @@
     };
 </script>
 
-<Confirm onSubmit={handleSubmit} title="Delete function" bind:open={showDelete} bind:error>
-    Are you sure you want to delete this function and all associated deployments from your project?
+<Confirm
+    onSubmit={handleSubmit}
+    disabled={!confirmedDeletion}
+    title="Delete function"
+    bind:open={showDelete}
+    bind:error>
+    <FormList>
+        <p data-private>Are you sure you want to delete <strong>{projectFunction.name}</strong>?</p>
+
+        <p data-private>
+            The function and all associated deployments will be permanently deleted. This action is
+            irreversible.
+        </p>
+
+        <InputCheckbox
+            size="s"
+            required
+            id="delete_function"
+            bind:checked={confirmedDeletion}
+            label="I understand and confirm" />
+    </FormList>
 </Confirm>

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

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { BoxAvatar, CardGrid } from '$lib/components';
-    import Heading from '$lib/components/heading.svelte';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import type { Models } from '@appwrite.io/console';
@@ -28,4 +27,4 @@
     </svelte:fragment>
 </CardGrid>
 
-<Delete bind:showDelete />
+<Delete {site} bind:showDelete />

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

@@ -6,13 +6,15 @@
     import Confirm from '$lib/components/confirm.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { type Models } from '@appwrite.io/console';
 
+    export let site: Models.Site;
     export let showDelete = false;
-    const siteId = $page.params.site;
+
     let error: string;
     const handleSubmit = async () => {
         try {
-            await sdk.forProject.sites.delete(siteId);
+            await sdk.forProject.sites.delete(site.$id);
             showDelete = false;
             addNotification({
                 type: 'success',