Make password field toggling work in IE8, and clean up a bunch of password CSS issues.
fixes #32886 props peterwilsoncc, adamsilverstein git-svn-id: https://develop.svn.wordpress.org/trunk@33362 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Mark Jaquith
parent
7b41adf712
commit
d1a1e77e40
|
|
@ -479,19 +479,19 @@ fieldset label,
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
#pass1.short {
|
||||
#pass1.short, #pass1-text.short {
|
||||
border-color: #e35b5b;
|
||||
}
|
||||
|
||||
#pass1.bad {
|
||||
#pass1.bad, #pass1-text.bad {
|
||||
border-color: #f78b53;
|
||||
}
|
||||
|
||||
#pass1.good {
|
||||
#pass1.good, #pass1-text.good {
|
||||
border-color: #ffc733;
|
||||
}
|
||||
|
||||
#pass1.strong {
|
||||
#pass1.strong, #pass1-text.strong {
|
||||
border-color: #83c373;
|
||||
}
|
||||
|
||||
|
|
@ -503,6 +503,20 @@ fieldset label,
|
|||
padding-top: 8px;
|
||||
}
|
||||
|
||||
#pass1-text,
|
||||
.show-password #pass1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-password #pass1-text
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-table span.description.important {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
p.search-box {
|
||||
float: right;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -205,13 +205,14 @@ submit {
|
|||
background-color: #eee;
|
||||
border: 1px solid #ddd;
|
||||
color: #23282d;
|
||||
margin: -2px 5px 5px 0px;
|
||||
padding: 3px 5px;
|
||||
text-align: center;
|
||||
width: 218px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
opacity: 0;
|
||||
padding: 3px 5px;
|
||||
text-align: center;
|
||||
width: 218px;
|
||||
}
|
||||
|
||||
#pass-strength-result.short {
|
||||
|
|
@ -238,19 +239,19 @@ submit {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
[name="admin_password"].short {
|
||||
#pass1.short, #pass1-text.short {
|
||||
border-color: #e35b5b;
|
||||
}
|
||||
|
||||
[name="admin_password"].bad {
|
||||
#pass1.bad, #pass1-text.bad {
|
||||
border-color: #f78b53;
|
||||
}
|
||||
|
||||
[name="admin_password"].good {
|
||||
#pass1.good, #pass1-text.good {
|
||||
border-color: #ffc733;
|
||||
}
|
||||
|
||||
[name="admin_password"].strong {
|
||||
#pass1.strong, #pass1-text.strong {
|
||||
border-color: #83c373;
|
||||
}
|
||||
|
||||
|
|
@ -278,6 +279,20 @@ submit {
|
|||
direction: ltr;
|
||||
}
|
||||
|
||||
#pass1-text,
|
||||
.show-password #pass1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-password #pass1-text
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-table span.description.important {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
/* localization */
|
||||
body.rtl,
|
||||
|
|
|
|||
|
|
@ -137,8 +137,7 @@ function display_setup_form( $error = null ) {
|
|||
</label>
|
||||
</th>
|
||||
<td>
|
||||
<button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
|
||||
<div class="wp-pwd hide-if-js">
|
||||
<div class="">
|
||||
<?php $initial_password = wp_generate_password( 24 ); ?>
|
||||
<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" />
|
||||
<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
|
||||
|
|
@ -147,7 +146,8 @@ function display_setup_form( $error = null ) {
|
|||
</button>
|
||||
<div id="pass-strength-result" aria-live="polite"></div>
|
||||
</div>
|
||||
<p><span class="description hide-if-no-js"><?php _e( 'A password reset link will be sent to you via email.' ); ?></span></p>
|
||||
<p><span class="description important hide-if-no-js">
|
||||
<strong><?php _e( 'Important:' )?></strong> <?php _e( 'You will need this password to log in, please store it in a secure location.' ); ?></span></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="form-field form-required user-pass2-wrap hide-if-js">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* global ajaxurl, pwsL10n, userProfileL10n */
|
||||
/* global ajaxurl, pwsL10n */
|
||||
(function($){
|
||||
$(function(){
|
||||
var pw_new = $('.user-pass1-wrap'),
|
||||
|
|
@ -13,17 +13,37 @@
|
|||
pw_submitbtn_edit = $('#submit'),
|
||||
pw_submitbtn_new = $( '#createusersub' ),
|
||||
pw_checkbox = $('.pw-checkbox'),
|
||||
pw_weak = $('.pw-weak')
|
||||
;
|
||||
pw_weak = $('.pw-weak'),
|
||||
// Set up a text version of the password input
|
||||
newField = document.createElement( 'input');
|
||||
newField.type = 'text';
|
||||
|
||||
var pwFieldText = $( newField );
|
||||
|
||||
if ( pw_field.length > 0 ) {
|
||||
pwFieldText
|
||||
.attr( {
|
||||
'id': 'pass1-text',
|
||||
'name': 'pass1-text',
|
||||
'autocomplete': 'off'
|
||||
} )
|
||||
.addClass( pw_field[0].className )
|
||||
.data( 'pw', pw_field.data( 'pw' ) )
|
||||
.val( pw_field.val() );
|
||||
|
||||
pw_field
|
||||
.wrap( '<span class="password-input-wrapper"></span>' )
|
||||
.after( pwFieldText );
|
||||
}
|
||||
|
||||
var pwWrapper = pw_field.parent();
|
||||
var generatePassword = window.generatePassword = function() {
|
||||
if ( typeof zxcvbn !== 'function' ) {
|
||||
setTimeout( generatePassword, 50 );
|
||||
} else {
|
||||
pw_field.val( pw_field.data( 'pw' ) );
|
||||
pw_field.trigger( 'propertychange' );
|
||||
pw_field.attr( 'type', 'text' ).focus();
|
||||
pw_field[0].setSelectionRange(100, 100);
|
||||
pwWrapper.addClass( 'show-password' );
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -31,23 +51,28 @@
|
|||
pw_line.hide();
|
||||
pw_togglebtn.show();
|
||||
pw_generatebtn.show();
|
||||
|
||||
if ( pw_field.data( 'reveal' ) == 1 ) {
|
||||
generatePassword();
|
||||
}
|
||||
|
||||
parentform.on('submit', function(){
|
||||
pw_field2.val( pw_field.val() );
|
||||
pw_field.attr('type', 'password');
|
||||
pwWrapper.removeClass( 'show-password' );
|
||||
});
|
||||
|
||||
pwFieldText.on( 'input', function(){
|
||||
pw_field.val( pwFieldText.val() );
|
||||
pw_field.trigger( 'propertychange' );
|
||||
} );
|
||||
|
||||
|
||||
pw_field.on('input propertychange', function(){
|
||||
setTimeout( function(){
|
||||
var cssClass = pw_strength.attr('class');
|
||||
pw_field.removeClass( 'short bad good strong' );
|
||||
pwFieldText.val( pw_field.val() );
|
||||
pw_field.add(pwFieldText).removeClass( 'short bad good strong' );
|
||||
if ( 'undefined' !== typeof cssClass ) {
|
||||
pw_field.addClass( cssClass );
|
||||
pw_field.add(pwFieldText).addClass( cssClass );
|
||||
if ( cssClass == 'short' || cssClass == 'bad' ) {
|
||||
if ( ! pw_checkbox.attr( 'checked' ) ) {
|
||||
pw_submitbtn_new.attr( 'disabled','disabled' );
|
||||
|
|
@ -88,23 +113,37 @@
|
|||
pw_generatebtn.hide();
|
||||
pw_line.show();
|
||||
generatePassword();
|
||||
_.defer( function() {
|
||||
pwFieldText.focus();
|
||||
if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) {
|
||||
pwFieldText[0].setSelectionRange( 0, 100 );
|
||||
}
|
||||
}, 0 );
|
||||
|
||||
});
|
||||
|
||||
|
||||
pw_togglebtn.on( 'click', function() {
|
||||
var show = pw_togglebtn.attr( 'data-toggle' );
|
||||
if ( show == 1 ) {
|
||||
pw_field.attr( 'type', 'text' );
|
||||
pwWrapper.addClass( 'show-password' );
|
||||
pw_togglebtn.attr({ 'data-toggle': 0, 'aria-label': userProfileL10n.ariaHide })
|
||||
.find( '.text' ).text( userProfileL10n.hide )
|
||||
;
|
||||
pwFieldText.focus();
|
||||
if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) {
|
||||
pwFieldText[0].setSelectionRange( 0, 100 );
|
||||
}
|
||||
} else {
|
||||
pw_field.attr( 'type', 'password' );
|
||||
pwWrapper.removeClass( 'show-password' );
|
||||
pw_togglebtn.attr({ 'data-toggle': 1, 'aria-label': userProfileL10n.ariaShow })
|
||||
.find( '.text' ).text( userProfileL10n.show )
|
||||
;
|
||||
.find( '.text' ).text( userProfileL10n.show );
|
||||
pw_field.focus();
|
||||
if ( ! _.isUndefined( pw_field[0].setSelectionRange ) ) {
|
||||
pw_field[0].setSelectionRange( 0, 100 );
|
||||
}
|
||||
}
|
||||
pw_field.focus();
|
||||
pw_field[0].setSelectionRange(100, 100);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue