/
RoleForm.tsx
75 lines (70 loc) · 2.27 KB
/
RoleForm.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import type { SelectOption } from '@rocket.chat/fuselage';
import { Box, Field, TextInput, Select, ToggleSwitch } from '@rocket.chat/fuselage';
import { useTranslation } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { useMemo } from 'react';
import { useFormContext, Controller } from 'react-hook-form';
type RoleFormProps = {
className?: string;
editing?: boolean;
isProtected?: boolean;
isDisabled?: boolean;
};
const RoleForm = ({ className, editing = false, isProtected = false, isDisabled = false }: RoleFormProps): ReactElement => {
const t = useTranslation();
const {
register,
control,
formState: { errors },
} = useFormContext();
const options: SelectOption[] = useMemo(
() => [
['Users', t('Global')],
['Subscriptions', t('Rooms')],
],
[t],
);
return (
<>
<Field className={className}>
<Field.Label>{t('Role')}</Field.Label>
<Field.Row>
<TextInput disabled={editing || isDisabled} placeholder={t('Role')} {...register('name', { required: true })} />
</Field.Row>
{errors?.name && <Field.Error>{t('error-the-field-is-required', { field: t('Role') })}</Field.Error>}
</Field>
<Field className={className}>
<Field.Label>{t('Description')}</Field.Label>
<Field.Row>
<TextInput placeholder={t('Description')} disabled={isDisabled} {...register('description')} />
</Field.Row>
<Field.Hint>{'Leave the description field blank if you dont want to show the role'}</Field.Hint>
</Field>
<Field className={className}>
<Field.Label>{t('Scope')}</Field.Label>
<Field.Row>
<Controller
name='scope'
control={control}
render={({ field }): ReactElement => (
<Select {...field} options={options} disabled={isProtected || isDisabled} placeholder={t('Scope')} />
)}
/>
</Field.Row>
</Field>
<Field className={className}>
<Box display='flex' flexDirection='row'>
<Field.Label>{t('Users must use Two Factor Authentication')}</Field.Label>
<Field.Row>
<Controller
name='mandatory2fa'
control={control}
render={({ field }): ReactElement => <ToggleSwitch {...field} checked={field.value} disabled={isDisabled} />}
/>
</Field.Row>
</Box>
</Field>
</>
);
};
export default RoleForm;