Some fixes to how they handle names and inputs

frontend/src/Components/AddProject.tsx

@@ -1,37 +1,10 @@
 import { useState } from "react";
-import { APIResponse, api } from "../API/API";
+import { api } from "../API/API";
 import { NewProject } from "../Types/goTypes";
 import InputField from "./InputField";
 import Logo from "../assets/Logo.svg";
 import Button from "./Button";
 
-/**
- * Tries to add a project to the system
- * @param {Object} props - Project name and description
- * @returns {boolean} True if created, false if not
- */
-function CreateProject(props: { name: string; description: string }): void {
-  const project: NewProject = {
-    name: props.name,
-    description: props.description,
-  };
-
-  api
-    .createProject(project, localStorage.getItem("accessToken") ?? "")
-    .then((response: APIResponse<void>) => {
-      if (response.success) {
-        alert("Project added!");
-      } else {
-        alert("Project NOT added!");
-        console.error(response.message);
-      }
-    })
-    .catch((error) => {
-      alert("Project NOT added!");
-      console.error("An error occurred during creation:", error);
-    });
-}
-
 /**
  * Provides UI for adding a project to the system.
  * @returns {JSX.Element} - Returns the component UI for adding a project
@@ -40,6 +13,33 @@ function AddProject(): JSX.Element {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
 
+  /**
+   * Tries to add a project to the system
+   */
+  const handleCreateProject = async (): Promise<void> => {
+    const project: NewProject = {
+      name: name.replace(/ /g, ""),
+      description: description.trim(),
+    };
+    try {
+      const response = await api.createProject(
+        project,
+        localStorage.getItem("accessToken") ?? "",
+      );
+      if (response.success) {
+        alert(`${project.name} added!`);
+        setDescription("");
+        setName("");
+      } else {
+        alert("Project not added, name could be taken");
+        console.error(response.message);
+      }
+    } catch (error) {
+      alert("Project not added");
+      console.error(error);
+    }
+  };
+
   return (
     <div className="flex flex-col h-fit w-screen items-center justify-center">
       <div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20">
@@ -47,10 +47,7 @@ function AddProject(): JSX.Element {
           className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit"
           onSubmit={(e) => {
             e.preventDefault();
-            CreateProject({
-              name: name,
-              description: description,
-            });
+            void handleCreateProject();
           }}
         >
           <img

frontend/src/Components/ChangeRoleView.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import Button from "./Button";
 import ChangeRole, { ProjectRoleChange } from "./ChangeRole";
 
-export default function ChangeRoles(props: {
+export default function ChangeRoleView(props: {
   projectName: string;
   username: string;
 }): JSX.Element {

frontend/src/Components/ChangeUsername.tsx

@@ -2,8 +2,11 @@ import { APIResponse, api } from "../API/API";
 import { StrNameChange } from "../Types/goTypes";
 
 function ChangeUsername(props: { nameChange: StrNameChange }): void {
-  if (props.nameChange.newName === "") {
-    alert("You have to select a new name");
+  if (
+    props.nameChange.newName === "" ||
+    props.nameChange.newName === props.nameChange.prevName
+  ) {
+    alert("You have to give a new name\n\nName not changed");
     return;
   }
   api
@@ -13,7 +16,7 @@ function ChangeUsername(props: { nameChange: StrNameChange }): void {
         alert("Name changed successfully");
         location.reload();
       } else {
-        alert("Name not changed");
+        alert("Name not changed, name could be taken");
         console.error(response.message);
       }
     })

frontend/src/Components/Register.tsx

@@ -15,17 +15,21 @@ export default function Register(): JSX.Element {
   const [errMessage, setErrMessage] = useState<string>();
 
   const handleRegister = async (): Promise<void> => {
+    if (username === "" || password === "") {
+      alert("Must provide username and password");
+      return;
+    }
     const newUser: NewUser = {
-      username: username ?? "",
+      username: username?.replace(/ /g, "") ?? "",
       password: password ?? "",
     };
     const response = await api.registerUser(newUser);
     if (response.success) {
-      alert("User added!");
+      alert(`${newUser.username} added!`);
       setPassword("");
       setUsername("");
     } else {
-      alert("User not added");
+      alert("User not added, name could be taken");
       setErrMessage(response.message ?? "Unknown error");
       console.error(errMessage);
     }

frontend/src/Components/UserInfoModal.tsx

@@ -28,7 +28,7 @@ function UserInfoModal(props: {
   const handleClickChangeName = (): void => {
     const nameChange: StrNameChange = {
       prevName: props.username,
-      newName: newUsername,
+      newName: newUsername.replace(/ /g, ""),
     };
     ChangeUsername({ nameChange: nameChange });
   };