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