From 258bd7d31523ccde2a8876eace056e2ff5c23b40 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 23 Sep 2022 18:28:25 +0200
Subject: [PATCH] feat: add some features to keys and platforms

---
 .../console/project-[project]/+layout.svelte  |   4 +
 .../project-[project]/overview/+layout.svelte |  37 ++-
 .../overview/keys/+page.svelte                |  15 ++
 .../keys/[key]/+page@project-[project].svelte | 221 +++++++++++++++++-
 .../overview/keys/[key]/delete.svelte         |  42 ++++
 .../overview/keys/create.svelte               |  55 +++++
 .../overview/platforms/+page.svelte           |  40 ++--
 .../[platform]/+page@project-[project].svelte | 111 ++++++++-
 .../platforms/[platform]/appleIOS.svelte      |  60 +++++
 .../platforms/[platform]/appleMacOS.svelte    |  60 +++++
 .../platforms/[platform]/appleTvOS.svelte     |  60 +++++
 .../platforms/[platform]/appleWatchOS.svelte  |  60 +++++
 .../platforms/[platform]/delete.svelte        |  42 ++++
 .../[platform]/flutterAndroid.svelte          |  59 +++++
 .../platforms/[platform]/flutterIOS.svelte    |  60 +++++
 .../platforms/[platform]/flutterLinux.svelte  |  57 +++++
 .../platforms/[platform]/flutterMacOS.svelte  |  60 +++++
 .../[platform]/flutterWindows.svelte          |  57 +++++
 .../overview/platforms/[platform]/web.svelte  |  59 +++++
 .../overview/platforms/create.svelte          |  12 +-
 20 files changed, 1125 insertions(+), 46 deletions(-)
 create mode 100644 src/routes/console/project-[project]/overview/keys/[key]/delete.svelte
 create mode 100644 src/routes/console/project-[project]/overview/keys/create.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte

diff --git a/src/routes/console/project-[project]/+layout.svelte b/src/routes/console/project-[project]/+layout.svelte
index 1fc2d60d8..04544bef2 100644
--- a/src/routes/console/project-[project]/+layout.svelte
+++ b/src/routes/console/project-[project]/+layout.svelte
@@ -56,7 +56,11 @@
             await project.load(projectId);
             if ($organization?.$id !== $project?.teamId) {
                 await organization.load($project.teamId);
+            } else {
+                organization.load($project.teamId);
             }
+        } else {
+            project.load(projectId);
         }
 
         updateLayout({
diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte
index 00e1078ef..010742493 100644
--- a/src/routes/console/project-[project]/overview/+layout.svelte
+++ b/src/routes/console/project-[project]/overview/+layout.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-    import { tabs, title, backButton, copyData } from '$lib/stores/layout';
-    import { project } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
     import { Container } from '$lib/layout';
     import { page } from '$app/stores';
+    import { browser } from '$app/environment';
+    import { tabs, title, backButton, copyData } from '$lib/stores/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import type { Models } from '@aw-labs/appwrite-console';
+    import { project } from '../store';
+
     title.set($project.name);
     tabs.set([]);
     backButton.set('');
@@ -15,23 +17,34 @@
     });
 
     $: path = `/console/project-${$project.$id}/overview`;
-    $: usage = sdkForConsole.projects.getUsage($project.$id, '30d');
-
-    function last(set: Array<unknown>): Models.Metric | null {
-        return (set as Models.Metric[]).slice(-1)[0] ?? null;
-    }
-
-    function total(set: Array<unknown>): number {
-        return (set as Models.Metric[]).reduce((prev, curr) => prev + curr.value, 0);
-    }
 
+    const usage = sdkForConsole.projects.getUsage($project.$id, '30d');
     const formatter = Intl.NumberFormat('en', {
         notation: 'compact'
     });
 
+    // TODO: metric type is wrong
+    function last(set: Array<unknown>): Models.Metric | null {
+        return (set as Models.Metric[]).slice(-1)[0] ?? null;
+    }
+
+    // TODO: metric type is wrong
+    function total(set: Array<unknown>): number {
+        return (set as Models.Metric[]).reduce((prev, curr) => prev + curr.value, 0);
+    }
+
     function format(number: number): string {
         return formatter.format(number);
     }
+
+    if (browser) {
+        sdkForConsole.client.subscribe<unknown>('console', (message) => {
+            if (message.events.includes('stats.connections')) {
+                // TODO: take care of realtime connections
+                return;
+            }
+        });
+    }
 </script>
 
 <svelte:head>
diff --git a/src/routes/console/project-[project]/overview/keys/+page.svelte b/src/routes/console/project-[project]/overview/keys/+page.svelte
index 5dfb63b21..e79b4733c 100644
--- a/src/routes/console/project-[project]/overview/keys/+page.svelte
+++ b/src/routes/console/project-[project]/overview/keys/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
+    import { Button } from '$lib/elements/forms';
     import {
         Table,
         TableBody,
@@ -12,6 +13,9 @@
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
     import { project } from '../../store';
+    import Create from './create.svelte';
+
+    let show = false;
 
     onMount(handle);
     afterNavigate(handle);
@@ -30,6 +34,15 @@
 </script>
 
 <h3 class="heading-level-7">API Keys</h3>
+<div class="common-section u-flex u-gap-12">
+    <h3 class="heading-level-7">Platforms</h3>
+    <span class="u-margin-inline-start-auto">
+        <Button on:click={() => (show = true)}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Create API Key</span>
+        </Button>
+    </span>
+</div>
 
 <Table>
     <TableHeader>
@@ -55,3 +68,5 @@
         {/each}
     </TableBody>
 </Table>
+
+<Create bind:show />
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
index 687d4e379..7fa472404 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
@@ -2,14 +2,40 @@
     import { afterNavigate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
+    import { CardGrid } from '$lib/components';
+    import { scopes } from '$lib/constants';
+    import {
+        Button,
+        Form,
+        FormList,
+        InputCheckbox,
+        InputNumber,
+        InputPassword,
+        InputText
+    } from '$lib/elements/forms';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { Container } from '$lib/layout';
     import { updateLayout } from '$lib/stores/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import Delete from './delete.svelte';
     import { key } from './store';
 
     const projectId = $page.params.project;
     const keyId = $page.params.key;
+    const activeScopes = scopes.reduce((prev, next) => {
+        prev[next] = false;
+
+        return prev;
+    }, {});
 
     let loaded = false;
+    let showDelete = false;
+    let name: string = null;
+    let secret: string = null;
+    let expire: number = null;
 
     onMount(handle);
     afterNavigate(handle);
@@ -19,6 +45,14 @@
             await key.load(projectId, keyId);
         }
 
+        name ??= $key.name;
+        secret ??= $key.secret;
+        expire ??= $key.expire;
+        unselectAll();
+        $key.scopes.forEach((scope) => {
+            activeScopes[scope] = true;
+        });
+
         updateLayout({
             navigate: event,
             back: `${base}/console/project-${$page.params.project}/overview/keys`,
@@ -39,12 +73,193 @@
         });
         loaded = true;
     }
+
+    async function updateName() {
+        try {
+            await sdkForConsole.projects.updateKey($project.$id, $key.$id, name, $key.scopes);
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'API Key name has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    async function updateExpire() {
+        try {
+            await sdkForConsole.projects.updateKey(
+                $project.$id,
+                $key.$id,
+                $key.name,
+                $key.scopes,
+                expire
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'API Key expiration has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    async function updateScopes() {
+        console.log(scopes.filter((scope) => activeScopes[scope]));
+        try {
+            await sdkForConsole.projects.updateKey(
+                $project.$id,
+                $key.$id,
+                $key.name,
+                scopes.filter((scope) => activeScopes[scope])
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'API Key scopes has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    function unselectAll() {
+        for (const scope in activeScopes) {
+            activeScopes[scope] = false;
+        }
+    }
 </script>
 
 <svelte:head>
     <title>Appwrite - API Key</title>
 </svelte:head>
 
-{#if loaded}
-    <slot />
-{/if}
+<Container>
+    {#if loaded}
+        <CardGrid>
+            <div>
+                <h6 class="heading-level-7">{$key.name}</h6>
+            </div>
+            <svelte:fragment slot="aside">
+                <p>
+                    Last accessed: {toLocaleDateTime($key.$updatedAt)}<br />
+                    Scopes granted: {$key.scopes.length}
+                </p>
+            </svelte:fragment>
+        </CardGrid>
+        <Form>
+            <CardGrid>
+                <h6 class="heading-level-7">API Key Secret</h6>
+                <svelte:fragment slot="aside">
+                    <FormList>
+                        <InputPassword
+                            id="secret"
+                            label="API Key Secret"
+                            bind:value={secret}
+                            showPasswordButton
+                            required />
+                    </FormList>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+        <Form on:submit={updateName}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Name</h6>
+                <p class="text">Choose any name that will help you distinguish between API keys.</p>
+                <svelte:fragment slot="aside">
+                    <FormList>
+                        <InputText
+                            id="name"
+                            label="Name"
+                            bind:value={name}
+                            required
+                            placeholder="Enter name" />
+                    </FormList>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled={name === $key.name} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+        <Form on:submit={updateScopes}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Scopes</h6>
+                <p class="text">
+                    You can choose which permission scope to grant your application. It is a best
+                    practice to allow only the permissions you need to meet your project goals.
+                </p>
+                <svelte:fragment slot="aside">
+                    <FormList>
+                        {#each scopes as scope}
+                            <InputCheckbox
+                                id={scope}
+                                label={scope}
+                                bind:value={activeScopes[scope]} />
+                        {/each}
+                    </FormList>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+        <Form on:submit={updateExpire}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Expiration Date</h6>
+                <p class="text">Choose any name that will help you distinguish between API keys.</p>
+                <svelte:fragment slot="aside">
+                    <FormList>
+                        <InputNumber
+                            id="expire"
+                            label="Expiration Date"
+                            bind:value={expire}
+                            required />
+                    </FormList>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled={expire === $key.expire} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+        <CardGrid>
+            <div>
+                <h6 class="heading-level-7">Delete API Key</h6>
+            </div>
+            <p>The API Key will be permanently deleted. This action is irreversible.</p>
+            <svelte:fragment slot="aside">
+                <div class="box">
+                    <div class="u-flex u-gap-16">
+                        <div class="u-cross-child-center u-line-height-1-5">
+                            <h6 class="u-bold">{$key.name}</h6>
+                            <p>Last accessed: {toLocaleDateTime($key.$updatedAt)}</p>
+                        </div>
+                    </div>
+                </div>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+            </svelte:fragment>
+        </CardGrid>
+    {/if}
+</Container>
+
+<Delete bind:showDelete />
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/delete.svelte b/src/routes/console/project-[project]/overview/keys/[key]/delete.svelte
new file mode 100644
index 000000000..102db7f60
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/keys/[key]/delete.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { project } from '../../../store';
+    import { key } from './store';
+
+    export let showDelete = false;
+
+    const handleDelete = async () => {
+        try {
+            await sdkForConsole.projects.deletePlatform($project.$id, $key.$id);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${$key.name} has been deleted`
+            });
+            project.load($project.$id);
+            await goto(`${base}/console/project-${$project.$id}/overview/keys`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={handleDelete}>
+    <Modal bind:show={showDelete} warning>
+        <svelte:fragment slot="header">Delete API Key</svelte:fragment>
+        <p>The API Key will be permanently deleted. This action is irreversible.</p>
+
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/keys/create.svelte b/src/routes/console/project-[project]/overview/keys/create.svelte
new file mode 100644
index 000000000..80765d20c
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/keys/create.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { scopes } from '$lib/constants';
+    import { InputText, Button, Form, FormList, InputCheckbox } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { project } from '../../.../../store';
+
+    export let show = false;
+
+    const activeScopes = scopes.reduce((prev, next) => {
+        prev[next] = false;
+
+        return prev;
+    }, {});
+
+    let name: string;
+
+    async function create() {
+        try {
+            await sdkForConsole.projects.createKey(
+                $project.$id,
+                name,
+                scopes.filter((scope) => activeScopes[scope])
+            );
+            name = null;
+            for (const scope in activeScopes) {
+                activeScopes[scope] = false;
+            }
+            project.load($project.$id);
+            show = false;
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+</script>
+
+<Form on:submit={create}>
+    <Modal bind:show>
+        <svelte:fragment slot="header">Create API Key</svelte:fragment>
+        <FormList>
+            <InputText id="name" label="Name" bind:value={name} autofocus required />
+            {#each scopes as scope}
+                <InputCheckbox id={scope} label={scope} bind:value={activeScopes[scope]} />
+            {/each}
+        </FormList>
+        <svelte:fragment slot="footer">
+            <Button submit>Register</Button>
+            <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte
index d5cb7c93a..d9c32cc40 100644
--- a/src/routes/console/project-[project]/overview/platforms/+page.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
     import { page } from '$app/stores';
+    import { GridItem1 } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { updateLayout } from '$lib/stores/layout';
@@ -28,24 +29,27 @@
     }
 </script>
 
-<h3 class="heading-level-7">
-    Platforms
-    <Button on:click={() => (show = true)}>Add Platform</Button>
-</h3>
-<ul class="grid-box u-margin-block-start-32" style="--grid-gap:2rem; --grid-item-size:25rem;">
-    {#each $project.platforms as platform}
-        <li class="card">
-            <a class="grid-item-1" href={`${path}/${platform.$id}`}>
-                <div class="grid-item-1-start-start">
-                    <h2 class="heading-level-6 u-margin-block-start-8">{platform.name}</h2>
-                </div>
+<div class="common-section u-flex u-gap-12">
+    <h3 class="heading-level-7">Platforms</h3>
+    <span class="u-margin-inline-start-auto">
+        <Button on:click={() => (show = true)}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Add Platform</span>
+        </Button>
+    </span>
+</div>
 
-                <div class="grid-item-1-end-start">
-                    <p>Last Updated</p>
-                    <p>{toLocaleDateTime(platform.$updatedAt)}</p>
-                </div>
-            </a>
-        </li>
+<div class="grid-box u-margin-block-start-32" style="--grid-gap:2rem; --grid-item-size:25rem;">
+    {#each $project.platforms as platform}
+        <GridItem1 href={`${path}/${platform.$id}`}>
+            <svelte:fragment slot="title">{platform.name}</svelte:fragment>
+
+            <div class="grid-item-1-end-start">
+                <p>Last Updated</p>
+                <p>{toLocaleDateTime(platform.$updatedAt)}</p>
+            </div>
+        </GridItem1>
     {/each}
-</ul>
+</div>
+
 <Create bind:show />
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
index cc57f5300..26e0b151e 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
@@ -2,14 +2,46 @@
     import { afterNavigate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
     import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount, SvelteComponent } from 'svelte';
+    import { project } from '../../../store';
     import { platform } from './store';
+    import Delete from './delete.svelte';
+    import Web from './web.svelte';
+    import FlutterIos from './flutterIOS.svelte';
+    import FlutterAndroid from './flutterAndroid.svelte';
+    import FlutterLinux from './flutterLinux.svelte';
+    import FlutterMacOs from './flutterMacOS.svelte';
+    import FlutterWindows from './flutterWindows.svelte';
+    import AppleiOs from './appleIOS.svelte';
+    import AppleMacOs from './appleMacOS.svelte';
+    import AppleWatchOs from './appleWatchOS.svelte';
+    import AppleTvos from './appleTvOS.svelte';
 
     const projectId = $page.params.project;
     const platformId = $page.params.platform;
+    const types: Record<string, typeof SvelteComponent> = {
+        web: Web,
+        android: Web,
+        'apple-ios': AppleiOs,
+        'apple-macos': AppleMacOs,
+        'apple-watchos': AppleWatchOs,
+        'apple-tvos': AppleTvos,
+        'flutter-ios': FlutterIos,
+        'flutter-android': FlutterAndroid,
+        'flutter-linux': FlutterLinux,
+        'flutter-macos': FlutterMacOs,
+        'flutter-windows': FlutterWindows
+    };
 
     let loaded = false;
+    let showDelete = false;
+    let name: string = null;
 
     onMount(handle);
     afterNavigate(handle);
@@ -19,9 +51,11 @@
             await platform.load(projectId, platformId);
         }
 
+        name ??= $platform.name;
+
         updateLayout({
             navigate: event,
-            back: `${base}/console/project-${$page.params.project}/overview/platforms`,
+            back: `${base}/console/project-${projectId}/overview/platforms`,
             title: $platform.name,
             level: 4,
             breadcrumbs: [
@@ -39,12 +73,73 @@
         });
         loaded = true;
     }
+
+    const updateName = async () => {
+        try {
+            await sdkForConsole.projects.updatePlatform($project.$id, $platform.$id, name);
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'Platform name has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
 </script>
 
-<svelte:head>
-    <title>Appwrite - Platform</title>
-</svelte:head>
+<Container>
+    {#if loaded}
+        <Form on:submit={updateName}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Name</h6>
+                <p class="text">
+                    Choose any name that will help you distinguish between platforms.
+                </p>
+                <svelte:fragment slot="aside">
+                    <FormList>
+                        <InputText
+                            id="name"
+                            label="Name"
+                            bind:value={name}
+                            required
+                            placeholder="Enter name" />
+                    </FormList>
+                </svelte:fragment>
 
-{#if loaded}
-    <slot />
-{/if}
+                <svelte:fragment slot="actions">
+                    <Button disabled={name === $platform.name} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+
+        <svelte:component this={types[$platform.type]} />
+
+        <CardGrid>
+            <div>
+                <h6 class="heading-level-7">Delete Platform</h6>
+            </div>
+            <p>The Platform will be permanently deleted. This action is irreversible.</p>
+            <svelte:fragment slot="aside">
+                <div class="box">
+                    <div class="u-flex u-gap-16">
+                        <!-- <img class="avatar" src="/icons/dark/color/android.svg" /> -->
+                        <div class="u-cross-child-center u-line-height-1-5">
+                            <h6 class="u-bold">{$platform.name}</h6>
+                            <p>{$platform.hostname}</p>
+                        </div>
+                    </div>
+                </div>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+            </svelte:fragment>
+        </CardGrid>
+    {/if}
+</Container>
+
+<Delete bind:showDelete />
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte
new file mode 100644
index 000000000..14d34096b
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    let key: string = null;
+
+    onMount(() => {
+        key ??= $platform.key;
+    });
+
+    const updateHostname = async () => {
+        try {
+            await sdkForConsole.projects.updatePlatform(
+                $project.$id,
+                $platform.$id,
+                $platform.name,
+                key
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'Platform Bundle ID has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={updateHostname}>
+    <CardGrid>
+        <h6 class="heading-level-7">Update Bundle ID</h6>
+        <p class="text">
+            You can find your Bundle Identifier in the General tab for your app's primary target in
+            Xcode.
+        </p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="bundle-id"
+                    label="Bundle ID"
+                    bind:value={key}
+                    required
+                    placeholder="com.company.appname" />
+            </FormList>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={key === $platform.key} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
new file mode 100644
index 000000000..14d34096b
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    let key: string = null;
+
+    onMount(() => {
+        key ??= $platform.key;
+    });
+
+    const updateHostname = async () => {
+        try {
+            await sdkForConsole.projects.updatePlatform(
+                $project.$id,
+                $platform.$id,
+                $platform.name,
+                key
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'Platform Bundle ID has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={updateHostname}>
+    <CardGrid>
+        <h6 class="heading-level-7">Update Bundle ID</h6>
+        <p class="text">
+            You can find your Bundle Identifier in the General tab for your app's primary target in
+            Xcode.
+        </p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="bundle-id"
+                    label="Bundle ID"
+                    bind:value={key}
+                    required
+                    placeholder="com.company.appname" />
+            </FormList>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={key === $platform.key} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
new file mode 100644
index 000000000..14d34096b
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    let key: string = null;
+
+    onMount(() => {
+        key ??= $platform.key;
+    });
+
+    const updateHostname = async () => {
+        try {
+            await sdkForConsole.projects.updatePlatform(
+                $project.$id,
+                $platform.$id,
+                $platform.name,
+                key
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'Platform Bundle ID has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={updateHostname}>
+    <CardGrid>
+        <h6 class="heading-level-7">Update Bundle ID</h6>
+        <p class="text">
+            You can find your Bundle Identifier in the General tab for your app's primary target in
+            Xcode.
+        </p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="bundle-id"
+                    label="Bundle ID"
+                    bind:value={key}
+                    required
+                    placeholder="com.company.appname" />
+            </FormList>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={key === $platform.key} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
new file mode 100644
index 000000000..14d34096b
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    let key: string = null;
+
+    onMount(() => {
+        key ??= $platform.key;
+    });
+
+    const updateHostname = async () => {
+        try {
+            await sdkForConsole.projects.updatePlatform(
+                $project.$id,
+                $platform.$id,
+                $platform.name,
+                key
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'Platform Bundle ID has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={updateHostname}>
+    <CardGrid>
+        <h6 class="heading-level-7">Update Bundle ID</h6>
+        <p class="text">
+            You can find your Bundle Identifier in the General tab for your app's primary target in
+            Xcode.
+        </p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="bundle-id"
+                    label="Bundle ID"
+                    bind:value={key}
+                    required
+                    placeholder="com.company.appname" />
+            </FormList>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={key === $platform.key} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
new file mode 100644
index 000000000..1c1d4b637
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    export let showDelete = false;
+
+    const handleDelete = async () => {
+        try {
+            await sdkForConsole.projects.deletePlatform($project.$id, $platform.$id);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${$platform.name} has been deleted`
+            });
+            project.load($project.$id);
+            await goto(`${base}/console/project-${$project.$id}/overview/platforms`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={handleDelete}>
+    <Modal bind:show={showDelete} warning>
+        <svelte:fragment slot="header">Delete Platform</svelte:fragment>
+        <p>The Platform will be permanently deleted. This action is irreversible.</p>
+
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
new file mode 100644
index 000000000..f29907097
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    let key: string = null;
+
+    onMount(() => {
+        key ??= $platform.key;
+    });
+
+    const updateHostname = async () => {
+        try {
+            await sdkForConsole.projects.updatePlatform(
+                $project.$id,
+                $platform.$id,
+                $platform.name,
+                key
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'Platform Package Name has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={updateHostname}>
+    <CardGrid>
+        <h6 class="heading-level-7">Update Package Name</h6>
+        <p class="text">
+            Your package name is generally the applicationId in your app-level build.gradle file.
+        </p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="package-name"
+                    label="Package Name"
+                    bind:value={key}
+                    required
+                    placeholder="com.company.appname" />
+            </FormList>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={key === $platform.key} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
new file mode 100644
index 000000000..14d34096b
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    let key: string = null;
+
+    onMount(() => {
+        key ??= $platform.key;
+    });
+
+    const updateHostname = async () => {
+        try {
+            await sdkForConsole.projects.updatePlatform(
+                $project.$id,
+                $platform.$id,
+                $platform.name,
+                key
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'Platform Bundle ID has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={updateHostname}>
+    <CardGrid>
+        <h6 class="heading-level-7">Update Bundle ID</h6>
+        <p class="text">
+            You can find your Bundle Identifier in the General tab for your app's primary target in
+            Xcode.
+        </p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="bundle-id"
+                    label="Bundle ID"
+                    bind:value={key}
+                    required
+                    placeholder="com.company.appname" />
+            </FormList>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={key === $platform.key} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
new file mode 100644
index 000000000..8323a7d6d
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    let key: string = null;
+
+    onMount(() => {
+        key ??= $platform.key;
+    });
+
+    const updateHostname = async () => {
+        try {
+            await sdkForConsole.projects.updatePlatform(
+                $project.$id,
+                $platform.$id,
+                $platform.name,
+                key
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'Platform Package Name has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={updateHostname}>
+    <CardGrid>
+        <h6 class="heading-level-7">Update Package Name</h6>
+        <p class="text">Your application name.</p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="package-name"
+                    label="Package Name"
+                    bind:value={key}
+                    required
+                    placeholder="appname" />
+            </FormList>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={key === $platform.key} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
new file mode 100644
index 000000000..14d34096b
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    let key: string = null;
+
+    onMount(() => {
+        key ??= $platform.key;
+    });
+
+    const updateHostname = async () => {
+        try {
+            await sdkForConsole.projects.updatePlatform(
+                $project.$id,
+                $platform.$id,
+                $platform.name,
+                key
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'Platform Bundle ID has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={updateHostname}>
+    <CardGrid>
+        <h6 class="heading-level-7">Update Bundle ID</h6>
+        <p class="text">
+            You can find your Bundle Identifier in the General tab for your app's primary target in
+            Xcode.
+        </p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="bundle-id"
+                    label="Bundle ID"
+                    bind:value={key}
+                    required
+                    placeholder="com.company.appname" />
+            </FormList>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={key === $platform.key} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
new file mode 100644
index 000000000..8323a7d6d
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    let key: string = null;
+
+    onMount(() => {
+        key ??= $platform.key;
+    });
+
+    const updateHostname = async () => {
+        try {
+            await sdkForConsole.projects.updatePlatform(
+                $project.$id,
+                $platform.$id,
+                $platform.name,
+                key
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'Platform Package Name has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={updateHostname}>
+    <CardGrid>
+        <h6 class="heading-level-7">Update Package Name</h6>
+        <p class="text">Your application name.</p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="package-name"
+                    label="Package Name"
+                    bind:value={key}
+                    required
+                    placeholder="appname" />
+            </FormList>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={key === $platform.key} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte
new file mode 100644
index 000000000..2d1a7efd4
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { CardGrid } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    let hostname: string = null;
+
+    onMount(() => {
+        hostname ??= $platform.hostname;
+    });
+
+    const updateHostname = async () => {
+        try {
+            await sdkForConsole.projects.updatePlatform(
+                $project.$id,
+                $platform.$id,
+                $platform.name,
+                undefined,
+                undefined,
+                hostname
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'Platform hostname has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={updateHostname}>
+    <CardGrid>
+        <h6 class="heading-level-7">Update Hostname</h6>
+        <p class="text">You can use * to allow wildcard hostnames or subdomains.</p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="hostname"
+                    label="Hostname"
+                    bind:value={hostname}
+                    required
+                    placeholder="myapp.com" />
+            </FormList>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={hostname === $platform.hostname} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/create.svelte b/src/routes/console/project-[project]/overview/platforms/create.svelte
index f0a2b5068..11c0597f8 100644
--- a/src/routes/console/project-[project]/overview/platforms/create.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/create.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { InputText, Button, Form } from '$lib/elements/forms';
+    import { InputText, Button, Form, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { project } from '../../.../../store';
@@ -10,7 +10,7 @@
     let name: string;
     let hostname: string;
 
-    const create = async () => {
+    async function create() {
         try {
             await sdkForConsole.projects.createPlatform(
                 $project.$id,
@@ -29,14 +29,16 @@
                 message: error.message
             });
         }
-    };
+    }
 </script>
 
 <Form on:submit={create}>
     <Modal bind:show>
         <svelte:fragment slot="header">Add Platform</svelte:fragment>
-        <InputText id="name" label="Name" bind:value={name} required />
-        <InputText id="host" label="Hostname" bind:value={hostname} required />
+        <FormList>
+            <InputText id="name" label="Name" bind:value={name} autofocus required />
+            <InputText id="host" label="Hostname" bind:value={hostname} required />
+        </FormList>
         <svelte:fragment slot="footer">
             <Button submit>Register</Button>
             <Button secondary on:click={() => (show = false)}>Cancel</Button>