Added the login feedback in the frontend

frontend/src/App.css

@@ -11,7 +11,7 @@
   --secondary: rgb(218, 218, 218);
   --third: rgb(171, 183, 183);
   --forth: rgb(255, 255, 255);
-  --error: rgb(221, 140, 18);
+  --error: rgb(221, 82, 18);
 }
 
 .home,
@@ -58,6 +58,10 @@ h1 {
 
 .errorMessage {
   color: var(--error);
+  max-width: 60%;
+  /* top, right, bottom, left */
+  margin: 0 auto;
+  margin-top: 1em;
 }
 
 .bildnachweise {

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((response) => {
-      .then((r) => r.json())
+      if (response.status === 401) {
-      .then((token) => {
+        response.json().then((resp) => {
-        if (token.access_token) {
+          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>
         ) : (