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

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

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;