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}

) : (