konnosDashboard
JoinOrganizationOnSignup.tsx73 lines · main
1import { useForm } from 'react-hook-form'
2import {
3 FormControl,
4 FormField,
5 Select,
6 SelectContent,
7 SelectGroup,
8 SelectItem,
9 SelectTrigger,
10 SelectValue,
11 Switch,
12} from 'ui'
13import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
14
15import { SSOConfigFormSchema } from './SSOConfig'
16
17export const JoinOrganizationOnSignup = ({
18 form,
19}: {
20 form: ReturnType<typeof useForm<SSOConfigFormSchema>>
21}) => {
22 const joinOrgOnSignup = form.watch('joinOrgOnSignup')
23
24 return (
25 <div className="space-y-4">
26 <FormField
27 control={form.control}
28 name="joinOrgOnSignup"
29 render={({ field }) => (
30 <FormItemLayout
31 layout="flex-row-reverse"
32 label="Automatically add users to organization on sign up"
33 description="If disabled, users will need to be invited to the organization after signing up"
34 >
35 <FormControl className="flex items-center gap-2">
36 <Switch checked={field.value} onCheckedChange={field.onChange} />
37 </FormControl>
38 </FormItemLayout>
39 )}
40 />
41 {joinOrgOnSignup && (
42 <FormField
43 control={form.control}
44 name="roleOnJoin"
45 render={({ field }) => (
46 <FormItemLayout
47 label="Default role on join"
48 description="Select a role for the user when they join the organization"
49 layout="flex-row-reverse"
50 className="justify-between"
51 >
52 <FormControl>
53 <Select value={field.value} onValueChange={(val) => field.onChange(val)}>
54 <SelectTrigger className="w-52">
55 <SelectValue placeholder="Select a role" />
56 </SelectTrigger>
57 <SelectContent>
58 <SelectGroup>
59 <SelectItem value="Owner">Owner</SelectItem>
60 <SelectItem value="Administrator">Administrator</SelectItem>
61 <SelectItem value="Developer">Developer</SelectItem>
62 <SelectItem value="Read-only">Read-only</SelectItem>
63 </SelectGroup>
64 </SelectContent>
65 </Select>
66 </FormControl>
67 </FormItemLayout>
68 )}
69 />
70 )}
71 </div>
72 )
73}