Ticket #42888: 42888.diff

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" id="wp-show-login-pass" aria-label="<?php esc_attr_e( 'Show/hide password' ) ; ?>">
+                                <span id="wp-show-login-pass-icon" class="dashicons dashicons-hidden"></span>
+                        </button>
+                </label>
         </p>
         <?php
         /**
@@ -1117 +1121 @@
         } catch(e){}
         }());
         <?php } ?>
+        window.onload = function ( ) {
+                var show_pass = document.querySelector( '#wp-show-login-pass' );
+                show_pass.onclick = function (e) {
+                        var ev = e || window.event;
+                        var pass = document.querySelector( '#user_pass' );
+                        var icon = document.querySelector( '#wp-show-login-pass-icon' );
+                        if ( pass.getAttribute( 'type' ) !== 'password' ) {
+                                pass.setAttribute( 'type', 'password' );
+                                icon.setAttribute( 'class', 'dashicons dashicons-hidden' );
+                        } else {
+                                pass.setAttribute( 'type', 'text' );
+                                icon.setAttribute( 'class', 'dashicons dashicons-visibility' );
+                        }
+                }
+        }
         </script>
+        <style>
+        label[for="user_pass"] {
+                position: relative;
+        }
+        #wp-show-login-pass {
+                position: absolute;
+                top: 2em;
+                right: 1em;
+                border: 0 none;
+                background: none;
+        }
+        </style>
 
         <?php
         login_footer();