Merge pull request #3 from appwrite/arman_educational

Arman educational

Author: TorstenDittmann

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>