Ticket #42888: 42888-2.diff

src/wp-admin/css/login.css

@@ -202 +202 @@
         margin: 2px 6px 16px 0;
 }
 
+.login form label[for="user_pass"] {
+        position: relative;
+}
+
+.login form #user_pass {
+        padding-right: 33px;
+}
+
+.login form .wp-hide-pw {
+        position: absolute;
+        top: 2em;
+        right: 1em;
+        border: 0 none;
+        background: none;
+}
+
 .login form .input,
 .login input[type="text"],
 .login form input[type="checkbox"] {

src/wp-login.php

@@ -1029 +1029 @@
         </p>
         <p>
                 <label for="user_pass"><?php _e( 'Password' ); ?><br />
-                <input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input" value="" size="20" /></label>
+                        <input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input" value="" size="20" />
+                        <button type="button" class="wp-hide-pw" aria-label="<?php esc_attr_e( 'Show password' ) ; ?>">
+                                <span class="dashicons dashicons-visibility"></span>
+                        </button>
+                </label>
         </p>
         <?php
         /**
@@ -1117 +1121 @@
         } catch(e){}
         }());
         <?php } ?>
+        window.onload = function ( ) {
+                var show_pass = document.querySelector( '.wp-hide-pw' );
+                show_pass.onclick = function (e) {
+                        var ev = e || window.event;
+                        var pass = document.querySelector( '#user_pass' );
+                        var icon = document.querySelector( '.wp-hide-pw span' );
+                        if ( pass.getAttribute( 'type' ) !== 'password' ) {
+                                pass.setAttribute( 'type', 'password' );
+                                icon.setAttribute( 'class', 'dashicons dashicons-visibility' );
+                        } else {
+                                pass.setAttribute( 'type', 'text' );
+                                icon.setAttribute( 'class', 'dashicons dashicons-hidden' );
+                        }
+                }
+        }
         </script>
 
         <?php