Add comments pagination, login and register pages

components/Login/LoginForm.tsx

@@ -2,8 +2,10 @@ import sendLoginUserRequest from '@/requests/sendLoginUserRequest';
 import LoginValidationSchema from '@/services/User/schema/LoginValidationSchema';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/router';
+import { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
+import ErrorAlert from '../ui/alerts/ErrorAlert';
 import FormError from '../ui/forms/FormError';
 import FormInfo from '../ui/forms/FormInfo';
 import FormLabel from '../ui/forms/FormLabel';
@@ -13,7 +15,7 @@ import FormTextInput from '../ui/forms/FormTextInput';
 type LoginT = z.infer<typeof LoginValidationSchema>;
 const LoginForm = () => {
   const router = useRouter();
-  const { register, handleSubmit, formState } = useForm<LoginT>({
+  const { register, handleSubmit, formState, reset } = useForm<LoginT>({
     resolver: zodResolver(LoginValidationSchema),
     defaultValues: {
       username: '',
@@ -23,18 +25,23 @@ const LoginForm = () => {
 
   const { errors } = formState;
 
+  const [responseError, setResponseError] = useState<string>('');
+
   const onSubmit: SubmitHandler<LoginT> = async (data) => {
     try {
       const response = await sendLoginUserRequest(data);
 
       router.push(`/users/${response.id}`);
     } catch (error) {
-      console.error(error);
+      if (error instanceof Error) {
+        setResponseError(error.message);
+        reset();
+      }
     }
   };
 
   return (
-    <form className="form-control w-9/12 space-y-5" onSubmit={handleSubmit(onSubmit)}>
+    <form className="form-control w-full space-y-5" onSubmit={handleSubmit(onSubmit)}>
       <div>
         <FormInfo>
           <FormLabel htmlFor="username">username</FormLabel>
@@ -65,8 +72,9 @@ const LoginForm = () => {
         </FormSegment>
       </div>
 
+      {responseError && <ErrorAlert error={responseError} setError={setResponseError} />}
       <div className="w-full">
-        <button type="submit" className="btn btn-primary w-full">
+        <button type="submit" className="btn-primary btn w-full">
           Login
         </button>
       </div>