MAGETWO-51815: Invalid work of Password Strength Validator on "Create Customer" Storefront page

Author: dsikkema-magento

app/code/Magento/Customer/view/frontend/templates/form/register.phtml

@@ -147,9 +147,9 @@
                        data-validate="{required:true, 'validate-customer-password':true}"
                        autocomplete="off">
                 <div id="password-strength-meter-container">
-                    <div id="password-strength-meter" class="password-strength-meter">
+                    <div id="password-strength-meter" data-role="password-strength-meter" class="password-strength-meter">
                         <?php /* @escapeNotVerified */ echo __('Password Strength'); ?>:
-                        <span id="password-strength-meter-label">
+                        <span id="password-strength-meter-label" data-role="password-strength-meter-label" >
                             <?php /* @escapeNotVerified */ echo __('No Password'); ?>
                         </span>
                     </div>

app/code/Magento/Customer/view/frontend/web/js/password-strength-indicator.js

@@ -6,27 +6,30 @@
 /**
  * jshint browser:true
  */
-/*eslint no-unused-vars: 0*/
 define([
     'jquery',
     'Magento_Customer/js/zxcvbn',
-    'mage/translate',
-    'mage/validation'
-], function ($, zxcvbn, $t, validation) {
+    'mage/translate'
+], function ($, zxcvbn, $t) {
     'use strict';
 
     $.widget('mage.passwordStrengthIndicator', {
         options: {
+            cache: {},
             defaultClassName: 'password-strength-meter-',
-            passwordStrengthMeterId: 'password-strength-meter-container',
-            passwordStrengthMeterLabelId: 'password-strength-meter-label'
+            passwordSelector: '[type=password]',
+            passwordStrengthMeterSelector: '[data-role=password-strength-meter]',
+            passwordStrengthMeterLabelSelector: '[data-role=password-strength-meter-label]'
         },
 
         /**
          * Widget initialization
          * @private
          */
         _create: function () {
+            this.options.cache.input = $(this.options.passwordSelector, this.element);
+            this.options.cache.meter = $(this.options.passwordStrengthMeterSelector, this.element);
+            this.options.cache.label = $(this.options.passwordStrengthMeterLabelSelector, this.element);
             this._bind();
         },
 
@@ -35,10 +38,10 @@ define([
          * @private
          */
         _bind: function () {
-            this._on({
-                'change input[type="password"]': this._calculateStrength,
-                'keyup input[type="password"]': this._calculateStrength,
-                'paste input[type="password"]': this._calculateStrength
+            this._on(this.options.cache.input, {
+                'change': this._calculateStrength,
+                'keyup': this._calculateStrength,
+                'paste': this._calculateStrength
             });
         },
 
@@ -54,7 +57,7 @@ define([
 
             this._displayStrength(className, score, isEmpty);
             //update error messages
-            $.validator.validateSingleElement(this.element.find('input[type="password"]'));
+            $.validator.validateSingleElement(this.options.cache.input);
         },
 
         /**
@@ -65,11 +68,7 @@ define([
          * @private
          */
         _displayStrength: function (className, score, isEmpty) {
-            var strengthContainer = this.element.find('#' + this.options.passwordStrengthMeterId),
-                strengthLabel = '';
-
-            strengthContainer.removeClass();
-            strengthContainer.addClass(className);
+            var strengthLabel = '';
 
             if (isEmpty) {
                 strengthLabel = $t('No Password');
@@ -94,7 +93,10 @@ define([
                 }
             }
 
-            this.element.find('#' + this.options.passwordStrengthMeterLabelId).text(strengthLabel);
+            this.options.cache.meter
+                .removeClass()
+                .addClass(className);
+            this.options.cache.label.text(strengthLabel);
         },
 
         /**
@@ -103,7 +105,7 @@ define([
          * @private
          */
         _getPassword: function () {
-            return this.element.find('input[type="password"]').val();
+            return this.options.cache.input.val();
         },
 
         /**
@@ -114,8 +116,7 @@ define([
          * @private
          */
         _getClassName: function (score, isEmpty) {
-            var suffix = isEmpty ? 'no-pwd' : score;
-            return this.options.defaultClassName + suffix;
+            return this.options.defaultClassName + (isEmpty ? 'no-pwd' : score);
         }
     });
 

app/design/frontend/Magento/blank/Magento_Customer/web/css/source/_module.less

@@ -278,13 +278,7 @@
             }
         }
 
-        .password-strength-meter-0 & {
-            &:before {
-                background-color: @password-strength-color__weak;
-                width: 25%;
-            }
-        }
-
+        .password-strength-meter-0,
         .password-strength-meter-1 & {
             &:before {
                 background-color: @password-strength-color__weak;

app/design/frontend/Magento/luma/Magento_Customer/web/css/source/_module.less

@@ -256,13 +256,7 @@
             }
         }
 
-        .password-strength-meter-0 & {
-            &:before {
-                background-color: @password-strength-color__weak;
-                width: 25%;
-            }
-        }
-
+        .password-strength-meter-0,
         .password-strength-meter-1 & {
             &:before {
                 background-color: @password-strength-color__weak;