adding show key flow to create webhook

Author: HarshMN2345

src/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/state';
+    import Modal from '$lib/components/modal.svelte';
+    import { Secret } from '$lib/components';
     import { Wizard } from '$lib/layout';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
     import Form from '$lib/elements/forms/form.svelte';
     import { goto } from '$app/navigation';
     import { ID } from '@appwrite.io/console';
@@ -15,6 +17,9 @@
     import Button from '$lib/elements/forms/button.svelte';
 
     let showExitModal = false;
+    let showSecretModal = false;
+    let createdWebhookId = '';
+    let createdSecret = '';
 
     let name = '',
         events: string[] = [],
@@ -24,6 +29,16 @@
         authPassword = '';
 
     export let data;
+
+    async function openWebhook() {
+        showSecretModal = false;
+        if (!createdWebhookId) return;
+
+        await goto(
+            `${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/${createdWebhookId}`
+        );
+    }
+
     async function create() {
         try {
             const webhook = await sdk
@@ -45,9 +60,16 @@
             trackEvent(Submit.WebhookCreate, {
                 events: events
             });
-            goto(
-                `${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/${webhook.$id}`
-            );
+
+            createdWebhookId = webhook.$id;
+            createdSecret = webhook.secret;
+
+            if (createdSecret) {
+                showSecretModal = true;
+                return;
+            }
+
+            await openWebhook();
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -76,3 +98,17 @@
         </svelte:fragment>
     </Wizard>
 </Form>
+
+<Modal title="Webhook Created" bind:show={showSecretModal} onSubmit={openWebhook}>
+    <Layout.Stack gap="l">
+        <Typography.Text>
+            Copy this signing secret now. For security reasons, you will not be able to view it
+            again after closing this dialog.
+        </Typography.Text>
+        <Secret label="Secret" copyEvent="signature" bind:value={createdSecret} />
+    </Layout.Stack>
+
+    <svelte:fragment slot="footer">
+        <Button submit>Continue</Button>
+    </svelte:fragment>
+</Modal>