Use simpler/less-technical wording and UI.

[dd32]

This draft PR contains a lot of textual changes, which overall simplifies the language (See #516) but also the UI. This was mostly an experiment for myself in context of potential simplification for non-technical users.

	Before	After
Profile page
Login with a singular alternative
Login with multiple alternatives		I don't love the stacked buttons, but i equally don't love the hidden list.

The buttons are a bit much, especially with multiple of them, so I also experimented with keeping the existing grey text:	Single	Multiple

It's obvious why the expander list was chosen when multiple other methods are enabled, but it doesn't provide a better interface, only a slightly cleaner one. I also now wish I hadn't kept with the capitals in the sentences, but I've made the screenshots.

[jeffpaul]

I concur that the buttons are a bit much and that the grey links "looks better". A slight tweak to capitalize Code in Emailed Code to match the case of the other two links would make things look "more similar" on those.

[jeffpaul]

An alternative to the experimental designs here could be to mimic how GitHub handles the alternate methods. Specifically meaning in a second rounded square section with context updated to our methods:

Having problems?

• [Try using an Emailed Code]()
• [Try using a Backup Code]()
• [Try using a Dummy Method]()

GitHub example screenshot:

[ironprogrammer]

@dd32, the simplified text on the profile page example reads much better! 👍🏻

I like how @jeffpaul's GitHub example more clearly delineates the alternates. It's a stronger implication to "try these instead." Using TOTP seems better than burning a backup code. For this reason, it may not be a bad thing for the language to hint that the alternates are for when they're having trouble with TOTP 🤷🏻.

[paulschreiber]

The term "U2F" is no longer used and the technology has not been supported in browsers for over a year. Just "Security Key" is fine. See also #427.

[dd32]

The term "U2F" is no longer used

Just noting that this PR doesn't touch anything related to U2F, the U2F references in the screenshots are simply due to #427 not being finalised yet.

[dd32]

Rebased and re-merged this a few times.. Using the discussion above, I took a step back and came up with a simpler direction here.

• Restored back to the existing alternatives-ui, but with minor tweaking to the wording and display.
• Renamed 'Backup Codes' to 'Recovery Codes' to better suit their purpose.

	Before	After
Profile page
Login with a singular alternative
Login with multiple alternatives

[ironprogrammer]

@dd32 I like how these screens have evolved. Definitely more clear and consistent (with itself and with other 2FA flows I'm familiar with). Looks great!

[jeffpaul]

I concur, this looks great and I don't see any reason to continue iterating. Would be fine by me to merge this in and we can iterate later with any community/user feedback.