[HOLD for payment 2023-05-29] Implement UI changes for managing 2FA in newdot

[MonilBhavsar]

Add pages and components for user to manage 2FA from Newdot

1. Add new Routes https://docs.google.com/document/d/11C65_BCS6D_V08JKX_mftI5ocWTYcazfblunrh9QGek/edit#bookmark=id.6u7oj99x2zog
2. Build disable 2FA page https://docs.google.com/document/d/11C65_BCS6D_V08JKX_mftI5ocWTYcazfblunrh9QGek/edit#bookmark=id.ld2a60lrxlj6
3. Build 2FA codes page content https://docs.google.com/document/d/11C65_BCS6D_V08JKX_mftI5ocWTYcazfblunrh9QGek/edit#bookmark=id.evab2rvg00as
4. Build verify 2FA page https://docs.google.com/document/d/11C65_BCS6D_V08JKX_mftI5ocWTYcazfblunrh9QGek/edit#bookmark=id.vm6ue9ss3aaw
5. Build 2FA success page https://docs.google.com/document/d/11C65_BCS6D_V08JKX_mftI5ocWTYcazfblunrh9QGek/edit#bookmark=id.4kfqwc56mdwm
6. Finally add an option is security settings page https://docs.google.com/document/d/11C65_BCS6D_V08JKX_mftI5ocWTYcazfblunrh9QGek/edit#bookmark=id.jz73dunvl4v0

Most of the code is written in the doc

---

Main tracking issue #15215

[MelvinBot]

Triggered auto assignment to @bfitzexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[MonilBhavsar]

@thiagobrez sorry looks like I assigned you to the wrong issue.
Could you please comment here so that I can assign you here

[thiagobrez]

No worries @MonilBhavsar !

[MonilBhavsar]

Thanks! We're almost unblocked. Feel free to go through the document and you can start working on it. Always here to help if you have any questions. Thank you!

[thiagobrez]

@MonilBhavsar Awesome, thank you very much 🙇🏻 Could you give me permissions to access the doc?

[bfitzexpensify]

Internal handling happening via #15215, so don't think I'm needed here. Unassigning myself

[MonilBhavsar]

@thiagobrez could you please check. We have shared the doc with you.

[thiagobrez]

@MonilBhavsar Yes! It worked and I'm already on it, thank you very much! Also, I see that the figma designs are in the works and expected to be done by Monday. Can I have access to that also when it's done? Thank you :)

[MonilBhavsar]

We have finalized the design and final designs are updated in the doc. Is that fine, or you need designs exported directly from Figma?

[thiagobrez]

I think I was expecting to have access to the actual design file so I could measure and do everything pixel-perfect. But if that is not possible no worries, I guess with the pre-made components and detailed implementation in the doc it is already possible

[thiagobrez]

Update: Good progress on UI. Enabled, Disabled and Codes pages are done, Verify page is almost. After that, Success page should be quick.

[thiagobrez]

Update: UI is done and connected to API. Next up is testing on all platforms and writing tests.

[MonilBhavsar]

@shawnborton, @thiagobrez is working on implementation of 2FA settings and requires a SVG/animation file

We have this svg/animation on the success page of the 2FA settings.

This looks fireworks and we also have fireworks in the success page of Bank Accounts page. That looks like this (plugged in 2FA settings page) -

Screen.Recording.2023-05-08.at.11.27.29.mov

Do we want to use the same fireworks animation or different one as proposed in Figma?
Also when exporting that SVG from Figma, it shows colorless in App and looks like we export from Adobe. If so could you please help us to export that file. Thanks! 🙏

[shawnborton]

Can you show me what is proposed in Figma that might be different from the animation you linked above?

Personally I think we should just use the same fireworks animation we're using elsewhere.

[MonilBhavsar]

This is what is proposed in Figma

https://user-images.githubusercontent.com/32012005/236802117-ece0bbda-e94d-43c0-9a71-915007b7bda7.png

Personally I think we should just use the same fireworks animation we're using elsewhere.

I agree 👍

[shawnborton]

Oh, the screenshot you shared is basically the same as the animation so we're all good.

[MonilBhavsar]

Awesome, thanks for clarifying. So we use the fireworks animation we currently have. cc @thiagobrez

[thiagobrez]

Perfect, thank you both @shawnborton @MonilBhavsar !

[thiagobrez]

Update: Draft PR is being reviewed internally

[thiagobrez]

Hey @shawnborton! Is this security settings page header expected to be implemented in this PR? Asking because I did not see any mention for it in the design doc:

cc @MonilBhavsar

[MonilBhavsar]

Good question! I don't think so. I guess this should be a part of another PR where we apply header images to all pages, so we have consistency in design. But yeah, @shawnborton would be knowing better.

[thiagobrez]

Happy to help provide any specific images/svgs you might need, just let me know!

Thanks @shawnborton!

I need the Expensify logo, with dark background and light fill color, in 400x400px, so I can put it in the middle of the 2-factor authentication QR Code.

The INVERSE of this one ⬇️

[thiagobrez]

For the email/login part, can we use our textSupporting color please? Thanks!

Maybe this should be addressed in #18636? This screenshot was just showing that there were no regressions in the Share Code feature. I haven't touched that in this issue.

But I know the Share Code PR is already closed, so if you want me to fix it in this PR anyway, I can do it easily. Just wanted to give the heads up :D

cc @MonilBhavsar

[shawnborton]

@thiagobrez which format do you need? svg or png?

[MonilBhavsar]

Agree with @thiagobrez here.
We need to open another issue and PR to address this concern.

[shawnborton]

That works for me! Can you make sure to follow up on the respective issue (or create a new one) for that?

[MonilBhavsar]

Sure, looks like there have been some bug reports for QR code already. If we can spin up a PR and polish them all? cc @robertjchen

[robertjchen]

Yep! We're working on the bug reports for the QR code here: #18968

[MonilBhavsar]

That's awesome! 🙌
It would be great to fix the issue Shawn mentioned here in that PR.

[thiagobrez]

@thiagobrez which format do you need? svg or png?

@shawnborton PNG, please 🙌🏻

[shawnborton]

Okay, curious how we'll handle this one for light mode too cc @grgia something to consider here.

Here is the png: appicon_qrcode.png.zip

[grgia]

Added to light mode doc to track, thanks!

[thiagobrez]

Thank you! Sending updates in the PR: #18576

[thiagobrez]

PR is merged 🏁

[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.16-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• feat: add 2-factor authentication #18576

If no regressions arise, payment will be issued on 2023-05-29. 🎊

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

[MonilBhavsar]

Not sure, why this wasn't closed by PR.
Closing this now. Thanks @thiagobrez!