password-strength-meter.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. /* global wp, pwsL10n, wc_password_strength_meter_params */
  2. ( function( $ ) {
  3. 'use strict';
  4. /**
  5. * Password Strength Meter class.
  6. */
  7. var wc_password_strength_meter = {
  8. /**
  9. * Initialize strength meter actions.
  10. */
  11. init: function() {
  12. $( document.body )
  13. .on( 'keyup change', 'form.register #reg_password, form.checkout #account_password, form.edit-account #password_1, form.lost_reset_password #password_1', this.strengthMeter );
  14. $( 'form.checkout #createaccount' ).change();
  15. },
  16. /**
  17. * Strength Meter.
  18. */
  19. strengthMeter: function() {
  20. var wrapper = $( 'form.register, form.checkout, form.edit-account, form.lost_reset_password' ),
  21. submit = $( 'button[type="submit"]', wrapper ),
  22. field = $( '#reg_password, #account_password, #password_1', wrapper ),
  23. strength = 1,
  24. fieldValue = field.val();
  25. wc_password_strength_meter.includeMeter( wrapper, field );
  26. strength = wc_password_strength_meter.checkPasswordStrength( wrapper, field );
  27. if ( fieldValue.length > 0 && strength < wc_password_strength_meter_params.min_password_strength && ! wrapper.is( 'form.checkout' ) && -1 !== strength ) {
  28. submit.attr( 'disabled', 'disabled' ).addClass( 'disabled' );
  29. } else {
  30. submit.removeAttr( 'disabled', 'disabled' ).removeClass( 'disabled' );
  31. }
  32. },
  33. /**
  34. * Include meter HTML.
  35. *
  36. * @param {Object} wrapper
  37. * @param {Object} field
  38. */
  39. includeMeter: function( wrapper, field ) {
  40. var meter = wrapper.find( '.woocommerce-password-strength' );
  41. if ( '' === field.val() ) {
  42. meter.hide();
  43. $( document.body ).trigger( 'wc-password-strength-hide' );
  44. } else if ( 0 === meter.length ) {
  45. field.after( '<div class="woocommerce-password-strength" aria-live="polite"></div>' );
  46. $( document.body ).trigger( 'wc-password-strength-added' );
  47. } else {
  48. meter.show();
  49. $( document.body ).trigger( 'wc-password-strength-show' );
  50. }
  51. },
  52. /**
  53. * Check password strength.
  54. *
  55. * @param {Object} field
  56. *
  57. * @return {Int}
  58. */
  59. checkPasswordStrength: function( wrapper, field ) {
  60. var meter = wrapper.find( '.woocommerce-password-strength' ),
  61. hint = wrapper.find( '.woocommerce-password-hint' ),
  62. hint_html = '<small class="woocommerce-password-hint">' + wc_password_strength_meter_params.i18n_password_hint + '</small>',
  63. strength = wp.passwordStrength.meter( field.val(), wp.passwordStrength.userInputBlacklist() ),
  64. error = '';
  65. // Reset.
  66. meter.removeClass( 'short bad good strong' );
  67. hint.remove();
  68. if ( meter.is( ':hidden' ) ) {
  69. return strength;
  70. }
  71. // Error to append
  72. if ( strength < wc_password_strength_meter_params.min_password_strength ) {
  73. error = ' - ' + wc_password_strength_meter_params.i18n_password_error;
  74. }
  75. switch ( strength ) {
  76. case 0 :
  77. meter.addClass( 'short' ).html( pwsL10n['short'] + error );
  78. meter.after( hint_html );
  79. break;
  80. case 1 :
  81. meter.addClass( 'bad' ).html( pwsL10n.bad + error );
  82. meter.after( hint_html );
  83. break;
  84. case 2 :
  85. meter.addClass( 'bad' ).html( pwsL10n.bad + error );
  86. meter.after( hint_html );
  87. break;
  88. case 3 :
  89. meter.addClass( 'good' ).html( pwsL10n.good + error );
  90. break;
  91. case 4 :
  92. meter.addClass( 'strong' ).html( pwsL10n.strong + error );
  93. break;
  94. case 5 :
  95. meter.addClass( 'short' ).html( pwsL10n.mismatch );
  96. break;
  97. }
  98. return strength;
  99. }
  100. };
  101. wc_password_strength_meter.init();
  102. })( jQuery );