From 9c45ce61b8d6733fbc160bc59666eb8fcc03f73e Mon Sep 17 00:00:00 2001
From: Adithya Krishna <adikrish@redhat.com>
Date: Sat, 26 Aug 2023 12:31:40 +0530
Subject: [PATCH 1/5] feat: added show password feature

Signed-off-by: Adithya Krishna <adikrish@redhat.com>
---
 apps/web/src/components/forms/password.tsx | 70 ++++++++++++++++++----
 apps/web/src/components/forms/signin.tsx   | 37 +++++++++---
 apps/web/src/components/forms/signup.tsx   | 37 +++++++++---
 3 files changed, 117 insertions(+), 27 deletions(-)

diff --git a/apps/web/src/components/forms/password.tsx b/apps/web/src/components/forms/password.tsx
index eba0c9a43..4689e0dbe 100644
--- a/apps/web/src/components/forms/password.tsx
+++ b/apps/web/src/components/forms/password.tsx
@@ -1,7 +1,9 @@
 'use client';
 
+import { useState } from 'react';
+
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
+import { Eye, EyeOff, Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -35,6 +37,8 @@ export type PasswordFormProps = {
 
 export const PasswordForm = ({ className }: PasswordFormProps) => {
   const { toast } = useToast();
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   const {
     register,
@@ -79,6 +83,14 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
     }
   };
 
+  const onShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const onShowConfirmPassword = () => {
+    setShowConfirmPassword(!showConfirmPassword);
+  };
+
   return (
     <form
       className={cn('flex w-full flex-col gap-y-4', className)}
@@ -89,12 +101,28 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           Password
         </Label>
 
-        <Input
-          id="password"
-          type="password"
-          className="bg-background mt-2"
-          {...register('password')}
-        />
+        <div className="relative">
+          <Input
+            id="password"
+            type={showPassword ? 'text' : 'password'}
+            className="bg-background mt-2"
+            {...register('password')}
+          />
+
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center"
+            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
+            onClick={onShowPassword}
+          >
+            {showPassword ? (
+              <EyeOff className="text-slate-500" />
+            ) : (
+              <Eye className="text-slate-500" />
+            )}
+          </Button>
+        </div>
 
         <FormErrorMessage className="mt-1.5" error={errors.password} />
       </div>
@@ -104,12 +132,28 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           Repeat Password
         </Label>
 
-        <Input
-          id="repeated-password"
-          type="password"
-          className="bg-background mt-2"
-          {...register('repeatedPassword')}
-        />
+        <div className="relative">
+          <Input
+            id="repeated-password"
+            type={showConfirmPassword ? 'text' : 'password'}
+            className="bg-background mt-2"
+            {...register('repeatedPassword')}
+          />
+
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center"
+            aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'}
+            onClick={onShowConfirmPassword}
+          >
+            {showConfirmPassword ? (
+              <EyeOff className="text-slate-500" />
+            ) : (
+              <Eye className="text-slate-500" />
+            )}
+          </Button>
+        </div>
 
         <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
       </div>
diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index ae9540869..2f3c3a4d6 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@@ -1,7 +1,9 @@
 'use client';
 
+import { useState } from 'react';
+
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
+import { Eye, EyeOff, Loader } from 'lucide-react';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import { FcGoogle } from 'react-icons/fc';
@@ -26,6 +28,7 @@ export type SignInFormProps = {
 
 export const SignInForm = ({ className }: SignInFormProps) => {
   const { toast } = useToast();
+  const [showPassword, setShowPassword] = useState(false);
 
   const {
     register,
@@ -73,6 +76,10 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     }
   };
 
+  const onShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
   return (
     <form
       className={cn('flex w-full flex-col gap-y-4', className)}
@@ -96,12 +103,28 @@ export const SignInForm = ({ className }: SignInFormProps) => {
           Password
         </Label>
 
-        <Input
-          id="password"
-          type="password"
-          className="bg-background mt-2"
-          {...register('password')}
-        />
+        <div className="relative">
+          <Input
+            id="password"
+            type={showPassword ? 'text' : 'password'}
+            className="bg-background mt-2"
+            {...register('password')}
+          />
+
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center"
+            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
+            onClick={onShowPassword}
+          >
+            {showPassword ? (
+              <EyeOff className="text-slate-500" />
+            ) : (
+              <Eye className="text-slate-500" />
+            )}
+          </Button>
+        </div>
 
         {errors.password && (
           <span className="mt-1 text-xs text-red-500">{errors.password.message}</span>
diff --git a/apps/web/src/components/forms/signup.tsx b/apps/web/src/components/forms/signup.tsx
index ce449f850..a66e43caf 100644
--- a/apps/web/src/components/forms/signup.tsx
+++ b/apps/web/src/components/forms/signup.tsx
@@ -1,7 +1,9 @@
 'use client';
 
+import { useState } from 'react';
+
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
+import { Eye, EyeOff, Loader } from 'lucide-react';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -29,6 +31,7 @@ export type SignUpFormProps = {
 
 export const SignUpForm = ({ className }: SignUpFormProps) => {
   const { toast } = useToast();
+  const [showPassword, setShowPassword] = useState(false);
 
   const {
     register,
@@ -72,6 +75,10 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
     }
   };
 
+  const onShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
   return (
     <form
       className={cn('flex w-full flex-col gap-y-4', className)}
@@ -102,12 +109,28 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
           Password
         </Label>
 
-        <Input
-          id="password"
-          type="password"
-          className="bg-background mt-2"
-          {...register('password')}
-        />
+        <div className="relative">
+          <Input
+            id="password"
+            type={showPassword ? 'text' : 'password'}
+            className="bg-background mt-2"
+            {...register('password')}
+          />
+
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center"
+            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
+            onClick={onShowPassword}
+          >
+            {showPassword ? (
+              <EyeOff className="text-slate-500" />
+            ) : (
+              <Eye className="text-slate-500" />
+            )}
+          </Button>
+        </div>
       </div>
 
       <div>

From 7c6b5ac59d227a2020cbb7760f61751098b27c86 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <adikrish@redhat.com>
Date: Sat, 26 Aug 2023 20:42:15 +0530
Subject: [PATCH 2/5] fix: updated padding and set patterns

Signed-off-by: Adithya Krishna <adikrish@redhat.com>
---
 apps/web/src/components/forms/password.tsx | 20 ++++++--------------
 apps/web/src/components/forms/signin.tsx   | 10 +++-------
 apps/web/src/components/forms/signup.tsx   | 10 +++-------
 3 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/components/forms/password.tsx b/apps/web/src/components/forms/password.tsx
index 4689e0dbe..d258b2693 100644
--- a/apps/web/src/components/forms/password.tsx
+++ b/apps/web/src/components/forms/password.tsx
@@ -83,14 +83,6 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
     }
   };
 
-  const onShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-
-  const onShowConfirmPassword = () => {
-    setShowConfirmPassword(!showConfirmPassword);
-  };
-
   return (
     <form
       className={cn('flex w-full flex-col gap-y-4', className)}
@@ -105,16 +97,16 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           <Input
             id="password"
             type={showPassword ? 'text' : 'password'}
-            className="bg-background mt-2"
+            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"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
             aria-label={showPassword ? 'Mask password' : 'Reveal password'}
-            onClick={onShowPassword}
+            onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
               <EyeOff className="text-slate-500" />
@@ -136,16 +128,16 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           <Input
             id="repeated-password"
             type={showConfirmPassword ? 'text' : 'password'}
-            className="bg-background mt-2"
+            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"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
             aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'}
-            onClick={onShowConfirmPassword}
+            onClick={() => setShowConfirmPassword((showConfirmPassword) => !showConfirmPassword)}
           >
             {showConfirmPassword ? (
               <EyeOff className="text-slate-500" />
diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index 2f3c3a4d6..d62e376ff 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@@ -76,10 +76,6 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     }
   };
 
-  const onShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-
   return (
     <form
       className={cn('flex w-full flex-col gap-y-4', className)}
@@ -107,16 +103,16 @@ export const SignInForm = ({ className }: SignInFormProps) => {
           <Input
             id="password"
             type={showPassword ? 'text' : 'password'}
-            className="bg-background mt-2"
+            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"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
             aria-label={showPassword ? 'Mask password' : 'Reveal password'}
-            onClick={onShowPassword}
+            onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
               <EyeOff className="text-slate-500" />
diff --git a/apps/web/src/components/forms/signup.tsx b/apps/web/src/components/forms/signup.tsx
index a66e43caf..795dad25d 100644
--- a/apps/web/src/components/forms/signup.tsx
+++ b/apps/web/src/components/forms/signup.tsx
@@ -75,10 +75,6 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
     }
   };
 
-  const onShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-
   return (
     <form
       className={cn('flex w-full flex-col gap-y-4', className)}
@@ -113,16 +109,16 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
           <Input
             id="password"
             type={showPassword ? 'text' : 'password'}
-            className="bg-background mt-2"
+            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"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
             aria-label={showPassword ? 'Mask password' : 'Reveal password'}
-            onClick={onShowPassword}
+            onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
               <EyeOff className="text-slate-500" />

From 7de7624477f8ebc5e3d7daa2d27ace9456f4d437 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <adikrish@redhat.com>
Date: Sat, 26 Aug 2023 20:52:07 +0530
Subject: [PATCH 3/5] fix: update icon sizes

Signed-off-by: Adithya Krishna <adikrish@redhat.com>
---
 apps/web/src/components/forms/password.tsx | 8 ++++----
 apps/web/src/components/forms/signin.tsx   | 4 ++--
 apps/web/src/components/forms/signup.tsx   | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/forms/password.tsx b/apps/web/src/components/forms/password.tsx
index d258b2693..9e9837ca5 100644
--- a/apps/web/src/components/forms/password.tsx
+++ b/apps/web/src/components/forms/password.tsx
@@ -109,9 +109,9 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
             onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
-              <EyeOff className="text-slate-500" />
+              <EyeOff className="h-5 w-5 text-slate-500" />
             ) : (
-              <Eye className="text-slate-500" />
+              <Eye className="h-5 w-5 text-slate-500" />
             )}
           </Button>
         </div>
@@ -140,9 +140,9 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
             onClick={() => setShowConfirmPassword((showConfirmPassword) => !showConfirmPassword)}
           >
             {showConfirmPassword ? (
-              <EyeOff className="text-slate-500" />
+              <EyeOff className="h-5 w-5 text-slate-500" />
             ) : (
-              <Eye className="text-slate-500" />
+              <Eye className="h-5 w-5 text-slate-500" />
             )}
           </Button>
         </div>
diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index d62e376ff..f8add10c4 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@@ -115,9 +115,9 @@ export const SignInForm = ({ className }: SignInFormProps) => {
             onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
-              <EyeOff className="text-slate-500" />
+              <EyeOff className="h-5 w-5 text-slate-500" />
             ) : (
-              <Eye className="text-slate-500" />
+              <Eye className="h-5 w-5 text-slate-500" />
             )}
           </Button>
         </div>
diff --git a/apps/web/src/components/forms/signup.tsx b/apps/web/src/components/forms/signup.tsx
index 795dad25d..fae5d6277 100644
--- a/apps/web/src/components/forms/signup.tsx
+++ b/apps/web/src/components/forms/signup.tsx
@@ -121,9 +121,9 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
             onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
-              <EyeOff className="text-slate-500" />
+              <EyeOff className="h-5 w-5 text-slate-500" />
             ) : (
-              <Eye className="text-slate-500" />
+              <Eye className="h-5 w-5 text-slate-500" />
             )}
           </Button>
         </div>

From ecc8e59c8c045b37e829393e2e66a12243958d86 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Wed, 20 Sep 2023 02:18:35 +0000
Subject: [PATCH 4/5] fix: update colors

---
 .../web/src/app/(dashboard)/documents/upload-document.tsx | 2 +-
 apps/web/src/app/(dashboard)/settings/billing/page.tsx    | 4 ++--
 apps/web/src/app/(dashboard)/settings/password/page.tsx   | 2 +-
 apps/web/src/app/(dashboard)/settings/profile/page.tsx    | 2 +-
 .../(dashboard)/period-selector/period-selector.tsx       | 2 +-
 apps/web/src/components/forms/password.tsx                | 8 ++++----
 apps/web/src/components/forms/signin.tsx                  | 6 +++---
 apps/web/src/components/forms/signup.tsx                  | 4 ++--
 8 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/documents/upload-document.tsx b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
index b472c606b..12df84475 100644
--- a/apps/web/src/app/(dashboard)/documents/upload-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
@@ -68,7 +68,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
 
       {isLoading && (
         <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-          <Loader className="h-12 w-12 animate-spin text-slate-500" />
+          <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
         </div>
       )}
     </div>
diff --git a/apps/web/src/app/(dashboard)/settings/billing/page.tsx b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
index bd2659e62..7e6694491 100644
--- a/apps/web/src/app/(dashboard)/settings/billing/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
@@ -43,7 +43,7 @@ export default async function BillingSettingsPage() {
     <div>
       <h3 className="text-lg font-medium">Billing</h3>
 
-      <p className="mt-2 text-sm text-slate-500">
+      <p className="text-muted-foreground mt-2 text-sm">
         Your subscription is{' '}
         {subscription.status !== SubscriptionStatus.INACTIVE ? 'active' : 'inactive'}.
         {subscription?.periodEnd && (
@@ -67,7 +67,7 @@ export default async function BillingSettingsPage() {
       )}
 
       {!billingPortalUrl && (
-        <p className="max-w-[60ch] text-base text-slate-500">
+        <p className="text-muted-foreground max-w-[60ch] text-base">
           You do not currently have a customer record, this should not happen. Please contact
           support for assistance.
         </p>
diff --git a/apps/web/src/app/(dashboard)/settings/password/page.tsx b/apps/web/src/app/(dashboard)/settings/password/page.tsx
index 305cc3d0c..b89e74f3c 100644
--- a/apps/web/src/app/(dashboard)/settings/password/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/password/page.tsx
@@ -9,7 +9,7 @@ export default async function PasswordSettingsPage() {
     <div>
       <h3 className="text-lg font-medium">Password</h3>
 
-      <p className="mt-2 text-sm text-slate-500">Here you can update your password.</p>
+      <p className="text-muted-foreground mt-2 text-sm">Here you can update your password.</p>
 
       <hr className="my-4" />
 
diff --git a/apps/web/src/app/(dashboard)/settings/profile/page.tsx b/apps/web/src/app/(dashboard)/settings/profile/page.tsx
index ba461e871..ee0087a9a 100644
--- a/apps/web/src/app/(dashboard)/settings/profile/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/profile/page.tsx
@@ -9,7 +9,7 @@ export default async function ProfileSettingsPage() {
     <div>
       <h3 className="text-lg font-medium">Profile</h3>
 
-      <p className="mt-2 text-sm text-slate-500">Here you can edit your personal details.</p>
+      <p className="text-muted-foreground mt-2 text-sm">Here you can edit your personal details.</p>
 
       <hr className="my-4" />
 
diff --git a/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx b/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx
index afabefc3f..caeb780d0 100644
--- a/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx
+++ b/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx
@@ -44,7 +44,7 @@ export const PeriodSelector = () => {
 
   return (
     <Select defaultValue={period} onValueChange={onPeriodChange}>
-      <SelectTrigger className="max-w-[200px] text-slate-500">
+      <SelectTrigger className="text-muted-foreground max-w-[200px]">
         <SelectValue />
       </SelectTrigger>
 
diff --git a/apps/web/src/components/forms/password.tsx b/apps/web/src/components/forms/password.tsx
index c190803cd..0884baad1 100644
--- a/apps/web/src/components/forms/password.tsx
+++ b/apps/web/src/components/forms/password.tsx
@@ -115,9 +115,9 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
             onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
-              <EyeOff className="h-5 w-5 text-slate-500" />
+              <EyeOff className="text-muted-foreground h-5 w-5" />
             ) : (
-              <Eye className="h-5 w-5 text-slate-500" />
+              <Eye className="text-muted-foreground h-5 w-5" />
             )}
           </Button>
         </div>
@@ -149,9 +149,9 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
             onClick={() => setShowConfirmPassword((showConfirmPassword) => !showConfirmPassword)}
           >
             {showConfirmPassword ? (
-              <EyeOff className="h-5 w-5 text-slate-500" />
+              <EyeOff className="text-muted-foreground h-5 w-5" />
             ) : (
-              <Eye className="h-5 w-5 text-slate-500" />
+              <Eye className="text-muted-foreground h-5 w-5" />
             )}
           </Button>
         </div>
diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index 4542a5124..63e4bb88d 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useSearchParams } from 'next/navigation';
 
@@ -148,9 +148,9 @@ export const SignInForm = ({ className }: SignInFormProps) => {
             onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
-              <EyeOff className="h-5 w-5 text-slate-500" />
+              <EyeOff className="text-muted-foreground h-5 w-5" />
             ) : (
-              <Eye className="h-5 w-5 text-slate-500" />
+              <Eye className="text-muted-foreground h-5 w-5" />
             )}
           </Button>
         </div>
diff --git a/apps/web/src/components/forms/signup.tsx b/apps/web/src/components/forms/signup.tsx
index ae8bfbc46..890f8d7dd 100644
--- a/apps/web/src/components/forms/signup.tsx
+++ b/apps/web/src/components/forms/signup.tsx
@@ -128,9 +128,9 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
             onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
-              <EyeOff className="h-5 w-5 text-slate-500" />
+              <EyeOff className="text-muted-foreground h-5 w-5" />
             ) : (
-              <Eye className="h-5 w-5 text-slate-500" />
+              <Eye className="text-muted-foreground h-5 w-5" />
             )}
           </Button>
         </div>

From 71c7a6ee8ca0680f4a8f8d80b15548b940e43d27 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Wed, 20 Sep 2023 02:32:06 +0000
Subject: [PATCH 5/5] chore: add visibility toggle to reset password

---
 apps/web/src/components/forms/password.tsx    |  5 +-
 .../src/components/forms/reset-password.tsx   | 74 ++++++++++++++-----
 apps/web/src/components/forms/signin.tsx      |  2 +-
 apps/web/src/components/forms/signup.tsx      |  2 +-
 4 files changed, 61 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/components/forms/password.tsx b/apps/web/src/components/forms/password.tsx
index 0884baad1..8b6a58a06 100644
--- a/apps/web/src/components/forms/password.tsx
+++ b/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" />
diff --git a/apps/web/src/components/forms/reset-password.tsx b/apps/web/src/components/forms/reset-password.tsx
index 7b1ebc47f..f97f703b2 100644
--- a/apps/web/src/components/forms/reset-password.tsx
+++ b/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
-          id="password"
-          type="password"
-          minLength={6}
-          maxLength={72}
-          autoComplete="current-password"
-          className="bg-background mt-2"
-          {...register('password')}
-        />
+        <div className="relative">
+          <Input
+            id="password"
+            type={showPassword ? 'text' : 'password'}
+            minLength={6}
+            maxLength={72}
+            autoComplete="new-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
-          id="repeatedPassword"
-          type="password"
-          minLength={6}
-          maxLength={72}
-          autoComplete="current-password"
-          className="bg-background mt-2"
-          {...register('repeatedPassword')}
-        />
+        <div className="relative">
+          <Input
+            id="repeated-password"
+            type={showConfirmPassword ? 'text' : 'password'}
+            minLength={6}
+            maxLength={72}
+            autoComplete="new-password"
+            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>
diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index 63e4bb88d..2a209ddbe 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/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" />
diff --git a/apps/web/src/components/forms/signup.tsx b/apps/web/src/components/forms/signup.tsx
index 890f8d7dd..a3c3bd92f 100644
--- a/apps/web/src/components/forms/signup.tsx
+++ b/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" />