2FA UX - Save Recovery Codes

We'd like to encourage users to save recovery codes. For additional context see &4610

To do we would:

• Give the user options to copy, download or print codes.
• Don't allow users to leave setup until they've clicked on one of the options.
• Add an alert that says "Please copy, download, or print your recovery codes before proceeding"
• For gitlab.com, can we track clicks for each of these buttons?

Current experience:

Technical approach

• Replace app/views/profiles/two_factor_auths/_codes.html.haml with a Vue app that uses app/assets/javascripts/vue_shared/components/clipboard_button.vue for the copy button and window.print() for the print button. The Vue app will use local state to determine if the user has clicked one of the buttons (download, copy, or print). Once clicked the "Proceed" button will become enabled.
• Use Vue tracking mixin to track button clicks

Analytics tracking

This has been setup to track all of the button clicks. This tracking was setup using Snowplow and the data should be accessible in Sisense.

Copy button

• Event category: profiles:two_factor_auths:codes
• Event action: click_button
• Event label: 2fa_recovery_codes_copy_button

Download button

• Event category: profiles:two_factor_auths:codes
• Event action: click_button
• Event label: 2fa_recovery_codes_download_button

Print button

• Event category: profiles:two_factor_auths:codes
• Event action: click_button
• Event label: 2fa_recovery_codes_print_button

Proceed button

• Event category: profiles:two_factor_auths:codes
• Event action: click_button
• Event label: 2fa_recovery_codes_proceed_button

Manually copy codes with keyboard shortcut

• Event category: profiles:two_factor_auths:codes
• Event action: copy_keyboard_shortcut
• Event label: 2fa_recovery_codes_manual_copy

Availability & Testing

What risks does this change pose to our availability?

This is a low risk to GitLab.com availability.

What additional test coverage or changes to tests will be needed?

Unit tests need to be added to ensure that the user is able to proceed after choosing one of the three options.

Will it require cross-browser testing?

This is not a very UI heavy change however, some basic x-browser testing should be done to ensure the proceed button is enabled after selecting one of the three options.

Please run the package-and-qa job. This could break some end-to-end tests that click the proceed button.