From bcac9c020eeee96e9ffce70ac6252375811d4bef Mon Sep 17 00:00:00 2001
From: Peter KW <peter.k.w.96@gmail.com>
Date: Sat, 13 Apr 2024 21:09:07 +0200
Subject: [PATCH] Checks if new project name meets requirements

---
 frontend/src/Components/ProjectInfoModal.tsx | 27 ++++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/Components/ProjectInfoModal.tsx b/frontend/src/Components/ProjectInfoModal.tsx
index 66cffc2..71a72fb 100644
--- a/frontend/src/Components/ProjectInfoModal.tsx
+++ b/frontend/src/Components/ProjectInfoModal.tsx
@@ -5,11 +5,14 @@ import { Link } from "react-router-dom";
 import GetProjectTimes, { projectTimes } from "./GetProjectTimes";
 import DeleteProject from "./DeleteProject";
 import InputField from "./InputField";
+import ProjectNameInput from "./Inputs/ProjectNameInput";
+import { alphanumeric } from "../Data/regex";
+import { projNameHighLimit, projNameLowLimit } from "../Data/constants";
 
 function ProjectInfoModal(props: {
   projectname: string;
   onClose: () => void;
-  onClick: (username: string) => void;
+  onClick: (username: string, userRole: string) => void;
 }): JSX.Element {
   const [showInput, setShowInput] = useState(false);
   const [users, setUsers] = useState<ProjectMember[]>([]);
@@ -23,6 +26,7 @@ function ProjectInfoModal(props: {
 
   const handleChangeNameView = (): void => {
     if (showInput) {
+      setNewProjName("");
       setShowInput(false);
     } else {
       setShowInput(true);
@@ -30,7 +34,16 @@ function ProjectInfoModal(props: {
   };
 
   const handleClickChangeName = (): void => {
-    if (newProjName === "") return;
+    if (
+      newProjName.length > projNameHighLimit ||
+      newProjName.length < projNameLowLimit ||
+      !alphanumeric.test(newProjName)
+    ) {
+      alert(
+        "Please provide valid project name: \n-Between 10-99 characters \n-No special characters (.-!?/*)",
+      );
+      return;
+    }
 
     if (
       confirm(
@@ -68,14 +81,12 @@ function ProjectInfoModal(props: {
           {showInput && (
             <>
               <h2 className="text-[20px] font-bold pb-2">Change name:</h2>
-              <div className="border-2 rounded-2xl border-black p-6 mb-7 space-y-4">
-                <InputField
-                  type={"text"}
-                  value={newProjName}
+              <div className="border-2 rounded-2xl border-black px-6 pt-6 pb-1 mb-7">
+                <ProjectNameInput
+                  name={newProjName}
                   onChange={function (e): void {
                     setNewProjName(e.target.value);
                   }}
-                  placeholder={"Project Name"}
                 />
                 <div className="px-6 grid grid-cols-2 gap-10">
                   <Button
@@ -130,7 +141,7 @@ function ProjectInfoModal(props: {
                     className="items-start px-2 py-1 border-2 border-black rounded-2xl bg-orange-200 transition-all hover:bg-orange-600 hover:text-white hover:cursor-pointer"
                     key={user.Username}
                     onClick={() => {
-                      props.onClick(user.Username);
+                      props.onClick(user.Username, user.UserRole);
                     }}
                   >
                     <span>