Changed so that most functionality was moved to separate components

frontend/src/Pages/LoginPage.tsx

@@ -1,71 +1,29 @@
-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";
+import { Dispatch, FormEvent, SetStateAction, useState } from "react";
+import BackgroundAnimation from "../Components/BackgroundAnimation";
+import LoginField from "../Components/LoginField";
+import LoginCheck from "../Components/LoginCheck";
 
-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();
+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();
-    //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");
-    }
+    props.setAuthority((prevAuth) => {
+      prevAuth = LoginCheck({ username: username, password: password });
+      return prevAuth;
+    });
   }
 
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-
   return (
     <>
-      <PreloadBackgroundAnimation />
+      <BackgroundAnimation />
       <div
         className="flex flex-col h-screen items-center justify-center bg-cover bg-fixed"
         style={{
@@ -88,30 +46,13 @@ function LoginPage(): JSX.Element {
             {" "}
             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>
+          <LoginField
+            handleSubmit={handleSubmit}
+            setUsername={setUsername}
+            setPassword={setPassword}
+            username={username}
+            password={password}
+          />
         </div>
       </div>
     </>