111 lines
2.8 KiB
TypeScript
111 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import "./AddUser.scss";
|
|
import { addUser } from "@/services/roles.services";
|
|
import { IEditUserForm } from "../User.interfaces";
|
|
|
|
interface AddUserFormProps {
|
|
onSuccess?: () => void;
|
|
}
|
|
|
|
const AddUserForm: React.FC<AddUserFormProps> = ({ onSuccess }) => {
|
|
const router = useRouter();
|
|
const [form, setForm] = useState<IEditUserForm>({
|
|
firstName: "",
|
|
lastName: "",
|
|
email: "",
|
|
phone: "",
|
|
role: "",
|
|
});
|
|
|
|
const [error, setError] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleChange = (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
|
|
) => {
|
|
const { name, value } = e.target;
|
|
setForm((prev) => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!form.firstName || !form.lastName || !form.email || !form.role) {
|
|
setError("Please fill in all required fields.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setLoading(true);
|
|
setError("");
|
|
|
|
await addUser(form);
|
|
if (onSuccess) onSuccess();
|
|
router.refresh(); // <- refreshes the page (SSR re-runs)
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
} catch (err: any) {
|
|
setError(err.message || "Something went wrong.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form className="add-user" onSubmit={handleSubmit}>
|
|
<input
|
|
name="firstName"
|
|
placeholder="First Name"
|
|
value={form.firstName}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
<input
|
|
name="lastName"
|
|
placeholder="Last Name"
|
|
value={form.lastName}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
<input
|
|
name="email"
|
|
type="email"
|
|
placeholder="Email"
|
|
value={form.email}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
<input
|
|
name="phone"
|
|
placeholder="Phone (optional)"
|
|
value={form.phone}
|
|
onChange={handleChange}
|
|
/>
|
|
<select
|
|
name="role"
|
|
value={form.role}
|
|
onChange={handleChange}
|
|
required
|
|
className="add-user__select"
|
|
>
|
|
<option value="">Select Role</option>
|
|
<option value="ROLE_IIN">ROLE_IIN</option>
|
|
<option value="ROLE_RULES_ADMIN">ROLE_RULES_ADMIN</option>
|
|
<option value="ROLE_FIRST_APPROVER">ROLE_FIRST_APPROVER</option>
|
|
</select>
|
|
|
|
{error && <div style={{ color: "red", width: "100%" }}>{error}</div>}
|
|
|
|
<div className="add-user__button-container">
|
|
<button type="submit" disabled={loading}>
|
|
{loading ? "Adding..." : "Add User"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default AddUserForm;
|