113 lines
3.9 KiB
JavaScript
113 lines
3.9 KiB
JavaScript
"use client";
|
|
import React from "react";
|
|
import TopHeader from "@/app/components/topHeader/TopHeader";
|
|
import globalStyle from "../../globalStyle.module.css";
|
|
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 AddUserPage = () => {
|
|
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
|
|
buttonText="Save"
|
|
cancelButtonText="Cancel"
|
|
topbarTitle="Add User"
|
|
state="add"
|
|
requiredButtons={["title", "save"]}
|
|
/>
|
|
<div className={addUserStyle.addUserContainer}>
|
|
{/* Input fields Container */}
|
|
<div className={addUserStyle.inputFieldContainer}>
|
|
{/* User Details */}
|
|
<div className={addUserStyle.userDetails}>
|
|
{/* Header */}
|
|
<div className={addUserStyle.header}>
|
|
<div>
|
|
<p>User Details</p>
|
|
</div>
|
|
</div>
|
|
{/* Input fields */}
|
|
<form
|
|
className={addUserStyle.fields}
|
|
id="form"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
>
|
|
{/* Role and Dropdown */}
|
|
<SelectField
|
|
label="Select Role"
|
|
options={[
|
|
{ label: "Option", value: "Option" },
|
|
{ label: "Option 1", value: "Option 1" },
|
|
{ label: "Option 2", value: "Option 2" },
|
|
]}
|
|
/>
|
|
{/* Email */}
|
|
<div className={addUserStyle.inputMainContainer}>
|
|
<div className={addUserStyle.inputContainer}>
|
|
{/* Label */}
|
|
<div className={addUserStyle.label}>
|
|
<p>Email</p>
|
|
</div>
|
|
{/* Input field */}
|
|
<div className={addUserStyle.inputField}>
|
|
<TextField
|
|
placeHolder="Enter email"
|
|
{...register("userEmail", { required: true })}
|
|
hasError={!!errors.userEmail}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Full Name */}
|
|
<div className={addUserStyle.inputMainContainer}>
|
|
<div className={addUserStyle.inputContainer}>
|
|
{/* Label */}
|
|
<div className={addUserStyle.label}>
|
|
<p>Full Name</p>
|
|
</div>
|
|
{/* Input field */}
|
|
<div className={addUserStyle.inputField}>
|
|
<TextField
|
|
placeHolder="Enter full name"
|
|
{...register("fullName", { required: true })}
|
|
hasError={!!errors.fullName}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Permissions */}
|
|
<Permissions />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddUserPage;
|