lst_v3/frontend/src/routes/admin/-components/Newuser.tsx

import { useState } from "react";
import { toast } from "sonner";
import { Button } from "../../../components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogHeader,
	DialogTitle,
} from "../../../components/ui/dialog";
import { authClient } from "../../../lib/auth-client";
import { selectableRoles } from "../../../lib/auth-permissions";
import { useAppForm } from "../../../lib/formSutff";

export default function NewUser({ refetch }: { refetch: any }) {
	const [open, setOpen] = useState(false);

	const form = useAppForm({
		defaultValues: {
			name: "",
			email: "",
			password: "",
			role: "",
			username: "",
		},
		onSubmit: async ({ value }) => {
			if (value.name === "" || value.email === "" || value.password === "") {
				toast.error("Missing Mandatory data please try again  ");
				return;
			}

			try {
				const { data, error } = await authClient.admin.createUser({
					email: value.email, // required
					password: value.password, // required
					name: value.name, // required
					role: (value.role ?? "user") as any,
					data: { username: value.username },
				});

				if (data?.user) {
					toast.success(`${value.name}, was just created `);
					form.reset();
					setOpen(false);
					refetch();
				}

				if (error) {
					toast.error(error.message);
					return;
				}
			} catch (error) {
				console.error(error);
			}
		},
	});

	const closeModel = (e: boolean) => {
		setOpen(e);

		if (!e) {
			form.reset();
		}
	};

	const openForm = () => {
		setOpen(true);
	};

	return (
		<Dialog onOpenChange={(e) => closeModel(e)} open={open}>
			<Button onClick={openForm}>Create new user</Button>

			<DialogContent showCloseButton={false}>
				<DialogHeader>
					<DialogTitle>Create New Scan user.</DialogTitle>
					<DialogDescription></DialogDescription>
				</DialogHeader>
				<form
					onSubmit={(e) => {
						e.preventDefault();
						form.handleSubmit();
					}}
				>
					<div className="mb-2">
						<form.AppField name="name">
							{(field) => (
								<field.InputField
									label="Name"
									inputType="text"
									required={true}
								/>
							)}
						</form.AppField>
					</div>
					<div>
						<p>
							Username can be your windows or anything, if you do not fill this
							out your name is used as your username
						</p>
					</div>
					<div className="mb-2">
						<form.AppField name="username">
							{(field) => (
								<field.InputField label="Username" inputType="text" />
							)}
						</form.AppField>
					</div>
					<div className="mb-2">
						<form.AppField name="email">
							{(field) => (
								<field.InputField
									label="Email"
									inputType="email"
									required={true}
								/>
							)}
						</form.AppField>
					</div>
					<div className="mb-2">
						<form.AppField name="password">
							{(field) => (
								<field.InputField
									label="Password"
									inputType="text"
									required={true}
								/>
							)}
						</form.AppField>
					</div>

					<div className="w-32">
						<form.AppField name="role">
							{(field) => (
								<field.SelectField
									label="Roles"
									placeholder="Select  role"
									options={selectableRoles}
								/>
							)}
						</form.AppField>
					</div>

					<div className="flex justify-end mt-2 ">
						<form.AppForm>
							<form.SubmitButton>Submit</form.SubmitButton>
						</form.AppForm>
					</div>
				</form>
			</DialogContent>
		</Dialog>
	);
}