From 160e4d936eafd3cbb365d45ae46951c8d45482cb Mon Sep 17 00:00:00 2001
From: cami <cami+giteaspcodes@mailbox.org>
Date: Sun, 4 Jul 2021 23:35:20 +0200
Subject: [PATCH 1/2] Added login feedback in the backend

---
 backend/src/app.py                     | 10 +++++++---
 frontend/src/components/pages/Login.js |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/backend/src/app.py b/backend/src/app.py
index f5048d0..822088c 100644
--- a/backend/src/app.py
+++ b/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'])
diff --git a/frontend/src/components/pages/Login.js b/frontend/src/components/pages/Login.js
index b5a4687..4220f82 100644
--- a/frontend/src/components/pages/Login.js
+++ b/frontend/src/components/pages/Login.js
@@ -17,7 +17,6 @@ export default function Login() {
       username: username,
       password: password,
     };
-    console.log(opts);
     fetch("/api/login", {
       method: "post",
       body: JSON.stringify(opts),
@@ -27,6 +26,7 @@ export default function Login() {
         if (token.access_token) {
           login(token);
         } else {
+          // TODO: add text if the login is not correct
           console.log("Please type in the correct username / password");
         }
       });

From 9cd22e7d7d6faf27fa80a88a9ff482a8e461f792 Mon Sep 17 00:00:00 2001
From: cami <cami+giteaspcodes@mailbox.org>
Date: Mon, 5 Jul 2021 00:01:50 +0200
Subject: [PATCH 2/2] Added the login feedback in the frontend

---
 frontend/src/App.css                   |  6 +++++-
 frontend/src/components/pages/Login.js | 25 ++++++++++++++-----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 56cc72b..73dac89 100644
--- a/frontend/src/App.css
+++ b/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 {
diff --git a/frontend/src/components/pages/Login.js b/frontend/src/components/pages/Login.js
index 4220f82..41deceb 100644
--- a/frontend/src/components/pages/Login.js
+++ b/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>
         ) : (