63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import Logo from "/src/assets/Logo.svg";
|
|
import "./LoginPage.css";
|
|
import { Dispatch, FormEvent, SetStateAction, useState } from "react";
|
|
import BackgroundAnimation from "../Components/BackgroundAnimation";
|
|
import LoginField from "../Components/LoginField";
|
|
import LoginCheck from "../Components/LoginCheck";
|
|
|
|
function LoginPage(props: {
|
|
setAuthority: Dispatch<SetStateAction<number>>;
|
|
}): JSX.Element {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
|
|
/* On submit (enter or button click) check if username and password match any user
|
|
and if so, redirect to correct page */
|
|
function handleSubmit(event: FormEvent<HTMLFormElement>): void {
|
|
event.preventDefault();
|
|
LoginCheck({
|
|
username: username,
|
|
password: password,
|
|
setAuthority: props.setAuthority,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<BackgroundAnimation />
|
|
<div
|
|
className="flex flex-col h-screen items-center justify-center bg-cover bg-fixed"
|
|
style={{
|
|
animation: "backgroundTransition 30s infinite",
|
|
backgroundSize: "cover",
|
|
backgroundAttachment: "fixed",
|
|
}}
|
|
>
|
|
<div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20">
|
|
<img
|
|
src={Logo}
|
|
className="logo w-[7vw] mb-10 mt-10"
|
|
alt="TTIME Logo"
|
|
/>
|
|
<h1 className="font-sans mb-4 font-bold text-[25px]">
|
|
{" "}
|
|
Welcome to TTIME!{" "}
|
|
</h1>
|
|
<h2 className="font-sans mb-4 text-[15px]">
|
|
{" "}
|
|
Please log in to continue{" "}
|
|
</h2>
|
|
<LoginField
|
|
handleSubmit={handleSubmit}
|
|
setUsername={setUsername}
|
|
setPassword={setPassword}
|
|
username={username}
|
|
password={password}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default LoginPage;
|