snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateTeamModal.tsx

@@ -0,0 +1,295 @@
+import {
+	Box,
+	Button,
+	Icon,
+	Modal,
+	Accordion,
+	AccordionItem,
+	ModalHeader,
+	ModalTitle,
+	ModalClose,
+	ModalContent,
+	ModalFooter,
+	ModalFooterControllers,
+} from '@rocket.chat/fuselage';
+import { TextInput, ToggleSwitch, Field, FieldGroup, FieldLabel, FieldRow, FieldError, FieldHint } from '@rocket.chat/fuselage-forms';
+import {
+	useEndpoint,
+	usePermission,
+	usePermissionWithScopedRoles,
+	useSetting,
+	useToastMessageDispatch,
+	useTranslation,
+} from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+import { useId, memo, useEffect, useMemo } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+import { useEncryptedRoomDescription } from './useEncryptedRoomDescription';
+import UserAutoCompleteMultiple from '../../../components/UserAutoCompleteMultiple';
+import { useCreateChannelTypePermission } from '../../../hooks/useCreateChannelTypePermission';
+import { useGoToRoom } from '../../../views/room/hooks/useGoToRoom';
+
+type CreateTeamModalInputs = {
+	name: string;
+	topic: string;
+	isPrivate: boolean;
+	readOnly: boolean;
+	encrypted: boolean;
+	broadcast: boolean;
+	members?: string[];
+};
+
+export type CreateTeamModalProps = { onClose: () => void; onSuccess?: (rid: string) => void | Promise<void> };
+
+const CreateTeamModal = ({ onClose, onSuccess }: CreateTeamModalProps) => {
+	const t = useTranslation();
+	const e2eEnabled = useSetting('E2E_Enable');
+	const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms') && e2eEnabled;
+	const e2eEnforcedForPrivate = Boolean(useSetting('E2E_Force_Encryption_For_Private_Rooms')) && Boolean(e2eEnabled);
+	const namesValidation = useSetting('UTF8_Channel_Names_Validation');
+	const allowSpecialNames = useSetting('UI_Allow_room_names_with_special_chars');
+	const canSetReadOnly = usePermissionWithScopedRoles('set-readonly', ['owner']);
+
+	const dispatchToastMessage = useToastMessageDispatch();
+	const canCreateTeam = usePermission('create-team');
+
+	const checkTeamNameExists = useEndpoint('GET', '/v1/rooms.nameExists');
+	const createTeamAction = useEndpoint('POST', '/v1/teams.create');
+
+	const teamNameRegex = useMemo(() => {
+		if (allowSpecialNames) {
+			return null;
+		}
+
+		return new RegExp(`^${namesValidation}$`);
+	}, [allowSpecialNames, namesValidation]);
+
+	const canOnlyCreateOneType = useCreateChannelTypePermission();
+
+	const validateTeamName = async (name: string): Promise<string | undefined> => {
+		if (!name) {
+			return;
+		}
+
+		if (teamNameRegex && !teamNameRegex?.test(name)) {
+			return t('Name_cannot_have_special_characters');
+		}
+
+		const { exists } = await checkTeamNameExists({ roomName: name });
+		if (exists) {
+			return t('Teams_Errors_Already_exists', { name });
+		}
+	};
+
+	const {
+		control,
+		handleSubmit,
+		setValue,
+		watch,
+		formState: { errors, isSubmitting },
+	} = useForm<CreateTeamModalInputs>({
+		defaultValues: {
+			name: '',
+			topic: '',
+			isPrivate: canOnlyCreateOneType ? canOnlyCreateOneType === 'p' : true,
+			readOnly: false,
+			encrypted: Boolean(e2eEnforcedForPrivate || e2eEnabledForPrivateByDefault),
+			broadcast: false,
+			members: [],
+		},
+	});
+
+	const { isPrivate, broadcast, readOnly, encrypted } = watch();
+
+	useEffect(() => {
+		if (!isPrivate) {
+			setValue('encrypted', false);
+		} else if (e2eEnforcedForPrivate) {
+			setValue('encrypted', true);
+		}
+
+		setValue('readOnly', broadcast);
+	}, [watch, setValue, broadcast, isPrivate, e2eEnforcedForPrivate]);
+
+	const readOnlyDisabled = broadcast || !canSetReadOnly;
+	const canChangeEncrypted = isPrivate && e2eEnabled && !e2eEnforcedForPrivate;
+	const getEncryptedHint = useEncryptedRoomDescription('team');
+
+	const goToRoom = useGoToRoom();
+
+	const handleCreateTeam = async ({
+		name,
+		members,
+		isPrivate,
+		readOnly,
+		topic,
+		broadcast,
+		encrypted,
+	}: CreateTeamModalInputs): Promise<void> => {
+		const params = {
+			name,
+			members,
+			type: isPrivate ? 1 : 0,
+			room: {
+				readOnly,
+				extraData: {
+					topic,
+					broadcast,
+					encrypted,
+				},
+			},
+		};
+
+		try {
+			const { team } = await createTeamAction(params);
+			dispatchToastMessage({ type: 'success', message: t('Team_has_been_created') });
+			goToRoom(team.roomId);
+			void onSuccess?.(team.roomId);
+			onClose();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
+
+	const createTeamFormId = useId();
+
+	return (
+		<Modal
+			aria-labelledby={`${createTeamFormId}-title`}
+			wrapperFunction={(props: ComponentProps<typeof Box>) => (
+				<Box is='form' id={createTeamFormId} onSubmit={handleSubmit(handleCreateTeam)} {...props} />
+			)}
+		>
+			<ModalHeader>
+				<ModalTitle id={`${createTeamFormId}-title`}>{t('Teams_New_Title')}</ModalTitle>
+				<ModalClose title={t('Close')} onClick={onClose} tabIndex={-1} />
+			</ModalHeader>
+			<ModalContent marginBlockEnd={2}>
+				<Box fontScale='p2' marginBlockEnd={16}>
+					{t('Teams_new_description')}
+				</Box>
+				<FieldGroup marginBlockEnd={24}>
+					<Field>
+						<FieldLabel required>{t('Teams_New_Name_Label')}</FieldLabel>
+						<FieldRow>
+							<Controller
+								control={control}
+								name='name'
+								rules={{
+									required: t('Required_field', { field: t('Name') }),
+									validate: (value) => validateTeamName(value),
+								}}
+								render={({ field }) => (
+									<TextInput
+										{...field}
+										endAddon={<Icon size='x20' name={isPrivate ? 'team-lock' : 'team'} />}
+										error={errors.name?.message}
+										aria-required='true'
+									/>
+								)}
+							/>
+						</FieldRow>
+						{errors?.name && <FieldError>{errors.name.message}</FieldError>}
+						{!allowSpecialNames && <FieldHint>{t('No_spaces_or_special_characters')}</FieldHint>}
+					</Field>
+					<Field>
+						<FieldLabel>{t('Topic')}</FieldLabel>
+						<FieldRow>
+							<Controller control={control} name='topic' render={({ field }) => <TextInput {...field} />} />
+						</FieldRow>
+						<FieldRow>
+							<FieldHint>{t('Displayed_next_to_name')}</FieldHint>
+						</FieldRow>
+					</Field>
+					<Field>
+						<FieldLabel>{t('Teams_New_Add_members_Label')}</FieldLabel>
+						<Controller
+							control={control}
+							name='members'
+							render={({ field: { onChange, value } }) => (
+								<UserAutoCompleteMultiple value={value} onChange={onChange} placeholder={t('Add_people')} />
+							)}
+						/>
+					</Field>
+					<Field>
+						<FieldRow>
+							<FieldLabel>{t('Teams_New_Private_Label')}</FieldLabel>
+							<Controller
+								control={control}
+								name='isPrivate'
+								render={({ field: { onChange, value, ref } }) => (
+									<ToggleSwitch
+										onChange={onChange}
+										checked={canOnlyCreateOneType ? canOnlyCreateOneType === 'p' : value}
+										disabled={!!canOnlyCreateOneType}
+										ref={ref}
+									/>
+								)}
+							/>
+						</FieldRow>
+						<FieldHint>{isPrivate ? t('People_can_only_join_by_being_invited') : t('Anyone_can_access')}</FieldHint>
+					</Field>
+				</FieldGroup>
+				<Accordion>
+					<AccordionItem title={t('Advanced_settings')}>
+						<FieldGroup>
+							<Box is='h5' fontScale='h5' color='titles-labels'>
+								{t('Security_and_permissions')}
+							</Box>
+							<Field>
+								<FieldRow>
+									<FieldLabel>{t('Teams_New_Encrypted_Label')}</FieldLabel>
+									<Controller
+										control={control}
+										name='encrypted'
+										render={({ field: { onChange, value, ref } }) => (
+											<ToggleSwitch disabled={!canChangeEncrypted} onChange={onChange} checked={value} ref={ref} />
+										)}
+									/>
+								</FieldRow>
+								<FieldHint>{getEncryptedHint({ isPrivate, encrypted })}</FieldHint>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel>{t('Teams_New_Read_only_Label')}</FieldLabel>
+									<Controller
+										control={control}
+										name='readOnly'
+										render={({ field: { onChange, value, ref } }) => (
+											<ToggleSwitch disabled={readOnlyDisabled} onChange={onChange} checked={value} ref={ref} />
+										)}
+									/>
+								</FieldRow>
+								<FieldHint>
+									{readOnly ? t('Read_only_field_hint_enabled', { roomType: 'team' }) : t('Anyone_can_send_new_messages')}
+								</FieldHint>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel>{t('Teams_New_Broadcast_Label')}</FieldLabel>
+									<Controller
+										control={control}
+										name='broadcast'
+										render={({ field: { onChange, value, ref } }) => <ToggleSwitch onChange={onChange} checked={value} ref={ref} />}
+									/>
+								</FieldRow>
+								{broadcast && <FieldHint>{t('Teams_New_Broadcast_Description')}</FieldHint>}
+							</Field>
+						</FieldGroup>
+					</AccordionItem>
+				</Accordion>
+			</ModalContent>
+			<ModalFooter>
+				<ModalFooterControllers>
+					<Button onClick={onClose}>{t('Cancel')}</Button>
+					<Button disabled={!canCreateTeam} loading={isSubmitting} type='submit' primary>
+						{t('Create')}
+					</Button>
+				</ModalFooterControllers>
+			</ModalFooter>
+		</Modal>
+	);
+};
+
+export default memo(CreateTeamModal);