frontend/src/Components/BackButton.tsx

@@ -1,18 +0,0 @@
-import { useNavigate } from "react-router-dom";
-
-function BackButton(): JSX.Element {
-  const navigate = useNavigate();
-  const goBack = (): void => {
-    navigate(-1);
-  };
-  return (
-    <button
-      onClick={goBack}
-      className="inline-block py-1 px-8 font-bold bg-orange-500 text-white border-2 border-black rounded-full cursor-pointer mt-5 mb-5 transition-colors duration-10 hover:bg-orange-600 hover:text-gray-300 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 4vh;"
-    >
-      Back
-    </button>
-  );
-}
-
-export default BackButton;

frontend/src/Pages/AdminPages/AdminManageUsers.tsx

@@ -1,6 +1,5 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
-import BackButton from "../../Components/BackButton";
 
 function AdminManageUsers(): JSX.Element {
   const content = <></>;
@@ -13,7 +12,12 @@ function AdminManageUsers(): JSX.Element {
           return;
         }}
       />
-      <BackButton />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
     </>
   );
 

frontend/src/Pages/AdminPages/AdminMenuPage.tsx

@@ -6,12 +6,12 @@ function AdminMenuPage(): JSX.Element {
     <>
       <h1 className="font-bold text-[30px] mb-[20px]">Administrator Menu</h1>
       <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
-        <Link to="/admin-manage-users">
+        <Link to="/admin-users-page">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             Manage Users
           </h1>
         </Link>
-        <Link to="/admin-manage-projects">
+        <Link to="/admin-projects-page">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             Manage Projects
           </h1>

frontend/src/Pages/LoginPage.tsx

@@ -1,9 +1,8 @@
 import Button from "../Components/Button";
 import Logo from "/src/assets/Logo.svg";
 import "./LoginPage.css";
-import { FormEvent, useEffect, useState } from "react";
+import { useEffect } from "react";
-import { NewUser } from "../Types/Users";
+import { Link } from "react-router-dom";
-import { useNavigate } from "react-router-dom";
 
 const PreloadBackgroundAnimation = (): JSX.Element => {
   useEffect(() => {
@@ -27,39 +26,6 @@ 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 />
@@ -85,30 +51,24 @@ function LoginPage(): JSX.Element {
             {" "}
             Please log in to continue{" "}
           </h2>
-          <form className="flex flex-col items-center" onSubmit={handleSubmit}>
+          <input
-            <input
+            className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
-              className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
+            type="text"
-              type="text"
+            placeholder="Username"
-              placeholder="Username"
+          />
-              onChange={(e) => {
+          <input
-                setUsername(e.target.value);
+            className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
-              }}
+            type="password"
-            />
+            placeholder="Password"
-            <input
+          />
-              className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
+          <Link to="/your-projects">
-              type="password"
-              placeholder="Password"
-              onChange={(e) => {
-                setPassword(e.target.value);
-              }}
-            />
             <Button
               text="Login"
               onClick={(): void => {
                 return;
               }}
             />
-          </form>
+          </Link>
         </div>
       </div>
     </>

frontend/src/Pages/UserPages/UserEditTimeReportPage.tsx

@@ -1,7 +1,6 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
 import NewTimeReport from "../../Components/TimeReport";
-import BackButton from "../../Components/BackButton";
 
 function UserEditTimeReportPage(): JSX.Element {
   const content = (
@@ -19,7 +18,12 @@ function UserEditTimeReportPage(): JSX.Element {
           return;
         }}
       />
-      <BackButton />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
     </>
   );
 

frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx

@@ -1,8 +1,7 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
 import NewTimeReport from "../../Components/TimeReport";
-//import { Link } from "react-router-dom";
+import { Link } from "react-router-dom";
-import BackButton from "../../Components/BackButton";
 
 function UserNewTimeReportPage(): JSX.Element {
   const content = (
@@ -20,7 +19,14 @@ function UserNewTimeReportPage(): JSX.Element {
           return;
         }}
       />
-      <BackButton />
+      <Link to="/project">
+        <Button
+          text="Back"
+          onClick={(): void => {
+            return;
+          }}
+        />
+      </Link>
     </>
   );
 

frontend/src/Pages/UserPages/UserProjectPage.tsx

@@ -1,17 +1,15 @@
 import { Link } from "react-router-dom";
 import BasicWindow from "../../Components/BasicWindow";
-import BackButton from "../../Components/BackButton";
+import Button from "../../Components/Button";
 
 function UserProjectPage(): JSX.Element {
   const content = (
     <>
       <h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
       <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
-        <Link to="/project-page">
+        <h1 className="font-bold underline text-[30px] cursor-pointer">
-          <h1 className="font-bold underline text-[30px] cursor-pointer">
+          Your Time Reports
-            Your Time Reports
+        </h1>
-          </h1>
-        </Link>
         <Link to="/new-time-report">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             New Time Report
@@ -23,7 +21,14 @@ function UserProjectPage(): JSX.Element {
 
   const buttons = (
     <>
-      <BackButton />
+      <Link to="/your-projects">
+        <Button
+          text="Back"
+          onClick={(): void => {
+            return;
+          }}
+        />
+      </Link>
     </>
   );
 

frontend/src/Pages/UserPages/UserViewTimeReportsPage.tsx

@@ -1,17 +1,17 @@
 import BasicWindow from "../../Components/BasicWindow";
-import BackButton from "../../Components/BackButton";
+import Button from "../../Components/Button";
 
 function UserViewTimeReportsPage(): JSX.Element {
-  const content = (
+  const content = <></>;
-    <>
-      <h1 className="font-bold text-[30px] mb-[20px]">Your Time Reports</h1>
-      {/* Här kan du inkludera logiken för att visa användarens tidrapporter */}
-    </>
-  );
 
   const buttons = (
     <>
-      <BackButton />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
     </>
   );