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">
|
<div className="flex items-start justify-between">
|
||||||
<Heading title={`Users (${users.length})`} description="Manage Users" />
|
<Heading title={`Users (${users.length})`} description="Manage Users" />
|
||||||
<Link
|
<Link
|
||||||
href="#"
|
href="/dashboard/users/add"
|
||||||
className={buttonVariants({
|
className={buttonVariants({
|
||||||
variant: "default",
|
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
|
<Plus className="mr-2 h-4 w-4" /> Add User
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue