Merge branch 'dev' into BumBranch

frontend/src/API/API.ts

@@ -61,13 +61,19 @@ export const api: API = {
       });
 
       if (!response.ok) {
-        return { success: false, message: "Failed to register user" };
+        return {
+          success: false,
+          message: "Failed to register user: " + response.status,
+        };
       } else {
-        const data = (await response.json()) as User;
+        // const data = (await response.json()) as User; // The API does not currently return the user
-        return { success: true, data };
+        return { success: true };
       }
     } catch (e) {
-      return { success: false, message: "Failed to register user" };
+      return {
+        success: false,
+        message: "Unknown error while registering user",
+      };
     }
   },
 

frontend/src/Components/Register.tsx

@@ -3,6 +3,7 @@ import { NewUser } from "../Types/goTypes";
 import { api } from "../API/API";
 import Logo from "../assets/Logo.svg";
 import Button from "./Button";
+import { useNavigate } from "react-router-dom";
 
 function InputField(props: {
   label: string;
@@ -31,12 +32,23 @@ function InputField(props: {
 }
 
 export default function Register(): JSX.Element {
-  const [username, setUsername] = useState("");
+  const [username, setUsername] = useState<string>();
-  const [password, setPassword] = useState("");
+  const [password, setPassword] = useState<string>();
+  const [errMessage, setErrMessage] = useState<string>();
+
+  const nav = useNavigate();
 
   const handleRegister = async (): Promise<void> => {
-    const newUser: NewUser = { username: username, password };
+    const newUser: NewUser = {
-    await api.registerUser(newUser); // TODO: Handle errors
+      username: username ?? "",
+      password: password ?? "",
+    };
+    const response = await api.registerUser(newUser);
+    if (response.success) {
+      nav("/"); // Instantly navigate to the login page
+    } else {
+      setErrMessage(response.message ?? "Unknown error");
+    }
   };
 
   return (
@@ -73,6 +85,43 @@ export default function Register(): JSX.Element {
               setPassword(e.target.value);
             }}
           />
+          <div className="mb-4">
+            <label
+              className="block text-gray-700 text-sm font-sans font-bold mb-2"
+              htmlFor="username"
+            >
+              Username
+            </label>
+            <input
+              className="appearance-none border-2 border-black rounded-2xl 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-sans font-bold mb-2"
+              htmlFor="password"
+            >
+              Password
+            </label>
+            <input
+              className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 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>
+          {errMessage && <p className="text-red-500 text-xs">{errMessage}</p>}
           <div className="flex items-center justify-between">
             <Button
               text="Register"