Merge pull request #3 from appwrite/arman_educational

Arman educational

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} />

src/lib/components/index.ts

@@ -13,3 +13,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 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';

src/lib/components/infoSection.svelte

@@ -0,0 +1,4 @@
+<div>
+    <i class="icon-info-circled" />
+    <slot />
+</div>

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>

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>

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>

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} />

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

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">

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>

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 />

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}

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';

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

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;

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 />

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} />

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 />

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>

src/routes/console/[project]/users/_toggleOAuth.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Modal, Copy, InfoSection } from '$lib/components';
+    import { Button, InputPassword, InputText, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+
+    export let showModal = false;
+    export let provider: string;
+    let appId: string, secret: string;
+    const projectId = $page.params.project;
+    let redirectURI = `${
+        sdkForConsole.config.endpoint
+    }/account/session/oauth2/callback/${provider.toLocaleLowerCase()}/${projectId}`;
+
+    const update = async () => {
+        try {
+            const oauth = await sdkForConsole.projects.updateOAuth2(
+                projectId,
+                provider,
+                appId,
+                secret
+            );
+            console.log(oauth);
+            showModal = false;
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={update}>
+    <Modal bind:show={showModal}>
+        <svelte:fragment slot="header">{provider} OAuth2 Settings</svelte:fragment>
+        <InputText
+            id="appId"
+            label="App Id"
+            autofocus={true}
+            autocomplete={false}
+            bind:value={appId} />
+        <InputPassword id="secret" label="App Secret" meter={false} bind:value={secret} />
+        <InfoSection>
+            <p>
+                To complete set up, add this OAuth2 redirect URI to your {provider} app configuration.
+            </p>
+            <Copy bind:value={redirectURI} />
+        </InfoSection>
+        <svelte:fragment slot="footer">
+            <Button submit>Update</Button>
+            <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>

src/routes/console/[project]/users/index.svelte

@@ -44,6 +44,7 @@
         <div aria-busy="true" />
     {:then response}
         {#if response.total}
+            <p>{response.total} users found</p>
             <Table>
                 <TableHeader>
                     <TableCellHead width={30} />