Routes back to home page on created project + design and alert updates

frontend/src/Components/AddProject.tsx

@@ -1,9 +1,13 @@
 import { useState } from "react";
 import { api } from "../API/API";
 import { NewProject } from "../Types/goTypes";
-import InputField from "./InputField";
 import Logo from "../assets/Logo.svg";
 import Button from "./Button";
+import { useNavigate } from "react-router-dom";
+import ProjectNameInput from "./Inputs/ProjectNameInput";
+import DescriptionInput from "./Inputs/DescriptionInput";
+import { alphanumeric } from "../Data/regex";
+import { projNameHighLimit, projNameLowLimit } from "../Data/constants";
 
 /**
  * Provides UI for adding a project to the system.
@@ -12,11 +16,26 @@ import Button from "./Button";
 function AddProject(): JSX.Element {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
+  const navigate = useNavigate();
 
   /**
    * Tries to add a project to the system
    */
   const handleCreateProject = async (): Promise<void> => {
+    if (
+      !alphanumeric.test(name) ||
+      name.length > projNameHighLimit ||
+      name.length < projNameLowLimit
+    ) {
+      alert(
+        "Please provide valid project name: \n-Between 10-99 characters \n-No special characters (.-!?/*)",
+      );
+      return;
+    }
+    if (description.length > projNameHighLimit) {
+      alert("Please provide valid description: \n-Max 100 characters");
+      return;
+    }
     const project: NewProject = {
       name: name.replace(/ /g, ""),
       description: description.trim(),
@@ -30,6 +49,7 @@ function AddProject(): JSX.Element {
         alert(`${project.name} added!`);
         setDescription("");
         setName("");
+        navigate("/admin");
       } else {
         alert("Project not added, name could be taken");
         console.error(response.message);
@@ -44,7 +64,7 @@ function AddProject(): JSX.Element {
     <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">
         <form
-          className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit"
+          className="bg-white rounded px-8 pt-6 pb-8 mb-4 justify-center flex flex-col w-fit h-fit"
           onSubmit={(e) => {
             e.preventDefault();
             void handleCreateProject();
@@ -52,35 +72,29 @@ function AddProject(): JSX.Element {
         >
           <img
             src={Logo}
-            className="logo w-[7vw] mb-10 mt-10"
+            className="logo w-[7vw] self-center mb-10 mt-10"
             alt="TTIME Logo"
           />
           <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
             Create a new project
           </h3>
-          <div className="space-y-3">
-            <InputField
-              label="Name"
-              type="text"
-              value={name}
-              onChange={(e) => {
-                e.preventDefault();
-                setName(e.target.value);
-              }}
-              placeholder={"Name"}
-            />
-            <InputField
-              label="Description"
-              type="text"
-              value={description}
-              onChange={(e) => {
-                e.preventDefault();
-                setDescription(e.target.value);
-              }}
-              placeholder={"Description"}
-            />
-          </div>
-          <div className="flex items-center justify-between">
+          <ProjectNameInput
+            name={name}
+            onChange={(e) => {
+              e.preventDefault();
+              setName(e.target.value);
+            }}
+          />
+          <div className="p-2"></div>
+          <DescriptionInput
+            desc={description}
+            onChange={(e) => {
+              e.preventDefault();
+              setDescription(e.target.value);
+            }}
+            placeholder={"Description (Optional)"}
+          />
+          <div className="flex self-center mt-4 justify-between">
             <Button
               text="Create"
               onClick={(): void => {