change back button UserViewTimeReportsPage

frontend/src/Components/BackButton.tsx

@@ -0,0 +1,18 @@
+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,5 +1,6 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
+import BackButton from "../../Components/BackButton";
 
 function AdminManageUsers(): JSX.Element {
   const content = <></>;
@@ -12,12 +13,7 @@ function AdminManageUsers(): JSX.Element {
           return;
         }}
       />
-      <Button
+      <BackButton />
-        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-users-page">
+        <Link to="/admin-manage-users">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             Manage Users
           </h1>
         </Link>
-        <Link to="/admin-projects-page">
+        <Link to="/admin-manage-projects">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             Manage Projects
           </h1>

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 { FormEvent, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+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
+          <form className="flex flex-col items-center" onSubmit={handleSubmit}>
-            className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
+            <input
-            type="text"
+              className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
-            placeholder="Username"
+              type="text"
-          />
+              placeholder="Username"
-          <input
+              onChange={(e) => {
-            className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
+                setUsername(e.target.value);
-            type="password"
+              }}
-            placeholder="Password"
+            />
-          />
+            <input
-          <Link to="/your-projects">
+              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>
     </>

frontend/src/Pages/UserPages/UserEditTimeReportPage.tsx

@@ -1,6 +1,7 @@
 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 = (
@@ -18,12 +19,7 @@ function UserEditTimeReportPage(): JSX.Element {
           return;
         }}
       />
-      <Button
+      <BackButton />
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-      />
     </>
   );
 

frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx

@@ -1,7 +1,8 @@
 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 = (
@@ -19,14 +20,7 @@ function UserNewTimeReportPage(): JSX.Element {
           return;
         }}
       />
-      <Link to="/project">
+      <BackButton />
-        <Button
-          text="Back"
-          onClick={(): void => {
-            return;
-          }}
-        />
-      </Link>
     </>
   );
 

frontend/src/Pages/UserPages/UserProjectPage.tsx

@@ -1,15 +1,17 @@
 import { Link } from "react-router-dom";
 import BasicWindow from "../../Components/BasicWindow";
-import Button from "../../Components/Button";
+import BackButton from "../../Components/BackButton";
 
 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]">
-        <h1 className="font-bold underline text-[30px] cursor-pointer">
+        <Link to="/project-page">
-          Your Time Reports
+          <h1 className="font-bold underline text-[30px] cursor-pointer">
-        </h1>
+            Your Time Reports
+          </h1>
+        </Link>
         <Link to="/new-time-report">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             New Time Report
@@ -21,14 +23,7 @@ function UserProjectPage(): JSX.Element {
 
   const buttons = (
     <>
-      <Link to="/your-projects">
+      <BackButton />
-        <Button
-          text="Back"
-          onClick={(): void => {
-            return;
-          }}
-        />
-      </Link>
     </>
   );
 

frontend/src/Pages/UserPages/UserViewTimeReportsPage.tsx

@@ -1,17 +1,17 @@
 import BasicWindow from "../../Components/BasicWindow";
-import Button from "../../Components/Button";
+import BackButton from "../../Components/BackButton";
 
 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 = (
     <>
-      <Button
+      <BackButton />
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-      />
     </>
   );