From f08ded3718ce620dacbb331c653d66872ffbd0c6 Mon Sep 17 00:00:00 2001
From: "D. Ror." <imnasnainaec@gmail.com>
Date: Fri, 27 Sep 2024 10:06:54 -0400
Subject: [PATCH] [Login] Improve error specificity (#3327)

---
 public/locales/en/translation.json         |  1 +
 src/backend/index.ts                       | 19 ++++++++-----------
 src/components/Login/Login.tsx             |  9 ++++++++-
 src/components/Login/Redux/LoginActions.ts |  2 +-
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 3bb803e9c2..5f2b8a25f9 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -51,6 +51,7 @@
     "forgotPassword": "Forgot password?",
     "login": "Log in",
     "failed": "Failed to log in. Please check your username and password.",
+    "failedUnknownReason": "Failed to log in. Something went wrong with The Combine.",
     "backToLogin": "Back to login",
     "signUp": "Sign Up",
     "signUpNew": "Sign Up New User",
diff --git a/src/backend/index.ts b/src/backend/index.ts
index 539a97d096..718d125f51 100644
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -44,10 +44,10 @@ const config = new Api.Configuration(config_parameters);
 /** A list of URL patterns for which the frontend explicitly handles errors
  * and the blanket error pop ups should be suppressed.*/
 const whiteListedErrorUrls = [
-  "users/authenticate",
-  "users/captcha",
   "/speakers/create/",
   "/speakers/update/",
+  "/users/authenticate",
+  "/users/captcha/",
 ];
 
 // Create an axios instance to allow for attaching interceptors to it.
@@ -66,16 +66,13 @@ axiosInstance.interceptors.response.use(undefined, (err: AxiosError) => {
       router.navigate(Path.Login);
     }
 
-    // Check for fatal errors (4xx-5xx).
-    if (
-      status >= StatusCodes.BAD_REQUEST &&
-      status <= StatusCodes.NETWORK_AUTHENTICATION_REQUIRED
-    ) {
-      // Suppress error pop-ups for URLs the frontend already explicitly handles.
-      if (url && whiteListedErrorUrls.some((u) => url.includes(u))) {
-        return Promise.reject(err);
-      }
+    // Suppress error pop-ups for URLs the frontend already explicitly handles.
+    if (url && whiteListedErrorUrls.some((u) => url.includes(u))) {
+      return Promise.reject(err);
+    }
 
+    // Check for fatal errors (400+).
+    if (status >= StatusCodes.BAD_REQUEST) {
       console.error(err);
       enqueueSnackbar(`${status} ${response.statusText}\n${err.config.url}`);
     }
diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
index f093471b52..3846ee7bfb 100644
--- a/src/components/Login/Login.tsx
+++ b/src/components/Login/Login.tsx
@@ -46,6 +46,9 @@ export enum LoginId {
 export default function Login(): ReactElement {
   const dispatch = useAppDispatch();
 
+  const loginError = useAppSelector(
+    (state: StoreState) => state.loginState.error
+  );
   const status = useAppSelector(
     (state: StoreState) => state.loginState.loginStatus
   );
@@ -147,7 +150,11 @@ export default function Login(): ReactElement {
                 style={{ color: "red", marginBottom: 24, marginTop: 24 }}
                 variant="body2"
               >
-                {t("login.failed")}
+                {t(
+                  loginError.includes("401")
+                    ? "login.failed"
+                    : "login.failedUnknownReason"
+                )}
               </Typography>
             )}
 
diff --git a/src/components/Login/Redux/LoginActions.ts b/src/components/Login/Redux/LoginActions.ts
index 519d003ca2..49da53dc04 100644
--- a/src/components/Login/Redux/LoginActions.ts
+++ b/src/components/Login/Redux/LoginActions.ts
@@ -59,7 +59,7 @@ export function asyncLogIn(username: string, password: string) {
         router.navigate(Path.ProjScreen);
       })
       .catch((err) =>
-        dispatch(loginFailure(err.response?.data ?? err.message))
+        dispatch(loginFailure(`${err.response?.status ?? err.message}`))
       );
   };
 }