From 67cf564b01e6d662e037fbb551fa16b0f12bf383 Mon Sep 17 00:00:00 2001
From: HorizonCode <horizoncode88@gmail.com>
Date: Thu, 11 Jan 2024 15:55:56 +0100
Subject: [PATCH] add password showing option

---
 src/pages/Login.svelte | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/pages/Login.svelte b/src/pages/Login.svelte
index df15c36..63e3131 100644
--- a/src/pages/Login.svelte
+++ b/src/pages/Login.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
   import { Input, Button, Spinner, Checkbox } from "flowbite-svelte";
-  import { performLogin } from "../util/loginUtil";
   import type { User } from "../types/user";
   import type { Error } from "../types/error";
   import { currentPage, currentUser, startup } from "../storage/localStore";
   import toast from "svelte-french-toast";
   import { Page } from "../consts/pages";
+  import { EyeSlashSolid, EyeSolid } from "flowbite-svelte-icons";
 
   let loading = false;
   let username = "";
   let password = "";
   let saveCredentials = false;
+  let showPassword = false;
 
   const processLogin = async () => {
     loading = true;
@@ -122,12 +123,25 @@
       bind:value={username}
     />
     <Input
-      type="password"
+      type={showPassword ? "text" : "password"}
       placeholder="Password"
       size="md"
       disabled={loading}
       bind:value={password}
-    />
+    >
+      <Button
+        slot="right"
+        color="none"
+        class="!outline-none !ring-0 !p-0 !m-0 !bg-transparent !border-none"
+        on:click={() => (showPassword = !showPassword)}
+      >
+        {#if showPassword}
+          <EyeSolid class="outline-none border-none" />
+        {:else}
+          <EyeSlashSolid class="outline-none border-none" />
+        {/if}
+      </Button>
+    </Input>
     <Checkbox bind:checked={saveCredentials}>Save credentials</Checkbox>
     <div class="flex flex-col justify-center items-center gap-5 mt-1">
       <Button