DevKeys on Pink2

src/lib/actions/analytics.ts

@@ -161,6 +161,7 @@ export enum Click {
     FunctionsDeploymentDeleteClick = 'click_deployment_delete',
     FunctionsDeploymentCancelClick = 'click_deployment_cancel',
     KeyCreateClick = 'click_key_create',
+    DevKeyCreateClick = 'click_dev_key_create',
     MenuDropDownClick = 'click_menu_dropdown',
     MenuOverviewClick = 'click_menu_overview',
     ModalCloseClick = 'click_close_modal',
@@ -311,12 +312,18 @@ export enum Submit {
     VariableDelete = 'submit_variable_delete',
     VariableUpdate = 'submit_variable_update',
     VariableEditor = 'submit_variable_editor',
+
     KeyCreate = 'submit_key_create',
     KeyDelete = 'submit_key_delete',
     KeyUpdateName = 'submit_key_update_name',
     KeyUpdateScopes = 'submit_key_update_scopes',
     KeyUpdateExpire = 'submit_key_update_expire',
 
+    DevKeyCreate = 'submit_dev_key_create',
+    DevKeyDelete = 'submit_dev_key_delete',
+    DevKeyUpdateName = 'submit_dev_key_update_name',
+    DevKeyUpdateExpire = 'submit_dev_key_update_expire',
+
     PlatformCreate = 'submit_platform_create',
     PlatformDelete = 'submit_platform_delete',
     PlatformUpdate = 'submit_platform_update',

src/lib/components/expirationInput.svelte

@@ -1,87 +0,0 @@
-<script lang="ts">
-    import { InputDateTime, InputSelect } from '$lib/elements/forms';
-    import { isSameDay, isValidDate, toLocaleDate } from '$lib/helpers/date';
-
-    function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
-        const date = new Date();
-        switch (type) {
-            case 'day':
-                date.setDate(date.getDate() + value);
-                break;
-            case 'month':
-                date.setMonth(date.getMonth() + value);
-                break;
-            case 'year':
-                date.setMonth(date.getMonth() + value * 12);
-                break;
-        }
-
-        return date.toISOString();
-    }
-
-    const options = [
-        {
-            label: 'Never',
-            value: null
-        },
-        {
-            label: '7 Days',
-            value: incrementToday(7, 'day')
-        },
-        {
-            label: '30 days',
-            value: incrementToday(30, 'day')
-        },
-        {
-            label: '90 days',
-            value: incrementToday(90, 'day')
-        },
-        {
-            label: '1 Year',
-            value: incrementToday(1, 'year')
-        },
-        {
-            label: 'Custom Date',
-            value: 'custom'
-        }
-    ];
-
-    export let value: string | null = null;
-    export let dateSelectorLabel: string | undefined = undefined;
-    export let selectorLabel: string | undefined = 'Expiration Date';
-    export let resourceType: string | 'key' | 'token' | undefined = 'key';
-
-    function initExpirationSelect() {
-        if (value === null || !isValidDate(value)) return null;
-
-        let result = 'custom';
-        for (const option of options) {
-            if (!isValidDate(option.value)) continue;
-
-            if (isSameDay(new Date(option.value), new Date(value))) {
-                result = option.value;
-                break;
-            }
-        }
-
-        return result;
-    }
-    let expirationSelect = initExpirationSelect();
-    let expirationCustom: string | null = value ?? null;
-    $: helper =
-        expirationSelect !== 'custom' && expirationSelect !== null
-            ? `Your ${resourceType} will expire in ${toLocaleDate(value)}`
-            : null;
-
-    $: {
-        if (!isSameDay(new Date(expirationSelect), new Date(value))) {
-            value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
-        }
-    }
-</script>
-
-<InputSelect bind:value={expirationSelect} {options} id="preset" label={selectorLabel} {helper}>
-</InputSelect>
-{#if expirationSelect === 'custom'}
-    <InputDateTime required id="expire" label={dateSelectorLabel} bind:value={expirationCustom} />
-{/if}

src/lib/constants.ts

@@ -48,6 +48,8 @@ export enum Dependencies {
     PLATFORMS = 'dependency:platforms',
     KEY = 'dependency:key',
     KEYS = 'dependency:keys',
+    DEV_KEY = 'dependency:dev_key',
+    DEV_KEYS = 'dependency:dev_keys',
     DOMAINS = 'dependency:domains',
     DOMAIN = 'dependency:domains',
     WEBHOOK = 'dependency:webhook',

src/lib/layout/usage.svelte

@@ -1,4 +1,5 @@
 <script context="module" lang="ts">
+    import { ProjectUsageRange, type Models } from '@appwrite.io/console';
     export type UsagePeriods = '24h' | '30d' | '90d';
 
     export function periodToDates(period: UsagePeriods): {
@@ -68,14 +69,14 @@
 </script>
 
 <script lang="ts">
-    import { BarChart } from '$lib/charts';
-    import { formatNumberWithCommas } from '$lib/helpers/numbers';
-    import { Card } from '$lib/components';
-    import { ProjectUsageRange, type Models } from '@appwrite.io/console';
     import { page } from '$app/state';
-    import { Layout, Typography } from '@appwrite.io/pink-svelte';
     import { goto } from '$app/navigation';
+
+    import { BarChart } from '$lib/charts';
+    import { Card } from '$lib/components';
     import { InputSelect } from '$lib/elements/forms';
+    import { formatNumberWithCommas } from '$lib/helpers/numbers';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     type MetricMetadata = {
         title: string;

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

@@ -0,0 +1,101 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { InputText } from '$lib/elements/forms/index.js';
+    import { Wizard } from '$lib/layout';
+    import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import ExpirationInput from './expirationInput.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { onboarding } from '../../store';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { writable } from 'svelte/store';
+    import Scopes from '../keys/scopes.svelte';
+
+    const projectId = $page.params.project;
+
+    let showExitModal = false;
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    let scopes = [];
+    let name = '',
+        expire = '';
+
+    async function create() {
+        try {
+            const { $id } = await sdk.forConsole.projects.createKey(
+                projectId,
+                name,
+                scopes,
+                expire || undefined
+            );
+
+            if ($onboarding) {
+                await invalidate(Dependencies.PROJECT);
+            }
+
+            trackEvent(Submit.KeyCreate);
+            await goto(`${base}/project-${projectId}/overview/keys/${$id}`);
+            addNotification({
+                message: `API key has been created`,
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.KeyCreate);
+        }
+    }
+</script>
+
+<Wizard
+    title="Create API key"
+    href={`${base}/project-${projectId}/overview/keys/`}
+    bind:showExitModal
+    column
+    columnSize="s"
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Configuration">
+                <Layout.Stack>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder="Enter key name"
+                        required
+                        bind:value={name} />
+
+                    <ExpirationInput bind:value={expire} keyType="api" />
+                </Layout.Stack>
+            </Fieldset>
+
+            <Fieldset legend="Scopes">
+                <Layout.Stack gap="xl">
+                    <Typography.Text>
+                        Choose which permission scopes to grant your application. It is best
+                        practice to allow only the permissions you need to meet your project goals.
+                    </Typography.Text>
+                    <Scopes bind:scopes />
+                </Layout.Stack>
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Wizard>

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

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { base } from '$app/paths';
+    import { sdk } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
+    import { type Models } from '@appwrite.io/console';
+    import { goto, invalidate } from '$app/navigation';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+
+    export let showDelete = false;
+    export let keyType: 'api' | 'dev' = 'api';
+    export let key: Models.DevKey | Models.Key;
+
+    const projectId = page.params.project;
+
+    const isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'Dev';
+    const slug = isApiKey ? 'keys' : 'dev-keys';
+    const event = isApiKey ? Submit.KeyDelete : Submit.DevKeyDelete;
+    const dependency = isApiKey ? Dependencies.KEYS : Dependencies.DEV_KEYS;
+
+    let error: string;
+
+    async function handleDelete() {
+        try {
+            isApiKey
+                ? await sdk.forConsole.projects.deleteKey(projectId, key.$id)
+                : await sdk.forConsole.projects.deleteDevKey(projectId, key.$id);
+
+            await invalidate(dependency);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${key.name} has been deleted`
+            });
+            trackEvent(event);
+            await goto(`${base}/project-${projectId}/overview/${slug}`);
+        } catch (e) {
+            error = e.message;
+            trackError(e, event);
+        }
+    }
+</script>
+
+<Confirm onSubmit={handleDelete} title="Delete {label} key" bind:open={showDelete} bind:error>
+    Are you sure you want to delete this key?
+</Confirm>

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

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { base } from '$app/paths';
+    import { sdk } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
+    import { goto, invalidate } from '$app/navigation';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+
+    export let showDelete = false;
+    export let keyIds: string[] = [];
+    export let keyType: 'api' | 'dev' = 'api';
+
+    let error: string;
+
+    const isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'dev';
+    const projectId = page.params.project;
+
+    async function handleDelete() {
+        const slug = isApiKey ? 'keys' : 'dev-keys';
+        const event = isApiKey ? Submit.KeyDelete : Submit.DevKeyDelete;
+        const dependency = isApiKey ? Dependencies.KEYS : Dependencies.DEV_KEYS;
+
+        try {
+            await Promise.all(
+                keyIds.map((key) =>
+                    isApiKey
+                        ? sdk.forConsole.projects.deleteKey(projectId, key)
+                        : sdk.forConsole.projects.deleteDevKey(projectId, key)
+                )
+            );
+
+            await invalidate(dependency);
+            showDelete = false;
+
+            addNotification({
+                type: 'success',
+                message: `${keyIds.length} ${label} key${keyIds.length > 1 ? 's' : ''} deleted`
+            });
+
+            trackEvent(event);
+            await goto(`${base}/project-${projectId}/overview/${slug}`);
+        } catch (e) {
+            error = e.message;
+            trackError(e, event);
+        } finally {
+            keyIds = [];
+        }
+    }
+</script>
+
+<Confirm onSubmit={handleDelete} title={`Delete ${label} key`} bind:open={showDelete} bind:error>
+    <p>
+        Are you sure you want to delete <b>{keyIds.length}</b>
+        {label} key{keyIds.length > 1 ? 's' : ''}?
+    </p>
+</Confirm>