chore: cleanup login form

Reference: #48, #51, #49

Signed-off-by: Prince Muel <[email protected]>

src/components/organisms/login.tsx

@@ -1,12 +1,13 @@
+import { IErrorResponse } from '@src/@types';
 import { icons } from '@src/common';
-import { useAuthDispatch } from '@src/context';
 import { LoginFormSchema, RHFSubmitHandler, useZodForm } from '@src/helpers';
 import { useLoginMutation, usePersist } from '@src/hooks';
 import { client } from '@src/lib';
 import { FormProvider } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { Text } from '../atoms';
+import { Loader } from '../layout/loader';
 import { FormField, FormFieldPassword } from '../molecules';
 
 type Props = {};
@@ -18,20 +19,18 @@ const LoginForm = (props: Props) => {
     mode: 'onChange',
   });
 
-  const dispatch = useAuthDispatch();
   const navigate = useNavigate();
 
-  const { mutate: login } = useLoginMutation(client, {
+  const { mutate: login, isLoading } = useLoginMutation(client, {
     onSuccess(data) {
-      toast('Login Success', {
-        type: 'success',
-      });
-
-      dispatch('auth/addToken');
-      dispatch('auth/addUser');
-
+      toast.success('Login Successful');
       navigate('/');
     },
+    onError(e: IErrorResponse) {
+      e.response.errors.forEach(async (error) => {
+        toast.error(error.message);
+      });
+    },
   });
 
   const onSubmit: RHFSubmitHandler<typeof LoginFormSchema> = async (data) => {
@@ -53,6 +52,8 @@ const LoginForm = (props: Props) => {
   const isSubmittable =
     Boolean(methods.formState.isDirty) && Boolean(methods.formState.isValid);
 
+  if (isLoading) return <Loader />;
+
   return (
     <FormProvider {...methods}>
       <form
@@ -89,12 +90,11 @@ const LoginForm = (props: Props) => {
               <img
                 src={icons.actions.check}
                 className='hidden group-aria-pressed:block'
+                alt=''
               />
             </span>
 
-            <span className='body-100'>
-              Recognize this device in the future
-            </span>
+            <span className='body-100'>Keep me logged in</span>
           </button>
 
           <div className='col-span-6 mt-6'>