feat: api key routes for profiles

src/lib/components/navbar.svelte

@@ -34,6 +34,7 @@
         IconCreditCard,
         IconCurrencyDollar,
         IconGlobeAlt,
+        IconKey,
         IconLogoutRight,
         IconMenuAlt4,
         IconMode,
@@ -340,6 +341,21 @@
                                     )}
                                     on:click={() => toggle()}>
                                     Domains</ActionMenu.Item.Anchor>
+
+                                {#if currentProject}
+                                    <ActionMenu.Item.Anchor
+                                        size="l"
+                                        trailingIcon={IconKey}
+                                        href={resolve(
+                                            '/(console)/project-[region]-[project]/settings/api-keys',
+                                            {
+                                                region: currentProject.region,
+                                                project: currentProject.$id
+                                            }
+                                        )}
+                                        on:click={() => toggle()}>
+                                        API keys</ActionMenu.Item.Anchor>
+                                {/if}
                                 <Divider />
                             {/if}
 
@@ -402,6 +418,21 @@
                         leadingIcon: IconUser,
                         href: resolve('/(console)/account')
                     },
+                    ...(resolvedProfile.showExtendedAccountsMenu && currentProject
+                        ? [
+                              {
+                                  name: 'API keys',
+                                  leadingIcon: IconKey,
+                                  href: resolve(
+                                      '/(console)/project-[region]-[project]/settings/api-keys',
+                                      {
+                                          region: currentProject.region,
+                                          project: currentProject.$id
+                                      }
+                                  )
+                              }
+                          ]
+                        : []),
                     {
                         name: 'Sign out',
                         leadingIcon: IconLogoutRight,

src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte

@@ -17,6 +17,8 @@
     import { page } from '$app/state';
     import { copy } from '$lib/helpers/copy';
 
+    export let basePath: string = `${base}/project-${page.params.region}-${page.params.project}/overview`;
+
     const projectId = page.params.project;
 
     let showExitModal = false;
@@ -41,9 +43,7 @@
             }
 
             trackEvent(Submit.KeyCreate);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/overview/api-keys/${$id}`
-            );
+            await goto(`${basePath}/api-keys/${$id}`);
             addNotification({
                 message: `API key has been created`,
                 type: 'success',
@@ -74,7 +74,7 @@
 
 <Wizard
     title="Create API key"
-    href={`${base}/project-${page.params.region}-${page.params.project}/overview/api-keys/`}
+    href={`${basePath}/api-keys/`}
     bind:showExitModal
     column
     columnSize="s"

src/routes/(console)/project-[region]-[project]/overview/(components)/delete.svelte

@@ -12,6 +12,7 @@
     export let showDelete = false;
     export let keyType: 'api' | 'dev' = 'api';
     export let key: Models.DevKey | Models.Key;
+    export let basePath: string = `${base}/project-${page.params.region}-${page.params.project}/overview`;
 
     const projectId = page.params.project;
 
@@ -42,9 +43,7 @@
                 message: `${key.name} has been deleted`
             });
             trackEvent(event);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/overview/${slug}`
-            );
+            await goto(`${basePath}/${slug}`);
         } catch (e) {
             error = e.message;
             trackError(e, event);

src/routes/(console)/project-[region]-[project]/overview/(components)/deleteBatch.svelte

@@ -11,6 +11,7 @@
     export let showDelete = false;
     export let keyIds: string[] = [];
     export let keyType: 'api' | 'dev' = 'api';
+    export let basePath: string = `${base}/project-${page.params.region}-${page.params.project}/overview`;
 
     let error: string;
 
@@ -47,9 +48,7 @@
             });
 
             trackEvent(event);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/overview/${slug}`
-            );
+            await goto(`${basePath}/${slug}`);
         } catch (e) {
             error = e.message;
             trackError(e, event);

src/routes/(console)/project-[region]-[project]/overview/(components)/keyDetails.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from '$app/paths';
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Box, CardGrid } from '$lib/components';
@@ -23,6 +24,7 @@
 
     export let key: Models.DevKey | Models.Key;
     export let keyType: 'api' | 'dev' = 'api';
+    export let basePath: string = `${base}/project-${page.params.region}-${page.params.project}/overview`;
 
     let name: string = null;
     let scopes: string[] = null;
@@ -190,7 +192,7 @@
         </Form>
     {/if}
 
-    <UpdateExpirationDate {keyType} {key} />
+    <UpdateExpirationDate {keyType} {key} {basePath} />
 
     <CardGrid>
         <svelte:fragment slot="title">Delete {label} key</svelte:fragment>
@@ -212,4 +214,4 @@
     </CardGrid>
 </Container>
 
-<Delete {keyType} {key} bind:showDelete />
+<Delete {keyType} {key} {basePath} bind:showDelete />

src/routes/(console)/project-[region]-[project]/overview/(components)/table.svelte

@@ -15,10 +15,12 @@
 
     let {
         keyType = 'api',
-        keys
+        keys,
+        basePath = `${base}/project-${page.params.region}-${page.params.project}/overview`
     }: {
         keyType?: 'api' | 'dev';
         keys: Models.KeyList | Models.DevKeyList;
+        basePath?: string;
     } = $props();
 
     let selectedKeys = $state([]);
@@ -126,13 +128,11 @@
         description={getDescription()}
         on:click={async () => {
             if (isApiKey) {
-                await goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/overview/${slug}/create`
-                );
+                await goto(`${basePath}/${slug}/create`);
             } else {
                 $showDevKeysCreateModal = true;
             }
         }} />
 {/if}
 
-<DeleteBatch {keyType} bind:keyIds={selectedKeys} bind:showDelete={showDeleteModal} />
+<DeleteBatch {keyType} {basePath} bind:keyIds={selectedKeys} bind:showDelete={showDeleteModal} />

src/routes/(console)/project-[region]-[project]/overview/(components)/updateExpirationDate.svelte

@@ -14,6 +14,7 @@
 
     export let keyType: 'api' | 'dev' = 'api';
     export let key: Models.DevKey | Models.Key;
+    export let basePath: string = undefined;
 
     const projectId = page.params.project;
 

src/routes/(console)/project-[region]-[project]/settings/api-keys/+layout.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { getPageTitle } from '../../store';
+    import { page } from '$app/state';
+</script>
+
+<svelte:head>
+    <title>{getPageTitle(page.data?.project?.name, 'API Keys', resolvedProfile.platform)}</title>
+</svelte:head>
+
+<slot />

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import type { PageData } from './$types';
+    import Table from '../../overview/(components)/table.svelte';
+    import { Button } from '$lib/elements/forms';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { canWriteKeys } from '$lib/stores/roles';
+
+    export let data: PageData;
+
+    const basePath = `${base}/project-${page.params.region}-${page.params.project}/settings`;
+</script>
+
+<Container>
+    <ResponsiveContainerHeader hideView analyticsSource="settings_api_keys">
+        {#if $canWriteKeys}
+            <Button href={`${basePath}/api-keys/create`}>
+                <Icon icon={IconPlus} size="s" />
+                Create API key
+            </Button>
+        {/if}
+    </ResponsiveContainerHeader>
+    <Table keys={data.keys} {basePath} />
+</Container>

src/routes/(console)/project-[region]-[project]/settings/api-keys/+page.ts

@@ -0,0 +1,12 @@
+import { Dependencies } from '$lib/constants';
+import { sdk } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.KEYS);
+    return {
+        keys: await sdk.forConsole.projects.listKeys({
+            projectId: params.project
+        })
+    };
+};

src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/+page.ts

@@ -0,0 +1,25 @@
+import Header from './header.svelte';
+import Breadcrumbs from './breadcrumbs.svelte';
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.KEY);
+
+    const key = await sdk.forConsole.projects.getKey({
+        projectId: params.project,
+        keyId: params.key
+    });
+    if (key.expire) {
+        key.expire = new Date(key.expire).toISOString().slice(0, 23);
+    } else {
+        key.expire = undefined;
+    }
+
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs,
+        key
+    };
+};

src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/+page@project-[region]-[project].svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { key } from './store';
+    import KeyDetails from '../../../overview/(components)/keyDetails.svelte';
+
+    const basePath = `${base}/project-${page.params.region}-${page.params.project}/settings`;
+</script>
+
+<KeyDetails key={$key} {basePath} />

src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/breadcrumbs.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../store';
+    import { key } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `${base}/organization-${$organization?.$id}`,
+            title: $organization?.name
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            title: $project?.name
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}/settings/api-keys`,
+            title: 'API keys'
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}/settings/api-keys/${$key?.$id}`,
+            title: $key?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />

src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/header.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { key } from './store';
+    import { RegionEndpoint, Copy } from '$lib/components';
+    import { Layout, Tag, Icon } from '@appwrite.io/pink-svelte';
+    import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
+    import { projectRegion } from '../../../store';
+
+    const projectId = page.params.project;
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/settings/api-keys`}>
+            {$key?.name}
+        </CoverTitle>
+        <Layout.Stack direction="row" inline>
+            {#if $key?.secret}
+                <Copy value={$key.secret} copyText="Copy API secret">
+                    <Tag size="xs" variant="code">
+                        <Icon icon={IconDuplicate} size="s" slot="start" />
+                        <span class="api-secret-label"> API secret </span>
+                    </Tag>
+                </Copy>
+            {/if}
+            {#if $projectRegion}
+                <RegionEndpoint region={$projectRegion} />
+            {/if}
+        </Layout.Stack>
+    </svelte:fragment>
+</Cover>
+
+<style>
+    .api-secret-label {
+        white-space: nowrap;
+        overflow: hidden;
+        word-break: break-all;
+    }
+</style>

src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/store.ts

@@ -0,0 +1,5 @@
+import { page } from '$app/stores';
+import { derived } from 'svelte/store';
+import type { Models } from '@appwrite.io/console';
+
+export const key = derived(page, ($page) => $page.data.key as Models.Key);

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import CreateKey from '../../../overview/(components)/create.svelte';
+
+    const basePath = `${base}/project-${page.params.region}-${page.params.project}/settings`;
+</script>
+
+<CreateKey {basePath} />

src/routes/(console)/project-[region]-[project]/settings/header.svelte

@@ -8,6 +8,7 @@
     import { canWriteProjects } from '$lib/stores/roles';
     import { isCloud } from '$lib/system';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { resolvedProfile } from '$lib/profiles/index.svelte';
 
     const path = `${base}/project-${page.params.region}-${page.params.project}/settings`;
     const tabs: TabElement[] = [
@@ -16,6 +17,12 @@
             title: 'Overview',
             event: 'overview'
         },
+        {
+            href: `${path}/api-keys`,
+            title: 'API keys',
+            event: 'api-keys',
+            disabled: !resolvedProfile.showExtendedAccountsMenu
+        },
         {
             href: `${path}/domains`,
             title: 'Custom domains',