fix login form error message handling

apps/dashboard/package.json

@@ -13,6 +13,7 @@
     "@mui/styled-engine-sc": "^5.14.12",
     "@mui/x-data-grid": "^6.16.1",
     "@ngneat/falso": "^7.1.1",
+    "@opsway/ui": "workspace:*",
     "@tanstack/react-query": "^4.36.1",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
@@ -30,6 +31,7 @@
     "apexcharts": "^3.43.0",
     "axios": "^1.5.1",
     "email-validator": "^2.0.4",
+    "http-status-codes": "^2.3.0",
     "js-cookie": "^3.0.5",
     "jsonpath": "^1.1.1",
     "jspdf": "^2.5.1",
@@ -55,8 +57,7 @@
     "uuid": "^9.0.1",
     "web-vitals": "^3.5.0",
     "zustand": "^4.4.3",
-    "zxcvbn": "^4.4.2",
-    "@opsway/ui": "workspace:*"
+    "zxcvbn": "^4.4.2"
   },
   "scripts": {
     "dev": "vite",

apps/dashboard/src/hooks/authentication.store.ts

@@ -30,7 +30,11 @@ interface AuthenticationActions {
   logIn(
     email: string,
     password: string,
-  ): Promise<{ success: boolean; user?: IGetUserResponse; error?: any }>;
+  ): Promise<{
+    success: boolean;
+    user?: IGetUserResponse;
+    error?: AxiosError<any>;
+  }>;
   setCurrentUserID(userId?: number): void;
   setCurrentTeamID(teamId?: number): void;
 
@@ -93,9 +97,7 @@ const useAuthenticationStore = create<
 
           return { success: true, user: response.user };
         } catch (error: any) {
-          console.error(error);
-
-          return { success: false, error };
+          return { success: false, error: error as AxiosError<any> };
         }
       },
 

apps/dashboard/src/pages/Authentication/Login/form.tsx

@@ -8,17 +8,19 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
+import { AxiosError } from "axios";
 import { validate } from "email-validator";
+import { StatusCodes } from "http-status-codes";
 import { FunctionComponent, useEffect, useRef, useState } from "react";
-import useAuthenticationStore from "../../../hooks/authentication.store";
 import Conditional from "../../../components/Conditional";
-import { AxiosError } from "axios";
+import useAuthenticationStore from "../../../hooks/authentication.store";
 
 const LoginForm: FunctionComponent = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [failure, setFailure] = useState(false);
-  const [error, setError] = useState<AxiosError<any> | null>();
+
+  const [status, setStatus] = useState<StatusCodes>();
+  const [error, setError] = useState<AxiosError>();
 
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -30,21 +32,24 @@ const LoginForm: FunctionComponent = () => {
   const logIn = useAuthenticationStore((state) => state.logIn);
 
   const handleLogin = async () => {
-    setFailure(false);
-    setError(null);
     setLoading(true);
+    setError(undefined);
 
     const { success, error } = await logIn(email, password);
 
+    if (error) {
+      setError(error);
+    }
+
+    if (error && error.response && error.response.status) {
+      setStatus(error.response.status as StatusCodes);
+    } else if (error && error.isAxiosError) {
+      setStatus(StatusCodes.INTERNAL_SERVER_ERROR);
+    }
+
     if (!success) {
       setPassword("");
       passwordField.current?.focus();
-
-      if (error) {
-        setError(error);
-      } else {
-        setFailure(true);
-      }
     }
 
     setLoading(false);
@@ -107,20 +112,23 @@ const LoginForm: FunctionComponent = () => {
           }}
         />
 
-        <Conditional value={failure}>
+        {/* Unauthorized */}
+        <Conditional value={status == StatusCodes.UNAUTHORIZED}>
           <Alert severity="error">Invalid email or password</Alert>
         </Conditional>
 
-        <Conditional value={error}>
+        {/* Catch all error */}
+        <Conditional value={status !== StatusCodes.UNAUTHORIZED}>
           <Alert severity="error">
             <AlertTitle>Unknown login error</AlertTitle>
-            <Typography variant="caption" component="div">
-              {error?.response?.headers["x-request-id"] && (
+
+            {error?.response?.headers["x-request-id"] && (
+              <Typography variant="caption" component="div">
                 <span>
                   Request ID: {error.response.headers["x-request-id"]}
                 </span>
-              )}
-            </Typography>
+              </Typography>
+            )}
           </Alert>
         </Conditional>