feat: add some features to keys and platforms

2026-06-06 19:27:48 +00:00 · 2022-09-23 18:28:25 +02:00
parent 37fa93575d
commit 258bd7d315
20 changed files with 1125 additions and 46 deletions
@@ -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({
@@ -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>
@@ -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 />
@@ -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 />
@@ -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>
@@ -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>
@@ -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 />
@@ -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 />
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>