From 3ed1463a42b8a11db5df5efcfc0b92c5eea7ffcf Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 10:42:36 +0200
Subject: [PATCH] feat: add helpers to inputs

---
 src/lib/elements/forms/helper.svelte        | 12 +++++++++---
 src/lib/elements/forms/inputEmail.svelte    |  1 -
 src/lib/elements/forms/inputNumber.svelte   | 18 +++++++++++++++++-
 src/lib/elements/forms/inputPassword.svelte | 18 +++++++++++++++++-
 src/lib/elements/forms/inputPhone.svelte    | 18 +++++++++++++++++-
 src/lib/elements/forms/inputText.svelte     | 18 +++++++++++++++++-
 src/lib/elements/forms/inputTextarea.svelte | 18 +++++++++++++++++-
 7 files changed, 94 insertions(+), 9 deletions(-)

diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
index b79019a53..c60baab65 100644
--- a/src/lib/elements/forms/helper.svelte
+++ b/src/lib/elements/forms/helper.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
-    export let type: false | 'success' | 'warning' | 'error' = 'warning';
+    export let type: false | 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
 
     let icon = '';
     switch (type) {
+        case 'neutral':
+            icon = 'info';
+            break;
+        case 'info':
+            icon = 'info';
+            break;
         case 'success':
             icon = 'check-circle';
             break;
@@ -20,11 +26,11 @@
     }
 </script>
 
-<li class={`helper u-${type} u-margin-block-start-8"`}>
+<p class={`helper u-${type} u-margin-block-start-12"`}>
     {#if icon !== ''}
         <span class={`icon-${icon}`} aria-hidden="true" />
     {/if}
     <span class="text">
         <slot />
     </span>
-</li>
+</p>
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index f8370ebcc..b935ecc76 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -13,7 +13,6 @@
     export let autocomplete = false;
     export let errorMessage = 'Your email should be formatted as: name@example.com';
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-
     export let showHelper = false;
 
     let element: HTMLInputElement;
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index 589296360..f6d3691b9 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.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;
@@ -12,6 +12,9 @@
     export let autofocus = false;
     export let maxlength: number = null;
     export let minlength: number = null;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLInputElement;
 
@@ -20,12 +23,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -37,4 +50,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 5140ca435..7a69e54e4 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let id: string;
     export let label: string;
@@ -13,6 +13,9 @@
     export let meter = true;
     export let autocomplete = false;
     export let showPasswordButton = false;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLInputElement;
     let showInPlainText = false;
@@ -23,6 +26,14 @@
         }
     });
 
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
     $: strength = value ? value.length * 10 : 0;
 </script>
 
@@ -31,6 +42,7 @@
     <div class="input-text-wrapper">
         {#if showInPlainText}
             <input
+                on:invalid={handleInvalid}
                 type="text"
                 {id}
                 name={id}
@@ -43,6 +55,7 @@
                 bind:this={element} />
         {:else}
             <input
+                on:invalid={handleInvalid}
                 {id}
                 {placeholder}
                 {disabled}
@@ -77,4 +90,7 @@
             </button>
         {/if}
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index e0b2dfaf1..d8a0665cc 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.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;
@@ -12,6 +12,9 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLInputElement;
 
@@ -20,12 +23,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -37,4 +50,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index f106c6a91..826d02a92 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.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;
@@ -12,6 +12,9 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLInputElement;
 
@@ -20,12 +23,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -37,4 +50,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 7c892d234..6d084346e 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.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;
@@ -11,6 +11,9 @@
     export let disabled = false;
     export let autofocus = false;
     export let maxlength: number = null;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLTextAreaElement;
 
@@ -19,12 +22,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <textarea
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -34,4 +47,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>