pause with dialog

src/routes/console/project-[project]/settings/+page.svelte

@@ -14,12 +14,14 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import PauseProject from './pauseProject.svelte';
 
     let name: string = null;
     let showDelete = false;
     let updating = false;
     const endpoint = sdk.forConsole.client.config.endpoint;
     const projectId = $page.params.project;
+    let showPause = false;
 
     onMount(async () => {
         name ??= $project.name;
@@ -45,6 +47,10 @@
     }
 
     async function toggleProject() {
+        if (!$project.paused && !showPause) {
+            showPause = true;
+            return;
+        }
         updating = true;
         try {
             const path = '/projects/' + $project.$id;
@@ -71,6 +77,8 @@
                 message: error.message
             });
             trackError(error, Submit.ProjectUpdateName);
+        } finally {
+            showPause = false;
         }
     }
 
@@ -207,3 +215,4 @@
 </Container>
 
 <Delete bind:showDelete />
+<PauseProject handlePause={toggleProject} bind:show={showPause} />

src/routes/console/project-[project]/settings/pauseProject.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { project } from '../store';
+
+    export let show = false;
+    export let handlePause;
+</script>
+
+<Modal warning={true} bind:show onSubmit={handlePause}>
+    <svelte:fragment slot="header">Delete Database</svelte:fragment>
+    <p class="text" data-private>
+        Are you sure you want to pause <b>{$project.name}</b>? While paused, you will not be able to
+        make API requests.
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit>Pause my project</Button>
+    </svelte:fragment>
+</Modal>