Rocket.Chat/client/admin/permissions/RoleForm.js

import React, { useMemo } from 'react';
import { Box, Field, TextInput, Select, ToggleSwitch } from '@rocket.chat/fuselage';

import { useTranslation } from '../../contexts/TranslationContext';

const RoleForm = ({ values, handlers, className, editing = false, isProtected = false }) => {
	const t = useTranslation();

	const {
		name,
		description,
		scope,
		mandatory2fa,
	} = values;

	const {
		handleName,
		handleDescription,
		handleScope,
		handleMandatory2fa,
	} = handlers;

	const options = useMemo(() => [
		['Users', t('Global')],
		['Subscriptions', t('Rooms')],
	], [t]);

	return <>
		<Field className={className}>
			<Field.Label>{t('Role')}</Field.Label>
			<Field.Row>
				<TextInput disabled={editing} value={name} onChange={handleName} placeholder={t('Role')}/>
			</Field.Row>
		</Field>
		<Field className={className}>
			<Field.Label>{t('Description')}</Field.Label>
			<Field.Row>
				<TextInput value={description} onChange={handleDescription} placeholder={t('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>
				<Select disabled={isProtected} options={options} value={scope} onChange={handleScope} 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>
					<ToggleSwitch checked={mandatory2fa} onChange={handleMandatory2fa}/>
				</Field.Row>
			</Box>
		</Field>
	</>;
};

export default RoleForm;