Handle an error response for incorrect credentials.

src/components/Login.js

@@ -4,38 +4,37 @@ import { Paper, Text, TextInput, PasswordInput, Button, rem} from "@mantine/core
 import {useState} from 'react';
 import {http} from "../middleware/axiosConfig";
 import { useNavigate } from 'react-router-dom';
+import {useForm} from 'react-hook-form'
 
 
 const Login = () => { 
 
     const navigate = useNavigate();
 
-    const [userField, setUserField] = useState({
-        email:"",
-        password:""
-      });
+    const {register, handleSubmit, } = useForm({
+        defaultValue: {
+            email: '',
+            password: ''
+        }
+    })
 
-    const changeFieldHandler = (e) => {
-        setUserField({
-          ...userField,
-          [e.target.email]: e.target.value
-        });
-    }
+    const {formState: { errors }} = useForm();
+
+    const [loginError, setloginError] = useState(false);
 
     const onLogin = async (e) => {
         try {
+            setloginError(false);
             await http.get("/sanctum/csrf-cookie");
-            const res = await http.post("/api/login", {
-                email: e.email,
-                password: e.password,
-            });
+            const res = await http.post("/api/login", e);
             if (res.status === 200){
                 navigate("/lists"); 
             }
         }
-        catch (err) {
-            console.error(err)
-            console.log("Something's Wrong!");
+        catch (error) {
+            if (error.response.status === 401) {
+                setloginError(true);
+              }
         }
     };
 
@@ -44,7 +43,7 @@ const Login = () => {
 
         return (
             <div>
-            <Paper radius="md" p="xl" withBorder>
+            <Paper shadow="md" radius="md" p="xl" withBorder>
                 <Text size="xl" fw={900} variant="gradient"
             gradient={{ from: 'red', to: 'rgba(227, 0, 0, 1)', deg: 227 }}>WELCOME ADMIN!</Text>
                 <Text size="sm">Please login to access the Admin Account Management Site</Text>
@@ -52,26 +51,34 @@ const Login = () => {
                         <TextInput
                             style={{ width: '400px', marginBottom: '10px', marginTop: '15px' }}
                             label="Email"
-                            leftSectionPointerEvents="none"
                             leftSection={icon}
-                            withAsterisk
-                            onChange={e => changeFieldHandler(e)}
+                            {...register('email')}
                             placeholder="Enter your work email address"
+                            error={errors.email ? "Please enter a valid email" : null}
                     /></div>
                     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                         <PasswordInput
                             style={{ width: '400px', marginBottom: '10px' }}
                             label="Password"
                             placeholder="Enter your Password"
-                            withAsterisk
-                            onChange={e => changeFieldHandler(e)}
+                            {...register('password')}
                             visible={visible}
                             onVisibilityChange={toggle}
+                            error={
+                                errors.password
+                                  ? "Please enter a valid password"
+                                  : null
+                              }
                     /></div>
                     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
-                        <Button variant="filled" color="lime" style={{ margin: 25 }} onClick={e => onLogin(e)}>Log In
+                        <Button variant="filled" color="lime" style={{ margin: 25 }} onClick={e => handleSubmit(onLogin)()}>Log In
                         </Button>
-                    </div>     
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                        {loginError && (
+                            <Text fw={500} fs="italic" c="red">
+                            Login failed! Please verify your credentials and try again.
+                            </Text>)}</div>     
             </Paper>
             </div>
         );