Improve UX to emphasize importance of recovery codes
### Problem to solve Users set up 2FA but don't keep/have recovery codes when needed ### User experience goal User will have the recovery codes when needed. ### Proposal * Make recovery codes the first step in setup. * Tweak styling of text * Title: Recovery Codes * Text: First sentence as normal text and the second as a warning banner. * Give the user options to copy, download or print codes. * Don't allow users to continue with setup until they've clicked on one of the options. * In the screen where a code is scanned, recommend cloud-based apps (Authy, Duo Mobile, LastPass authenticator). "We recommend using cloud-based applications such as Authy, Duo Mobile and LastPass authenticator so you can restore access if you lose access to your device". * At the end of setup, include a message to encourage the user to be sure they upload an ssh key if there isn't one present on the account. ### What does success look like, and how can we measure that? Less 2FA Support tickets. ### Current State This is what you see in https://gitlab.com/profile/account before setup. ![Screen_Shot_2020-07-02_at_11.21.31_AM](/uploads/d8d840ca4d9006b18d13737fa716426e/Screen_Shot_2020-07-02_at_11.21.31_AM.png) When you click enable you see a code to scan and then you enter one of the codes from your app. ![screencapture-gitlab-profile-two-factor-auth-2020-07-02-11_21_40](/uploads/6f0fff31027b2b55c91a9b909680f1cf/screencapture-gitlab-profile-two-factor-auth-2020-07-02-11_21_40.png) After the device is linked you get the recovery codes. ![Screen_Shot_2020-07-01_at_8.28.07_PM](/uploads/e11a7ac62312a7d2d1d83e136cbc24d1/Screen_Shot_2020-07-01_at_8.28.07_PM.png) After setup this is what the https://gitlab.com/profile/account looks like. ![Screen_Shot_2020-07-02_at_11.34.11_AM](/uploads/a27515311e321c8c2c8d7d418204db76/Screen_Shot_2020-07-02_at_11.34.11_AM.png) Clicking in you can regenerate codes. ![Screen_Shot_2020-07-02_at_11.24.55_AM](/uploads/65d5dd031c9383c0472e5a36e049e50b/Screen_Shot_2020-07-02_at_11.24.55_AM.png)
epic