Added some functionality to login page. Checks username + password and compares with "fake" users to determine which page to get

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<HTMLFormElement>): 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 (
     <>
       <PreloadBackgroundAnimation />
@@ -51,24 +85,30 @@ function LoginPage(): JSX.Element {
             {" "}
             Please log in to continue{" "}
           </h2>
-          <input
-            className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
-            type="text"
-            placeholder="Username"
-          />
-          <input
-            className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
-            type="password"
-            placeholder="Password"
-          />
-          <Link to="/your-projects">
+          <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;
               }}
             />
-          </Link>
+          </form>
         </div>
       </div>
     </>