From 68ff8b1a8051ea5a96ce64305f07766dd7f30b2f Mon Sep 17 00:00:00 2001 From: Scott Taylor Date: Mon, 27 Jul 2015 21:24:36 +0000 Subject: [PATCH] Passwords UI: clean up the new JS in `wp-admin/js/user-profile.js`. Instead of wrapping `#pass1` in a `` dynamically, add the `` 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 --- src/wp-admin/js/user-profile.js | 300 ++++++++++++++++++-------------- src/wp-admin/user-edit.php | 4 +- src/wp-admin/user-new.php | 4 +- src/wp-login.php | 4 +- 4 files changed, 175 insertions(+), 137 deletions(-) diff --git a/src/wp-admin/js/user-profile.js b/src/wp-admin/js/user-profile.js index 0909443287..e7448140c4 100644 --- a/src/wp-admin/js/user-profile.js +++ b/src/wp-admin/js/user-profile.js @@ -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 - .attr( { - 'id': 'pass1-text', - 'name': 'pass1-text', - 'autocomplete': 'off' - } ) - .addClass( pw_field[0].className ) - .data( 'pw', pw_field.data( 'pw' ) ) - .val( pw_field.val() ); + $weakRow, + $weakCheckbox, - pw_field - .wrap( '' ) - .after( pwFieldText ); + $submitButtons, + $submitButton; + + function generatePassword() { + if ( typeof zxcvbn !== 'function' ) { + setTimeout( generatePassword, 50 ); + } else { + $pass1.val( $pass1.data( 'pw' ) ); + $pass1.trigger( 'propertychange' ); + $pass1Wrap.addClass( 'show-password' ); } + } - 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' ); - } - }; + function bindPass1() { + var passStrength = $('#pass-strength-result')[0]; - pw_2.hide(); - pw_line.hide(); - pw_togglebtn.show(); - pw_generatebtn.show(); - if ( pw_field.data( 'reveal' ) == 1 ) { + $pass1Wrap = $pass1.parent(); + + $pass1Text = $( '' ) + .attr( { + 'id': 'pass1-text', + 'name': 'pass1-text', + 'autocomplete': 'off' + } ) + .addClass( $pass1[0].className ) + .data( 'pw', $pass1.data( 'pw' ) ) + .val( $pass1.val() ) + .on( 'input', function () { + $pass1.val( $pass1Text.val() ).trigger( 'propertychange' ); + } ); + + $pass1.after( $pass1Text ); + + 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' ); + 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 { - pw_submitbtn_new.attr( 'disabled','disabled' ); - pw_submitbtn_edit.attr( 'disabled','disabled' ); + $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); diff --git a/src/wp-admin/user-edit.php b/src/wp-admin/user-edit.php index c60d4b6a8e..6143514f72 100644 --- a/src/wp-admin/user-edit.php +++ b/src/wp-admin/user-edit.php @@ -468,7 +468,9 @@ if ( $show_password_fields ) :
- + + +
- + + +