From 4a44d21e66f1acd1adfc7f7ed1323dbb0957f68e Mon Sep 17 00:00:00 2001
From: seriouselly <supriyatinselly@gmail.com>
Date: Mon, 8 Jun 2026 21:19:57 +0700
Subject: [PATCH] feat(auth): add password visibility toggle in auth form

- Introduce `showPassword` state in the `AuthForm` component to allow users to show or hide their password.
- Implement `Eye` and `EyeOff` icons from `lucide-react` for the toggle button UI.
- Change password input type dynamically between 'password' and 'text'.
- Clean up unused `eye` icon import from `login-page.tsx`.
---
 apps/web/src/components/auth-form.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/auth-form.tsx b/apps/web/src/components/auth-form.tsx
index 0f08635..0966360 100644
--- a/apps/web/src/components/auth-form.tsx
+++ b/apps/web/src/components/auth-form.tsx
@@ -1,4 +1,5 @@
 import { FormEvent, useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -17,6 +18,7 @@ export function AuthForm({ mode, isSubmitting, error, googleOAuthEnabled, onSubm
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
 
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -53,10 +55,19 @@ export function AuthForm({ mode, isSubmitting, error, googleOAuthEnabled, onSubm
           </div>
           <div className="space-y-2">
             <Label htmlFor="password">Password</Label>
-            <Input id="password" type="password" minLength={8} value={password} onChange={(event) => {
-              setPassword(event.target.value);
-              onFieldChange?.();
-            }} required />
+            <div className="relative">
+              <Input id="password" type={showPassword ? "text" : "password"} minLength={8} value={password} onChange={(event) => {
+                setPassword(event.target.value);
+                onFieldChange?.();
+              }} required />
+              <button
+                type="button"
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground focus:outline-none"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
           </div>
           {error && <p className="text-sm text-red-600" role="alert">{error}</p>}
           <Button className="w-full" type="submit" disabled={isSubmitting}>