121 lines
3.4 KiB
TypeScript
121 lines
3.4 KiB
TypeScript
import Button from "../Components/Button";
|
|
import Logo from "/src/assets/Logo.svg";
|
|
import "./LoginPage.css";
|
|
import { FormEvent, useEffect, useState } from "react";
|
|
import { NewUser } from "../Types/Users";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
const PreloadBackgroundAnimation = (): JSX.Element => {
|
|
useEffect(() => {
|
|
const images = [
|
|
"src/assets/1.jpg",
|
|
"src/assets/2.jpg",
|
|
"src/assets/3.jpg",
|
|
"src/assets/4.jpg",
|
|
];
|
|
|
|
// Pre-load images
|
|
for (const i of images) {
|
|
console.log(i);
|
|
}
|
|
|
|
// Start animation
|
|
document.body.style.animation = "backgroundTransition 30s infinite";
|
|
}, []);
|
|
|
|
return <></>;
|
|
};
|
|
|
|
function LoginPage(): JSX.Element {
|
|
//Example users for testing without backend, remove when using backend
|
|
const admin: NewUser = {
|
|
userName: "admin",
|
|
password: "123",
|
|
};
|
|
const pmanager: NewUser = {
|
|
userName: "pmanager",
|
|
password: "123",
|
|
};
|
|
const user: NewUser = {
|
|
userName: "user",
|
|
password: "123",
|
|
};
|
|
|
|
const navigate = useNavigate();
|
|
|
|
/* 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();
|
|
//TODO: Compare with db instead when finished
|
|
if (username === admin.userName && password === admin.password) {
|
|
navigate("/admin-menu");
|
|
} else if (
|
|
username === pmanager.userName &&
|
|
password === pmanager.password
|
|
) {
|
|
navigate("/PM-project-page");
|
|
} else if (username === user.userName && password === user.password) {
|
|
navigate("/your-projects");
|
|
}
|
|
}
|
|
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
|
|
return (
|
|
<>
|
|
<PreloadBackgroundAnimation />
|
|
<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>
|
|
<form className="flex flex-col items-center" onSubmit={handleSubmit}>
|
|
<input
|
|
className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
|
|
type="text"
|
|
placeholder="Username"
|
|
onChange={(e) => {
|
|
setUsername(e.target.value);
|
|
}}
|
|
/>
|
|
<input
|
|
className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
|
|
type="password"
|
|
placeholder="Password"
|
|
onChange={(e) => {
|
|
setPassword(e.target.value);
|
|
}}
|
|
/>
|
|
<Button
|
|
text="Login"
|
|
onClick={(): void => {
|
|
return;
|
|
}}
|
|
/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default LoginPage;
|