add more validations

frontend/src/app/projects/add/page.jsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import globalStyle from "../../globalStyle.module.css";
 import TopHeader from "@/app/components/topHeader/TopHeader";
@@ -5,11 +6,27 @@ import styles from "./styles.module.css";
 import TopToolTip from "@/app/components/topToolTip/TopToolTip";
 import TextField from "@/app/components/fields/textfield";
 import SelectField from "@/app/components/select/SelectField";
-import WarningIcon from "@/app/components/icons/warning";
 import Prompts from "@/app/components/prompts/Prompts";
+import Alert from "@/app/components/alerts/Alert";
+import useProjectForm from "@/app/hooks/useProjectForm";
 const AddProject = () => {
+  const {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  } = useProjectForm();
   return (
     <div className={globalStyle.section}>
+      {triggerAlert && (
+        <Alert
+          setTriggerAlert={setTriggerAlert}
+          onClick={() => setEditState(true)}
+          title="Create Organization"
+        />
+      )}
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader
@@ -21,7 +38,11 @@ const AddProject = () => {
           />
           <div className={styles.contentContainer}>
             <TopToolTip />
-            <form className={styles.createProjectFormContainer} id="form">
+            <form
+              className={styles.createProjectFormContainer}
+              id="form"
+              onSubmit={handleSubmit(onSubmit)}
+            >
               <div className={styles.inputGroup}>
                 <div className={styles.label}>
                   <p>
@@ -29,8 +50,12 @@ const AddProject = () => {
                   </p>
                 </div>
                 <div className={styles.inputField}>
-                  <TextField placeHolder="Enter project name" required />
-                  <Prompts show={true} />
+                  <TextField
+                    placeHolder="Enter project name"
+                    {...register("projectName", { required: true })}
+                    hasError={!!errors.projectName}
+                  />
+                  <Prompts show={false} />
                 </div>
               </div>
               <div className={styles.inputGroup}>
@@ -40,7 +65,11 @@ const AddProject = () => {
                   </p>
                 </div>
                 <div className={styles.inputField}>
-                  <TextField placeHolder="Version" required />
+                  <TextField
+                    placeHolder="Version"
+                    {...register("projectVersion", { required: true })}
+                    hasError={!!errors.projectVersion}
+                  />
                 </div>
               </div>
               <div className={styles.inputGroup}>

frontend/src/app/projects/view/add-from-scratch/page.jsx

@@ -11,23 +11,44 @@ import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal"
 import DeleteIcon from "@/app/components/icons/delete";
 import CustomCheckbox from "@/app/components/checkbox/CheckBox";
 import SelectField from "@/app/components/select/SelectField";
+import useServicesForm from "@/app/hooks/useServicesForm";
+import Alert from "@/app/components/alerts/Alert";
 const AddServices = () => {
   const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
   const [triggerAddVariable, setTriggerAddVariable] = useState(false);
   const [triggerAddVolume, setTriggerAddVolume] = useState(false);
   const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
-  const [disableScaling, setDisableScaling] = useState(true);
-  const [disableReadiness, setDisableReadiness] = useState(true);
-  const [disableLiveness, setDisableLiveness] = useState(true);
-  const [minPods, setMinPods] = useState("");
-  const [maxPods, setMaxPods] = useState("");
-  const [readinessPath, setReadinessPath] = useState("");
-  const [readinessPort, setReadinessPort] = useState("");
-  const [livenessPath, setLivenessPath] = useState("");
-  const [livenessPort, setLivenessPort] = useState("");
+
+  const {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    triggerAlert,
+    disableScaling,
+    disableReadiness,
+    disableLiveness,
+    setDisableScaling,
+    setDisableReadiness,
+    setDisableLiveness,
+    setTriggerAlert,
+    minPods,
+    maxPods,
+    readinessPath,
+    readinessPort,
+    livenessPort,
+    livenessPath,
+  } = useServicesForm();
 
   return (
     <div className={globalStyle.section}>
+      {triggerAlert && (
+        <Alert
+          setTriggerAlert={setTriggerAlert}
+          onClick={() => setEditState(true)}
+          title="Add User"
+        />
+      )}
       {triggerAddVariable && (
         <AddVariableModal setTriggerAddVariable={setTriggerAddVariable} />
       )}
@@ -47,7 +68,11 @@ const AddServices = () => {
             requiredButtons={["title", "save"]}
           />
           <div className={styles.contentContainer}>
-            <form className={styles.fieldsContainerCreateNew} id="form">
+            <form
+              className={styles.fieldsContainerCreateNew}
+              id="form"
+              onSubmit={handleSubmit(onSubmit)}
+            >
               <div className={styles.projectDetails}>
                 <div className={styles.projectDetailsHeader}>
                   <p>Project Details</p>
@@ -66,11 +91,19 @@ const AddServices = () => {
                   <div>
                     <div>
                       <p>Name</p>
-                      <TextField placeHolder="Enter service name" required />
+                      <TextField
+                        placeHolder="Enter service name"
+                        {...register("serviceName", { required: true })}
+                        hasError={!!errors.serviceName}
+                      />
                     </div>
                     <div>
                       <p>Version</p>
-                      <TextField placeHolder="Service version" required />
+                      <TextField
+                        placeHolder="Service version"
+                        {...register("serviceVersion", { required: true })}
+                        hasError={!!errors.serviceVersion}
+                      />
                     </div>
                   </div>
                   <div>
@@ -78,13 +111,21 @@ const AddServices = () => {
                       <p>
                         Image <span>(Optional)</span>
                       </p>
-                      <TextField placeHolder="Enter image name" required />
+                      <TextField
+                        placeHolder="Enter image name"
+                        {...register("imageName", { required: false })}
+                        hasError={!!errors.imageName}
+                      />
                     </div>
                   </div>
                   <div>
                     <div>
                       <p>Port</p>
-                      <TextField placeHolder="Enter port" required />
+                      <TextField
+                        placeHolder="Enter port"
+                        {...register("port", { required: true })}
+                        hasError={!!errors.port}
+                      />
                     </div>
                   </div>
                   <div>
@@ -121,21 +162,37 @@ const AddServices = () => {
                   <div>
                     <div>
                       <p>CPU Request (MB)</p>
-                      <TextField placeHolder="250" required />
+                      <TextField
+                        placeHolder="250"
+                        {...register("cpuRequest", { required: true })}
+                        hasError={!!errors.cpuRequest}
+                      />
                     </div>
                     <div>
                       <p>CPU Limit (MB)</p>
-                      <TextField placeHolder="250" required />
+                      <TextField
+                        placeHolder="250"
+                        {...register("cpuLimit", { required: true })}
+                        hasError={!!errors.cpuLimit}
+                      />
                     </div>
                   </div>
                   <div>
                     <div>
                       <p>Memory Request (MB)</p>
-                      <TextField placeHolder="250" required />
+                      <TextField
+                        placeHolder="250"
+                        {...register("memoryRequest", { required: true })}
+                        hasError={!!errors.memoryRequest}
+                      />
                     </div>
                     <div>
                       <p>Memory Limit (MB)</p>
-                      <TextField placeHolder="500" required />
+                      <TextField
+                        placeHolder="500"
+                        {...register("memoryLimit", { required: true })}
+                        hasError={!!errors.memoryLimit}
+                      />
                     </div>
                   </div>
                 </div>
@@ -148,11 +205,7 @@ const AddServices = () => {
                         <p>Auto Scaling</p>
                         <CustomCheckbox
                           id="scalingCheckBox"
-                          setChecked={() => {
-                            setDisableScaling(!disableScaling);
-                            setMinPods("");
-                            setMaxPods("");
-                          }}
+                          setChecked={() => setDisableScaling(!disableScaling)}
                         />
                       </div>
                     </div>
@@ -165,19 +218,21 @@ const AddServices = () => {
                             <TextField
                               placeHolder="1"
                               disabled={disableScaling}
-                              required={maxPods.trim() !== ""}
-                              onChange={(e) => setMinPods(e.target.value)}
-                              value={minPods}
+                              {...register("minPods", {
+                                required: maxPods.trim() === "" ? false : true,
+                              })}
+                              hasError={!!errors.minPods}
                             />
                           </div>
                           <div>
                             <p>Maximum pods</p>
                             <TextField
                               placeHolder="1"
-                              value={maxPods}
-                              required={minPods.trim() !== ""}
-                              onChange={(e) => setMaxPods(e.target.value)}
                               disabled={disableScaling}
+                              {...register("maxPods", {
+                                required: minPods.trim() === "" ? false : true,
+                              })}
+                              hasError={!!errors.maxPods}
                             />
                           </div>
                         </div>
@@ -192,11 +247,9 @@ const AddServices = () => {
                         <p>Readiness</p>
                         <CustomCheckbox
                           id="readiNessCheckBox"
-                          setChecked={() => {
-                            setDisableReadiness(!disableReadiness);
-                            setReadinessPath("");
-                            setReadinessPort("");
-                          }}
+                          setChecked={() =>
+                            setDisableReadiness(!disableReadiness)
+                          }
                         />
                       </div>
                     </div>
@@ -209,9 +262,11 @@ const AddServices = () => {
                             <TextField
                               placeHolder="Enter Readiness path"
                               disabled={disableReadiness}
-                              value={readinessPath}
-                              required={readinessPort.trim() !== ""}
-                              onChange={(e) => setReadinessPath(e.target.value)}
+                              {...register("readinessPath", {
+                                required:
+                                  readinessPort.trim() === "" ? false : true,
+                              })}
+                              hasError={!!errors.readinessPath}
                             />
                           </div>
                           <div>
@@ -219,9 +274,11 @@ const AddServices = () => {
                             <TextField
                               placeHolder="Enter Readiness port"
                               disabled={disableReadiness}
-                              value={readinessPort}
-                              required={readinessPath.trim() !== ""}
-                              onChange={(e) => setReadinessPort(e.target.value)}
+                              {...register("readinessPort", {
+                                required:
+                                  readinessPath.trim() === "" ? false : true,
+                              })}
+                              hasError={!!errors.readinessPort}
                             />
                           </div>
                         </div>
@@ -236,12 +293,9 @@ const AddServices = () => {
                         <p>Liveness</p>
                         <CustomCheckbox
                           id="liveNessCheckBox"
-                          setChecked={() => {
-                            console.log("alsdjhfkjas");
-                            setDisableLiveness(!disableLiveness);
-                            setLivenessPath("");
-                            setLivenessPort("");
-                          }}
+                          setChecked={() =>
+                            setDisableLiveness(!disableLiveness)
+                          }
                         />
                       </div>
                     </div>
@@ -253,9 +307,11 @@ const AddServices = () => {
                             <TextField
                               placeHolder="Enter liveness path"
                               disabled={disableLiveness}
-                              value={livenessPath}
-                              required={livenessPort.trim() !== ""}
-                              onChange={(e) => setLivenessPath(e.target.value)}
+                              {...register("livenessPath", {
+                                required:
+                                  livenessPort.trim() === "" ? false : true,
+                              })}
+                              hasError={!!errors.livenessPath}
                             />
                           </div>
                           <div>
@@ -263,9 +319,11 @@ const AddServices = () => {
                             <TextField
                               placeHolder="Enter liveness port"
                               disabled={disableLiveness}
-                              value={livenessPort}
-                              required={livenessPath.trim() !== ""}
-                              onChange={(e) => setLivenessPort(e.target.value)}
+                              {...register("livenessPort", {
+                                required:
+                                  livenessPath.trim() === "" ? false : true,
+                              })}
+                              hasError={!!errors.livenessPort}
                             />
                           </div>
                         </div>