Making WordPress.org

Changeset 11380


Ignore:
Timestamp:
12/16/2021 04:11:41 AM (2 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:
4 edited

Legend:

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

    r11379 r11380  
    6565 */
    6666function wporg_login_replace_css() {
    67     wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons' ), '20210517' );
     67    wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons' ), '20211216' );
    6868}
    6969add_action( 'login_init', 'wporg_login_replace_css' );
     
    8181
    8282    wp_enqueue_style( 'wporg-normalize', get_template_directory_uri() . '/stylesheets/normalize.css', 3 );
    83     wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons' ), '20210517' );
     83    wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons' ), '20211216' );
    8484}
    8585add_action( 'wp_enqueue_scripts', 'wporg_login_scripts' );
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/login.php

    r11379 r11380  
    2929    <p class="login-password">
    3030        <label for="user_pass"><?php _e( 'Password', 'wporg-login' ); ?></label>
    31         <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
     31        <span class="wp-pwd" style="display:block;">
     32            <input type="password" name="pwd" id="user_pass" class="input password-input" value="" size="20" />
     33            <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' ); ?>">
     34                <span class="dashicons dashicons-visibility" aria-hidden="true"></span>
     35            </button>
     36        </span>
    3237    </p>
    3338    <p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> <?php _e( 'Remember Me', 'wporg-login' ); ?></label></p>
     
    5257        d.focus();
    5358        d.select();
     59
     60        var h = document.getElementById( 'wp-hide-pw' );
     61        h.onclick = function() {
     62            var p = document.getElementById( 'user_pass' );
     63            if ( p.type === 'password' ) {
     64                p.type = 'text';
     65                h.ariaLabel = <?php echo json_encode( __( 'Hide password', 'wporg-login' ) ); ?>;
     66                h.children[0].className = 'dashicons dashicons-hidden';
     67            } else {
     68                p.type = 'password';
     69                h.ariaLabel = <?php echo json_encode( __( 'Show password', 'wporg-login' ) ); ?>;
     70                h.children[0].className = 'dashicons dashicons-visibility';
     71            }
     72        }
    5473    } catch( e ){}
    5574}, 200 );
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/pending-create.php

    r11046 r11380  
    167167                <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" />
    168168            </span>
     169
     170            <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" aria-label="<?php esc_attr_e( 'Hide password', 'wporg-login' ); ?>">
     171                <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
     172            </button>
    169173            <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator', 'wporg' ); ?></div>
    170174        </div>
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/stylesheets/login.css

    r10981 r11380  
    346346}
    347347
     348body.route-root #login form span.wp-pwd {
     349    display: block;
     350}
     351
    348352body.login form input.input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    349353    opacity: 0.5;
Note: See TracChangeset for help on using the changeset viewer.