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

apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx

@@ -0,0 +1,132 @@
+import { Box, Button } from '@rocket.chat/fuselage';
+import { FieldGroup, TextInput, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage-forms';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import type { OnConfirm } from './TwoFactorModal';
+import { Method } from './TwoFactorModal';
+
+export type TwoFactorEmailModalProps = {
+	onConfirm: OnConfirm;
+	onClose: () => void;
+	invalidAttempt?: boolean;
+} & (
+	| {
+			emailOrUsername: string;
+			challengeId?: never;
+	  }
+	| {
+			challengeId: string;
+			emailOrUsername?: never;
+	  }
+);
+
+type TwoFactorEmailFormData = {
+	code: string;
+};
+
+const TwoFactorEmailModal = ({ onConfirm, onClose, invalidAttempt, emailOrUsername, challengeId }: TwoFactorEmailModalProps) => {
+	const dispatchToastMessage = useToastMessageDispatch();
+	const { t } = useTranslation();
+
+	const {
+		control,
+		handleSubmit,
+		setError,
+		setValue,
+		clearErrors,
+		formState: { errors, isSubmitting },
+	} = useForm<TwoFactorEmailFormData>({
+		defaultValues: { code: '' },
+	});
+
+	useEffect(() => {
+		if (invalidAttempt) {
+			setError('code', {
+				type: 'manual',
+				message: t('Invalid_two_factor_code'),
+			});
+		}
+	}, [invalidAttempt, setError, t]);
+
+	const sendEmailCode = useEndpoint('POST', '/v1/users.2fa.sendEmailCode');
+	const sendEmailCodeByChallengeId = useEndpoint('POST', '/v1/twoFactorChallenges.sendEmailCode');
+
+	const onClickResendCode = async (): Promise<void> => {
+		try {
+			if (emailOrUsername) {
+				await sendEmailCode({ emailOrUsername });
+			} else if (challengeId) {
+				await sendEmailCodeByChallengeId({ challengeId });
+			}
+			dispatchToastMessage({ type: 'success', message: t('Email_sent') });
+		} catch (error) {
+			dispatchToastMessage({
+				type: 'error',
+				message: t('error-email-send-failed', { message: error }),
+			});
+		}
+	};
+
+	const onSubmit = handleSubmit(async ({ code }) => {
+		try {
+			await onConfirm(code, Method.EMAIL);
+		} catch (error) {
+			setError('code', {
+				type: 'manual',
+				message: t('Invalid_two_factor_code'),
+			});
+			setValue('code', '');
+		}
+	});
+
+	return (
+		<GenericModal
+			wrapperFunction={(props) => <Box is='form' onSubmit={onSubmit} {...props} />}
+			onCancel={onClose}
+			confirmText={t('Verify')}
+			title={t('Enter_authentication_code')}
+			onClose={onClose}
+			variant='warning'
+			confirmDisabled={isSubmitting}
+			tagline={t('Email_two-factor_authentication')}
+			icon={null}
+		>
+			<FieldGroup>
+				<Field>
+					<FieldLabel alignSelf='stretch'>{t('Enter_the_code_we_just_emailed_you')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='code'
+							control={control}
+							rules={{ required: t('Required_field', { field: t('Code') }) }}
+							render={({ field: { onChange, ...fieldProps } }) => (
+								<TextInput
+									{...fieldProps}
+									onChange={(e) => {
+										clearErrors('code');
+										onChange(e);
+									}}
+									placeholder={t('Enter_code_here')}
+									autoComplete='one-time-code'
+									inputMode='numeric'
+									disabled={isSubmitting}
+									error={errors.code?.message}
+								/>
+							)}
+						/>
+					</FieldRow>
+					{errors.code && <FieldError>{errors.code.message}</FieldError>}
+				</Field>
+			</FieldGroup>
+			<Button display='flex' justifyContent='end' onClick={onClickResendCode} small marginBlockStart={24}>
+				{t('Cloud_resend_email')}
+			</Button>
+		</GenericModal>
+	);
+};
+
+export default TwoFactorEmailModal;

apps/meteor/client/components/TwoFactorModal/TwoFactorModal.tsx

@@ -0,0 +1,51 @@
+import TwoFactorEmail from './TwoFactorEmailModal';
+import TwoFactorPassword from './TwoFactorPasswordModal';
+import TwoFactorTotp from './TwoFactorTotpModal';
+
+export enum Method {
+	TOTP = 'totp',
+	EMAIL = 'email',
+	PASSWORD = 'password',
+}
+
+export type OnConfirm = (code: string, method: Method) => void | Promise<void>;
+
+export type TwoFactorModalProps = {
+	onConfirm: OnConfirm;
+	onClose: () => void;
+	invalidAttempt?: boolean;
+} & (
+	| {
+			method: 'totp' | 'password';
+	  }
+	| {
+			method: 'email';
+			emailOrUsername: string;
+			challengeId?: never;
+	  }
+	| {
+			method: 'email';
+			challengeId: string;
+			emailOrUsername?: never;
+	  }
+);
+
+const TwoFactorModal = ({ onConfirm, onClose, invalidAttempt, ...props }: TwoFactorModalProps) => {
+	if (props.method === Method.TOTP) {
+		return <TwoFactorTotp onConfirm={onConfirm} onClose={onClose} invalidAttempt={invalidAttempt} />;
+	}
+
+	if (props.method === Method.EMAIL) {
+		// const { emailOrUsername, challengeId } = props;
+
+		return <TwoFactorEmail onConfirm={onConfirm} onClose={onClose} invalidAttempt={invalidAttempt} {...props} />;
+	}
+
+	if (props.method === Method.PASSWORD) {
+		return <TwoFactorPassword onConfirm={onConfirm} onClose={onClose} invalidAttempt={invalidAttempt} />;
+	}
+
+	throw new Error('Invalid Two Factor method');
+};
+
+export default TwoFactorModal;

apps/meteor/client/components/TwoFactorModal/TwoFactorPasswordModal.tsx

@@ -0,0 +1,96 @@
+import { Box } from '@rocket.chat/fuselage';
+import { PasswordInput, FieldGroup, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage-forms';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useEffect } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import type { OnConfirm } from './TwoFactorModal';
+import { Method } from './TwoFactorModal';
+
+export type TwoFactorPasswordModalProps = {
+	onConfirm: OnConfirm;
+	onClose: () => void;
+	invalidAttempt?: boolean;
+};
+
+type TwoFactorPasswordFormData = {
+	password: string;
+};
+
+const TwoFactorPasswordModal = ({ onConfirm, onClose, invalidAttempt }: TwoFactorPasswordModalProps) => {
+	const { t } = useTranslation();
+
+	const {
+		control,
+		handleSubmit,
+		setError,
+		setValue,
+		clearErrors,
+		formState: { errors, isSubmitting },
+	} = useForm<TwoFactorPasswordFormData>({
+		defaultValues: { password: '' },
+	});
+
+	useEffect(() => {
+		if (invalidAttempt) {
+			setError('password', {
+				type: 'manual',
+				message: t('Invalid_password'),
+			});
+		}
+	}, [invalidAttempt, setError, t]);
+
+	const onSubmit = handleSubmit(async ({ password }) => {
+		try {
+			await onConfirm(password, Method.PASSWORD);
+		} catch (error) {
+			setError('password', {
+				type: 'manual',
+				message: t('Invalid_password'),
+			});
+			setValue('password', '');
+		}
+	});
+
+	return (
+		<GenericModal
+			wrapperFunction={(props) => <Box is='form' onSubmit={onSubmit} {...props} />}
+			onCancel={onClose}
+			confirmText={t('Verify')}
+			title={t('Please_enter_your_password')}
+			onClose={onClose}
+			variant='warning'
+			icon='info'
+			confirmDisabled={isSubmitting}
+		>
+			<FieldGroup>
+				<Field>
+					<FieldLabel alignSelf='stretch'>{t('For_your_security_you_must_enter_your_current_password_to_continue')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='password'
+							control={control}
+							rules={{ required: t('Required_field', { field: t('Password') }) }}
+							render={({ field: { onChange, ...fieldProps } }) => (
+								<PasswordInput
+									{...fieldProps}
+									onChange={(e) => {
+										clearErrors('password');
+										onChange(e);
+									}}
+									placeholder={t('Password')}
+									disabled={isSubmitting}
+									error={errors.password?.message}
+								/>
+							)}
+						/>
+					</FieldRow>
+					{errors.password && <FieldError>{errors.password.message}</FieldError>}
+				</Field>
+			</FieldGroup>
+		</GenericModal>
+	);
+};
+
+export default TwoFactorPasswordModal;

apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx

@@ -0,0 +1,101 @@
+import { Box } from '@rocket.chat/fuselage';
+import { FieldGroup, TextInput, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage-forms';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useEffect } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import type { OnConfirm } from './TwoFactorModal';
+import { Method } from './TwoFactorModal';
+
+export type TwoFactorTotpModalProps = {
+	onConfirm: OnConfirm;
+	onClose: () => void;
+	onDismiss?: () => void;
+	invalidAttempt?: boolean;
+};
+
+type TwoFactorTotpFormData = {
+	code: string;
+};
+
+const TwoFactorTotpModal = ({ onConfirm, onClose, onDismiss, invalidAttempt }: TwoFactorTotpModalProps) => {
+	const { t } = useTranslation();
+
+	const {
+		control,
+		handleSubmit,
+		setError,
+		setValue,
+		clearErrors,
+		formState: { errors, isSubmitting },
+	} = useForm<TwoFactorTotpFormData>({
+		defaultValues: { code: '' },
+	});
+
+	useEffect(() => {
+		if (invalidAttempt) {
+			setError('code', {
+				type: 'manual',
+				message: t('Invalid_two_factor_code'),
+			});
+		}
+	}, [invalidAttempt, setError, t]);
+
+	const onSubmit = handleSubmit(async ({ code }) => {
+		try {
+			await onConfirm(code, Method.TOTP);
+		} catch (error) {
+			setError('code', {
+				type: 'manual',
+				message: t('Invalid_two_factor_code'),
+			});
+			setValue('code', '');
+		}
+	});
+
+	return (
+		<GenericModal
+			wrapperFunction={(props) => <Box is='form' onSubmit={onSubmit} {...props} />}
+			onCancel={onClose}
+			confirmText={t('Verify')}
+			title={t('Enter_TOTP_password')}
+			onClose={onClose}
+			onDismiss={onDismiss}
+			variant='warning'
+			confirmDisabled={isSubmitting}
+			tagline={t('Two-factor_authentication')}
+			icon={null}
+		>
+			<FieldGroup>
+				<Field>
+					<FieldLabel alignSelf='stretch'>{t('Enter_the_code_provided_by_your_authentication_app_to_continue')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='code'
+							control={control}
+							rules={{ required: t('Required_field', { field: t('Code') }) }}
+							render={({ field: { onChange, ...fieldProps } }) => (
+								<TextInput
+									{...fieldProps}
+									onChange={(e) => {
+										clearErrors('code');
+										onChange(e);
+									}}
+									placeholder={t('Enter_code_here')}
+									autoComplete='one-time-code'
+									inputMode='numeric'
+									disabled={isSubmitting}
+									error={errors.code?.message}
+								/>
+							)}
+						/>
+					</FieldRow>
+					{errors.code && <FieldError>{errors.code.message}</FieldError>}
+				</Field>
+			</FieldGroup>
+		</GenericModal>
+	);
+};
+
+export default TwoFactorTotpModal;

apps/meteor/client/components/TwoFactorModal/index.ts

@@ -0,0 +1 @@
+export { default } from './TwoFactorModal';