Merge pull request #34 from appwrite/draft-feat-form-frontend-error-handling

feat: error handling in forms

Author: TorstenDittmann

package-lock.json

@@ -8,7 +8,6 @@
         "dev": "vite dev",
         "build": "vite build",
         "preview": "vite preview",
-        "prepare": "svelte-kit sync",
         "check": "svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
         "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint .",
@@ -26,33 +25,33 @@
         "tippy.js": "^6.3.7"
     },
     "devDependencies": {
-        "@playwright/test": "^1.24.0",
-        "@sveltejs/adapter-auto": "1.0.0-next.63",
-        "@sveltejs/kit": "1.0.0-next.390",
+        "@playwright/test": "^1.25.0",
+        "@sveltejs/adapter-auto": "1.0.0-next.64",
+        "@sveltejs/kit": "1.0.0-next.405",
         "@sveltejs/vite-plugin-svelte": "^1.0.1",
-        "@testing-library/dom": "^8.16.0",
-        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/dom": "^8.17.1",
+        "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/svelte": "^3.1.3",
         "@testing-library/user-event": "^14.3.0",
         "@types/gtag.js": "^0.0.10",
-        "@typescript-eslint/eslint-plugin": "^5.30.7",
-        "@typescript-eslint/parser": "^5.30.7",
-        "@vitest/ui": "^0.18.1",
-        "eslint": "^8.20.0",
+        "@typescript-eslint/eslint-plugin": "^5.33.1",
+        "@typescript-eslint/parser": "^5.33.1",
+        "@vitest/ui": "^0.22.0",
+        "eslint": "^8.22.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-svelte3": "^4.0.0",
         "pre-commit": "^1.2.2",
         "prettier": "^2.7.1",
         "prettier-plugin-svelte": "^2.7.0",
-        "sass": "^1.53.0",
+        "sass": "^1.54.4",
         "svelte": "^3.49.0",
         "svelte-check": "^2.8.0",
         "svelte-jester": "^2.3.2",
         "svelte-preprocess": "^4.10.7",
         "tslib": "^2.4.0",
         "typescript": "^4.7.4",
-        "vite": "^3.0.0",
-        "vitest": "^0.18.1"
+        "vite": "^3.0.8",
+        "vitest": "^0.22.0"
     },
     "type": "module",
     "pre-commit": [

package.json

@@ -17,7 +17,7 @@
                 <span class="icon-x" aria-hidden="true" />
             </button>
             <p class="u-flex-basis-100-percent">
-                <slot />
+                <slot name="subtitle" />
             </p>
         </header>
         <div class="modal-content">

src/lib/components/InnerModal.svelte

@@ -3,13 +3,18 @@
     import type { Buttons } from '../stores/notifications';
 
     export let dismissible = false;
-    export let type: '' | 'info' | 'success' | 'warning' | 'danger' = 'info';
+    export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
     export let buttons: Buttons[] = [];
 
     const dispatch = createEventDispatcher();
 </script>
 
-<section class={`alert is-${type} `}>
+<section
+    class="alert"
+    class:is-success={type === 'success'}
+    class:is-warning={type === 'warning'}
+    class:is-danger={type === 'error'}
+    class:is-info={type === 'info'}>
     <div class="alert-grid">
         {#if dismissible}
             <button
@@ -19,7 +24,12 @@
                 <span class="icon-x" aria-hidden="true" />
             </button>
         {/if}
-        <span class="icon-info" aria-hidden="true" />
+        <span
+            class:icon-info={type === 'info'}
+            class:icon-check-circle={type === 'success'}
+            class:icon-exclamation={type === 'warning'}
+            class:icon-exclamation-circle={type === 'error'}
+            aria-hidden="true" />
         <div class="content">
             {#if $$slots.title}
                 <h6 class="title">

src/lib/components/alert.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
-    import { createEventDispatcher, onMount } from 'svelte';
+    import { browser } from '$app/env';
+    import { createEventDispatcher } from 'svelte';
     import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
+    import { Alert } from '$lib/components';
 
     export let show = false;
     export let size: 'small' | 'big' = null;
     export let warning = false;
-    let browser = false;
-    //TODO: explore other solutions compatible with testing library
-    onMount(() => {
-        browser = true;
-    });
+    export let error: string = null;
 
     const dispatch = createEventDispatcher();
     const transitionFly: FlyParams = {
@@ -26,19 +24,20 @@
             closeModal();
         }
     };
-
     const handleBLur = (event: MouseEvent) => {
         const target: Partial<HTMLElement> = event.target;
         if (target.hasAttribute('data-curtain')) {
             closeModal();
         }
     };
-
     const closeModal = () => {
         show = false;
         dispatch('close');
     };
 
+    /**
+     * Workaround until https://github.com/sveltejs/svelte/issues/3105 is resolved.
+     */
     $: if (browser) {
         if (show) {
             document.body.classList.add('u-overflow-hidden');
@@ -76,6 +75,16 @@
                 </button>
             </header>
             <div class="modal-content">
+                {#if error}
+                    <Alert
+                        dismissible
+                        type="warning"
+                        on:dismiss={() => {
+                            error = null;
+                        }}>
+                        {error}
+                    </Alert>
+                {/if}
                 <slot />
             </div>
             <div class="modal-footer">

src/lib/components/modal.svelte

@@ -1,3 +1,3 @@
-<form class="form" on:submit|preventDefault>
+<form class="form common-section" on:submit|preventDefault>
     <slot />
 </form>

src/lib/elements/forms/form.svelte

@@ -1,30 +1,24 @@
 <script lang="ts">
-    export let type: false | 'success' | 'warning' | 'error' = 'warning';
-
-    let icon = '';
-    switch (type) {
-        case 'success':
-            icon = 'check-circle';
-            break;
-        case 'warning':
-            icon = 'exclamation';
-            break;
-
-        case 'error':
-            icon = 'exclamation-circle';
-            break;
-
-        default:
-            icon = '';
-            break;
-    }
+    export let type: 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
 </script>
 
-<li class={`helper u-${type} u-margin-block-start-8"`}>
-    {#if icon !== ''}
-        <span class={`icon-${icon}`} aria-hidden="true" />
+<p
+    class="helper u-margin-block-start-12"
+    class:u-info={type === 'info'}
+    class:u-error={type === 'error'}
+    class:u-success={type === 'success'}
+    class:u-warning={type === 'warning'}
+    class:u-neutral={type === 'neutral'}>
+    {#if type}
+        <span
+            class:icon-info={type === 'info'}
+            class:icon-error={type === 'error'}
+            class:icon-success={type === 'success'}
+            class:icon-warning={type === 'warning'}
+            class:icon-neutral={type === 'neutral'}
+            aria-hidden="true" />
     {/if}
     <span class="text">
         <slot />
     </span>
-</li>
+</p>

src/lib/elements/forms/helper.svelte

@@ -1,17 +1,43 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
     export let id: string;
     export let value = false;
     export let required = false;
     export let disabled = false;
+
+    let element: HTMLInputElement;
+    let error: string;
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+        error = element.validationMessage;
+    };
+
+    $: if (value) {
+        error = null;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
-        <input {id} {disabled} {required} type="checkbox" bind:checked={value} />
+        <input
+            {id}
+            {disabled}
+            {required}
+            type="checkbox"
+            bind:this={element}
+            bind:checked={value}
+            on:invalid={handleInvalid} />
     </div>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
+    {/if}
 </FormItem>

src/lib/elements/forms/inputCheckbox.svelte

@@ -7,9 +7,11 @@
     export let placeholder = '';
     export let required = false;
     export let autofocus = false;
+
     let element: HTMLInputElement;
     let unique = true;
     let bench = '';
+
     const toggle = async () => {
         unique = !unique;
         if (unique) {

src/lib/elements/forms/inputCustomId.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -13,12 +13,30 @@
     export let autocomplete = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        if (element.validity.typeMismatch) {
+            error = 'Your email should be formatted as: [email protected]';
+            return;
+        }
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+        error = element.validationMessage;
+    };
+
+    $: if (value) {
+        error = null;
+    }
 </script>
 
 <FormItem>
@@ -29,10 +47,14 @@
             {placeholder}
             {disabled}
             {required}
-            autocomplete={autocomplete ? 'on' : 'off'}
             type="email"
             class="input-text"
+            autocomplete={autocomplete ? 'on' : 'off'}
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
+    {/if}
 </FormItem>