Passwords UI: clean up the new JS in wp-admin/js/user-profile.js.
Instead of wrapping `#pass1` in a `<span>` dynamically, add the `<span>` to the HTML in PHP. It currently has no styling. Fixes #33145. git-svn-id: https://develop.svn.wordpress.org/trunk@33450 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Scott Taylor
parent
99cd8b540b
commit
68ff8b1a80
@ -1,174 +1,195 @@
|
||||
/* global ajaxurl, pwsL10n, userProfileL10n */
|
||||
(function($){
|
||||
$(function(){
|
||||
var pw_new = $('.user-pass1-wrap'),
|
||||
pw_line = pw_new.find('.wp-pwd'),
|
||||
pw_field = $('#pass1'),
|
||||
pw_field2 = $('#pass2'),
|
||||
pw_togglebtn = pw_new.find('.wp-hide-pw'),
|
||||
pw_generatebtn = pw_new.find('button.wp-generate-pw'),
|
||||
pw_cancelbtn = pw_new.find('button.wp-cancel-pw'),
|
||||
pw_2 = $('.user-pass2-wrap'),
|
||||
parentform = pw_new.closest('form'),
|
||||
pw_strength = $('#pass-strength-result'),
|
||||
pw_submitbtn_edit = $('#submit'),
|
||||
pw_submitbtn_new = $( '#createusersub' ),
|
||||
pw_checkbox = $('.pw-checkbox'),
|
||||
pw_weak = $('.pw-weak'),
|
||||
pw_update_lock = false,
|
||||
// Set up a text version of the password input
|
||||
newField = document.createElement( 'input');
|
||||
(function($) {
|
||||
var updateLock = false,
|
||||
|
||||
newField.type = 'text';
|
||||
$pass1Row,
|
||||
$pass1Wrap,
|
||||
$pass1,
|
||||
$pass1Text,
|
||||
|
||||
var pwFieldText = $( newField );
|
||||
$pass2,
|
||||
|
||||
if ( pw_field.length > 0 ) {
|
||||
pwFieldText
|
||||
$weakRow,
|
||||
$weakCheckbox,
|
||||
|
||||
$submitButtons,
|
||||
$submitButton;
|
||||
|
||||
function generatePassword() {
|
||||
if ( typeof zxcvbn !== 'function' ) {
|
||||
setTimeout( generatePassword, 50 );
|
||||
} else {
|
||||
$pass1.val( $pass1.data( 'pw' ) );
|
||||
$pass1.trigger( 'propertychange' );
|
||||
$pass1Wrap.addClass( 'show-password' );
|
||||
}
|
||||
}
|
||||
|
||||
function bindPass1() {
|
||||
var passStrength = $('#pass-strength-result')[0];
|
||||
|
||||
$pass1Wrap = $pass1.parent();
|
||||
|
||||
$pass1Text = $( '<input type="text"/>' )
|
||||
.attr( {
|
||||
'id': 'pass1-text',
|
||||
'name': 'pass1-text',
|
||||
'autocomplete': 'off'
|
||||
} )
|
||||
.addClass( pw_field[0].className )
|
||||
.data( 'pw', pw_field.data( 'pw' ) )
|
||||
.val( pw_field.val() );
|
||||
.addClass( $pass1[0].className )
|
||||
.data( 'pw', $pass1.data( 'pw' ) )
|
||||
.val( $pass1.val() )
|
||||
.on( 'input', function () {
|
||||
$pass1.val( $pass1Text.val() ).trigger( 'propertychange' );
|
||||
} );
|
||||
|
||||
pw_field
|
||||
.wrap( '<span class="password-input-wrapper"></span>' )
|
||||
.after( pwFieldText );
|
||||
}
|
||||
$pass1.after( $pass1Text );
|
||||
|
||||
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' );
|
||||
pwWrapper.addClass( 'show-password' );
|
||||
}
|
||||
};
|
||||
|
||||
pw_2.hide();
|
||||
pw_line.hide();
|
||||
pw_togglebtn.show();
|
||||
pw_generatebtn.show();
|
||||
if ( pw_field.data( 'reveal' ) == 1 ) {
|
||||
if ( 1 === parseInt( $pass1.data( 'reveal' ), 10 ) ) {
|
||||
generatePassword();
|
||||
}
|
||||
|
||||
parentform.on('submit', function(){
|
||||
pw_update_lock = false;
|
||||
pw_field2.val( pw_field.val() );
|
||||
pwWrapper.removeClass( 'show-password' );
|
||||
});
|
||||
$pass1.on( 'input propertychange', function () {
|
||||
setTimeout( function () {
|
||||
$pass1Text.val( $pass1.val() );
|
||||
$pass1.add( $pass1Text ).removeClass( 'short bad good strong' );
|
||||
|
||||
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');
|
||||
pwFieldText.val( pw_field.val() );
|
||||
pw_field.add(pwFieldText).removeClass( 'short bad good strong' );
|
||||
if ( 'undefined' !== typeof cssClass ) {
|
||||
pw_field.add(pwFieldText).addClass( cssClass );
|
||||
if ( cssClass == 'short' || cssClass == 'bad' ) {
|
||||
if ( ! pw_checkbox.attr( 'checked' ) ) {
|
||||
pw_submitbtn_new.attr( 'disabled','disabled' );
|
||||
pw_submitbtn_edit.attr( 'disabled','disabled' );
|
||||
if ( passStrength.className ) {
|
||||
$pass1.add( $pass1Text ).addClass( passStrength.className );
|
||||
if ( 'short' === passStrength.className || 'bad' === passStrength.className ) {
|
||||
if ( ! $weakCheckbox.prop( 'checked' ) ) {
|
||||
$submitButtons.prop( 'disabled', true );
|
||||
}
|
||||
pw_weak.show();
|
||||
$weakRow.show();
|
||||
} else {
|
||||
pw_submitbtn_new.removeAttr( 'disabled' );
|
||||
pw_submitbtn_edit.removeAttr( 'disabled' );
|
||||
pw_weak.hide();
|
||||
$submitButtons.prop( 'disabled', false );
|
||||
$weakRow.hide();
|
||||
}
|
||||
}
|
||||
}, 1 );
|
||||
} );
|
||||
|
||||
pw_checkbox.change( function() {
|
||||
if ( pw_checkbox.attr( 'checked' ) ) {
|
||||
pw_submitbtn_new.removeAttr( 'disabled' );
|
||||
pw_submitbtn_edit.removeAttr( 'disabled' );
|
||||
} else {
|
||||
pw_submitbtn_new.attr( 'disabled','disabled' );
|
||||
pw_submitbtn_edit.attr( 'disabled','disabled' );
|
||||
}
|
||||
|
||||
function bindToggleButton() {
|
||||
var toggleButton = $pass1Row.find('.wp-hide-pw');
|
||||
toggleButton.show().on( 'click', function () {
|
||||
if ( 1 === parseInt( toggleButton.data( 'toggle' ), 10 ) ) {
|
||||
$pass1Wrap.addClass( 'show-password' );
|
||||
toggleButton
|
||||
.data( 'toggle', 0 )
|
||||
.attr({
|
||||
'aria-label': userProfileL10n.ariaHide
|
||||
})
|
||||
.find( '.text' )
|
||||
.text( userProfileL10n.hide )
|
||||
.end()
|
||||
.find( '.dashicons' )
|
||||
.removeClass('dashicons-visibility')
|
||||
.addClass('dashicons-hidden');
|
||||
|
||||
$pass1Text.focus();
|
||||
|
||||
if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
|
||||
$pass1Text[0].setSelectionRange( 0, 100 );
|
||||
}
|
||||
} else {
|
||||
$pass1Wrap.removeClass( 'show-password' );
|
||||
toggleButton
|
||||
.data( 'toggle', 1 )
|
||||
.attr({
|
||||
'aria-label': userProfileL10n.ariaShow
|
||||
})
|
||||
.find( '.text' )
|
||||
.text( userProfileL10n.show )
|
||||
.end()
|
||||
.find( '.dashicons' )
|
||||
.removeClass('dashicons-hidden')
|
||||
.addClass('dashicons-visibility');
|
||||
|
||||
$pass1.focus();
|
||||
|
||||
if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
|
||||
$pass1[0].setSelectionRange( 0, 100 );
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function bindPasswordForm() {
|
||||
var $passwordWrapper,
|
||||
$generateButton,
|
||||
$cancelButton;
|
||||
|
||||
$pass1Row = $('.user-pass1-wrap');
|
||||
// hide this
|
||||
$('.user-pass2-wrap').hide();
|
||||
|
||||
$submitButton = $( '#submit' ).on( 'click', function () {
|
||||
updateLock = false;
|
||||
});
|
||||
|
||||
$submitButtons = $submitButton.add( ' #createusersub' );
|
||||
|
||||
$weakRow = $( '.pw-weak' );
|
||||
$weakCheckbox = $weakRow.find( '.pw-checkbox' );
|
||||
$weakCheckbox.change( function() {
|
||||
$submitButtons.prop( 'disabled', ! $weakCheckbox.prop( 'checked' ) );
|
||||
} );
|
||||
|
||||
$pass1 = $('#pass1');
|
||||
if ( $pass1.length ) {
|
||||
bindPass1();
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix a LastPass mismatch issue, LastPass only changes pass2.
|
||||
*
|
||||
* This fixes the issue by copying any changes from the hidden
|
||||
* pass2 field to the pass1 field.
|
||||
*/
|
||||
pw_field2.on( 'input propertychange', function() {
|
||||
if ( pw_field2.val().length > 0 ) {
|
||||
pw_field.val( pw_field2.val() );
|
||||
pw_field.trigger( 'propertychange' );
|
||||
$pass2 = $('#pass2').on( 'input propertychange', function () {
|
||||
if ( $pass2.val().length > 0 ) {
|
||||
$pass1.val( $pass2.val() );
|
||||
$pass1.trigger( 'propertychange' );
|
||||
}
|
||||
} );
|
||||
|
||||
pw_new.on( 'click', 'button.wp-generate-pw', function(){
|
||||
pw_update_lock = true;
|
||||
pw_generatebtn.hide();
|
||||
pw_line.show();
|
||||
$passwordWrapper = $pass1Row.find('.wp-pwd').hide();
|
||||
|
||||
bindToggleButton();
|
||||
|
||||
$generateButton = $pass1Row.find( 'button.wp-generate-pw' ).show();
|
||||
$generateButton.on( 'click', function () {
|
||||
updateLock = true;
|
||||
|
||||
$generateButton.hide();
|
||||
$passwordWrapper.show();
|
||||
|
||||
generatePassword();
|
||||
|
||||
_.defer( function() {
|
||||
pwFieldText.focus();
|
||||
if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) {
|
||||
pwFieldText[0].setSelectionRange( 0, 100 );
|
||||
$pass1Text.focus();
|
||||
if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
|
||||
$pass1Text[0].setSelectionRange( 0, 100 );
|
||||
}
|
||||
}, 0 );
|
||||
});
|
||||
|
||||
pw_submitbtn_edit.on( 'click', function() {
|
||||
pw_update_lock = false;
|
||||
});
|
||||
|
||||
pw_cancelbtn.on( 'click', function() {
|
||||
pw_update_lock = false;
|
||||
pw_generatebtn.show();
|
||||
pw_line.hide();
|
||||
});
|
||||
|
||||
pw_togglebtn.on( 'click', function() {
|
||||
var show = pw_togglebtn.attr( 'data-toggle' );
|
||||
if ( show == 1 ) {
|
||||
pwWrapper.addClass( 'show-password' );
|
||||
pw_togglebtn.attr({ 'data-toggle': 0, 'aria-label': userProfileL10n.ariaHide })
|
||||
.find( '.text' ).text( userProfileL10n.hide );
|
||||
pw_togglebtn.find( '.dashicons' ).removeClass('dashicons-visibility').addClass('dashicons-hidden');
|
||||
pwFieldText.focus();
|
||||
if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) {
|
||||
pwFieldText[0].setSelectionRange( 0, 100 );
|
||||
}
|
||||
} else {
|
||||
pwWrapper.removeClass( 'show-password' );
|
||||
pw_togglebtn.attr({ 'data-toggle': 1, 'aria-label': userProfileL10n.ariaShow })
|
||||
.find( '.text' ).text( userProfileL10n.show );
|
||||
pw_togglebtn.find( '.dashicons' ).removeClass('dashicons-hidden').addClass('dashicons-visibility');
|
||||
pw_field.focus();
|
||||
if ( ! _.isUndefined( pw_field[0].setSelectionRange ) ) {
|
||||
pw_field[0].setSelectionRange( 0, 100 );
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/* Warn the user if password was generated but not saved */
|
||||
$( window ).on( 'beforeunload', function() {
|
||||
if ( true === pw_update_lock ) {
|
||||
return userProfileL10n.warn;
|
||||
}
|
||||
} );
|
||||
|
||||
$cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
|
||||
$cancelButton.on( 'click', function () {
|
||||
updateLock = false;
|
||||
|
||||
$generateButton.show();
|
||||
$passwordWrapper.hide();
|
||||
} );
|
||||
|
||||
$pass1Row.closest('form').on( 'submit', function () {
|
||||
updateLock = false;
|
||||
|
||||
$pass2.val( $pass1.val() );
|
||||
$pass1Wrap.removeClass( 'show-password' );
|
||||
});
|
||||
}
|
||||
|
||||
function check_pass_strength() {
|
||||
var pass1 = $('#pass1').val(), pass2 = $('#pass2').val(), strength;
|
||||
@ -295,6 +316,8 @@
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
bindPasswordForm();
|
||||
});
|
||||
|
||||
$( '#destroy-sessions' ).on( 'click', function( e ) {
|
||||
@ -315,4 +338,13 @@
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
window.generatePassword = generatePassword;
|
||||
|
||||
/* Warn the user if password was generated but not saved */
|
||||
$( window ).on( 'beforeunload', function () {
|
||||
if ( true === updateLock ) {
|
||||
return userProfileL10n.warn;
|
||||
}
|
||||
} );
|
||||
|
||||
})(jQuery);
|
||||
|
||||
@ -468,7 +468,9 @@ if ( $show_password_fields ) :
|
||||
<input class="hidden" value=" " /><!-- #24364 workaround -->
|
||||
<button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Generate Password' ); ?></button>
|
||||
<div class="wp-pwd hide-if-js">
|
||||
<span class="password-input-wrapper">
|
||||
<input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="off" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" aria-describedby="pass-strength-result" />
|
||||
</span>
|
||||
<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' ); ?>">
|
||||
<span class="dashicons dashicons-hidden"></span>
|
||||
<span class="text"><?php _e( 'Hide' ); ?></span>
|
||||
|
||||
@ -402,7 +402,9 @@ if ( apply_filters( 'show_password_fields', true ) ) : ?>
|
||||
<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">
|
||||
<?php $initial_password = wp_generate_password( 24 ); ?>
|
||||
<span class="password-input-wrapper">
|
||||
<input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
|
||||
</span>
|
||||
<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' ); ?>">
|
||||
<span class="dashicons dashicons-hidden"></span>
|
||||
<span class="text"><?php _e( 'Hide' ); ?></span>
|
||||
|
||||
@ -655,7 +655,9 @@ case 'rp' :
|
||||
<p class="user-pass1-wrap">
|
||||
<label for="pass1"><?php _e('New password') ?></label><br />
|
||||
<div class="wp-pwd">
|
||||
<span class="password-input-wrapper">
|
||||
<input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" aria-describedby="pass-strength-result" />
|
||||
</span>
|
||||
<div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user