feat: refactor the form input component

Reference-to: #51, #48
Signed-off-by: Prince Muel <[email protected]>

src/components/molecules/form-field.tsx

@@ -1,5 +1,7 @@
+import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/solid';
+import clsx from 'clsx';
+import { useReducer } from 'react';
 import { FormControl, FormErrorText, FormInput, FormLabel } from '../atoms';
-
 interface Props
   extends React.DetailedHTMLProps<
     React.InputHTMLAttributes<HTMLInputElement>,
@@ -10,10 +12,12 @@ interface Props
   labelClassName?: string;
   inputClassName?: string;
   errorClassName?: string;
+  isPassword?: boolean;
 }
 
 const FormField = ({
   name,
+  isPassword,
   type,
   placeholder,
   label,
@@ -24,10 +28,15 @@ const FormField = ({
   inputClassName,
   errorClassName,
 }: Props) => {
+  const [isPasswordShown, setIsPasswordShown] = useReducer(
+    (prev) => !prev,
+    false
+  );
+
   return (
-    <FormControl as='div' className={className}>
+    <FormControl as='div' className={clsx('relative', className)}>
       <FormInput
-        type={type}
+        type={isPassword && isPasswordShown ? 'text' : type}
         name={name}
         id={name}
         placeholder={placeholder}
@@ -40,6 +49,21 @@ const FormField = ({
         <FormLabel htmlFor={name} className={labelClassName} children={label} />
         <FormErrorText id={name} className={errorClassName} />
       </div>
+
+      {isPassword && (
+        <button
+          type='button'
+          onClick={setIsPasswordShown}
+          className='absolute right-0 top-[56%] mr-6'
+        >
+          {isPasswordShown ? (
+            <EyeSlashIcon className='aspect-square w-7 text-brand-500' />
+          ) : (
+            <EyeIcon className='aspect-square w-7 text-brand-500' />
+          )}
+          <span className='sr-only'>View Password</span>
+        </button>
+      )}
     </FormControl>
   );
 };

src/components/organisms/login.tsx

@@ -8,7 +8,7 @@ import { FormProvider } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { Text } from '../atoms';
-import { FormField, FormFieldPassword } from '../molecules';
+import { FormField } from '../molecules';
 import { Loader } from './loader';
 
 type Props = {};
@@ -24,14 +24,9 @@ const LoginForm = (props: Props) => {
 
   const { mutate: login, isLoading } = useLoginMutation(client, {
     onSuccess(data) {
-      dispatch('auth/addToken');
+      dispatch({ type: 'auth/addToken', payload: data.login?.token });
       toast.success('Login Successful');
-      navigate('/');
-    },
-    onError(e: IErrorResponse) {
-      e.response.errors.forEach(async (error) => {
-        toast.error(error.message);
-      });
+      navigate('/', { replace: true });
     },
   });
 
@@ -75,11 +70,13 @@ const LoginForm = (props: Props) => {
             autoComplete='username'
           />
 
-          <FormFieldPassword
+          <FormField
+            type='password'
             name='password'
             label={'Password'}
             className='col-span-6'
             autoComplete='current-password'
+            isPassword
           />
 
           <div className='col-span-6 mt-6'>

src/components/organisms/register.tsx

@@ -9,7 +9,7 @@ import { FormProvider } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { Text } from '../atoms';
-import { FormField, FormFieldPassword } from '../molecules';
+import { FormField } from '../molecules';
 import { Loader } from './loader';
 
 type Props = {};
@@ -25,12 +25,7 @@ const RegisterForm = (props: Props) => {
   const { mutate: register, isLoading } = useRegisterMutation(client, {
     onSuccess(data) {
       toast.success(data.register?.message);
-      navigate('/login');
-    },
-    onError(e: IErrorResponse) {
-      e.response.errors.forEach(async (error) => {
-        toast.error(error.message);
-      });
+      navigate('/login', { replace: true });
     },
   });
 
@@ -74,18 +69,22 @@ const RegisterForm = (props: Props) => {
             autoComplete='username'
           />
 
-          <FormFieldPassword
+          <FormField
+            type='password'
             name='password'
             label={'Password'}
             className='col-span-6'
             autoComplete='new-password'
+            isPassword
           />
 
-          <FormFieldPassword
+          <FormField
+            type='password'
             name='countersign'
             label={'Confirm Password'}
             className='col-span-6'
             autoComplete='new-password'
+            isPassword
           />
 
           <div className='col-span-6 mt-6'>