Added login feedback in the backend [fix #98] #99

Merged
cami merged 2 commits from login/feedback into main 2021-07-04 22:03:24 +00:00
3 changed files with 26 additions and 15 deletions

View file

@ -98,9 +98,13 @@ def login():
req = flask.request.get_json(force=True) req = flask.request.get_json(force=True)
username = req.get('username', None) username = req.get('username', None)
password = req.get('password', None) password = req.get('password', None)
user = guard.authenticate(username, password) try:
ret = {'access_token': guard.encode_jwt_token(user)} user = guard.authenticate(username, password)
return ret, 200 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']) @app.route('/api/refresh', methods=['POST'])

View file

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

View file

@ -10,6 +10,7 @@ import Secret from "./Secret";
export default function Login() { export default function Login() {
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [errorMessage, setErrorMessage] = useState("");
const onSubmitClick = (e) => { const onSubmitClick = (e) => {
e.preventDefault(); e.preventDefault();
@ -17,19 +18,20 @@ export default function Login() {
username: username, username: username,
password: password, password: password,
}; };
console.log(opts);
fetch("/api/login", { fetch("/api/login", {
method: "post", method: "post",
body: JSON.stringify(opts), 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); login(token);
} else { });
console.log("Please type in the correct username / password"); }
} });
});
}; };
const handleUsernameChange = (e) => { const handleUsernameChange = (e) => {
@ -40,13 +42,13 @@ export default function Login() {
setPassword(e.target.value); setPassword(e.target.value);
}; };
const [logged] = useAuth(); const [isLoggedIn] = useAuth();
return ( return (
<> <>
<div className="sitePage"> <div className="sitePage">
<h1>Login</h1> <h1>Login</h1>
{!logged ? ( {!isLoggedIn ? (
<form action="#"> <form action="#">
<InputField <InputField
LabelName="Benutzername" LabelName="Benutzername"
@ -63,6 +65,7 @@ export default function Login() {
InputPlaceHolder="Passwort" InputPlaceHolder="Passwort"
/> />
<br /> <br />
<p className="errorMessage">{errorMessage}</p>
<SubmitField onClick={onSubmitClick} LabelName="Einloggen" /> <SubmitField onClick={onSubmitClick} LabelName="Einloggen" />
</form> </form>
) : ( ) : (