From 160e4d936eafd3cbb365d45ae46951c8d45482cb Mon Sep 17 00:00:00 2001 From: cami 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"); } }); -- 2.45.2 From 9cd22e7d7d6faf27fa80a88a9ff482a8e461f792 Mon Sep 17 00:00:00 2001 From: cami 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 ( <>

Login

- {!logged ? ( + {!isLoggedIn ? (

+

{errorMessage}

) : ( -- 2.45.2