add more validations

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>