App
App copied to clipboard
Expensify
Implement UI changes for managing 2FA in newdot
Add pages and components for user to manage 2FA from Newdot
- Add new Routes https://docs.google.com/document/d/11C65_BCS6D_V08JKX_mftI5ocWTYcazfblunrh9QGek/edit#bookmark=id.6u7oj99x2zog
- Build disable 2FA page https://docs.google.com/document/d/11C65_BCS6D_V08JKX_mftI5ocWTYcazfblunrh9QGek/edit#bookmark=id.ld2a60lrxlj6
- Build 2FA codes page content https://docs.google.com/document/d/11C65_BCS6D_V08JKX_mftI5ocWTYcazfblunrh9QGek/edit#bookmark=id.evab2rvg00as
- Build verify 2FA page https://docs.google.com/document/d/11C65_BCS6D_V08JKX_mftI5ocWTYcazfblunrh9QGek/edit#bookmark=id.vm6ue9ss3aaw
- Build 2FA success page https://docs.google.com/document/d/11C65_BCS6D_V08JKX_mftI5ocWTYcazfblunrh9QGek/edit#bookmark=id.4kfqwc56mdwm
- 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 https://github.com/Expensify/App/issues/15215
Triggered auto assignment to @bfitzexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.
@thiagobrez sorry looks like I assigned you to the wrong issue. Could you please comment here so that I can assign you here
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!
@MonilBhavsar Awesome, thank you very much 🙇🏻 Could you give me permissions to access the doc?
Internal handling happening via https://github.com/Expensify/App/issues/15215, so don't think I'm needed here. Unassigning myself
@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 :)
We have finalized the design and final designs are updated in the doc. Is that fine, or you need designs exported directly from Figma?
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
Update: Good progress on UI. Enabled, Disabled and Codes pages are done, Verify page is almost. After that, Success page should be quick.
Update: UI is done and connected to API. Next up is testing on all platforms and writing tests.
@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) -
https://user-images.githubusercontent.com/32012005/236802355-c5d85a8d-2e5d-4fdc-8840-b719d96953de.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! 🙏
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.
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 👍
Oh, the screenshot you shared is basically the same as the animation so we're all good.
Awesome, thanks for clarifying. So we use the fireworks animation we currently have. cc @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
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.
Yeah, we'll handle those design changes in a separate PR so you can ignore them for now!
PR is here and ready for review!
https://github.com/Expensify/App/pull/18576
@thiagobrez the QR code is being added here and with the updated branding. If that PR is merged before us, we'll merge main in your PR and then use that QR code component. cc @shawnborton Looks like the Expensify logo we need in the middle of QR code is the same as the one at http://new.expensify.com/settings/about
@thiagobrez the linked PR is merged now. If you could please merge main in to your PR and use that new library
@MonilBhavsar Done 👍🏻
Here is the result:
| Web | iOS | Android |
|---|---|---|
I didn't use the title, subtitle and logo props from the new component because it didn't seem appropriate here, but let me know if you think it should be added
I think we might want to ungroup the QR code component from the QR share component. The QR code component would only render a QR code and we can use that in QR share as well as in our 2FA page to render a QR code to achieve the results as the mockup above.
@MonilBhavsar Created a reusable QRCode component that is being used by both QRShare and VerifyPage.
Result:
| Verify Page | Share code page |
|---|---|