Make 2FA terminology consistent between login and auth configuration screens

[ironprogrammer]

It's possible that some users may not be wholly familiar with 2FA terminology, so it may be helpful to consistently label and describe these options between the login and configuration screens.

For instance, the terms "single use" and "TOTP" do not appear on the 2FA setup screens, but are used to describe the alternate methods for authenticating during login.

On login screens:

On the account security screen:

[iandunn]

That's a good point, it stems from the fact that the login screen is created by the upstream plugin, and the Account screen is our custom UI.

I think the upstream strings are more targeted at a technical audience, which probably made sense when it was first developed. It may be better to update them to be more user-friendly given it's current status as a feature plugin, though.

We could determine what the ideal phasing is, and then update both to match if there's a consensus.

cc @jeffpaul , @kasparsd, @jasmussen, @thetinyl, @bengreeley

[dd32]

I personally wish the upstream UI for TOTP and Backup codes were merged - You shouldn't need to select between them if the Backup Codes are appropriately unique (They're 8 digits, compared to TOTP 6 digits to make it easier).

Likewise, the authentication screen should be able to prompt for WebauthN or TOTP on the same screen without a page reload IMHO, at most a JS DOM change.

[jasmussen]

Just text-wise, the simpler the better in my experience. So just as a provocation: what if the first paragraph was simply removed? And it just said: Verification code: [ input ]?

Might be too little. But is there a generic description that would work for both cases?

[dd32]

Submitted https://github.com/WordPress/two-factor/pull/519 upstream to make the UI more consistent and add a CSS class we can use to hide the text if wanted.