Make text spacing and buttons consistent between TOTP and Backup Code screens

[ironprogrammer]

I have two small visual suggestions:

• In the TOTP window, an empty line should be inserted between the instructions and field label.
• In the Backup Code window, change the "Submit" button to read "Authenticate" for consistency with the TOTP screen. This action word makes sense regardless of the authentication method employed.

Figure 1: Animation comparing TOTP and Backup Code entry screens.

[iandunn]

( that UI comes from the Two Factor plugin, so I'm gonna move this issue there )

---

Adding the blank line makes sense to me 👍🏻

I'm not sure if Authenticate is a word most users will be familiar with, but Submit isn't either. I wonder if there's a better one? Maybe just Log in, since that's what will happen if the code is successful? I don't feel strongly about any of that, though.

[jeffpaul]

Verify or Verify code perhaps?

[dd32]

In the TOTP window, an empty line should be inserted between the instructions and field label.

This was resolved through #521 I believe.

change the "Submit" button to read "Authenticate" for consistency with the TOTP screen.

• Backup/Recovery Codes: Submit
• TOTP: Authenticate
• Email: Log In
• Dummy: Yup

I think Continue works the best IMHO, even though a minority of the examples below use it. I would be equally happy with Verify though, as both are descriptive of the action taking place "Verify this code is correct and login" "Continue login with this code", where as "Submit this Code", "Log In with this code" and "Authenticate with this code" don't feel quite the same.

Similar to https://github.com/WordPress/two-factor/issues/486#issuecomment-1308153183 I've gone through and looked at various other UI's

WordPress.com	GitHub	Amazon	Google

Microsoft	Stripe	Instagram	Mastodon

[dd32]

Another aspect worthwhile considering here is the action for Security keys, which may want/need to include an explicit user-interaction step to trigger it. While I don't think it would prevent any phrases above, it would be nice for consistency.

• It appears as if the existing u2f integration just prompts immediately.
• It appears that #427 & #491 prompts immediately, with a fallback link of Connect to Authenticator.
• It appears that the two-factor-provider-webauthn plugin also prompts immediately, but has a Retry fallback button instead

An example of an explicit user-interaction step is GitHub:

https://user-images.githubusercontent.com/767313/235079038-c1026d0c-f8f5-4af7-b6e6-a670574c8081.mov