Make WordPress Core

Changeset 33362


Ignore:
Timestamp:
07/22/2015 04:55:17 PM (9 years ago)
Author:
markjaquith
Message:

Make password field toggling work in IE8, and clean up a bunch of password CSS issues.

fixes #32886
props peterwilsoncc, adamsilverstein

Location:
trunk/src/wp-admin
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/forms.css

    r33331 r33362  
    480480}
    481481
    482 #pass1.short {
     482#pass1.short, #pass1-text.short {
    483483    border-color: #e35b5b;
    484484}
    485485
    486 #pass1.bad {
     486#pass1.bad, #pass1-text.bad {
    487487    border-color: #f78b53;
    488488}
    489489
    490 #pass1.good {
     490#pass1.good, #pass1-text.good {
    491491    border-color: #ffc733;
    492492}
    493493
    494 #pass1.strong {
     494#pass1.strong, #pass1-text.strong {
    495495    border-color: #83c373;
    496496}
     
    502502.indicator-hint {
    503503    padding-top: 8px;
     504}
     505
     506#pass1-text,
     507.show-password #pass1 {
     508    display: none;
     509}
     510
     511.show-password #pass1-text
     512{
     513    display: inline-block;
     514}
     515
     516.form-table span.description.important {
     517    font-size: 12px;
    504518}
    505519
  • trunk/src/wp-admin/css/install.css

    r33275 r33362  
    206206    border: 1px solid #ddd;
    207207    color: #23282d;
     208    margin: -2px 5px 5px 0px;
     209    padding: 3px 5px;
     210    text-align: center;
     211    width: 218px;
    208212    -webkit-box-sizing: border-box;
    209213    -moz-box-sizing: border-box;
    210214    box-sizing: border-box;
    211215    opacity: 0;
    212     padding: 3px 5px;
    213     text-align: center;
    214     width: 218px;
    215216}
    216217
     
    239240}
    240241
    241 [name="admin_password"].short {
     242#pass1.short, #pass1-text.short {
    242243    border-color: #e35b5b;
    243244}
    244245
    245 [name="admin_password"].bad {
     246#pass1.bad, #pass1-text.bad {
    246247    border-color: #f78b53;
    247248}
    248249
    249 [name="admin_password"].good {
     250#pass1.good, #pass1-text.good {
    250251    border-color: #ffc733;
    251252}
    252253
    253 [name="admin_password"].strong {
     254#pass1.strong, #pass1-text.strong {
    254255    border-color: #83c373;
    255256}
     
    277278#pass2 {
    278279    direction: ltr;
     280}
     281
     282#pass1-text,
     283.show-password #pass1 {
     284    display: none;
     285}
     286
     287.show-password #pass1-text
     288{
     289    display: inline-block;
     290}
     291
     292.form-table span.description.important {
     293    font-size: 12px;
    279294}
    280295
  • trunk/src/wp-admin/install.php

    r33353 r33362  
    138138            </th>
    139139            <td>
    140                 <button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
    141                 <div class="wp-pwd hide-if-js">
     140                <div class="">
    142141                    <?php $initial_password = wp_generate_password( 24 ); ?>
    143142                    <input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
     
    148147                    <div id="pass-strength-result" aria-live="polite"></div>
    149148                </div>
    150                 <p><span class="description hide-if-no-js"><?php _e( 'A password reset link will be sent to you via email.' ); ?></span></p>
     149                <p><span class="description important hide-if-no-js">
     150                <strong><?php _e( 'Important:' )?></strong> <?php _e( 'You will need this password to log in, please store it in a secure location.' ); ?></span></p>
    151151            </td>
    152152        </tr>
  • trunk/src/wp-admin/js/user-profile.js

    r33353 r33362  
    1 /* global ajaxurl, pwsL10n, userProfileL10n */
     1/* global ajaxurl, pwsL10n */
    22(function($){
    33    $(function(){
     
    1414            pw_submitbtn_new = $( '#createusersub' ),
    1515            pw_checkbox = $('.pw-checkbox'),
    16             pw_weak = $('.pw-weak')
    17         ;
    18 
     16            pw_weak = $('.pw-weak'),
     17            // Set up a text version of the password input
     18            newField = document.createElement( 'input');
     19            newField.type = 'text';
     20
     21            var pwFieldText = $( newField );
     22
     23        if ( pw_field.length > 0 ) {
     24            pwFieldText
     25                .attr( {
     26                    'id':           'pass1-text',
     27                    'name':         'pass1-text',
     28                    'autocomplete': 'off'
     29                } )
     30                .addClass( pw_field[0].className )
     31                .data( 'pw', pw_field.data( 'pw' ) )
     32                .val( pw_field.val() );
     33
     34            pw_field
     35                .wrap( '<span class="password-input-wrapper"></span>' )
     36                .after( pwFieldText );
     37        }
     38
     39        var pwWrapper = pw_field.parent();
    1940        var generatePassword = window.generatePassword = function() {
    2041            if ( typeof zxcvbn !== 'function' ) {
     
    2344                pw_field.val( pw_field.data( 'pw' ) );
    2445                pw_field.trigger( 'propertychange' );
    25                 pw_field.attr( 'type', 'text' ).focus();
    26                 pw_field[0].setSelectionRange(100, 100);
     46                pwWrapper.addClass( 'show-password' );
    2747            }
    2848        };
     
    3252        pw_togglebtn.show();
    3353        pw_generatebtn.show();
    34 
    3554        if ( pw_field.data( 'reveal' ) == 1 ) {
    3655            generatePassword();
     
    3958        parentform.on('submit', function(){
    4059            pw_field2.val( pw_field.val() );
    41             pw_field.attr('type', 'password');
    42         });
     60            pwWrapper.removeClass( 'show-password' );
     61        });
     62
     63        pwFieldText.on( 'input', function(){
     64            pw_field.val( pwFieldText.val() );
     65            pw_field.trigger( 'propertychange' );
     66        } );
    4367
    4468
     
    4670            setTimeout( function(){
    4771                var cssClass = pw_strength.attr('class');
    48                 pw_field.removeClass( 'short bad good strong' );
     72                pwFieldText.val( pw_field.val() );
     73                pw_field.add(pwFieldText).removeClass( 'short bad good strong' );
    4974                if ( 'undefined' !== typeof cssClass ) {
    50                     pw_field.addClass( cssClass );
     75                    pw_field.add(pwFieldText).addClass( cssClass );
    5176                    if ( cssClass == 'short' || cssClass == 'bad' ) {
    5277                        if ( ! pw_checkbox.attr( 'checked' ) ) {
     
    89114            pw_line.show();
    90115            generatePassword();
    91         });
     116            _.defer( function() {
     117                pwFieldText.focus();
     118                if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) {
     119                    pwFieldText[0].setSelectionRange( 0, 100 );
     120                }
     121            }, 0 );
     122
     123        });
     124
    92125
    93126        pw_togglebtn.on( 'click', function() {
    94127            var show = pw_togglebtn.attr( 'data-toggle' );
    95128            if ( show == 1 ) {
    96                 pw_field.attr( 'type', 'text' );
     129                pwWrapper.addClass( 'show-password' );
    97130                pw_togglebtn.attr({ 'data-toggle': 0, 'aria-label': userProfileL10n.ariaHide })
    98131                    .find( '.text' ).text( userProfileL10n.hide )
    99132                ;
     133                pwFieldText.focus();
     134                if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) {
     135                    pwFieldText[0].setSelectionRange( 0, 100 );
     136                }
    100137            } else {
    101                 pw_field.attr( 'type', 'password' );
     138                pwWrapper.removeClass( 'show-password' );
    102139                pw_togglebtn.attr({ 'data-toggle': 1, 'aria-label': userProfileL10n.ariaShow })
    103                     .find( '.text' ).text( userProfileL10n.show )
    104                 ;
    105             }
    106             pw_field.focus();
    107             pw_field[0].setSelectionRange(100, 100);
     140                    .find( '.text' ).text( userProfileL10n.show );
     141                pw_field.focus();
     142                if ( ! _.isUndefined( pw_field[0].setSelectionRange ) ) {
     143                    pw_field[0].setSelectionRange( 0, 100 );
     144                }
     145            }
     146
    108147        });
    109148    });
Note: See TracChangeset for help on using the changeset viewer.