chore: add visibility toggle to reset password

apps/web/src/components/forms/password.tsx

@@ -37,6 +37,7 @@ export type PasswordFormProps = {
 
 export const PasswordForm = ({ className }: PasswordFormProps) => {
   const { toast } = useToast();
+
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
@@ -112,7 +113,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
             type="button"
             className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
             aria-label={showPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowPassword((showPassword) => !showPassword)}
+            onClick={() => setShowPassword((show) => !show)}
           >
             {showPassword ? (
               <EyeOff className="text-muted-foreground h-5 w-5" />
@@ -146,7 +147,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
             type="button"
             className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
             aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowConfirmPassword((showConfirmPassword) => !showConfirmPassword)}
+            onClick={() => setShowConfirmPassword((show) => !show)}
           >
             {showConfirmPassword ? (
               <EyeOff className="text-muted-foreground h-5 w-5" />

apps/web/src/components/forms/reset-password.tsx

@@ -1,8 +1,11 @@
 'use client';
 
+import { useState } from 'react';
+
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Eye, EyeOff } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -37,6 +40,9 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
 
   const { toast } = useToast();
 
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
   const {
     register,
     reset,
@@ -96,15 +102,31 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
           <span>Password</span>
         </Label>
 
-        <Input
+        <div className="relative">
-          id="password"
+          <Input
-          type="password"
+            id="password"
-          minLength={6}
+            type={showPassword ? 'text' : 'password'}
-          maxLength={72}
+            minLength={6}
-          autoComplete="current-password"
+            maxLength={72}
-          className="bg-background mt-2"
+            autoComplete="new-password"
-          {...register('password')}
+            className="bg-background mt-2 pr-10"
-        />
+            {...register('password')}
+          />
+
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
+            onClick={() => setShowPassword((show) => !show)}
+          >
+            {showPassword ? (
+              <EyeOff className="text-muted-foreground h-5 w-5" />
+            ) : (
+              <Eye className="text-muted-foreground h-5 w-5" />
+            )}
+          </Button>
+        </div>
 
         <FormErrorMessage className="mt-1.5" error={errors.password} />
       </div>
@@ -114,15 +136,31 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
           <span>Repeat Password</span>
         </Label>
 
-        <Input
+        <div className="relative">
-          id="repeatedPassword"
+          <Input
-          type="password"
+            id="repeated-password"
-          minLength={6}
+            type={showConfirmPassword ? 'text' : 'password'}
-          maxLength={72}
+            minLength={6}
-          autoComplete="current-password"
+            maxLength={72}
-          className="bg-background mt-2"
+            autoComplete="new-password"
-          {...register('repeatedPassword')}
+            className="bg-background mt-2 pr-10"
-        />
+            {...register('repeatedPassword')}
+          />
+
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+            aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'}
+            onClick={() => setShowConfirmPassword((show) => !show)}
+          >
+            {showConfirmPassword ? (
+              <EyeOff className="text-muted-foreground h-5 w-5" />
+            ) : (
+              <Eye className="text-muted-foreground h-5 w-5" />
+            )}
+          </Button>
+        </div>
 
         <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
       </div>

apps/web/src/components/forms/signin.tsx

@@ -145,7 +145,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
             type="button"
             className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
             aria-label={showPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowPassword((showPassword) => !showPassword)}
+            onClick={() => setShowPassword((show) => !show)}
           >
             {showPassword ? (
               <EyeOff className="text-muted-foreground h-5 w-5" />

apps/web/src/components/forms/signup.tsx

@@ -125,7 +125,7 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
             type="button"
             className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
             aria-label={showPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowPassword((showPassword) => !showPassword)}
+            onClick={() => setShowPassword((show) => !show)}
           >
             {showPassword ? (
               <EyeOff className="text-muted-foreground h-5 w-5" />