UX: Focus the confirmation code field while configuring the TOTP method

[simonwheatley]

When configuring the “Time Based One-time Password” (TOTP) method the process is to scan a QR code, then enter a confirmation code generated from your TOTP app.

It would be convenient if the UI focussed the field to enter the confirmation code, so you didn’t need to mouse or tab into it manually.

[georgestephanis]

Worth doing.

[zaneselvans]

I found the mental and physical separation between the TOTP code field and the "update profile" button (at the bottom of the page, off-screen) confusing when I set this up. Adding another button right beneath the code field which does the same action as the update profile button -- and is obviously meant to be clicked after the code has been entered -- would make this feel much smoother. It could only become clickable when 6 digits are entered in the field. As it was, enough time had passed between my entering the code and finally clicking "update profile" that TOTP failed to register, but it did so silently. Then I attempted to log in w/ 2FA in a private browser window, and it told me to use my backup codes, which was very confusing.

[wturrell]

While I'm doing pull-requests... here's a one line diff that modifies the inline jQuery to autofocus the field when the TOTP DIV expands. I'd submit a PR, but I'm having Grunt issues trying to compile the JS (Can't find config file: .jshintrc):

--- a/htdocs/wp-content/plugins/two-factor/providers/class.two-factor-totp.php
+++ b/htdocs/wp-content/plugins/two-factor/providers/class.two-factor-totp.php
@@ -78,7 +78,7 @@ class Two_Factor_Totp extends Two_Factor_Provider {
                        $key = $this->generate_key();
                        $site_name = get_bloginfo( 'name', 'display' );
                        ?>
-                       <a href="javascript:;" onclick="jQuery('#two-factor-totp-options').toggle();"><?php esc_html_e( 'View Options &rarr;', 'two-factor' ); ?></a>
+                       <a href="javascript:;" onclick="jQuery('#two-factor-totp-options').toggle();jQuery('#two-factor-totp-authcode').focus();"><?php esc_html_e( 'View Options &rarr;', 'two-factor' ); ?></a>
                        <div id="two-factor-totp-options" style="display:none;">
                                        <img src="<?php echo esc_url( $this->get_google_qr_code( $site_name . ':' . $user->user_login, $key, $site_name ) ); ?>" id="two-factor-totp-qrcode" />
                                        <p><strong><?php echo esc_html( $key ); ?></strong></p>

[thrijith]

Before I start on this, can anyone please confirm the change is to focus in Authentication Code: input if Enabled/Primary is checked for Authenticator app?

Also there seems to be changes to markup since last comment so the jQuery based solution shown may not be applicable.

[jeffpaul]

@thrijith yes if the checkbox gets enabled for Authenticator app then focusing into the Authentication Code field is what's desired here