From 013d8b5c5db7579396db104b42569d68e2589039 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matija=20Kljaji=C4=87?=
 <64456143+matijakljajic@users.noreply.github.com>
Date: Tue, 31 Dec 2024 02:13:29 +0100
Subject: [PATCH] feat: show/hide pass

---
 src/routes/admin/register/+page.svelte | 28 +++++++++++++++++++++++++-
 src/routes/login/+page.svelte          | 28 +++++++++++++++++++++++++-
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/routes/admin/register/+page.svelte b/src/routes/admin/register/+page.svelte
index 4253570..7db3019 100644
--- a/src/routes/admin/register/+page.svelte
+++ b/src/routes/admin/register/+page.svelte
@@ -7,6 +7,9 @@
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { formSchema } from './schema';
 	import { page } from '$app/stores';
+	import { Button } from '$lib/components/ui/button';
+	import Visible from 'lucide-svelte/icons/eye';
+	import Invisible from 'lucide-svelte/icons/eye-closed';
 
 	let { data, form: actionData } = $props();
 
@@ -24,6 +27,7 @@
 	});
 
 	const { form: formData, enhance } = form;
+	let showPassword = $state(false);
 </script>
 
 <form method="POST" class="flex h-[90dvh] w-full items-center justify-center px-4" use:enhance>
@@ -46,7 +50,29 @@
 				<Form.Control>
 					{#snippet children({ props })}
 						<Form.Label>Password</Form.Label>
-						<Input type="password" {...props} bind:value={$formData.password} />
+						<div class="flex gap-2">
+							<Input
+								type={showPassword ? 'text' : 'password'}
+								{...props}
+								bind:value={$formData.password}
+							/>
+							<Button
+								type="button"
+								onclick={() => {
+									showPassword = !showPassword;
+								}}
+								data-sidebar="trigger"
+								variant="outline"
+								size="icon"
+							>
+								{#if showPassword}
+									<Invisible />
+								{:else}
+									<Visible />
+								{/if}
+								<span class="sr-only">Show/Hide Pass</span>
+							</Button>
+						</div>
 					{/snippet}
 				</Form.Control>
 				<Form.FieldErrors />
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 204abf2..a5b0c08 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -10,6 +10,9 @@
 	import LogoLight from '$lib/assets/images/light.svg';
 	import LogoDark from '$lib/assets/images/dark.svg';
 	import { page } from '$app/stores';
+	import { Button } from '$lib/components/ui/button';
+	import Visible from 'lucide-svelte/icons/eye';
+	import Invisible from 'lucide-svelte/icons/eye-closed';
 
 	let { data, form: actionData } = $props();
 
@@ -27,6 +30,7 @@
 	});
 
 	const { form: formData, enhance } = form;
+	let showPassword = $state(false);
 </script>
 
 <div class="flex h-screen w-full items-center justify-center px-4">
@@ -54,7 +58,29 @@
 					<Form.Control>
 						{#snippet children({ props })}
 							<Form.Label>Password</Form.Label>
-							<Input type="password" {...props} bind:value={$formData.password} />
+							<div class="flex gap-2">
+								<Input
+									type={showPassword ? 'text' : 'password'}
+									{...props}
+									bind:value={$formData.password}
+								/>
+								<Button
+									type="button"
+									onclick={() => {
+										showPassword = !showPassword;
+									}}
+									data-sidebar="trigger"
+									variant="outline"
+									size="icon"
+								>
+									{#if showPassword}
+										<Invisible />
+									{:else}
+										<Visible />
+									{/if}
+									<span class="sr-only">Show/Hide Pass</span>
+								</Button>
+							</div>
 						{/snippet}
 					</Form.Control>
 					<Form.FieldErrors />