Show a different message error when the password is wrong

agama-project · May 29, 2024 · 0d6a9fd · 0d6a9fd
1 parent 7f8997d
commit 0d6a9fd
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/web/src/components/core/LoginPage.jsx b/web/src/components/core/LoginPage.jsx
@@ -26,7 +26,7 @@ import { Navigate } from "react-router-dom";
 import { ActionGroup, Button, Form, FormGroup } from "@patternfly/react-core";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
-import { useAuth } from "~/context/auth";
+import { AuthErrors, useAuth } from "~/context/auth";
 import { About, FormValidationError, If, Page, PasswordInput, Section } from "~/components/core";
 import { Center } from "~/components/layout";
 
@@ -39,14 +39,21 @@ import { Center } from "~/components/layout";
 export default function LoginPage() {
   const [password, setPassword] = useState("");
   const [error, setError] = useState(false);
-  const { isLoggedIn, login: loginFn } = useAuth();
+  const { isLoggedIn, login: loginFn, error: loginError } = useAuth();
 
   const login = async (e) => {
     e.preventDefault();
     const result = await loginFn(password);
-    setError(!result);
+
+    setError(result.status !== 200);
   };
 
+  const errorMessage = (authError) => {
+    if (authError === AuthErrors.AUTH)
+      return _("Could not log in. Please, make sure that the password is correct.");
+
+    return _("Could not authenticate against the server, please check it.");
+  };
   if (isLoggedIn) {
     return <Navigate to="/" />;
   }
@@ -83,7 +90,7 @@ export default function LoginPage() {
               condition={error}
               then={
                 <FormValidationError
-                  message={_("Could not log in. Please, make sure that the password is correct.")}
+                  message={errorMessage(loginError)}
                 />
               }
             />

diff --git a/web/src/context/auth.jsx b/web/src/context/auth.jsx
@@ -37,22 +37,37 @@ function useAuth() {
   return context;
 }
 
+const AuthErrors = Object.freeze({
+  SERVER: "server",
+  AUTH: "auth",
+  OTHER: "other"
+});
+
 /**
  * @param {object} props
  * @param {React.ReactNode} [props.children] - content to display within the provider
  */
 function AuthProvider({ children }) {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [error, setError] = useState(null);
 
   const login = useCallback(async (password) => {
     const response = await fetch("/api/auth", {
       method: "POST",
       body: JSON.stringify({ password }),
       headers: { "Content-Type": "application/json" },
     });
+
     const result = response.status === 200;
+    if ((response.status >= 500) && (response.status < 600)) {
+      setError(AuthErrors.SERVER);
+    }
+    if ((response.status >= 400) && (response.status < 500)) {
+      setError(AuthErrors.AUTH);
+    }
     setIsLoggedIn(result);
-    return result;
+
+    return response;
   }, []);
 
   const logout = useCallback(async () => {
@@ -68,15 +83,21 @@ function AuthProvider({ children }) {
     })
       .then((response) => {
         setIsLoggedIn(response.status === 200);
+        if ((response.status >= 500) && (response.status < 600)) {
+          setError(AuthErrors.SERVER);
+        }
+        if ((response.status >= 400) && (response.status < 500)) {
+          setError(AuthErrors.AUTH);
+        }
       })
       .catch(() => setIsLoggedIn(false));
   }, []);
 
   return (
-    <AuthContext.Provider value={{ login, logout, isLoggedIn }}>
+    <AuthContext.Provider value={{ login, logout, isLoggedIn, error }}>
       {children}
     </AuthContext.Provider>
   );
 }
 
-export { AuthProvider, useAuth };
+export { AuthProvider, useAuth, AuthErrors };