refactor(users): lots of auth stuff added to make it more easy to manage users

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

@@ -0,0 +1,153 @@
+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>
+	);
+}