konnosDashboard
CreateUserModal.tsx174 lines · main
1import { zodResolver } from '@hookform/resolvers/zod'
2import { PermissionAction } from '@supabase/shared-types/out/constants'
3import { useParams } from 'common'
4import { Lock, Mail } from 'lucide-react'
5import { SubmitHandler, useForm } from 'react-hook-form'
6import { toast } from 'sonner'
7import {
8 Button,
9 Checkbox,
10 Dialog,
11 DialogContent,
12 DialogHeader,
13 DialogSectionSeparator,
14 DialogTitle,
15 Form,
16 FormControl,
17 FormField,
18 FormItem,
19 FormLabel,
20 FormMessage,
21 Input,
22} from 'ui'
23import * as z from 'zod'
24
25import { useUserCreateMutation } from '@/data/auth/user-create-mutation'
26import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
27
28export type CreateUserModalProps = {
29 visible: boolean
30 setVisible: (visible: boolean) => void
31}
32
33const CreateUserFormSchema = z.object({
34 email: z.string().min(1, 'Email is required').email('Must be a valid email address'),
35 password: z.string().min(1, 'Password is required'),
36 autoConfirmUser: z.boolean(),
37})
38
39const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => {
40 const { ref: projectRef } = useParams()
41 const { can: canCreateUsers } = useAsyncCheckPermissions(
42 PermissionAction.AUTH_EXECUTE,
43 'create_user'
44 )
45
46 const { mutate: createUser, isPending: isCreatingUser } = useUserCreateMutation({
47 onSuccess(res) {
48 toast.success(`Successfully created user: ${res.email}`)
49 form.reset({ email: '', password: '', autoConfirmUser: true })
50 setVisible(false)
51 },
52 })
53
54 const onCreateUser: SubmitHandler<z.infer<typeof CreateUserFormSchema>> = async (values) => {
55 if (!projectRef) return console.error('Project ref is required')
56 createUser({ projectRef, user: values })
57 }
58
59 const form = useForm<z.infer<typeof CreateUserFormSchema>>({
60 resolver: zodResolver(CreateUserFormSchema as any),
61 defaultValues: { email: '', password: '', autoConfirmUser: true },
62 })
63
64 return (
65 <Dialog open={visible} onOpenChange={setVisible}>
66 <DialogContent size="small">
67 <DialogHeader>
68 <DialogTitle>Create a new user</DialogTitle>
69 </DialogHeader>
70 <DialogSectionSeparator />
71 <Form {...form}>
72 <form
73 id="create-user"
74 className="flex flex-col gap-y-4 p-6"
75 onSubmit={form.handleSubmit(onCreateUser)}
76 >
77 <FormField
78 name="email"
79 control={form.control}
80 render={({ field }) => (
81 <FormItem className="flex flex-col gap-1">
82 <FormLabel>Email address</FormLabel>
83 <FormControl>
84 <div className="items-center relative">
85 <Mail
86 size={18}
87 className="absolute left-2 top-1/2 transform -translate-y-1/2"
88 strokeWidth={1.5}
89 />
90 <Input
91 autoFocus
92 {...field}
93 autoComplete="off"
94 type="email"
95 name="email"
96 placeholder="user@example.com"
97 disabled={isCreatingUser}
98 className="pl-8"
99 />
100 </div>
101 </FormControl>
102 <FormMessage />
103 </FormItem>
104 )}
105 />
106
107 <FormField
108 name="password"
109 control={form.control}
110 render={({ field }) => (
111 <FormItem className="flex flex-col gap-1">
112 <FormLabel>User Password</FormLabel>
113 <FormControl>
114 <div className="items-center relative">
115 <Lock
116 size={18}
117 className="absolute left-2 top-1/2 transform -translate-y-1/2"
118 strokeWidth={1.5}
119 />
120 <Input
121 {...field}
122 autoComplete="new-password"
123 type="password"
124 name="password"
125 placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;"
126 disabled={isCreatingUser}
127 className="pl-8"
128 />
129 </div>
130 </FormControl>
131 <FormMessage />
132 </FormItem>
133 )}
134 />
135
136 <FormField
137 name="autoConfirmUser"
138 control={form.control}
139 render={({ field }) => (
140 <FormItem className="flex items-center gap-x-2">
141 <FormControl>
142 <Checkbox
143 checked={field.value}
144 onCheckedChange={(value) => field.onChange(value)}
145 />
146 </FormControl>
147 <FormLabel>Auto confirm user?</FormLabel>
148 </FormItem>
149 )}
150 />
151
152 <FormLabel>
153 <p className="text-sm text-foreground-lighter">
154 A confirmation email will not be sent when creating a user via this form.
155 </p>
156 </FormLabel>
157
158 <Button
159 block
160 size="small"
161 htmlType="submit"
162 loading={isCreatingUser}
163 disabled={!canCreateUsers || isCreatingUser}
164 >
165 Create user
166 </Button>
167 </form>
168 </Form>
169 </DialogContent>
170 </Dialog>
171 )
172}
173
174export default CreateUserModal