[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 [email protected] 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)

[twisterdotcom]

@aimane-chnaif two proposals to review here. Let's see if we can get this moving and maybe even merged this week!

[twisterdotcom]

Bump on this @aimane-chnaif

[twisterdotcom]

I am OOO! Adding another BZ member for the week.

[melvin-bot]

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

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@JmillsExpensify, @twisterdotcom, @aimane-chnaif Eep! 4 days overdue now. Issues have feelings too...

[Natnael-Guchima]

@JmillsExpensify the link is removed from the page on the latest PR. I don't think there is a need to pursue this issue.

[twisterdotcom]

We implemented the timer, but you see, I requested a new code in the tab on the right here, but it didn't clear the error in the tab on the left:

I think @tienifr's proposal would do that, which is a neat improvement right? We just need @aimane-chnaif to review it.

[melvin-bot]

📣 @aimane-chnaif 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Upwork job

[melvin-bot]

📣 @tienifr 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

📣 @natnael! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot]

The BZ member will need to manually hire Natnael for the Reporter role. Please store your Upwork details and apply to our Upwork job so this process is automatic in the future!

[Natnael-Guchima]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~0135b3a84ec2709c21

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[garrettmknight]

Following this issue to pay out this bug report when it's fixed.

[danieldoglas]

Fix was deployed

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.42-26 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: Request magic code in other tab does not clear sign-in errors #22786
• fix: preserve magic code when login #23023

If no regressions arise, payment will be issued on 2023-07-26. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[twisterdotcom]

Payment due tomorrow.

External issue reporter: @Natnael-Guchima due $250: https://www.upwork.com/nx/wm/pre-hire/c/8577561/offer/25751090
Contributor that fixed the issue: @tienifr due $1000: https://www.upwork.com/nx/wm/workroom/34187190/overview
Contributor+ that helped on the issue and/or PR: @aimane-chnaif due $1000: https://www.upwork.com/nx/wm/workroom/34202522/overview

[twisterdotcom]

All paid out.