feat: add user form
This commit is contained in:
mehedi-hasan
parent
220869da1d
commit
cda17be557
|
|
@ -0,0 +1,38 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import UsersAddForm from "@/components/users-add-form";
|
||||
|
||||
export default function SettingsDisplayPage() {
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
|
||||
<Card className="max-w-[700px] w-full">
|
||||
<CardHeader>
|
||||
<CardTitle className="mb-4 font-bold text-xl">
|
||||
Create User
|
||||
</CardTitle>
|
||||
<Separator />
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<UsersAddForm />
|
||||
</CardContent>
|
||||
{/* <CardFooter>
|
||||
<Button className="w-full" size="lg">
|
||||
Submit
|
||||
</Button>
|
||||
</CardFooter> */}
|
||||
</Card>
|
||||
</div>
|
||||
<ScrollBar />
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { toast } from "@/components/ui/use-toast";
|
||||
import { Input } from "./ui/input";
|
||||
|
||||
const items = [
|
||||
{
|
||||
id: "ROLE_SUPER_ADMIN",
|
||||
label: "ROLE_SUPER_ADMIN",
|
||||
},
|
||||
{
|
||||
id: "ROLE_ADMIN",
|
||||
label: "ROLE_ADMIN",
|
||||
},
|
||||
{
|
||||
id: "ROLE_SYSADMIN",
|
||||
label: "ROLE_SYSADMIN",
|
||||
},
|
||||
{
|
||||
id: "ROLE_API",
|
||||
label: "ROLE_API",
|
||||
},
|
||||
{
|
||||
id: "ROLE_ORGANISATION_ADMIN",
|
||||
label: "ROLE_ORGANISATION_ADMIN",
|
||||
},
|
||||
{
|
||||
id: "ROLE_ASSISTANT",
|
||||
label: "ROLE_ASSISTANT",
|
||||
},
|
||||
{
|
||||
id: "ROLE_USER",
|
||||
label: "ROLE_USER",
|
||||
},
|
||||
] as const;
|
||||
|
||||
const displayFormSchema = z.object({
|
||||
fullName: z.string().trim().min(1, "Full Name is required."),
|
||||
email: z.string().trim().email("Email is required."),
|
||||
newPassword: z.string().trim().min(1, "Password is required."),
|
||||
repeatPassword: z.string().trim().min(1, "Repeat the new password."),
|
||||
roles: z.array(z.string()).refine((value) => value.some((item) => item), {
|
||||
message: "You have to select at least one role.",
|
||||
}),
|
||||
});
|
||||
|
||||
type DisplayFormValues = z.infer<typeof displayFormSchema>;
|
||||
|
||||
// This can come from your database or API.
|
||||
const defaultValues: Partial<DisplayFormValues> = {
|
||||
fullName: "",
|
||||
email: "",
|
||||
roles: ["ROLE_USER"],
|
||||
};
|
||||
|
||||
export default function UsersAddForm() {
|
||||
const form = useForm<DisplayFormValues>({
|
||||
resolver: zodResolver(displayFormSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
function onSubmit(data: DisplayFormValues) {
|
||||
if (data.newPassword !== data.repeatPassword) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Password doesn't match!",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
toast({
|
||||
title: "You submitted the following values:",
|
||||
description: (
|
||||
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
|
||||
</pre>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="fullName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Full Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Enter fullName..." {...field} />
|
||||
</FormControl>
|
||||
{/* <FormDescription>
|
||||
This is your public display name. It can be your real name or a
|
||||
pseudonym. You can only change this once every 30 days.
|
||||
</FormDescription> */}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="email" placeholder="Enter email..." {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="newPassword"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>New Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Enter new password..."
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="repeatPassword"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Repeat Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Repeat the new password..."
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="roles"
|
||||
render={() => (
|
||||
<FormItem>
|
||||
<div className="mb-4">
|
||||
<FormLabel className="text-base">Roles</FormLabel>
|
||||
{/* <FormDescription>
|
||||
Select the items you want to display in the sidebar.
|
||||
</FormDescription> */}
|
||||
</div>
|
||||
{items.map((item) => (
|
||||
<FormField
|
||||
key={item.id}
|
||||
control={form.control}
|
||||
name="roles"
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<FormItem
|
||||
key={item.id}
|
||||
className="flex flex-row items-start space-x-3 space-y-0"
|
||||
>
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value?.includes(item.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
return checked
|
||||
? field.onChange([...field.value, item.id])
|
||||
: field.onChange(
|
||||
field.value?.filter(
|
||||
(value) => value !== item.id
|
||||
)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="font-normal">
|
||||
{item.label}
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button className="w-full" size="lg">
|
||||
Create
|
||||
</Button>
|
||||
<Button variant="secondary" className="w-full" size="lg">
|
||||
Create and add another
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
@ -16,13 +16,11 @@ const ToolsTable = ({ users }: { users: User[] }) => {
|
|||
<div className="flex items-start justify-between">
|
||||
<Heading title={`Users (${users.length})`} description="Manage Users" />
|
||||
<Link
|
||||
href="#"
|
||||
href="/dashboard/users/add"
|
||||
className={buttonVariants({
|
||||
variant: "default",
|
||||
// size: "sm",
|
||||
})}
|
||||
// className="text-xs md:text-sm"
|
||||
// onClick={() => router.push(`/admin-dashboard/tools/add`)}
|
||||
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" /> Add User
|
||||
</Link>
|
||||
|
|
|
|||
Loading…
Reference in New Issue