admin/hspguard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: create user page

Browse Source
This commit is contained in:
Amir Adal
2025-06-05 20:50:27 +02:00
parent d3fd5cba16
commit ad09e98bba
2 changed files with 190 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
web/src/pages/Admin/Users/Create/index.tsx Normal file
View File

@ -0,0 +1,188 @@
import Breadcrumbs from "@/components/ui/breadcrumbs";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useUsers } from "@/store/admin/users";
import { useCallback, type FC } from "react";
import { useForm } from "react-hook-form";
import { Link } from "react-router";
interface FormData {
fullName: string;
email: string;
phoneNumber: string;
password: string;
repeatPassword: string;
isAdmin: boolean;
}
const AdminCreateUserPage: FC = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormData>();
const createUser = useUsers((state) => state.createUser);
const onSubmit = useCallback(
(data: FormData) => {
console.log("Form submitted:", data);
createUser({
email: data.email,
full_name: data.fullName,
password: data.password,
is_admin: data.isAdmin,
});
},
[createUser],
);
return (
<div className="p-4">
<Breadcrumbs
items={[
{ href: "/admin", label: "Admin" },
{ href: "/admin/users", label: "Users" },
{ label: "Create new User" },
]}
/>
<form onSubmit={handleSubmit(onSubmit)}>
{/* Personal Information */}
<div className="border dark:border-gray-800 border-gray-300 rounded mt-4 flex flex-col">
<div className="p-4 border-b dark:border-gray-800 border-gray-300">
<h2 className="text-gray-800 dark:text-gray-200">
User Personal Info
</h2>
</div>
<div className="p-4">
<div className="flex flex-col gap-2 mb-4">
<p className="text-gray-600 dark:text-gray-400 text-sm">Name</p>
<Input
placeholder="Full Name"
{...register("fullName", { required: "Full Name is required" })}
/>
{errors.fullName && (
<span className="text-red-500 text-sm">
{errors.fullName.message}
</span>
)}
</div>
<div className="flex flex-col gap-2 mb-4">
<p className="text-gray-600 dark:text-gray-400 text-sm">
Email Address
</p>
<Input
placeholder="user@company.org"
{...register("email", {
required: true,
pattern: {
value: /\S+@\S+\.\S+/,
message: "Invalid email",
},
})}
className="dark:text-gray-100 border border-gray-300 dark:border-gray-700 rounded placeholder:text-gray-600 text-sm p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
{errors.email && (
<span className="text-red-500 text-sm">
{errors.email.message}
</span>
)}
</div>
<div className="flex flex-col gap-2 mb-4">
<p className="text-gray-600 dark:text-gray-400 text-sm">
Password
</p>
<Input
placeholder="secret"
{...register("password", {
required: true,
validate: (password) => {
if (password.length < 8) {
return "Password must be at least 8 characters long";
}
if (!password.match(/[a-zA-Z]+/gi)) {
return "Password must contain characters";
}
if (password.split("").every((c) => c.toLowerCase() == c)) {
return "Password should contain at least 1 uppercase character";
}
if (!password.match(/\d+/gi)) {
return "Password should contain at least 1 digit";
}
},
})}
className="dark:text-gray-100 border border-gray-300 dark:border-gray-700 rounded placeholder:text-gray-600 text-sm p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
{errors.password && (
<span className="text-red-500 text-sm">
{errors.password.message}
</span>
)}
</div>
<div className="flex flex-col gap-2 mb-4">
<p className="text-gray-600 dark:text-gray-400 text-sm">
Repeat Password
</p>
<Input
placeholder="secret-again"
{...register("repeatPassword", {
required: true,
validate: (repeatPassword, { password }) => {
if (repeatPassword != password) {
return "Password does not match";
}
},
})}
className="dark:text-gray-100 border border-gray-300 dark:border-gray-700 rounded placeholder:text-gray-600 text-sm p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
{errors.repeatPassword && (
<span className="text-red-500 text-sm">
{errors.repeatPassword.message}
</span>
)}
</div>
</div>
</div>
{/* Final Section */}
<div className="border dark:border-gray-800 border-gray-300 rounded mt-4 flex flex-col">
<div className="p-4 border-b dark:border-gray-800 border-gray-300">
<h2 className="text-gray-800 dark:text-gray-200">
Final Customization & Submit
</h2>
</div>
<div className="p-4">
<label className="inline-flex items-center cursor-pointer">
<input
type="checkbox"
className="sr-only peer"
{...register("isAdmin")}
/>
<div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
<span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
Is Admin
</span>
</label>
<div className="flex flex-row items-center justify-between gap-2 mt-4">
<Button type="submit">Create</Button>
<Link to="/admin/users">
<Button
variant="text"
className="text-red-400 hover:text-red-500"
>
Cancel
</Button>
</Link>
</div>
</div>
</div>
</form>
</div>
);
};
export default AdminCreateUserPage;