regression: no visual feedback on 2FA prompt

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

@@ -3,6 +3,7 @@ import { FieldGroup, TextInput, Field, FieldLabel, FieldRow, FieldError } from '
 import { GenericModal } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
+import { useEffect } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -12,14 +13,15 @@ import { Method } from './TwoFactorModal';
 type TwoFactorEmailModalProps = {
 	onConfirm: OnConfirm;
 	onClose: () => void;
+	invalidAttempt?: boolean;
 	emailOrUsername: string;
 };
 
 type TwoFactorEmailFormData = {
 	code: string;
 };
 
-const TwoFactorEmailModal = ({ onConfirm, onClose, emailOrUsername }: TwoFactorEmailModalProps): ReactElement => {
+const TwoFactorEmailModal = ({ onConfirm, onClose, emailOrUsername, invalidAttempt }: TwoFactorEmailModalProps): ReactElement => {
 	const dispatchToastMessage = useToastMessageDispatch();
 	const { t } = useTranslation();
 
@@ -28,11 +30,21 @@ const TwoFactorEmailModal = ({ onConfirm, onClose, emailOrUsername }: TwoFactorE
 		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 onClickResendCode = async (): Promise<void> => {
@@ -79,9 +91,13 @@ const TwoFactorEmailModal = ({ onConfirm, onClose, emailOrUsername }: TwoFactorE
 							name='code'
 							control={control}
 							rules={{ required: t('Required_field', { field: t('Code') }) }}
-							render={({ field }) => (
+							render={({ field: { onChange, ...fieldProps } }) => (
 								<TextInput
-									{...field}
+									{...fieldProps}
+									onChange={(e) => {
+										clearErrors('code');
+										onChange(e);
+									}}
 									placeholder={t('Enter_code_here')}
 									autoComplete='one-time-code'
 									inputMode='numeric'

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

@@ -15,6 +15,7 @@ export type OnConfirm = (code: string, method: Method) => void | Promise<void>;
 type TwoFactorModalProps = {
 	onConfirm: OnConfirm;
 	onClose: () => void;
+	invalidAttempt?: boolean;
 } & (
 	| {
 			method: 'totp' | 'password';
@@ -25,19 +26,19 @@ type TwoFactorModalProps = {
 	  }
 );
 
-const TwoFactorModal = ({ onConfirm, onClose, ...props }: TwoFactorModalProps): ReactElement => {
+const TwoFactorModal = ({ onConfirm, onClose, invalidAttempt, ...props }: TwoFactorModalProps): ReactElement => {
 	if (props.method === Method.TOTP) {
-		return <TwoFactorTotp onConfirm={onConfirm} onClose={onClose} />;
+		return <TwoFactorTotp onConfirm={onConfirm} onClose={onClose} invalidAttempt={invalidAttempt} />;
 	}
 
 	if (props.method === Method.EMAIL) {
 		const { emailOrUsername } = props;
 
-		return <TwoFactorEmail onConfirm={onConfirm} onClose={onClose} emailOrUsername={emailOrUsername} />;
+		return <TwoFactorEmail onConfirm={onConfirm} onClose={onClose} emailOrUsername={emailOrUsername} invalidAttempt={invalidAttempt} />;
 	}
 
 	if (props.method === Method.PASSWORD) {
-		return <TwoFactorPassword onConfirm={onConfirm} onClose={onClose} />;
+		return <TwoFactorPassword onConfirm={onConfirm} onClose={onClose} invalidAttempt={invalidAttempt} />;
 	}
 
 	throw new Error('Invalid Two Factor method');

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

@@ -1,7 +1,7 @@
 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 type { ReactElement } from 'react';
+import { useEffect, type ReactElement } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -11,25 +11,36 @@ import { Method } from './TwoFactorModal';
 type TwoFactorPasswordModalProps = {
 	onConfirm: OnConfirm;
 	onClose: () => void;
+	invalidAttempt?: boolean;
 };
 
 type TwoFactorPasswordFormData = {
 	password: string;
 };
 
-const TwoFactorPasswordModal = ({ onConfirm, onClose }: TwoFactorPasswordModalProps): ReactElement => {
+const TwoFactorPasswordModal = ({ onConfirm, onClose, invalidAttempt }: TwoFactorPasswordModalProps): ReactElement => {
 	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);
@@ -61,8 +72,17 @@ const TwoFactorPasswordModal = ({ onConfirm, onClose }: TwoFactorPasswordModalPr
 							name='password'
 							control={control}
 							rules={{ required: t('Required_field', { field: t('Password') }) }}
-							render={({ field }) => (
-								<PasswordInput {...field} placeholder={t('Password')} disabled={isSubmitting} error={errors.password?.message} />
+							render={({ field: { onChange, ...fieldProps } }) => (
+								<PasswordInput
+									{...fieldProps}
+									onChange={(e) => {
+										clearErrors('password');
+										onChange(e);
+									}}
+									placeholder={t('Password')}
+									disabled={isSubmitting}
+									error={errors.password?.message}
+								/>
 							)}
 						/>
 					</FieldRow>

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

@@ -1,7 +1,7 @@
 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 type { ReactElement } from 'react';
+import { useEffect, type ReactElement } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -12,25 +12,36 @@ type TwoFactorTotpModalProps = {
 	onConfirm: OnConfirm;
 	onClose: () => void;
 	onDismiss?: () => void;
+	invalidAttempt?: boolean;
 };
 
 type TwoFactorTotpFormData = {
 	code: string;
 };
 
-const TwoFactorTotpModal = ({ onConfirm, onClose, onDismiss }: TwoFactorTotpModalProps): ReactElement => {
+const TwoFactorTotpModal = ({ onConfirm, onClose, onDismiss, invalidAttempt }: TwoFactorTotpModalProps): ReactElement => {
 	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);
@@ -64,9 +75,13 @@ const TwoFactorTotpModal = ({ onConfirm, onClose, onDismiss }: TwoFactorTotpModa
 							name='code'
 							control={control}
 							rules={{ required: t('Required_field', { field: t('Code') }) }}
-							render={({ field }) => (
+							render={({ field: { onChange, ...fieldProps } }) => (
 								<TextInput
-									{...field}
+									{...fieldProps}
+									onChange={(e) => {
+										clearErrors('code');
+										onChange(e);
+									}}
 									placeholder={t('Enter_code_here')}
 									autoComplete='one-time-code'
 									inputMode='numeric'

apps/meteor/client/lib/2fa/process2faReturn.ts

@@ -124,10 +124,12 @@ export const invokeTwoFactorModal = async (
 	props: {
 		method: 'totp' | 'email' | 'password';
 		emailOrUsername?: string | undefined;
+		invalidAttempt?: boolean;
 	},
 	validateCode?: (code: string, method: string) => Promise<void>,
 ) => {
-	assertModalProps(props);
+	const { invalidAttempt, ...restProps } = props;
+	assertModalProps(restProps);
 
 	return new Promise<string>((resolve, reject) => {
 		let isResolved = false;
@@ -136,7 +138,7 @@ export const invokeTwoFactorModal = async (
 		imperativeModal.open({
 			component: TwoFactorModal,
 			props: {
-				...props,
+				...restProps,
 				onConfirm: async (code: string, method: string): Promise<void> => {
 					const actualCode = method === 'password' ? SHA256(code) : code;
 					if (validateCode) {
@@ -162,6 +164,7 @@ export const invokeTwoFactorModal = async (
 						reject(new Error('totp-canceled'));
 					}
 				},
+				...(invalidAttempt && { invalidAttempt }),
 			},
 		});
 	});

apps/meteor/client/meteor/overrides/totpOnCall.ts

@@ -52,7 +52,7 @@ const withAsyncTOTP = <T extends (name: string, ...args: any[]) => Promise<any>>
 		} catch (error: unknown) {
 			return process2faAsyncReturn({
 				error,
-				onCode: (twoFactorCode, twoFactorMethod) => Meteor.callAsync(methodName, ...args, { twoFactorCode, twoFactorMethod }),
+				onCode: (twoFactorCode, twoFactorMethod) => callAsync(methodName, ...args, { twoFactorCode, twoFactorMethod }),
 				emailOrUsername: undefined,
 			});
 		}