refactor(mfa): derive validate code submitting state from machine

Author: dariusz-biela

src/components/MultifactorAuthentication/machine/snapshotToState.ts

@@ -16,6 +16,9 @@ type MfaState = MfaContext & {
     /** Whether the machine currently accepts a request for a fresh magic-code email. */
     canResendValidateCode: boolean;
 
+    /** Whether the submitted magic code is currently being validated. */
+    isValidateCodeFormSubmitting: boolean;
+
     /** Whether the magic-code screen currently shows the inline invalid-code error. */
     showsInvalidCodeError: boolean;
 };
@@ -41,6 +44,11 @@ function snapshotToState(snapshot: MfaSnapshot): MfaState {
         ...snapshot.context,
         modalState: getModalState(snapshot),
         canResendValidateCode: snapshot.can({type: 'RESEND_VALIDATE_CODE'}),
+        isValidateCodeFormSubmitting: snapshot.matches({
+            [MFA_STATE.OPEN]: {
+                [MFA_STATE.MAGIC_CODE]: MFA_STATE.REQUESTING_REGISTRATION_CHALLENGE,
+            },
+        }),
         showsInvalidCodeError: snapshot.matches({
             [MFA_STATE.OPEN]: {
                 [MFA_STATE.MAGIC_CODE]: {

src/pages/MultifactorAuthentication/ValidateCodePage.tsx

@@ -52,7 +52,7 @@ function MultifactorAuthenticationValidateCodePage() {
     const [formError, setFormError] = useState<FormError>({});
     const [canShowError, setCanShowError] = useState<boolean>(false);
     const {requestCancel, submitValidateCode, resendValidateCode, notifyValidateCodeChanged, state} = useMultifactorAuthenticationInternal();
-    const {showsInvalidCodeError, isCancelConfirmVisible, canResendValidateCode} = state;
+    const {showsInvalidCodeError, isCancelConfirmVisible, canResendValidateCode, isValidateCodeFormSubmitting} = state;
 
     // Refs
     const inputRef = useRef<MagicCodeInputHandle>(null);
@@ -61,8 +61,6 @@ function MultifactorAuthenticationValidateCodePage() {
 
     // Derived state
     const hasAccountError = !!account && !isEmptyObject(account?.errors);
-    // The MFA registration challenge always uses VALIDATE_CODE_FORM, even when the account has 2FA enabled.
-    const isValidateCodeFormSubmitting = !!account?.isLoading && account.loadingForm === CONST.FORMS.VALIDATE_CODE_FORM;
     const shouldDisableResendCode = isOffline || !canResendValidateCode;
     const validateCodeActionError = getLatestErrorField(validateActionCode, 'actionVerified');
     const hasValidateCodeActionError = !isEmptyObject(validateCodeActionError);
@@ -154,7 +152,7 @@ function MultifactorAuthenticationValidateCodePage() {
      */
     const validateAndSubmitForm = () => {
         // Check if already loading
-        if (account?.isLoading) {
+        if (isValidateCodeFormSubmitting) {
             return;
         }
 

tests/unit/components/MultifactorAuthentication/machine/validateCodeTransition.test.ts

@@ -151,6 +151,7 @@ describe('MFA magic code and registration decision', () => {
 
         const result = actor.getSnapshot();
         expect(result.matches({[MFA_STATE.OPEN]: {[MFA_STATE.MAGIC_CODE]: MFA_STATE.REQUESTING_REGISTRATION_CHALLENGE}})).toBe(true);
+        expect(snapshotToState(result).isValidateCodeFormSubmitting).toBe(true);
         expect(result.context.validateCode).toBe(MFA_TEST_VALIDATE_CODE);
         expect(result.context.registrationChallenge).toBeUndefined();
         expect(requestRegistrationChallengeMock).toHaveBeenCalledWith(MFA_TEST_VALIDATE_CODE);
@@ -168,6 +169,7 @@ describe('MFA magic code and registration decision', () => {
 
         const result = actor.getSnapshot();
         expect(result.matches({[MFA_STATE.OPEN]: {[MFA_STATE.MAGIC_CODE]: MFA_STATE.REQUESTING_REGISTRATION_CHALLENGE}})).toBe(false);
+        expect(snapshotToState(result).isValidateCodeFormSubmitting).toBe(false);
         expect(result.context.registrationChallenge).toBe(MFA_TEST_REGISTRATION_CHALLENGE);
         expect(result.context.error).toBeUndefined();