add more validations

frontend/package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "16.1.6",
         "react": "19.2.3",
-        "react-dom": "19.2.3"
+        "react-dom": "19.2.3",
+        "react-hook-form": "^7.71.2"
       },
       "devDependencies": {
         "@svgr/webpack": "^8.1.0",
@@ -6934,6 +6935,22 @@
         "react": "^19.2.3"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.71.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.71.2.tgz",
+      "integrity": "sha512-1CHvcDYzuRUNOflt4MOq3ZM46AronNJtQ1S7tnX6YN4y72qhgiUItpacZUAQ0TyWYci3yz1X+rXaSxiuEm86PA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

frontend/package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "next": "16.1.6",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "react-hook-form": "^7.71.2"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",

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

@@ -6,6 +6,8 @@ import TopToolTip from "@/app/components/topToolTip/TopToolTip";
 import globalStyle from "../../globalStyle.module.css";
 import createAgentStyle from "./styles.module.css";
 import Prompts from "@/app/components/prompts/Prompts";
+import useAgentForm from "@/app/hooks/useAgentForm";
+import Alert from "@/app/components/alerts/Alert";
 
 const Page = () => {
   const [isChecked, setIsChecked] = useState(false);
@@ -13,9 +15,24 @@ const Page = () => {
   const handleCheckboxChange = (e) => {
     setIsChecked(e.target.checked);
   };
+  const {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  } = useAgentForm();
 
   return (
     <div className={globalStyle.section}>
+      {triggerAlert && (
+        <Alert
+          setTriggerAlert={setTriggerAlert}
+          onClick={() => setEditState(true)}
+          title="Create New Agent"
+        />
+      )}
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader
@@ -28,7 +45,11 @@ const Page = () => {
           {/* Create agent Container */}
           <div className={createAgentStyle.createAgentContainer}>
             <TopToolTip />
-            <form className={createAgentStyle.inputMainContainer} id="form">
+            <form
+              className={createAgentStyle.inputMainContainer}
+              id="form"
+              onSubmit={handleSubmit(onSubmit)}
+            >
               {/* Header */}
               <div className={createAgentStyle.headerContainer}>
                 <div className={createAgentStyle.headerTxt}>
@@ -40,10 +61,14 @@ const Page = () => {
                 {/* Label */}
                 <div className={createAgentStyle.labelContainer}>
                   <p>Agent Name</p>
-                  {/* <p className={createAgentStyle.required}>*</p> */}
+                  <p className={createAgentStyle.required}>*</p>
                 </div>
                 {/* Input Field */}
-                <TextField placeHolder="Enter agent name" required />
+                <TextField
+                  placeHolder="Enter agent name"
+                  {...register("agentName", { required: true })}
+                  hasError={!!errors.agentName}
+                />
                 <Prompts show={false} />
               </div>
               {/* Kubernetes API input */}
@@ -51,10 +76,14 @@ const Page = () => {
                 {/* Label */}
                 <div className={createAgentStyle.labelContainer}>
                   <p>Kubernetes API Proxy Name</p>
-                  {/* <p className={createAgentStyle.required}>*</p> */}
+                  <p className={createAgentStyle.required}>*</p>
                 </div>
                 {/* Input Field */}
-                <TextField placeHolder="Enter proxy name" />
+                <TextField
+                  placeHolder="Enter proxy name"
+                  {...register("proxyName", { required: true })}
+                  hasError={!!errors.proxyName}
+                />
                 <Prompts show={false} />
               </div>
               {/* Checkbox */}
@@ -89,12 +118,13 @@ const Page = () => {
                 {/* Label */}
                 <div className={createAgentStyle.labelContainer}>
                   <p>Agent Endpoint</p>
-                  {/* <p className={createAgentStyle.required}>*</p> */}
+                  <p className={createAgentStyle.required}>*</p>
                 </div>
                 {/* Input Field */}
                 <TextField
                   placeHolder="e.g., http://agent-01.example.com:8080"
-                  required
+                  {...register("agentEndpoint", { required: true })}
+                  hasError={!!errors.agentEndpoint}
                 />
                 <Prompts show={false} />
               </div>

frontend/src/app/components/fields/styles.module.css

@@ -19,13 +19,11 @@
   line-height: normal;
   caret-color: #575bc7;
 }
-.input:focus,
+.input:focus {
-.input:active {
   border-radius: 6px;
   border: 1px solid #959aff;
   background: rgba(75, 79, 109, 0.25);
 }
-.input:active::placeholder,
 .input:focus::placeholder {
   color: #4b4f6d;
   font-family: Inter;
@@ -54,6 +52,8 @@
   pointer-events: none;
   user-select: none;
 }
-.input:invalid {
+.error,
+.error:focus,
+.error:hover {
   border: 1px solid #b43939;
 }

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

@@ -6,8 +6,18 @@ import createCredStyle from "./styles.module.css";
 import TopToolTip from "@/app/components/topToolTip/TopToolTip";
 import TextField from "@/app/components/fields/textfield";
 import Prompts from "@/app/components/prompts/Prompts";
+import useRoleForm from "@/app/hooks/useRolesForm";
+import Alert from "@/app/components/alerts/Alert";
 
 const Page = () => {
+  const {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  } = useRoleForm();
   const [selectedFile, setSelectedFile] = useState(null);
   // Click
   const handleFileChange = (e) => {
@@ -31,6 +41,13 @@ const Page = () => {
   };
   return (
     <div className={globalStyle.section}>
+      {triggerAlert && (
+        <Alert
+          setTriggerAlert={setTriggerAlert}
+          onClick={() => setEditState(true)}
+          title="Create Credential"
+        />
+      )}
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader
@@ -43,16 +60,24 @@ const Page = () => {
           {/* Create Crediantial Container */}
           <div className={createCredStyle.createCredContainer}>
             <TopToolTip />
-            <div className={createCredStyle.inputFieldContainer}>
+            <form
+              className={createCredStyle.inputFieldContainer}
+              id="form"
+              onSubmit={handleSubmit(onSubmit)}
+            >
               {/* Project Name Input Container */}
               <div className={createCredStyle.projectName}>
                 <div className={createCredStyle.label}>
                   <p className={createCredStyle.labelTxt}>Project Name</p>
-                  {/* <p className={createCredStyle.required}>*</p> */}
+                  <p className={createCredStyle.required}>*</p>
                 </div>
                 {/* Content */}
                 <div className={createCredStyle.credInputField}>
-                  <TextField placeHolder="Enter Credential Name" />
+                  <TextField
+                    placeHolder="Enter Credential Name"
+                    {...register("projectName", { required: true })}
+                    hasError={!!errors.projectName}
+                  />
                   <Prompts show={false} />
                 </div>
               </div>
@@ -62,7 +87,7 @@ const Page = () => {
                 <div className={createCredStyle.label}>
                   <p>Upload File</p>
                   {/* Optional or Required */}
-                  {/* <p className={createCredStyle.optionalTxt}>(Optional)</p> */}{" "}
+                  <p className={createCredStyle.optionalTxt}>(Optional)</p>{" "}
                 </div>
                 {/* Upload File */}
                 <label
@@ -92,7 +117,7 @@ const Page = () => {
                   )}
                 </label>
               </div>
-            </div>
+            </form>
           </div>
         </div>
       </div>

frontend/src/app/hooks/useAgentForm.jsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+const useAgentForm = () => {
+  const [triggerAlert, setTriggerAlert] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm();
+
+  const onSubmit = (data) => {
+    setTriggerAlert(true);
+    console.log("Submitted data:", data);
+  };
+
+  return {
+    register,
+    handleSubmit,
+    watch,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  };
+};
+
+export default useAgentForm;

frontend/src/app/hooks/useCredentialForm.jsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+const useCredentialForm = () => {
+  const [triggerAlert, setTriggerAlert] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm();
+
+  const onSubmit = (data) => {
+    setTriggerAlert(true);
+
+    console.log("Submitted data:", data);
+  };
+
+  return {
+    register,
+    handleSubmit,
+    watch,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  };
+};
+
+export default useCredentialForm;

frontend/src/app/hooks/useOrganizationForm.jsx

@@ -0,0 +1,46 @@
+"use client";
+import { useState } from "react";
+
+const useOrganizationForm = () => {
+  const [organizationName, setOrganizationName] = useState("");
+  const [error, setError] = useState(false);
+  const [triggerAlert, setTriggerAlert] = useState(false);
+
+  const handleChange = (e) => {
+    const value = e.target.value;
+    setOrganizationName(value);
+
+    if (value.trim() !== "") {
+      setError(false);
+    }
+  };
+
+  const handleValidation = (e) => {
+    e.preventDefault();
+    setError(true);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!organizationName.trim()) {
+      setError(true);
+      return;
+    }
+    setTriggerAlert(true);
+
+    console.log("Submitted organization:", organizationName);
+  };
+
+  return {
+    organizationName,
+    error,
+    triggerAlert,
+    handleChange,
+    handleValidation,
+    handleSubmit,
+    setTriggerAlert,
+  };
+};
+
+export default useOrganizationForm;

frontend/src/app/hooks/useProjectForm.jsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+const useProjectForm = () => {
+  const [triggerAlert, setTriggerAlert] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm();
+
+  const onSubmit = (data) => {
+    setTriggerAlert(true);
+
+    console.log("Submitted data:", data);
+  };
+
+  return {
+    register,
+    handleSubmit,
+    watch,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  };
+};
+
+export default useProjectForm;

frontend/src/app/hooks/useRolesForm.jsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+const useRoleForm = () => {
+  const [triggerAlert, setTriggerAlert] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm();
+
+  const onSubmit = (data) => {
+    setTriggerAlert(true);
+
+    console.log("Submitted data:", data);
+  };
+
+  return {
+    register,
+    handleSubmit,
+    watch,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  };
+};
+
+export default useRoleForm;

frontend/src/app/hooks/useServicesForm.jsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+const useServicesForm = () => {
+  const [triggerAlert, setTriggerAlert] = useState(false);
+  const [disableScaling, setDisableScaling] = useState(true);
+  const [disableReadiness, setDisableReadiness] = useState(true);
+  const [disableLiveness, setDisableLiveness] = useState(true);
+  const {
+    register,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm({
+    defaultValues: {
+      minPods: "",
+      maxPods: "",
+      readinessPath: "",
+      readinessPort: "",
+      livenessPath: "",
+      livenessPort: "",
+    },
+  });
+
+  const minPods = watch("minPods");
+  const maxPods = watch("maxPods");
+  const readinessPath = watch("readinessPath");
+  const readinessPort = watch("readinessPort");
+  const livenessPath = watch("livenessPath");
+  const livenessPort = watch("livenessPort");
+
+  const onSubmit = (data) => {
+    setTriggerAlert(true);
+
+    console.log("Submitted data:", data);
+  };
+
+  return {
+    register,
+    handleSubmit,
+    watch,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+    setDisableScaling,
+    disableScaling,
+    setDisableReadiness,
+    disableReadiness,
+    setDisableLiveness,
+    disableLiveness,
+    minPods,
+    maxPods,
+    readinessPath,
+    readinessPort,
+    livenessPort,
+    livenessPath,
+  };
+};
+
+export default useServicesForm;

frontend/src/app/hooks/useUserForm.jsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+const useUserForm = () => {
+  const [triggerAlert, setTriggerAlert] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm();
+
+  const onSubmit = (data) => {
+    setTriggerAlert(true);
+
+    console.log("Submitted data:", data);
+  };
+
+  return {
+    register,
+    handleSubmit,
+    watch,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  };
+};
+
+export default useUserForm;

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

@@ -8,22 +8,17 @@ import TopToolTip from "@/app/components/topToolTip/TopToolTip";
 import TextField from "@/app/components/fields/textfield";
 import Alert from "@/app/components/alerts/Alert";
 import Prompts from "@/app/components/prompts/Prompts";
+import useOrganizationForm from "@/app/hooks/useOrganizationForm";
 const AddCredentials = () => {
-  const [triggerAlert, setTriggerAlert] = useState(false);
+  const {
-  const inputRef = useRef();
+    organizationName,
-  const [error, setError] = useState(false);
+    error,
-  const HandleSubmit = (e) => {
+    triggerAlert,
-    e.preventDefault();
+    handleChange,
-
+    handleValidation,
-    if (!inputRef.current.value.trim()) {
+    handleSubmit,
-      setError(true);
+    setTriggerAlert,
-      console.log("alsdjfakjhsks"); // triggers red border
+  } = useOrganizationForm();
-      return;
-    }
-
-    setError(false);
-    setTriggerAlert(true);
-  };
 
   return (
     <div className={globalStyle.section}>
@@ -47,7 +42,7 @@ const AddCredentials = () => {
             <form
               className={styles.createOrganizationFormContainer}
               id="form"
-              onSubmit={HandleSubmit}
+              onSubmit={handleSubmit}
             >
               <div className={styles.organizationBadgeContainer}>
                 <div className={styles.organizationBadge}>
@@ -105,8 +100,10 @@ const AddCredentials = () => {
                   <TextField
                     placeHolder="Enter organization name"
                     required
-                    ref={inputRef}
                     hasError={error}
+                    value={organizationName}
+                    onChange={handleChange}
+                    onInvalid={handleValidation}
                   />
                   <Prompts show={true} />
                 </div>

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 />
+                  <TextField
-                  <Prompts show={true} />
+                    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 {
-  const [disableLiveness, setDisableLiveness] = useState(true);
+    register,
-  const [minPods, setMinPods] = useState("");
+    handleSubmit,
-  const [maxPods, setMaxPods] = useState("");
+    errors,
-  const [readinessPath, setReadinessPath] = useState("");
+    onSubmit,
-  const [readinessPort, setReadinessPort] = useState("");
+    triggerAlert,
-  const [livenessPath, setLivenessPath] = useState("");
+    disableScaling,
-  const [livenessPort, setLivenessPort] = useState("");
+    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={() => {
+                          setChecked={() => setDisableScaling(!disableScaling)}
-                            setDisableScaling(!disableScaling);
-                            setMinPods("");
-                            setMaxPods("");
-                          }}
                         />
                       </div>
                     </div>
@@ -165,19 +218,21 @@ const AddServices = () => {
                             <TextField
                               placeHolder="1"
                               disabled={disableScaling}
-                              required={maxPods.trim() !== ""}
+                              {...register("minPods", {
-                              onChange={(e) => setMinPods(e.target.value)}
+                                required: maxPods.trim() === "" ? false : true,
-                              value={minPods}
+                              })}
+                              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={() => {
+                          setChecked={() =>
-                            setDisableReadiness(!disableReadiness);
+                            setDisableReadiness(!disableReadiness)
-                            setReadinessPath("");
+                          }
-                            setReadinessPort("");
-                          }}
                         />
                       </div>
                     </div>
@@ -209,9 +262,11 @@ const AddServices = () => {
                             <TextField
                               placeHolder="Enter Readiness path"
                               disabled={disableReadiness}
-                              value={readinessPath}
+                              {...register("readinessPath", {
-                              required={readinessPort.trim() !== ""}
+                                required:
-                              onChange={(e) => setReadinessPath(e.target.value)}
+                                  readinessPort.trim() === "" ? false : true,
+                              })}
+                              hasError={!!errors.readinessPath}
                             />
                           </div>
                           <div>
@@ -219,9 +274,11 @@ const AddServices = () => {
                             <TextField
                               placeHolder="Enter Readiness port"
                               disabled={disableReadiness}
-                              value={readinessPort}
+                              {...register("readinessPort", {
-                              required={readinessPath.trim() !== ""}
+                                required:
-                              onChange={(e) => setReadinessPort(e.target.value)}
+                                  readinessPath.trim() === "" ? false : true,
+                              })}
+                              hasError={!!errors.readinessPort}
                             />
                           </div>
                         </div>
@@ -236,12 +293,9 @@ const AddServices = () => {
                         <p>Liveness</p>
                         <CustomCheckbox
                           id="liveNessCheckBox"
-                          setChecked={() => {
+                          setChecked={() =>
-                            console.log("alsdjhfkjas");
+                            setDisableLiveness(!disableLiveness)
-                            setDisableLiveness(!disableLiveness);
+                          }
-                            setLivenessPath("");
-                            setLivenessPort("");
-                          }}
                         />
                       </div>
                     </div>
@@ -253,9 +307,11 @@ const AddServices = () => {
                             <TextField
                               placeHolder="Enter liveness path"
                               disabled={disableLiveness}
-                              value={livenessPath}
+                              {...register("livenessPath", {
-                              required={livenessPort.trim() !== ""}
+                                required:
-                              onChange={(e) => setLivenessPath(e.target.value)}
+                                  livenessPort.trim() === "" ? false : true,
+                              })}
+                              hasError={!!errors.livenessPath}
                             />
                           </div>
                           <div>
@@ -263,9 +319,11 @@ const AddServices = () => {
                             <TextField
                               placeHolder="Enter liveness port"
                               disabled={disableLiveness}
-                              value={livenessPort}
+                              {...register("livenessPort", {
-                              required={livenessPath.trim() !== ""}
+                                required:
-                              onChange={(e) => setLivenessPort(e.target.value)}
+                                  livenessPath.trim() === "" ? false : true,
+                              })}
+                              hasError={!!errors.livenessPort}
                             />
                           </div>
                         </div>

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

@@ -1,13 +1,31 @@
+"use client";
 import React from "react";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
 import addRoleStyle from "./styles.module.css";
 import TextField from "@/app/components/fields/textfield";
 import Permissions from "@/app/components/permissions/Permissions";
+import useUserForm from "@/app/hooks/useUserForm";
+import Alert from "@/app/components/alerts/Alert";
 
 const page = () => {
+  const {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  } = useUserForm();
   return (
     <div className={globalStyle.section}>
+      {triggerAlert && (
+        <Alert
+          setTriggerAlert={setTriggerAlert}
+          onClick={() => setEditState(true)}
+          title="Add Role"
+        />
+      )}
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader
@@ -29,7 +47,11 @@ const page = () => {
                   </div>
                 </div>
                 {/* Input fields */}
-                <form className={addRoleStyle.fields}>
+                <form
+                  className={addRoleStyle.fields}
+                  id="form"
+                  onSubmit={handleSubmit(onSubmit)}
+                >
                   {/* Email */}
                   <div className={addRoleStyle.inputMainContainer}>
                     <div className={addRoleStyle.inputContainer}>
@@ -39,7 +61,11 @@ const page = () => {
                       </div>
                       {/* Input field */}
                       <div className={addRoleStyle.inputField}>
-                        <TextField placeHolder="Enter name" />
+                        <TextField
+                          placeHolder="Enter name"
+                          {...register("roleName", { required: true })}
+                          hasError={!!errors.roleName}
+                        />
                       </div>
                     </div>
                   </div>
@@ -52,7 +78,11 @@ const page = () => {
                       </div>
                       {/* Input field */}
                       <div className={addRoleStyle.inputField}>
-                        <TextField placeHolder="Enter organization ID" />
+                        <TextField
+                          placeHolder="Enter organization ID"
+                          {...register("organizationID", { required: true })}
+                          hasError={!!errors.organizationID}
+                        />
                       </div>
                     </div>
                   </div>

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

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
@@ -5,9 +6,27 @@ import addUserStyle from "./styles.module.css";
 import TextField from "@/app/components/fields/textfield";
 import SelectField from "@/app/components/select/SelectField";
 import Permissions from "@/app/components/permissions/Permissions";
+import useUserForm from "@/app/hooks/useUserForm";
+import Alert from "@/app/components/alerts/Alert";
 const page = () => {
+  const {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  } = useUserForm();
+
   return (
     <div className={globalStyle.section}>
+      {triggerAlert && (
+        <Alert
+          setTriggerAlert={setTriggerAlert}
+          onClick={() => setEditState(true)}
+          title="Add User"
+        />
+      )}
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader
@@ -29,7 +48,11 @@ const page = () => {
                   </div>
                 </div>
                 {/* Input fields */}
-                <form className={addUserStyle.fields}>
+                <form
+                  className={addUserStyle.fields}
+                  id="form"
+                  onSubmit={handleSubmit(onSubmit)}
+                >
                   {/* Role and Dropdown */}
                   <SelectField
                     label="Select Role"
@@ -48,7 +71,11 @@ const page = () => {
                       </div>
                       {/* Input field */}
                       <div className={addUserStyle.inputField}>
-                        <TextField placeHolder="Enter email" />
+                        <TextField
+                          placeHolder="Enter email"
+                          {...register("userEmail", { required: true })}
+                          hasError={!!errors.userEmail}
+                        />
                       </div>
                     </div>
                   </div>
@@ -61,7 +88,11 @@ const page = () => {
                       </div>
                       {/* Input field */}
                       <div className={addUserStyle.inputField}>
-                        <TextField placeHolder="Enter full name" />
+                        <TextField
+                          placeHolder="Enter full name"
+                          {...register("fullName", { required: true })}
+                          hasError={!!errors.fullName}
+                        />
                       </div>
                     </div>
                   </div>