From 5f86348ea20de48539be027e268ba1a6903dc452 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 24 Jun 2022 17:55:20 +0200
Subject: [PATCH] feat: show/hide btn for password inputs

---
 src/lib/elements/forms/inputPassword.svelte | 45 ++++++++++++++++-----
 1 file changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 6f94faf40..7ecbb4260 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -11,8 +11,10 @@
     export let autofocus = false;
     export let meter = true;
     export let autocomplete = true;
+    export let showPasswordButton = false;
 
     let element: HTMLInputElement;
+    let showInPlainText = false;
 
     onMount(() => {
         if (element && autofocus) {
@@ -26,16 +28,31 @@
 <FormItem>
     <label class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
-        <input
-            {id}
-            {placeholder}
-            {disabled}
-            {required}
-            autocomplete={autocomplete ? 'on' : 'off'}
-            type="password"
-            class="input-text"
-            bind:value
-            bind:this={element} />
+        {#if showInPlainText}
+            <input
+                type="text"
+                {id}
+                name={id}
+                {placeholder}
+                {required}
+                {disabled}
+                autocomplete={autocomplete ? 'on' : 'off'}
+                class="input-text"
+                bind:value
+                bind:this={element} />
+        {:else}
+            <input
+                {id}
+                {placeholder}
+                {disabled}
+                {required}
+                autocomplete={autocomplete ? 'on' : 'off'}
+                type="password"
+                class="input-text"
+                bind:value
+                bind:this={element} />
+        {/if}
+
         {#if meter}
             <meter
                 value={strength > 100 ? 100 : strength}
@@ -47,5 +64,13 @@
                 class:is-strong={strength > 66 && strength <= 100}
                 aria-label="Password strength weak" />
         {/if}
+        {#if showPasswordButton}
+            <button
+                on:click={() => (showInPlainText = !showInPlainText)}
+                class="show-password-button"
+                aria-label="show password">
+                <span class="icon-eye" aria-hidden="true" />
+            </button>
+        {/if}
     </div>
 </FormItem>