[HOLD for payment 2023-06-12] [Tracking Issue]Bug fixes: 2FA

[MonilBhavsar]

Here is the list of minor Tracking 2FA bugs to make a quick follow up PR and fix all of them

1. Missing Download translation in Spanish - https://expensify.slack.com/archives/C049HHMV9SM/p1684406965776349
2. Two-factor name is inconsistent https://expensify.slack.com/archives/C049HHMV9SM/p1684406403576119
3. Offline Indicator displayed twice https://expensify.slack.com/archives/C049HHMV9SM/p1684408727072029
4. Here is your magic code page appears https://expensify.slack.com/archives/C049HHMV9SM/p1684405641601719
5. Error message persists https://expensify.slack.com/archives/C049HHMV9SM/p1684404156826129
6. View disrupted on small screen devices https://expensify.slack.com/archives/C049HHMV9SM/p1684392775324939

[melvin-bot]

Triggered auto assignment to @stephanieelliott (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

[MonilBhavsar]

@stephanieelliott this feature (2FA) went out today and we instantly got bug reports from our wonderful open source community. Thankfully all are minor bugs. I have compiled a list have asked for help in #callstack. We can squash them soon 🚫 🐛
https://expensify.slack.com/archives/C03UK30EA1Z/p1684415073652249

[stephanieelliott]

Awesome, thanks for the context @MonilBhavsar!

[BeeMargarida]

Proposal

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

Several smaller issues regarding 2FA.

What is the root cause of that problem?

1. Missing Download translation in Spanish
2. Two-factor name is inconsistent
   1. Translations were using both two-factor and two factor
3. Offline Indicator displayed twice
   1. 2FA pages use ScreenWrapper, that already includes an offline indicator by default
4. Here is your magic code page appears - when opening the magic link, it does not update correctly after setting the 2FA code
   1. This is because after signing in, the AuthState returns to NOT_STARTED instead of JUST_SIGNED_IN
5. Error message persists
6. View disrupted on small screen devices

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

1. Add translation for downloadCodes, since the value being used is hardcoded
2. Change all translation that are 'two factor' to 'two-factor'
3. We need to do 2 things:
   1. Add a prop to ScreenWrapper called shouldShowOfflineIndicator that has default true
   2. Use that prop with value false in all pages that use FullPageOfflineBlockingView
   3. Modify all usages of ScreenWrapper with FullPageOfflineBlockingView to include this prop, since the problem will appear there as well.
4. Change ValidateLoginPage to show the AbracadabraModal not when the AuthState is JUST_SIGNED_IN but NOT_STARTED and isSignedIn === true.
5. Clear Account messages on mount in VerifyPage
6. In the CodesPage, use withWindowDimensions and apply paddingHorizontal as 40 instead of 60 when isSmallScreenWidth is true.

What alternative solutions did you explore? (Optional)

--

[MonilBhavsar]

Thanks for the proposal 🙇

1. We already have translation in common.download. Looks like we just need to translate where we display it.
2. Looks good 👍
3. Oh, since the problem is widespread, I think this needs some discussion and we can handle this in another PR, as it is not solely related to 2FA.
4. Do we only need to remove !isTfaRequired and keep JUST_SIGNED_IN? Also let's please rename that to is2FARequired 😅
5. Sounds good to me 👍 We can test it out on different devices and see if we still need to adjust the padding.

[BeeMargarida]

Do we only need to remove !isTfaRequired and keep JUST_SIGNED_IN?

For the AbacadabraModal (after the sign in is complete), we need to remove the isTfaRequired and switch JUST_SIGNED_IN with NOT_STARTED (since this is reset after signing in), basically switch to this.getAutoAuthState() === CONST.AUTO_AUTH_STATE.NOT_STARTED && isSignedIn && <AbracadabraModal />

Also let's please rename that to is2FARequired 😅

On it!

[MonilBhavsar]

(since this is reset after signing in)

I see, thanks for clarifying. That makes sense! 🙇