regression: no visual feedback on 2FA prompt

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

@@ -2,7 +2,7 @@ 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 } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import { useEffect, type ReactElement } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -13,13 +13,14 @@ type TwoFactorEmailModalProps = {
 	onConfirm: OnConfirm;
 	onClose: () => void;
 	resendEmail?: () => Promise<null>;
+	invalidAttempt?: boolean;
 };
 
 type TwoFactorEmailFormData = {
 	code: string;
 };
 
-const TwoFactorEmailModal = ({ onConfirm, onClose, resendEmail }: TwoFactorEmailModalProps): ReactElement => {
+const TwoFactorEmailModal = ({ onConfirm, onClose, resendEmail, invalidAttempt }: TwoFactorEmailModalProps): ReactElement => {
 	const dispatchToastMessage = useToastMessageDispatch();
 	const { t } = useTranslation();
 
@@ -28,11 +29,21 @@ const TwoFactorEmailModal = ({ onConfirm, onClose, resendEmail }: TwoFactorEmail
 		handleSubmit,
 		setError,
 		setValue,
+		clearErrors,
 		formState: { errors, isSubmitting },
 	} = useForm<TwoFactorEmailFormData>({
 		defaultValues: { code: '' },
 	});
 
+	useEffect(() => {
+		if (invalidAttempt) {
+			setError('code', {
+				type: 'manual',
+				message: t('code'),
+			});
+		}
+	}, [invalidAttempt, setError, t]);
+
 	const onClickResendCode = async (): Promise<void> => {
 		try {
 			if (!resendEmail) {
@@ -80,9 +91,13 @@ const TwoFactorEmailModal = ({ onConfirm, onClose, resendEmail }: TwoFactorEmail
 							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 { resendEmail } = props;
 
-		return <TwoFactorEmail onConfirm={onConfirm} onClose={onClose} resendEmail={resendEmail} />;
+		return <TwoFactorEmail onConfirm={onConfirm} onClose={onClose} resendEmail={resendEmail} 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

@@ -127,6 +127,7 @@ export const invokeTwoFactorModal = async (
 	props: {
 		method: 'totp' | 'email' | 'password';
 		emailOrUsername?: string | undefined;
+		invalidAttempt?: boolean;
 	},
 	validateCode?: (code: string, method: string) => Promise<void>,
 ) => {
@@ -168,6 +169,7 @@ export const invokeTwoFactorModal = async (
 					props.emailOrUsername && {
 						resendEmail: (): Promise<null> => sdk.rest.post('/v1/users.2fa.sendEmailCode', { emailOrUsername: props.emailOrUsername }),
 					}),
+				...(props.invalidAttempt && { invalidAttempt: props.invalidAttempt }),
 			},
 		});
 	});