konnosDashboard
SSODomains.tsx78 lines · main
1import { Plus, Trash } from 'lucide-react'
2import { useFieldArray, useForm } from 'react-hook-form'
3import { Button, FormControl, FormField, FormItem, FormMessage, Input } from 'ui'
4import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
5
6import { SSOConfigFormSchema } from './SSOConfig'
7
8export const SSODomains = ({ form }: { form: ReturnType<typeof useForm<SSOConfigFormSchema>> }) => {
9 const { fields, append, remove } = useFieldArray({
10 control: form.control,
11 name: 'domains',
12 })
13
14 const domainsError = form.formState.errors.domains
15 // Handle different error structures - could be root error or direct error
16 const arrayLevelError =
17 domainsError &&
18 typeof domainsError === 'object' &&
19 'message' in domainsError &&
20 typeof domainsError.message === 'string'
21 ? domainsError.message
22 : domainsError &&
23 typeof domainsError === 'object' &&
24 'root' in domainsError &&
25 domainsError.root &&
26 typeof domainsError.root === 'object' &&
27 'message' in domainsError.root
28 ? String(domainsError.root.message)
29 : null
30
31 return (
32 <>
33 <FormItemLayout
34 label="Email Domains"
35 layout="flex-row-reverse"
36 description="Users with these email domains will be redirected to your identity provider when logging in from Briven."
37 >
38 <div className="grid gap-2 w-full">
39 {fields.map((field, idx) => (
40 <div key={field.id} className="flex gap-2 items-top">
41 <FormField
42 name={`domains.${idx}.value`}
43 render={({ field }) => (
44 <FormItem className="flex-1">
45 <FormControl>
46 <Input {...field} autoComplete="off" placeholder="example.com" />
47 </FormControl>
48 <FormMessage />
49 </FormItem>
50 )}
51 />
52
53 <Button
54 type="default"
55 icon={<Trash size={12} />}
56 className="h-[34px] w-[34px]"
57 onClick={() => remove(idx)}
58 />
59 </div>
60 ))}
61 <div>
62 <Button
63 type="default"
64 icon={<Plus className="w-4 h-4" />}
65 size="tiny"
66 onClick={() => append({ value: '' })}
67 >
68 Add another
69 </Button>
70 </div>
71 {arrayLevelError && (
72 <p className="text-sm font-medium text-destructive">{arrayLevelError}</p>
73 )}
74 </div>
75 </FormItemLayout>
76 </>
77 )
78}