Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
simonwheatley opened this issue Mar 27, 2017 · 5 comments · May be fixed by #645
Open

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

simonwheatley opened this issue Mar 27, 2017 · 5 comments · May be fixed by #645
Assignees
Labels
Enhancement TOTP Time-based One-time Passwords
Milestone

Comments

@simonwheatley
Copy link

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.

@joshbetz joshbetz added the TOTP Time-based One-time Passwords label Mar 27, 2017
@georgestephanis
Copy link
Collaborator

Worth doing.

@zaneselvans
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

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?

CleanShot 2024-09-26 at 16 59 11@2x

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

@jeffpaul
Copy link
Member

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

@thrijith thrijith linked a pull request Oct 24, 2024 that will close this issue
@jeffpaul jeffpaul modified the milestones: 0.11.0, 0.10.0 Oct 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Enhancement TOTP Time-based One-time Passwords
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants