fix: 🐛 GUI crash when 2fa is canceled/closed

Fixed a bug in which the LoginForm would crash upon the cancellation or closure of the 2FA modal. This issue occurred because the "totp-canceled" error was not mapped to the list of errors that could occur with this component.
abhipatel0211 · Feb 2, 2024 · fbc9a6f · fbc9a6f
1 parent 93c79bf
commit fbc9a6f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx b/apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx
@@ -45,24 +45,14 @@ const TwoFactorEmailModal = ({ onConfirm, onClose, emailOrUsername, invalidAttem
 	};
 
 	const id = useUniqueId();
-	const onCloseHandler = () => {
-		try {
-			if (typeof onClose === 'function') {
-				onClose();
-				window.location.href = 'http://localhost:3000';
-			}
-		} catch (error) {
-			console.error('Error in onClose function:', error);
-		}
-	};
 
 	return (
 		<GenericModal
 			wrapperFunction={(props) => <Box is='form' onSubmit={onConfirmEmailCode} {...props} />}
-			onCancel={onCloseHandler}
+			onCancel={onClose}
 			confirmText={t('Verify')}
 			title={t('Two-factor_authentication_email')}
-			onClose={onCloseHandler}
+			onClose={onClose}
 			variant='warning'
 			icon='info'
 			confirmDisabled={!code}
@@ -78,7 +68,7 @@ const TwoFactorEmailModal = ({ onConfirm, onClose, emailOrUsername, invalidAttem
 					{invalidAttempt && <FieldError>{t('Invalid_password')}</FieldError>}
 				</Field>
 			</FieldGroup>
-			<Box style={{ cursor: 'pointer' }} display='flex' justifyContent='end' is='a' onClick={onClickResendCode}>
+			<Box display='flex' justifyContent='end' is='a' onClick={onClickResendCode}>
 				{t('Cloud_resend_email')}
 			</Box>
 		</GenericModal>

diff --git a/packages/web-ui-registration/src/LoginForm.tsx b/packages/web-ui-registration/src/LoginForm.tsx
@@ -56,7 +56,7 @@ const LOGIN_SUBMIT_ERRORS = {
 	},
 } as const;
 
-export type LoginErrors = keyof typeof LOGIN_SUBMIT_ERRORS;
+export type LoginErrors = keyof typeof LOGIN_SUBMIT_ERRORS | 'totp-canceled';
 
 export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRouter }): ReactElement => {
 	const {
@@ -111,7 +111,12 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
 	}, [errorOnSubmit]);
 
 	const renderErrorOnSubmit = (error: LoginErrors) => {
+		if (error === 'totp-canceled') {
+			return null;
+		}
+
 		const { type, i18n } = LOGIN_SUBMIT_ERRORS[error];
+
 		return (
 			<Callout id={`${usernameId}-error`} aria-live='assertive' type={type}>
 				{t(i18n)}