add more validations

2026-03-05 16:03:31 +08:00
parent dae12d74ee
commit b3f7427e95
17 changed files with 590 additions and 98 deletions
--- a/frontend/src/app/agents/add/page.jsx
+++ b/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>
--- a/frontend/src/app/components/fields/styles.module.css
+++ b/frontend/src/app/components/fields/styles.module.css
@@ -19,13 +19,11 @@
  line-height: normal;
  caret-color: #575bc7;
 }
-.input:focus,
-.input:active {
+.input:focus {
  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;
 }
--- a/frontend/src/app/credentials/add/page.jsx
+++ b/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>
--- a/frontend/src/app/hooks/useAgentForm.jsx
+++ b/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;
--- a/frontend/src/app/hooks/useCredentialForm.jsx
+++ b/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;
--- a/frontend/src/app/hooks/useOrganizationForm.jsx
+++ b/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;
--- a/frontend/src/app/hooks/useProjectForm.jsx
+++ b/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;
--- a/frontend/src/app/hooks/useRolesForm.jsx
+++ b/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;
--- a/frontend/src/app/hooks/useServicesForm.jsx
+++ b/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;
--- a/frontend/src/app/hooks/useUserForm.jsx
+++ b/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;
--- a/frontend/src/app/organization/add/page.jsx
+++ b/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 inputRef = useRef();
-  const [error, setError] = useState(false);
-  const HandleSubmit = (e) => {
-    e.preventDefault();
-
-    if (!inputRef.current.value.trim()) {
-      setError(true);
-      console.log("alsdjfakjhsks"); // triggers red border
-      return;
-    }
-
-    setError(false);
-    setTriggerAlert(true);
-  };
+  const {
+    organizationName,
+    error,
+    triggerAlert,
+    handleChange,
+    handleValidation,
+    handleSubmit,
+    setTriggerAlert,
+  } = useOrganizationForm();

  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>
--- a/frontend/src/app/projects/add/page.jsx
+++ b/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}>
--- a/frontend/src/app/projects/view/add-from-scratch/page.jsx
+++ b/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>
--- a/frontend/src/app/roles/add/page.jsx
+++ b/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>
--- a/frontend/src/app/users/add/page.jsx
+++ b/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>