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] 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>