Merge remote-tracking branch 'origin/frontend' into gruppPP

frontend/src/API/API.ts

@@ -1,3 +1,4 @@
+import { NewProject, Project } from "../Types/Project";
 import { NewUser, User } from "../Types/Users";
 
 // Defines all the methods that an instance of the API must implement
@@ -6,6 +7,10 @@ interface API {
   registerUser(user: NewUser): Promise<User>;
   /** Remove a user */
   removeUser(username: string): Promise<User>;
+  /** Create a project */
+  createProject(project: NewProject): Promise<Project>;
+  /** Renew the token */
+  renewToken(token: string): Promise<string>;
 }
 
 // Export an instance of the API
@@ -29,4 +34,24 @@ export const api: API = {
       body: JSON.stringify(username),
     }).then((res) => res.json() as Promise<User>);
   },
+
+  async createProject(project: NewProject): Promise<Project> {
+    return fetch("/api/project", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(project),
+    }).then((res) => res.json() as Promise<Project>);
+  },
+
+  async renewToken(token: string): Promise<string> {
+    return fetch("/api/loginrenew", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: "Bearer " + token,
+      },
+    }).then((res) => res.json() as Promise<string>);
+  },
 };

frontend/src/Components/Register.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { NewUser } from "../Types/Users";
+import { api } from "../API/API";
+
+export default function Register(): JSX.Element {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleRegister = async (): Promise<void> => {
+    const newUser: NewUser = { userName: username, password };
+    await api.registerUser(newUser); // TODO: Handle errors
+  };
+
+  return (
+    <div>
+      <div className="w-full max-w-xs">
+        <form
+          className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+          onSubmit={(e) => {
+            e.preventDefault();
+            void handleRegister();
+          }}
+        >
+          <h3 className="pb-2">Register new user</h3>
+          <div className="mb-4">
+            <label
+              className="block text-gray-700 text-sm font-bold mb-2"
+              htmlFor="username"
+            >
+              Username
+            </label>
+            <input
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              id="username"
+              type="text"
+              placeholder="Username"
+              value={username}
+              onChange={(e) => {
+                setUsername(e.target.value);
+              }}
+            />
+          </div>
+          <div className="mb-6">
+            <label
+              className="block text-gray-700 text-sm font-bold mb-2"
+              htmlFor="password"
+            >
+              Password
+            </label>
+            <input
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+              id="password"
+              type="password"
+              placeholder="Choose your password"
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+              }}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <button
+              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+              type="submit"
+            >
+              Register
+            </button>
+          </div>
+        </form>
+        <p className="text-center text-gray-500 text-xs"></p>
+      </div>
+    </div>
+  );
+}

frontend/src/Pages/LoginPage.tsx

@@ -29,15 +29,15 @@ const PreloadBackgroundAnimation = (): JSX.Element => {
 function LoginPage(): JSX.Element {
   //Example users for testing without backend, remove when using backend
   const admin: NewUser = {
-    name: "admin",
+    userName: "admin",
     password: "123",
   };
   const pmanager: NewUser = {
-    name: "pmanager",
+    userName: "pmanager",
     password: "123",
   };
   const user: NewUser = {
-    name: "user",
+    userName: "user",
     password: "123",
   };
 
@@ -48,11 +48,14 @@ function LoginPage(): JSX.Element {
   function handleSubmit(event: FormEvent<HTMLFormElement>): void {
     event.preventDefault();
     //TODO: Compare with db instead when finished
-    if (username === admin.name && password === admin.password) {
+    if (username === admin.userName && password === admin.password) {
       navigate("/admin-menu");
-    } else if (username === pmanager.name && password === pmanager.password) {
+    } else if (
+      username === pmanager.userName &&
+      password === pmanager.password
+    ) {
       navigate("/PM-project-page");
-    } else if (username === user.name && password === user.password) {
+    } else if (username === user.userName && password === user.password) {
       navigate("/your-projects");
     }
   }

frontend/src/Types/Project.ts

@@ -0,0 +1,13 @@
+export interface Project {
+  id: number;
+  name: string;
+  description: string;
+  owner: string;
+  created: string; // This is a date
+}
+
+export interface NewProject {
+  name: string;
+  description: string;
+  owner: string;
+}

frontend/src/Types/Users.ts

@@ -1,11 +1,11 @@
 // This is how the API responds
 export interface User {
   id: number;
-  name: string;
+  userName: string;
 }
 
 // Used to create a new user
 export interface NewUser {
-  name: string;
+  userName: string;
   password: string;
 }

frontend/src/main.tsx

@@ -5,6 +5,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import LoginPage from "./Pages/LoginPage.tsx";
 import YourProjectsPage from "./Pages/YourProjectsPage.tsx";
 import UserProjectPage from "./Pages/UserPages/UserProjectPage.tsx";
+import Register from "./Components/Register.tsx";
 import AdminMenuPage from "./Pages/AdminPages/AdminMenuPage.tsx";
 import UserEditTimeReportPage from "./Pages/UserPages/UserEditTimeReportPage.tsx";
 import UserNewTimeReportPage from "./Pages/UserPages/UserNewTimeReportPage.tsx";
@@ -52,6 +53,14 @@ const router = createBrowserRouter([
     path: "/project",
     element: <UserProjectPage />,
   },
+  {
+    path: "/register",
+    element: <Register />,
+  },
+  {
+    path: "/admin-menu",
+    element: <AdminMenuPage />,
+  },
   {
     path: "/project-page",
     element: <UserViewTimeReportsPage />,