[HOLD for payment 2023-07-26] [$1000] Requesting magic code from 'Magic code' page doesn't clear all sign-in errors

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Navigate to sign-in page
2. Enter email > click on 'Continue' button
3. Copy expired magic sign-in link from previous interaction
4. Paste to browser > prefix the link with 'staging' text > press enter
5. Verify that 'Magic code expired' page is displayed
6. Switch to the tab where sign-in page is opened
7. Click on Sign-in button
8. Switch to the tab where 'Magic code expired' page is displayed
9. Click on 'request a new code here!' link
10. Switch to the tab where sign-in page is opened

Expected Result:

All error messages including 'Please enter your magic code' should be cleared in the same manner as requesting magic code from sign-in page clears all errors

Actual Result:

'Please enter your magic code' error message is not cleared

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.30-5
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

2023-06-15.16.26.26.mp4

Recording.1059.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Natnael-Guchima
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686836451096149

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018f0afc70ce23ee77
• Upwork Job ID: 1671920220866732032
• Last Price Increase: 2023-07-06

[melvin-bot]

Triggered auto assignment to @twisterdotcom (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[mdneyazahmad]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Request a new magic code does not clear sign in form errors on other tab.

What is the root cause of that problem?

When user opens an expired link, and clicks request a new code here!, This calls Session.resendValidateCode(), which clears error field in ONYXKEYS.ACCOUNT key in onyx datastore.

hasError in BaseValidateCodeForm is based on this, but errorText is dependent based on formError in the component state which is not updated when we request magic code from other component.

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Lines 246 to 247 in e6c4b4e

	errorText={formError.validateCode ? props.translate(formError.validateCode) : ''}
	hasError={hasError}

MagicCodeInput just depend on formError prop therefore this error error is not cleared.

App/src/components/MagicCodeInput.js

Line 354 in e6c4b4e

{!_.isEmpty(props.errorText) && (

What changes do you think we should make in order to solve the problem?

There are two props related to error field. hasError and errorText. I believe, it should be enough to just rely on hasError to display error message. In fact these two props should be synced, i.e., when hasError is true, errorText should contain an error message, and when it is false, it should be empty.

These are the changes:

1. Add extra condition on Line354

{props.hasError && !_.isEmpty(props.errorText) && ( 

2. Fix this condition with and
   

   App/src/components/MagicCodeInput.js

   Line 316 in e6c4b4e

   props.hasError || props.errorText ? styles.borderColorDanger : {},

props.hasError && props.errorText ? styles.borderColorDanger : {},

What alternative solutions did you explore? (Optional)

None

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Requesting magic code from 'Magic code' page doesn't clear all sing-in errors

What is the root cause of that problem?

We're using component state to show the error

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Lines 232 to 233 in 9bef507

	errorText={formError.twoFactorAuthCode ? props.translate(formError.twoFactorAuthCode) : ''}
	hasError={hasError}

we just only clear error state when users click Didn't receive a magic code? on login page.

That why when users click resend validate code from Magic code page, the errors still are shown in the login page.

What changes do you think we should make in order to solve the problem?

change function resendValidateCode to

    const resendValidateCode = () => {
        User.resendValidateCode(props.credentials.login, true);
    };

move other code to new function like clearData, then execute this function when props.account.loadingForm === CONST.FORMS.VALIDATE_CODE_FORM

     useEffect(()=>{
        if(props.account.loadingForm === CONST.FORMS.VALIDATE_CODE_FORM){
            clearData()
        }
    },[props.account.loadingForm])

Result

Screen.Recording.2023-06-22.at.17.58.35.mp4

[twisterdotcom]

Chatting in Slack on this one. DIdn't realize this could be done. Let's do it!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~018f0afc70ce23ee77

[melvin-bot]

Current assignee @twisterdotcom is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @aimane-chnaif (External)