Added the login feedback in the frontend

frontend/src/components/pages/Login.js

@@ -10,6 +10,7 @@ import Secret from "./Secret";
 export default function Login() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
 
   const onSubmitClick = (e) => {
     e.preventDefault();
@@ -20,16 +21,17 @@ export default function Login() {
     fetch("/api/login", {
       method: "post",
       body: JSON.stringify(opts),
-    })
-      .then((r) => r.json())
-      .then((token) => {
-        if (token.access_token) {
+    }).then((response) => {
+      if (response.status === 401) {
+        response.json().then((resp) => {
+          setErrorMessage(resp.message);
+        });
+      } else {
+        response.json().then((token) => {
           login(token);
-        } else {
-          // TODO: add text if the login is not correct
-          console.log("Please type in the correct username / password");
-        }
-      });
+        });
+      }
+    });
   };
 
   const handleUsernameChange = (e) => {
@@ -40,13 +42,13 @@ export default function Login() {
     setPassword(e.target.value);
   };
 
-  const [logged] = useAuth();
+  const [isLoggedIn] = useAuth();
 
   return (
     <>
       <div className="sitePage">
         <h1>Login</h1>
-        {!logged ? (
+        {!isLoggedIn ? (
           <form action="#">
             <InputField
               LabelName="Benutzername"
@@ -63,6 +65,7 @@ export default function Login() {
               InputPlaceHolder="Passwort"
             />
             <br />
+            <p className="errorMessage">{errorMessage}</p>
             <SubmitField onClick={onSubmitClick} LabelName="Einloggen" />
           </form>
         ) : (