From d3d845115abb2cf14e0892a0f698bc642361a4e4 Mon Sep 17 00:00:00 2001
From: msamgan <mohdsamgankhan@gmail.com>
Date: Thu, 30 Oct 2025 19:17:28 -0400
Subject: [PATCH 1/2] add show/hide password feature in login form

---
 resources/js/pages/auth/login.tsx | 38 +++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/resources/js/pages/auth/login.tsx b/resources/js/pages/auth/login.tsx
index 398b6576b..0b2810301 100644
--- a/resources/js/pages/auth/login.tsx
+++ b/resources/js/pages/auth/login.tsx
@@ -10,6 +10,8 @@ import { register } from '@/routes';
 import { store } from '@/routes/login';
 import { request } from '@/routes/password';
 import { Form, Head } from '@inertiajs/react';
+import { useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
 
 interface LoginProps {
     status?: string;
@@ -22,6 +24,8 @@ export default function Login({
     canResetPassword,
     canRegister,
 }: LoginProps) {
+    const [showPassword, setShowPassword] = useState(false);
+
     return (
         <AuthLayout
             title="Log in to your account"
@@ -65,15 +69,31 @@ export default function Login({
                                         </TextLink>
                                     )}
                                 </div>
-                                <Input
-                                    id="password"
-                                    type="password"
-                                    name="password"
-                                    required
-                                    tabIndex={2}
-                                    autoComplete="current-password"
-                                    placeholder="Password"
-                                />
+                                <div className="relative">
+                                    <Input
+                                        id="password"
+                                        type={showPassword ? 'text' : 'password'}
+                                        name="password"
+                                        required
+                                        tabIndex={2}
+                                        autoComplete="current-password"
+                                        placeholder="Password"
+                                        className="pr-10"
+                                        aria-describedby="password-help"
+                                    />
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        tabIndex={2}
+                                        className="absolute right-0 top-0 h-9 w-9 text-muted-foreground cursor-pointer"
+                                        onClick={() => setShowPassword((v) => !v)}
+                                        aria-label={showPassword ? 'Hide password' : 'Show password'}
+                                        title={showPassword ? 'Hide password' : 'Show password'}
+                                    >
+                                        {showPassword ? <EyeOff aria-hidden="true" /> : <Eye aria-hidden="true" />}
+                                    </Button>
+                                </div>
                                 <InputError message={errors.password} />
                             </div>
 

From 22fe1f954d8c2622ed91abb0e0bf02097ebe5a91 Mon Sep 17 00:00:00 2001
From: msamgan <mohdsamgankhan@gmail.com>
Date: Thu, 30 Oct 2025 19:22:45 -0400
Subject: [PATCH 2/2] add show/hide password functionality to registration form

---
 resources/js/pages/auth/register.tsx | 72 +++++++++++++++++++++-------
 1 file changed, 54 insertions(+), 18 deletions(-)

diff --git a/resources/js/pages/auth/register.tsx b/resources/js/pages/auth/register.tsx
index 8c65f2d5b..0419effd7 100644
--- a/resources/js/pages/auth/register.tsx
+++ b/resources/js/pages/auth/register.tsx
@@ -9,8 +9,12 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Spinner } from '@/components/ui/spinner';
 import AuthLayout from '@/layouts/auth-layout';
+import { useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
 
 export default function Register() {
+    const [showPassword, setShowPassword] = useState(false);
+    const [showConfirmPassword, setShowConfirmPassword] = useState(false);
     return (
         <AuthLayout
             title="Create an account"
@@ -60,15 +64,31 @@ export default function Register() {
 
                             <div className="grid gap-2">
                                 <Label htmlFor="password">Password</Label>
-                                <Input
-                                    id="password"
-                                    type="password"
-                                    required
-                                    tabIndex={3}
-                                    autoComplete="new-password"
-                                    name="password"
-                                    placeholder="Password"
-                                />
+                                <div className="relative">
+                                    <Input
+                                        id="password"
+                                        type={showPassword ? 'text' : 'password'}
+                                        required
+                                        tabIndex={3}
+                                        autoComplete="new-password"
+                                        name="password"
+                                        placeholder="Password"
+                                        className="pr-10"
+                                        aria-describedby="password-help"
+                                    />
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        tabIndex={3}
+                                        className="absolute right-0 top-0 h-9 w-9 text-muted-foreground cursor-pointer"
+                                        onClick={() => setShowPassword((v) => !v)}
+                                        aria-label={showPassword ? 'Hide password' : 'Show password'}
+                                        title={showPassword ? 'Hide password' : 'Show password'}
+                                    >
+                                        {showPassword ? <EyeOff aria-hidden="true" /> : <Eye aria-hidden="true" />}
+                                    </Button>
+                                </div>
                                 <InputError message={errors.password} />
                             </div>
 
@@ -76,15 +96,31 @@ export default function Register() {
                                 <Label htmlFor="password_confirmation">
                                     Confirm password
                                 </Label>
-                                <Input
-                                    id="password_confirmation"
-                                    type="password"
-                                    required
-                                    tabIndex={4}
-                                    autoComplete="new-password"
-                                    name="password_confirmation"
-                                    placeholder="Confirm password"
-                                />
+                                <div className="relative">
+                                    <Input
+                                        id="password_confirmation"
+                                        type={showConfirmPassword ? 'text' : 'password'}
+                                        required
+                                        tabIndex={4}
+                                        autoComplete="new-password"
+                                        name="password_confirmation"
+                                        placeholder="Confirm password"
+                                        className="pr-10"
+                                        aria-describedby="password-confirmation-help"
+                                    />
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        tabIndex={4}
+                                        className="absolute right-0 top-0 h-9 w-9 text-muted-foreground cursor-pointer"
+                                        onClick={() => setShowConfirmPassword((v) => !v)}
+                                        aria-label={showConfirmPassword ? 'Hide password' : 'Show password'}
+                                        title={showConfirmPassword ? 'Hide password' : 'Show password'}
+                                    >
+                                        {showConfirmPassword ? <EyeOff aria-hidden="true" /> : <Eye aria-hidden="true" />}
+                                    </Button>
+                                </div>
                                 <InputError
                                     message={errors.password_confirmation}
                                 />