From a4b19e32eb39b5d4d26324bf897eaa1bd1ce985a Mon Sep 17 00:00:00 2001
From: Hollgy <karlgustav.ek@hotmail.com>
Date: Wed, 13 Mar 2024 17:56:04 +0100
Subject: [PATCH] Boilerplate added for register, non functional

---
 frontend/src/Components/Register.tsx | 82 ++++++++++++++++++++++++++++
 frontend/src/Pages/LoginPage.tsx     |  9 +++
 frontend/src/Types/Users.ts          |  4 +-
 frontend/src/main.tsx                |  5 ++
 4 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/Components/Register.tsx

diff --git a/frontend/src/Components/Register.tsx b/frontend/src/Components/Register.tsx
new file mode 100644
index 0000000..e0caf46
--- /dev/null
+++ b/frontend/src/Components/Register.tsx
@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { NewUser, User } from "../Types/Users";
+
+export default function Register() {
+const [username, setUsername] = useState('')
+const [password, setPassword] = useState('')
+const [error, setError] = useState('')
+
+    
+
+  const handleRegister = async () => {
+    try {
+      const newUser: NewUser = { username, password };
+      const registeredUser: User = await api.registerUser(newUser);
+      console.log("User registered:", registeredUser);
+      // Optionally, you can navigate to another page or show a success message here
+    } catch (error) {
+      setError("Registration failed. Please try again."); // Handle error appropriately
+    }
+  };
+
+  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();
+            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 border-red-500 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)}
+            />
+            <p className="text-red-500 text-xs italic">
+              Please choose a password.
+            </p>
+          </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>
+          {error && <p className="text-red-500 text-xs italic">{error}</p>}
+        </form>
+        <p className="text-center text-gray-500 text-xs"></p>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/Pages/LoginPage.tsx b/frontend/src/Pages/LoginPage.tsx
index d8ea651..11a7da2 100644
--- a/frontend/src/Pages/LoginPage.tsx
+++ b/frontend/src/Pages/LoginPage.tsx
@@ -3,6 +3,7 @@ import Logo from "/src/assets/TTIMElogo.png";
 import "./LoginPage.css";
 import { useEffect } from "react";
 import { Link } from "react-router-dom";
+import Register from "../Components/Register";
 
 const PreloadBackgroundAnimation = (): JSX.Element => {
   useEffect(() => {
@@ -69,6 +70,14 @@ function LoginPage(): JSX.Element {
               }}
             />
           </Link>
+            <Link to="/register">
+              <Button
+                text="Register new user"
+                onClick={(): void => {
+                  return;
+                }}
+              />
+            </Link>
         </div>
       </div>
     </>
diff --git a/frontend/src/Types/Users.ts b/frontend/src/Types/Users.ts
index 2a195b2..8323b2e 100644
--- a/frontend/src/Types/Users.ts
+++ b/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;
 }
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index d5616c7..70ec63d 100644
--- a/frontend/src/main.tsx
+++ b/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";
 
 // This is where the routes are mounted
 const router = createBrowserRouter([
@@ -20,6 +21,10 @@ const router = createBrowserRouter([
     path: "/project",
     element: <UserProjectPage />,
   },
+  {
+    path: "/register",
+    element: <Register />,
+  },
 ]);
 
 // Semi-hacky way to get the root element