diff --git a/frontend/src/Pages/LoginPage.tsx b/frontend/src/Pages/LoginPage.tsx index 6ccf8fa..9b4290d 100644 --- a/frontend/src/Pages/LoginPage.tsx +++ b/frontend/src/Pages/LoginPage.tsx @@ -1,8 +1,9 @@ import Button from "../Components/Button"; import Logo from "/src/assets/Logo.svg"; import "./LoginPage.css"; -import { useEffect } from "react"; -import { Link } from "react-router-dom"; +import { FormEvent, useEffect, useState } from "react"; +import { NewUser } from "../Types/Users"; +import { useNavigate } from "react-router-dom"; const PreloadBackgroundAnimation = (): JSX.Element => { useEffect(() => { @@ -26,6 +27,39 @@ const PreloadBackgroundAnimation = (): JSX.Element => { }; function LoginPage(): JSX.Element { + //Example users for testing without backend, remove when using backend + const admin: NewUser = { + name: "admin", + password: "123", + }; + const pmanager: NewUser = { + name: "pmanager", + password: "123", + }; + const user: NewUser = { + name: "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): void { + event.preventDefault(); + //TODO: Compare with db instead when finished + if (username === admin.name && password === admin.password) { + navigate("/admin-menu"); + } else if (username === pmanager.name && password === pmanager.password) { + navigate("/PM-project-page"); + } else if (username === user.name && password === user.password) { + navigate("/your-projects"); + } + } + + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + return ( <> @@ -51,24 +85,30 @@ function LoginPage(): JSX.Element { {" "} Please log in to continue{" "} - - - +
+ { + setUsername(e.target.value); + }} + /> + { + setPassword(e.target.value); + }} + />