From c38b6b78935c0ff06ee2a75ccab43324de2aaaa7 Mon Sep 17 00:00:00 2001
From: Prince Muel <vansomecsam@gmail.com>
Date: Wed, 7 Jun 2023 23:18:15 +0100
Subject: [PATCH] feat: refactor the form input component

Reference-to: #51, #48
Signed-off-by: Prince Muel <vansomecsam@gmail.com>
---
 src/components/molecules/form-field-pwd.tsx | 67 ---------------------
 src/components/molecules/form-field.tsx     | 30 ++++++++-
 src/components/organisms/login.tsx          | 15 ++---
 src/components/organisms/register.tsx       | 17 +++---
 4 files changed, 41 insertions(+), 88 deletions(-)
 delete mode 100644 src/components/molecules/form-field-pwd.tsx

diff --git a/src/components/molecules/form-field-pwd.tsx b/src/components/molecules/form-field-pwd.tsx
deleted file mode 100644
index f3ab91c..0000000
--- a/src/components/molecules/form-field-pwd.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-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>,
-    HTMLInputElement
-  > {
-  name: string;
-  label: string;
-  labelClassName?: string;
-  inputClassName?: string;
-  errorClassName?: string;
-}
-
-const FormFieldPassword = ({
-  name,
-  placeholder,
-  label,
-  defaultValue,
-  autoComplete,
-  className,
-  labelClassName,
-  inputClassName,
-  errorClassName,
-}: Props) => {
-  const [isPasswordShown, setIsPasswordShown] = useReducer(
-    (prev) => !prev,
-    false
-  );
-
-  return (
-    <FormControl as='div' className={clsx('relative', className)}>
-      <FormInput
-        type={isPasswordShown ? 'text' : 'password'}
-        name={name}
-        id={name}
-        placeholder={placeholder}
-        className={inputClassName}
-        autoComplete={autoComplete}
-        defaultValue={defaultValue}
-      />
-
-      <div className='flex items-center justify-between text-brand-400 peer-aria-[invalid="true"]:!text-accent-200 dark:text-brand-300'>
-        <FormLabel htmlFor={name} className={labelClassName} children={label} />
-        <FormErrorText id={name} className={errorClassName} />
-      </div>
-
-      <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>
-  );
-};
-
-export { FormFieldPassword };
diff --git a/src/components/molecules/form-field.tsx b/src/components/molecules/form-field.tsx
index 700d968..c4db1eb 100644
--- a/src/components/molecules/form-field.tsx
+++ b/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>
   );
 };
diff --git a/src/components/organisms/login.tsx b/src/components/organisms/login.tsx
index d18faf6..a16be16 100644
--- a/src/components/organisms/login.tsx
+++ b/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'>
diff --git a/src/components/organisms/register.tsx b/src/components/organisms/register.tsx
index 0d324c8..b085101 100644
--- a/src/components/organisms/register.tsx
+++ b/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'>