diff --git a/frontend/views/LoginView.tsx b/frontend/views/LoginView.tsx index bdeb91d..b0810bb 100644 --- a/frontend/views/LoginView.tsx +++ b/frontend/views/LoginView.tsx @@ -1,11 +1,14 @@ import {useAuth} from "Frontend/util/auth"; import {useState} from "react"; import {Link, useNavigate} from "react-router-dom"; -import {Button, Card, Input, Typography} from "@material-tailwind/react"; +import {Alert, Button, Card, Input, Spinner, Typography} from "@material-tailwind/react"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faCircleInfo, faCircleXmark} from "@fortawesome/free-solid-svg-icons"; export default function LoginView() { const {state, login} = useAuth(); - const [hasError, setError] = useState(); + const [hasError, setError] = useState(false); + const [loading, setLoading] = useState(false); const [username, setUsername] = useState(); const [password, setPassword] = useState(); const [url, setUrl] = useState(); @@ -25,18 +28,26 @@ export default function LoginView() { src="/images/Logo.svg" />
+ { hasError && + } + className="mb-4 bg-red-500" + > + Wrong username and/or password + }
{ e.preventDefault(); if (typeof username === "string" && password != null) { + setLoading(true); const {defaultUrl, error, redirectUrl} = await login(username, password); if (error) { setError(true); - alert("Wrong username and/or password!"); } else { setUrl(redirectUrl ?? defaultUrl ?? '/'); } + setLoading(false); } }} > @@ -85,9 +96,10 @@ export default function LoginView() {