add more validations

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>