File tokens

src/lib/actions/analytics.ts

@@ -346,6 +346,9 @@ export enum Submit {
     FileCreate = 'submit_file_create',
     FileDelete = 'submit_file_delete',
     FileUpdatePermissions = 'submit_file_update_permissions',
+    FileTokenCreate = 'submit_file_token',
+    FileTokenDelete = 'submit_file_delete',
+    FileTokenUpdate = 'submit_file_update_expiry',
     BudgetCapUpdate = 'submit_budget_cap_update',
     BudgetAlertsUpdate = 'submit_budget_alert_conditions_update',
     CreditRedeem = 'submit_credit_redeem',

src/routes/(console)/project-[project]/overview/keys/expirationInput.svelte → src/lib/components/expirationInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Helper, InputDateTime, InputSelect } from '$lib/elements/forms';
+    import { InputDateTime, InputSelect } from '$lib/elements/forms';
     import { isSameDay, isValidDate, toLocaleDate } from '$lib/helpers/date';
 
     function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
@@ -47,6 +47,9 @@
     ];
 
     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;
@@ -65,6 +68,10 @@
     }
     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))) {
@@ -73,13 +80,8 @@
     }
 </script>
 
-<InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration date">
-    <svelte:fragment slot="helper">
-        {#if expirationSelect !== 'custom' && expirationSelect !== null}
-            <Helper type="neutral">Your key will expire in {toLocaleDate(value)}</Helper>
-        {/if}
-    </svelte:fragment>
+<InputSelect bind:value={expirationSelect} {options} id="preset" label={selectorLabel} {helper}>
 </InputSelect>
 {#if expirationSelect === 'custom'}
-    <InputDateTime required id="expire" label="" bind:value={expirationCustom} />
+    <InputDateTime required id="expire" label={dateSelectorLabel} bind:value={expirationCustom} />
 {/if}

src/lib/components/index.ts

@@ -82,3 +82,4 @@ export { default as BottomSheet } from './bottom-sheet/index';
 export { default as Confirm } from './confirm.svelte';
 export { default as UsageCard } from './usageCard.svelte';
 export { default as ViewToggle } from './viewToggle.svelte';
+export { default as ExpirationInput } from './expirationInput.svelte';

src/lib/components/permissions/actions.svelte

@@ -12,38 +12,60 @@
     export let showTeam: boolean;
     export let showLabel: boolean;
     export let showCustom: boolean;
+    export let hideOnClick: boolean = false;
     export let groups: Writable<Map<string, Permission>>;
 
     const dispatch = createEventDispatcher();
 </script>
 
 <Popover let:toggle padding="none" placement="bottom-start">
     <slot {toggle} />
-    <svelte:fragment slot="tooltip">
+    <svelte:fragment slot="tooltip" let:hide>
         <ActionMenu.Root>
             <ActionMenu.Item.Button
                 disabled={$groups.has('any')}
-                on:click={() => dispatch('create', ['any'])}>
+                on:click={(e) => {
+                    if (hideOnClick) hide(e);
+                    dispatch('create', ['any']);
+                }}>
                 Any
             </ActionMenu.Item.Button>
             <ActionMenu.Item.Button
                 disabled={$groups.has('guests')}
-                on:click={() => dispatch('create', ['guests'])}>
+                on:click={(e) => {
+                    if (hideOnClick) hide(e);
+                    dispatch('create', ['guests']);
+                }}>
                 All guests
             </ActionMenu.Item.Button>
             <ActionMenu.Item.Button
                 disabled={$groups.has('users')}
-                on:click={() => dispatch('create', ['users'])}>
+                on:click={(e) => {
+                    if (hideOnClick) hide(e);
+                    dispatch('create', ['users']);
+                }}>
                 All users
             </ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => (showUser = true)}
-                >Select users</ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => (showTeam = true)}
-                >Select teams</ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => (showLabel = true)}
-                >Label</ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => (showCustom = true)}
-                >Custom permission</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showUser = true;
+                    if (hideOnClick) hide(e);
+                }}>Select users</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showTeam = true;
+                    if (hideOnClick) hide(e);
+                }}>Select teams</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showLabel = true;
+                    if (hideOnClick) hide(e);
+                }}>Label</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showCustom = true;
+                    if (hideOnClick) hide(e);
+                }}>Custom permission</ActionMenu.Item.Button>
         </ActionMenu.Root>
     </svelte:fragment>
 </Popover>

src/lib/components/permissions/permissions.svelte

@@ -21,6 +21,7 @@
     import type { PinkColumn } from '$lib/helpers/types';
 
     export let withCreate = false;
+    export let hideOnClick = false;
     export let permissions: string[] = [];
 
     let showUser = false;
@@ -127,11 +128,11 @@
     }
 
     const columns: PinkColumn[] = [
-        { id: 'role', width: { min: 100 } },
-        { id: 'create', width: { min: 100 }, hide: !withCreate },
-        { id: 'read', width: { min: 100 } },
-        { id: 'update', width: { min: 100 } },
-        { id: 'delete', width: { min: 100 } },
+        { id: 'role', width: { min: 80 } },
+        { id: 'create', width: { min: 80 }, hide: !withCreate },
+        { id: 'read', width: { min: 80 } },
+        { id: 'update', width: { min: 80 } },
+        { id: 'delete', width: { min: 80 } },
         { id: 'action', width: 40 }
     ];
 </script>
@@ -195,6 +196,7 @@
             bind:showTeam
             bind:showUser
             {groups}
+            {hideOnClick}
             on:create={create}
             let:toggle>
             <Button secondary on:click={toggle}>
@@ -213,6 +215,7 @@
                     bind:showTeam
                     bind:showUser
                     {groups}
+                    {hideOnClick}
                     on:create={create}
                     let:toggle>
                     <Button compact icon on:click={toggle}>

src/lib/constants.ts

@@ -34,6 +34,7 @@ export enum Dependencies {
     DOCUMENTS = 'dependency:documents',
     BUCKET = 'dependency:bucket',
     FILE = 'dependency:file',
+    FILE_TOKENS = 'dependency:file_tokens',
     FILES = 'dependency:files',
     FUNCTION = 'dependency:function',
     FUNCTION_DOMAINS = 'dependency:function_domains',

src/lib/elements/forms/inputDateTime.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-    import { Input } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
+    import { Input, Layout, Selector } from '@appwrite.io/pink-svelte';
 
-    export let label: string = undefined;
     export let id: string;
-    export let name: string = id;
-    export let helper: string = undefined;
-    export let value = '';
-    export let placeholder = '';
+    export let label: string;
+    export let value: string;
     export let required = false;
     export let nullable = false;
     export let disabled = false;
@@ -16,43 +14,48 @@
     export let step: number | 'any' = 0.001;
 
     let error: string;
+    let element: HTMLInputElement;
 
-    function handleInvalid(event: Event) {
-        event.preventDefault();
-
-        const inputNode = event.currentTarget as HTMLInputElement;
-
-        if (inputNode.validity.valueMissing) {
-            error = 'This field is required';
-            return;
+    onMount(() => {
+        if (element && autofocus) {
+            element.focus();
+        }
+    });
+
+    let prevValue = '';
+    function handleNullChange(e: CustomEvent<boolean>) {
+        const isNull = e.detail;
+        if (isNull) {
+            prevValue = value;
+            value = null;
+        } else {
+            value = prevValue;
         }
-
-        error = inputNode.validationMessage;
     }
 
     $: if (value) {
         error = null;
     }
 </script>
 
-<Input.DateTime
-    {id}
-    {name}
-    {placeholder}
-    {disabled}
-    {required}
-    {label}
-    {step}
-    {nullable}
-    {readonly}
-    autofocus={autofocus || undefined}
-    autocomplete={autocomplete ? 'on' : 'off'}
-    helper={error || helper}
-    state={error ? 'error' : 'default'}
-    on:invalid={handleInvalid}
-    on:input
-    bind:value>
-    <slot name="start" slot="start" />
-    <slot name="info" slot="info" />
-    <slot name="end" slot="end" />
-</Input.DateTime>
+<Layout.Stack gap="s" direction="row">
+    <Input.DateTime
+        {id}
+        {label}
+        {disabled}
+        {readonly}
+        {required}
+        {value}
+        {step}
+        helper={error}
+        autocomplete={autocomplete ? 'on' : 'off'}>
+        {#if nullable}
+            <Selector.Checkbox
+                size="s"
+                slot="end"
+                label="NULL"
+                checked={value === null}
+                on:change={handleNullChange} />
+        {/if}
+    </Input.DateTime>
+</Layout.Stack>

src/lib/elements/forms/inputSelect.svelte

@@ -5,6 +5,7 @@
     export let id: string;
     export let label: string | undefined = undefined;
     export let value: string | number | boolean | null;
+    export let helper: string | undefined = undefined;
     export let optionalText: string | number | boolean | null | undefined = undefined;
     export let placeholder = '';
     export let required = false;
@@ -54,8 +55,8 @@
     {placeholder}
     {disabled}
     {isSearchable}
+    helper={error ?? helper}
     {required}
-    helper={error}
     state={error ? 'error' : 'default'}
     on:invalid={handleInvalid}
     on:input

src/lib/helpers/date.ts

@@ -15,13 +15,17 @@ if (browser) {
     dayjs.extend(relativeTime);
 }
 
-export const toLocaleDate = (datetime: string) => {
+export const toLocaleDate = (datetime: string, format: 'dd mm yyyy' | 'default' = 'default') => {
     const date = new Date(datetime);
 
     if (isNaN(date.getTime())) {
         return 'n/a';
     }
 
+    if (format === 'dd mm yyyy') {
+        return `${date.getDate().toString().padStart(2, '0')} ${date.toLocaleString('en', { month: 'short' })} ${date.getFullYear()}`;
+    }
+
     const options: Intl.DateTimeFormatOptions = {
         year: 'numeric',
         month: 'short',
@@ -33,6 +37,7 @@ export const toLocaleDate = (datetime: string) => {
 
 export const toLocaleDateTime = (
     datetime: string | number,
+    is12HourFormat: boolean = false,
     timeZone: string | undefined = undefined
 ) => {
     const date = new Date(datetime);
@@ -48,7 +53,8 @@ export const toLocaleDateTime = (
         day: 'numeric',
         hour: 'numeric',
         minute: 'numeric',
-        hourCycle: 'h23'
+        hourCycle: is12HourFormat ? 'h12' : 'h23',
+        ...(is12HourFormat && { hour12: true })
     };
 
     return date.toLocaleDateString('en', options);

src/lib/stores/sdk.ts

@@ -20,7 +20,8 @@ import {
     Teams,
     Users,
     Vcs,
-    Sites
+    Sites,
+    Tokens
 } from '@appwrite.io/console';
 import { Billing } from '../sdk/billing';
 import { Backups } from '../sdk/backups';
@@ -56,6 +57,7 @@ const sdkForProject = {
     project: new Project(clientProject),
     projectApi: new ProjectApi(clientProject),
     storage: new Storage(clientProject),
+    tokens: new Tokens(clientProject),
     teams: new Teams(clientProject),
     users: new Users(clientProject),
     vcs: new Vcs(clientProject),

src/routes/(console)/project-[project]/auth/templates/resetEmail.svelte

@@ -49,14 +49,14 @@
     <svelte:fragment slot="title">Reset email template?</svelte:fragment>
 
     <Layout.Stack>
-    <p class="text">
-        Are you sure you want to reset the email template?
-        <b>Default values will be set in all inputs.</b>
-    </p>
+        <p class="text">
+            Are you sure you want to reset the email template?
+            <b>Default values will be set in all inputs.</b>
+        </p>
 
-    {#if error}
-        <Alert.Inline status="warning">{error}</Alert.Inline>
-    {/if}
+        {#if error}
+            <Alert.Inline status="warning">{error}</Alert.Inline>
+        {/if}
     </Layout.Stack>
 
     <svelte:fragment slot="footer">

src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte

@@ -9,7 +9,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { Alert } from '@appwrite.io/pink-svelte';
     import { project } from '../../../store';
-    import ExpirationInput from '../expirationInput.svelte';
+    import { ExpirationInput } from '$lib/components';
     import { key } from './store';
 
     let expiration = $key.expire;

src/routes/(console)/project-[project]/overview/keys/create/+page.svelte

@@ -4,7 +4,7 @@
     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 { ExpirationInput } from '$lib/components';
     import Scopes from '../scopes.svelte';
     import Button from '$lib/elements/forms/button.svelte';
     import Form from '$lib/elements/forms/form.svelte';