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

Timestamp:

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

Author:

dd32

Message:

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

Fixes #5850.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/login.php (modified) (2 diffs)

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 );