Added the login feedback in the frontend

This commit is contained in:
cami 2021-07-05 00:01:50 +02:00
parent 160e4d936e
commit 9cd22e7d7d
2 changed files with 19 additions and 12 deletions

View file

@ -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 {

View file

@ -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,14 +21,15 @@ export default function Login() {
fetch("/api/login", {
method: "post",
body: JSON.stringify(opts),
})
.then((r) => r.json())
.then((token) => {
if (token.access_token) {
login(token);
}).then((response) => {
if (response.status === 401) {
response.json().then((resp) => {
setErrorMessage(resp.message);
});
} else {
// TODO: add text if the login is not correct
console.log("Please type in the correct username / password");
response.json().then((token) => {
login(token);
});
}
});
};
@ -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>
) : (