feat: api keys

package.json

@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^6.0.0",
-        "@aw-labs/icons": "0.0.0-57",
-        "@aw-labs/ui": "0.0.0-57",
+        "@aw-labs/icons": "0.0.0-58",
+        "@aw-labs/ui": "0.0.0-58",
         "echarts": "^5.4.0",
         "tippy.js": "^6.3.7",
         "web-vitals": "^2.1.4"

src/lib/components/collapsible.svelte

@@ -1,21 +1,3 @@
 <ul class="collapsible">
-    <li class="collapsible-item">
-        <details class="collapsible-wrapper">
-            <summary class="collapsible-button">
-                <span class="text">
-                    <slot name="header" />
-                </span>
-                <span class="collapsible-button-optional">
-                    <slot name="subheader" />
-                </span>
-                <div class="icon">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="icon-minus" aria-hidden="true" />
-                </div>
-            </summary>
-            <p class="collapsible-content">
-                <slot />
-            </p>
-        </details>
-    </li>
+    <slot />
 </ul>

src/lib/components/collapsibleItem.svelte

@@ -0,0 +1,14 @@
+<li class="collapsible-item">
+    <details class="collapsible-wrapper">
+        <summary class="collapsible-button">
+            <span class="text"><slot name="title" /></span>
+            <span class="collapsible-button-optional"><slot name="subtitle" /></span>
+            <div class="icon">
+                <span class="icon-cheveron-down" aria-hidden="true" />
+            </div>
+        </summary>
+        <div class="collapsible-content">
+            <slot />
+        </div>
+    </details>
+</li>

src/lib/components/index.ts

@@ -16,6 +16,7 @@ export { default as DropList } from './dropList.svelte';
 export { default as DropListItem } from './dropListItem.svelte';
 export { default as DropListLink } from './dropListLink.svelte';
 export { default as Collapsible } from './collapsible.svelte';
+export { default as CollapsibleItem } from './collapsibleItem.svelte';
 export { default as DropTabs } from './dropTabs.svelte';
 export { default as DropTabsItem } from './dropTabsItem.svelte';
 export { default as Avatar } from './avatar.svelte';
@@ -26,3 +27,4 @@ export { default as Search } from './search.svelte';
 export { default as GridItem1 } from './gridItem1.svelte';
 export { default as Steps } from './steps.svelte';
 export { default as Step } from './step.svelte';
+export { default as Secret } from './secret.svelte';

src/lib/components/secret.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { Copy } from '.';
+
+    export let show = false;
+    export let value: string;
+</script>
+
+<div class="interactive-text-output" class:is-textarea={show}>
+    {#if show}
+        <span class="text u-line-height-1-5 u-break-word">{value}</span>
+    {:else}
+        <span class="text">••••••••••••</span>
+    {/if}
+    <div class="u-flex u-cross-child-start u-gap-8">
+        <button
+            class="interactive-text-output-button"
+            aria-label="show hidden text"
+            type="button"
+            on:click={() => (show = !show)}>
+            <span class:icon-eye-off={show} class:icon-eye={!show} aria-hidden="true" />
+        </button>
+        <Copy {value}>
+            <button class="interactive-text-output-button" aria-label="copy text" type="button">
+                <span class="icon-duplicate" aria-hidden="true" />
+            </button>
+        </Copy>
+    </div>
+</div>

src/lib/constants.ts

@@ -1,80 +1,130 @@
 export const scopes = [
-    'users.read',
-    'users.write',
-    'teams.read',
-    'teams.write',
-    'collections.read',
-    'collections.write',
-    'attributes.read',
-    'attributes.write',
-    'indexes.read',
-    'indexes.write',
-    'documents.read',
-    'documents.write',
-    'files.read',
-    'files.write',
-    'buckets.read',
-    'buckets.write',
-    'functions.read',
-    'functions.write',
-    'execution.read',
-    'execution.write',
-    'locale.read',
-    'avatars.read',
-    'health.read'
-];
-
-export const events = [
-    'account.create',
-    'account.update.email',
-    'account.update.name',
-    'account.update.password',
-    'users.update.email',
-    'users.update.name',
-    'users.update.password',
-    'account.update.prefs',
-    'account.recovery.create',
-    'account.recovery.update',
-    'account.verification.create',
-    'account.verification.update',
-    'account.delete',
-    'account.sessions.create',
-    'account.sessions.delete',
-    'account.sessions.update',
-    'database.collections.create',
-    'database.collections.update',
-    'database.collections.delete',
-    'database.attributes.create',
-    'database.attributes.delete',
-    'database.indexes.create',
-    'database.indexes.delete',
-    'database.documents.create',
-    'database.documents.update',
-    'database.documents.delete',
-    'functions.create',
-    'functions.update',
-    'functions.delete',
-    'functions.deployments.create',
-    'functions.deployments.update',
-    'functions.deployments.delete',
-    'functions.executions.create',
-    'functions.executions.update',
-    'storage.files.create',
-    'storage.files.update',
-    'storage.files.delete',
-    'storage.buckets.create',
-    'storage.buckets.update',
-    'storage.buckets.delete',
-    'users.create',
-    'users.update.prefs',
-    'users.update.status',
-    'users.delete',
-    'users.sessions.delete',
-    'teams.create',
-    'teams.update',
-    'teams.delete',
-    'teams.memberships.create',
-    'teams.memberships.update',
-    'teams.memberships.update.status',
-    'teams.memberships.delete'
+    {
+        scope: 'users.read',
+        description: "Access to read your project's users",
+        category: 'Authentication'
+    },
+    {
+        scope: 'users.write',
+        description: "Access to create, update, and delete your project's users",
+        category: 'Authentication'
+    },
+    {
+        scope: 'teams.read',
+        description: "Access to read your project's teams",
+        category: 'Authentication'
+    },
+    {
+        scope: 'teams.write',
+        description: "Access to create, update, and delete your project's teams",
+        category: 'Authentication'
+    },
+    {
+        scope: 'databases.read',
+        description: "Access to read your project's databases",
+        category: 'Database'
+    },
+    {
+        scope: 'databases.write',
+        description: "Access to create, update, and delete your project's databases",
+        category: 'Database'
+    },
+    {
+        scope: 'collections.read',
+        description: "Access to read your project's database collections",
+        category: 'Database'
+    },
+    {
+        scope: 'collections.write',
+        description: "Access to create, update, and delete your project's database collections",
+        category: 'Database'
+    },
+    {
+        scope: 'attributes.read',
+        description: "Access to read your project's database collection's attributes",
+        category: 'Database'
+    },
+    {
+        scope: 'attributes.write',
+        description:
+            "Access to create, update, and delete your project's database collection's attributes",
+        category: 'Database'
+    },
+    {
+        scope: 'indexes.read',
+        description: "Access to read your project's database collection's indexes",
+        category: 'Database'
+    },
+    {
+        scope: 'indexes.write',
+        description:
+            "Access to create, update, and delete your project's database collection's indexes",
+        category: 'Database'
+    },
+    {
+        scope: 'documents.read',
+        description: "Access to read your project's database documents",
+        category: 'Database'
+    },
+    {
+        scope: 'documents.write',
+        description: "Access to create, update, and delete your project's database documents",
+        category: 'Database'
+    },
+    {
+        scope: 'files.read',
+        description: "Access to read your project's storage files and preview images",
+        category: 'Storage'
+    },
+    {
+        scope: 'files.write',
+        description: "Access to create, update, and delete your project's storage files",
+        category: 'Storage'
+    },
+    {
+        scope: 'buckets.read',
+        description: "Access to read your project's storage buckets",
+        category: 'Storage'
+    },
+    {
+        scope: 'buckets.write',
+        description: "Access to create, update, and delete your project's storage buckets",
+        category: 'Storage'
+    },
+    {
+        scope: 'functions.read',
+        description: "Access to read your project's functions and code deployments",
+        category: 'Functions'
+    },
+    {
+        scope: 'functions.write',
+        description:
+            "Access to create, update, and delete your project's functions and code deployments",
+        category: 'Functions'
+    },
+    {
+        scope: 'execution.read',
+        description: "Access to read your project's execution logs",
+        category: 'Functions'
+    },
+    {
+        scope: 'execution.write',
+        description: "Access to execute your project's functions",
+        category: 'Functions'
+    },
+    {
+        scope: 'locale.read',
+        description: "Access to access your project's Locale service",
+        category: 'Other'
+    },
+    {
+        scope: 'avatars.read',
+        description: "Access to access your project's Avatars service",
+        category: 'Other'
+    },
+    {
+        scope: 'health.read',
+        description: "Access to read your project's health status",
+        category: 'Other'
+    }
 ];

src/lib/elements/forms/index.ts

@@ -11,6 +11,7 @@ export { default as InputSwitch } from './inputSwitch.svelte';
 export { default as InputTags } from './inputTags.svelte';
 export { default as InputFile } from './inputFile.svelte';
 export { default as InputCustomId } from './inputCustomId.svelte';
+export { default as InputDateTime } from './inputDateTime.svelte';
 export { default as InputSearch } from './inputSearch.svelte';
 export { default as InputRadio } from './inputRadio.svelte';
 export { default as InputSelect } from './inputSelect.svelte';