Merge branch 'main' into tooltip

appwrite · May 14, 2022 · c62f3ce · c62f3ce
2 parents 669d025 + 4997d2c
commit c62f3ce
Show file tree

Hide file tree

Showing 36 changed files with 2,982 additions and 3,032 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,32 +23,33 @@
         "chart.js": "^3.7.1"
     },
     "devDependencies": {
-        "@playwright/test": "^1.21.1",
-        "@sveltejs/adapter-auto": "1.0.0-next.36",
-        "@sveltejs/kit": "1.0.0-next.318",
-        "@sveltejs/vite-plugin-svelte": "^1.0.0-next.41",
+        "@playwright/test": "^1.22.0",
+        "@sveltejs/adapter-auto": "1.0.0-next.40",
+        "@sveltejs/kit": "1.0.0-next.328",
+        "@sveltejs/vite-plugin-svelte": "^1.0.0-next.44",
         "@testing-library/dom": "^8.13.0",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/svelte": "^3.1.1",
-        "@testing-library/user-event": "^14.1.1",
-        "@typescript-eslint/eslint-plugin": "^5.20.0",
-        "@typescript-eslint/parser": "^5.20.0",
-        "eslint": "^8.13.0",
+        "@testing-library/user-event": "^14.2.0",
+        "@typescript-eslint/eslint-plugin": "^5.23.0",
+        "@typescript-eslint/parser": "^5.23.0",
+        "eslint": "^8.15.0",
         "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-svelte3": "^3.4.1",
-        "jest": "^27.5.1",
+        "eslint-plugin-svelte3": "^4.0.0",
+        "jest": "^28.1.0",
+        "jest-environment-jsdom": "^28.1.0",
         "pre-commit": "^1.2.2",
         "prettier": "^2.6.2",
         "prettier-plugin-svelte": "^2.7.0",
-        "sass": "^1.50.1",
-        "svelte": "^3.47.0",
+        "sass": "^1.51.0",
+        "svelte": "^3.48.0",
         "svelte-check": "^2.7.0",
         "svelte-jester": "^2.3.2",
         "svelte-preprocess": "^4.10.6",
-        "ts-jest": "^27.1.4",
+        "ts-jest": "^28.0.2",
         "tslib": "^2.4.0",
-        "typescript": "^4.6.3",
-        "vite": "^2.9.5"
+        "typescript": "^4.6.4",
+        "vite": "^2.9.9"
     },
     "type": "module",
     "jest": {

diff --git a/src/lib/components/avatar.svelte b/src/lib/components/avatar.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    export let size: number;
+    export let src: string;
+    export let name: string;
+</script>
+
+<img
+    width={size}
+    height={size}
+    class="avatar"
+    style="--size: {size}px"
+    {src}
+    title={name}
+    alt={name} />
diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
@@ -5,10 +5,6 @@
 
     const copy = async () => {
         try {
-            if (navigator.clipboard === undefined) {
-                //TODO: add fallback to old methods
-                throw new Error('Clipboard API only available to SSL');
-            }
             await navigator.clipboard.writeText(value);
             addNotification({
                 message: 'Copied to clipboard.',

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
@@ -14,3 +14,7 @@ export { default as DropListItem } from './dropListItem.svelte';
 export { default as DropListLink } from './dropListLink.svelte';
 export { default as Collapsible } from './collapsible.svelte';
 export { default as Tooltip } from './tooltip.svelte';
+export { default as Avatar } from './avatar.svelte';
+export { default as SwitchBox } from './switchBox.svelte';
+export { default as SwitchBoxes } from './switchBoxes.svelte';
+export { default as InfoSection } from './infoSection.svelte';
diff --git a/src/lib/components/infoSection.svelte b/src/lib/components/infoSection.svelte
@@ -0,0 +1,4 @@
+<div>
+    <i class="icon-info-circled" />
+    <slot />
+</div>
diff --git a/src/lib/components/switchBox.svelte b/src/lib/components/switchBox.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    type SwitchBox = {
+        label: string;
+        id: string;
+        src: string;
+        alt: string;
+        href: string;
+        linkText: string;
+        value: boolean;
+        required: boolean;
+        disabled: boolean;
+        wip: boolean;
+    };
+
+    export let box: SwitchBox;
+
+    let { label, id, src, alt, href, linkText, disabled, required, value, wip } = box;
+
+    const dispatch = createEventDispatcher();
+
+    //TODO: move SwitchBox type outside  component
+</script>
+
+<li class="card">
+    <label class="switch-box" for={id}>
+        <div class="switch-box-image">
+            <img height="50" width="50" src={src || 'https://via.placeholder.com/50'} {alt} />
+        </div>
+        <span class="switch-box-title">{label}</span>
+        {#if !wip}
+            <a {href} class="link" target="_blank">
+                <span class="text">{linkText || 'Docs'} </span>
+                <span class="icon-link-ext" aria-hidden="true" />
+            </a>
+            <input
+                {id}
+                {disabled}
+                {required}
+                type="checkbox"
+                class="switch"
+                role="switch"
+                bind:checked={value}
+                on:change={() => dispatch('updated', { value, id })} />
+        {/if}
+    </label>
+</li>
diff --git a/src/lib/components/switchBoxes.svelte b/src/lib/components/switchBoxes.svelte
@@ -0,0 +1,13 @@
+<script>
+    import SwitchBox from './switchBox.svelte';
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+
+    export let boxes;
+</script>
+
+<ul class="grid-box">
+    {#each boxes as box}
+        <SwitchBox {box} on:updated={(e) => dispatch('updated', e.detail)} />
+    {/each}
+</ul>
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
@@ -9,6 +9,7 @@
     export let required = false;
     export let disabled = false;
     export let autofocus = false;
+    export let meter = true;
 
     let element: HTMLInputElement;
 
@@ -33,14 +34,16 @@
             class="input-text"
             bind:value
             bind:this={element} />
-        <meter
-            value={strength > 100 ? 100 : strength}
-            min="0"
-            max="100"
-            class="password-meter"
-            class:is-weak={strength !== 0 && strength <= 33}
-            class:is-medium={strength > 33 && strength <= 66}
-            class:is-strong={strength > 66 && strength <= 100}
-            aria-label="Password strength week" />
+        {#if meter}
+            <meter
+                value={strength > 100 ? 100 : strength}
+                min="0"
+                max="100"
+                class="password-meter"
+                class:is-weak={strength !== 0 && strength <= 33}
+                class:is-medium={strength > 33 && strength <= 66}
+                class:is-strong={strength > 66 && strength <= 100}
+                aria-label="Password strength weak" />
+        {/if}
     </div>
 </FormItem>
diff --git a/src/lib/elements/forms/inputSearch.svelte b/src/lib/elements/forms/inputSearch.svelte
@@ -17,7 +17,7 @@
         }
     });
 
-    const onKeyUp = (event: KeyboardEvent) => {
+    const valueChange = (event: Event) => {
         clearTimeout(timer);
         timer = setTimeout(() => {
             const target = event.target as HTMLInputElement;
@@ -32,5 +32,5 @@
     {required}
     type="search"
     class="input-text"
-    on:keyup={onKeyUp}
+    on:input={valueChange}
     bind:this={element} />
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
@@ -15,7 +15,7 @@
 <FormItem>
     <label class="label" for={id}>{label}</label>
     <div class="select">
-        <select bind:value {required} {disabled}>
+        <select bind:value {id} {required} {disabled}>
             {#each options as option}
                 <option value={option.value} selected={option.value === value}>
                     {option.label}

diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
@@ -9,6 +9,7 @@
     export let required = false;
     export let disabled = false;
     export let autofocus = false;
+    export let autocomplete = true;
     export let maxlength: number = null;
 
     let element: HTMLInputElement;
@@ -29,6 +30,7 @@
             {disabled}
             {required}
             {maxlength}
+            autocomplete={autocomplete ? 'on' : 'off'}
             type="text"
             class="input-text"
             bind:value

diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
@@ -4,7 +4,7 @@
             <li class="inline-links-item">
                 <a class="link" href="https://github.com/appwrite/appwrite" target="_blank">
                     <span class="icon-github-circled" aria-hidden="true" />
-                    <span class="text">GitHun</span>
+                    <span class="text">GitHub</span>
                 </a>
             </li>
             <li class="inline-links-item">

diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
@@ -2,7 +2,7 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { DropList, DropListItem, DropListLink } from '$lib/components';
+    import { DropList, DropListItem, DropListLink, Avatar } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
@@ -46,12 +46,10 @@
             <DropList bind:show={showDropdown} position="bottom" horizontal="left">
                 <button class="transparent-button" on:click={() => (showDropdown = !showDropdown)}>
                     <span class="is-only-desktop">{$user.name}</span>
-                    <img
-                        width="40"
-                        height="40"
-                        class="user-image"
-                        src={sdkForConsole.avatars.getInitials($user.name, 40, 40).toString()}
-                        alt="" />
+                    <Avatar
+                        size={50}
+                        name={$user.name}
+                        src={sdkForConsole.avatars.getInitials($user.name, 50, 50).toString()} />
                 </button>
                 <svelte:fragment slot="list">
                     <DropListLink href="/console/$me" icon="user">Your Account</DropListLink>

diff --git a/src/routes/console/[project]/database/__layout.svelte b/src/routes/console/[project]/database/__layout.svelte
@@ -1,6 +1,5 @@
 <script>
     import { base } from '$app/paths';
-
     import { page } from '$app/stores';
     import { Back } from '$lib/components';
     import { Cover } from '$lib/layout';
@@ -22,4 +21,5 @@
         <Tabs />
     </Cover>
 {/if}
+
 <slot />
diff --git a/src/routes/console/[project]/database/collection/[collection]/index.svelte b/src/routes/console/[project]/database/collection/[collection]/index.svelte
@@ -36,6 +36,7 @@
         <div aria-busy="true" />
     {:then response}
         {#if response.total}
+            <p>{response.total} documents found</p>
             <Table>
                 <TableHeader>
                     {#each columns as column}

diff --git a/src/routes/console/[project]/functions/__layout.svelte b/src/routes/console/[project]/functions/__layout.svelte
@@ -1,6 +1,5 @@
 <script>
     import { base } from '$app/paths';
-
     import { page } from '$app/stores';
     import { Back } from '$lib/components';
     import { Cover } from '$lib/layout';

diff --git a/src/routes/console/[project]/functions/index.svelte b/src/routes/console/[project]/functions/index.svelte
@@ -28,6 +28,7 @@
         <div aria-busy="true" />
     {:then response}
         {#if response.total}
+            <p>{response.total} functions found</p>
             <Tiles>
                 {#each response.functions as func}
                     <Tile

diff --git a/src/routes/console/[project]/keys/__layout.svelte b/src/routes/console/[project]/keys/__layout.svelte
@@ -1,8 +1,6 @@
 <script>
     import { base } from '$app/paths';
-
     import { page } from '$app/stores';
-
     import { Back } from '$lib/components';
     import { Cover } from '$lib/layout';
     const projectId = $page.params.project;

diff --git a/src/routes/console/[project]/settings/__layout.svelte b/src/routes/console/[project]/settings/__layout.svelte
@@ -1,6 +1,5 @@
 <script>
     import { base } from '$app/paths';
-
     import { page } from '$app/stores';
     import { Back } from '$lib/components';
     import { Cover } from '$lib/layout';
@@ -20,5 +19,4 @@
     <svelte:fragment slot="title">Settings</svelte:fragment>
     <Tabs />
 </Cover>
-
 <slot />
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
@@ -47,6 +47,7 @@
         <div aria-busy="true" />
     {:then response}
         {#if response.total}
+            <p>{response.total} files found</p>
             <Table>
                 <TableHeader>
                     <TableCellHead width={30} />

diff --git a/src/routes/console/[project]/users/__layout.svelte b/src/routes/console/[project]/users/__layout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { base } from '$app/paths';
-
     import { page } from '$app/stores';
     import { Back } from '$lib/components';
     import { Cover } from '$lib/layout';
@@ -21,5 +20,4 @@
         <Tabs />
     </Cover>
 {/if}
-
 <slot />
diff --git a/src/routes/console/[project]/users/_setUserLimit.svelte b/src/routes/console/[project]/users/_setUserLimit.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { Modal, InfoSection } from '$lib/components';
+    import { Button, InputNumber, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { project } from '../store';
+
+    export let showUserLimitModal = false;
+    export let authLimit: number;
+
+    const projectId = $project.$id;
+    let userLimit: number = $project.authLimit;
+
+    const update = async () => {
+        try {
+            const oauth = await sdkForConsole.projects.updateAuthLimit(projectId, userLimit);
+            console.log(oauth);
+            authLimit = userLimit;
+            showUserLimitModal = false;
+            addNotification({
+                type: 'success',
+                message: 'Updated project users limit successfully'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={update}>
+    <Modal bind:show={showUserLimitModal}>
+        <svelte:fragment slot="header">Max Allowed Users</svelte:fragment>
+        <InputNumber id="userLimit" label="User Limit" autofocus={true} bind:value={userLimit} />
+        <InfoSection>
+            <p>
+                This limit will prevent new users from signing up for your project, no matter what
+                auth method has been used. You will still be able to create users and team
+                memberships from your Appwrite console. For an unlimited amount of users, set the
+                limit to 0. Max limit is 10,000.
+            </p>
+        </InfoSection>
+        <svelte:fragment slot="footer">
+            <Button submit>Update</Button>
+            <Button secondary on:click={() => (showUserLimitModal = false)}>Cancel</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>