[Login] Improve error specificity (#3327)

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",

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}`);
     }

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>
             )}
 

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}`))
       );
   };
 }