Merge pull request 'Added login feedback in the backend [fix #98]' (#99) from login/feedback into main

Reviewed-on: #99

backend/src/app.py

@@ -98,9 +98,13 @@ def login():
     req = flask.request.get_json(force=True)
     username = req.get('username', None)
     password = req.get('password', None)
-    user = guard.authenticate(username, password)
-    ret = {'access_token': guard.encode_jwt_token(user)}
-    return ret, 200
+    try:
+        user = guard.authenticate(username, password)
+        ret = {'access_token': guard.encode_jwt_token(user)}
+        return ret, 200
+    except flask_praetorian.exceptions.AuthenticationError:
+        ret = {'message': "Benutzername und Passwort stimmen nicht überein"}
+        return ret, 401
 
 
 @app.route('/api/refresh', methods=['POST'])

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();
@@ -17,19 +18,20 @@ export default function Login() {
       username: username,
       password: password,
     };
-    console.log(opts);
     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 {
-          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>
         ) : (