add more validations

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>