Merge branch 'main' into as/feat/person-merged-table-2

studentinovisad · Dec 31, 2024 · 7a65910 · 7a65910
2 parents ffd7a30 + f7d172d
commit 7a65910
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 2 deletions.
diff --git 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
@@ -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 />