Changeset 11380

Timestamp:

12/16/2021 04:11:41 AM (3 years ago)

Author:

dd32

Message:

Login: Add a 'show password' / 'hide password' button to password inputs, for consistency with wp-login.php.

Fixes #5850.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login

Files:

• functions.php (modified) (2 diffs)
• login.php (modified) (2 diffs)
• pending-create.php (modified) (1 diff)
• stylesheets/login.css (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/functions.php

@@ -65 +65 @@
  */
 function wporg_login_replace_css() {
-    wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons' ), '20210517' );
+    wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons' ), '20211216' );
 }
 add_action( 'login_init', 'wporg_login_replace_css' );
@@ -81 +81 @@
 
     wp_enqueue_style( 'wporg-normalize', get_template_directory_uri() . '/stylesheets/normalize.css', 3 );
-    wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons' ), '20210517' );
+    wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons' ), '20211216' );
 }
 add_action( 'wp_enqueue_scripts', 'wporg_login_scripts' );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/login.php

@@ -29 +29 @@
     <p class="login-password">
         <label for="user_pass"><?php _e( 'Password', 'wporg-login' ); ?></label>
-        <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
+        <span class="wp-pwd" style="display:block;">
+            <input type="password" name="pwd" id="user_pass" class="input password-input" value="" size="20" />
+            <button type="button" id="wp-hide-pw" class="button button-secondary wp-hide-pw hide-if-no-js" aria-label="<?php esc_attr_e( 'Show password', 'wporg-login' ); ?>">
+                <span class="dashicons dashicons-visibility" aria-hidden="true"></span>
+            </button>
+        </span>
     </p>
     <p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> <?php _e( 'Remember Me', 'wporg-login' ); ?></label></p>
@@ -52 +57 @@
         d.focus();
         d.select();
+
+        var h = document.getElementById( 'wp-hide-pw' );
+        h.onclick = function() {
+            var p = document.getElementById( 'user_pass' );
+            if ( p.type === 'password' ) {
+                p.type = 'text';
+                h.ariaLabel = <?php echo json_encode( __( 'Hide password', 'wporg-login' ) ); ?>;
+                h.children[0].className = 'dashicons dashicons-hidden';
+            } else {
+                p.type = 'password';
+                h.ariaLabel = <?php echo json_encode( __( 'Show password', 'wporg-login' ) ); ?>;
+                h.children[0].className = 'dashicons dashicons-visibility';
+            }
+        }
     } catch( e ){}
 }, 200 );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/pending-create.php

@@ -167 +167 @@
                 <input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="user_pass" id="pass1" class="input" size="20" value="" autocomplete="off" aria-describedby="pass-strength-result" />
             </span>
+
+            <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" aria-label="<?php esc_attr_e( 'Hide password', 'wporg-login' ); ?>">
+                <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
+            </button>
             <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator', 'wporg' ); ?></div>
         </div>

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/stylesheets/login.css

@@ -346 +346 @@
 }
 
+body.route-root #login form span.wp-pwd {
+    display: block;
+}
+
 body.login form input.input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
     opacity: 0.5;