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

Author: dsikkema-magento

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

@@ -53,45 +53,50 @@ define([
         _calculateStrength: function () {
             var password = this._getPassword(),
                 isEmpty = password.length === 0,
-                score = zxcvbn(password).score,
-                className = this._getClassName(score, isEmpty);
+                zxcvbnScore = zxcvbn(password).score,
+                isValid = $.validator.validateSingleElement(this.options.cache.input),
+                displayScore = zxcvbnScore;
 
-            this._displayStrength(className, score, isEmpty);
-            //update error messages
-            $.validator.validateSingleElement(this.options.cache.input);
+                // Display score is based on combination of whether password is empty, valid, and zxcvbn strength
+                if (isEmpty) {
+                    displayScore = 0;
+                } else if (!isValid) {
+                    displayScore = 1;
+                }
+
+            // Update label
+            this._displayStrength(displayScore);
         },
 
         /**
          * Display strength
-         * @param {String} className
-         * @param {Number} score
-         * @param {Boolean} isEmpty
+         * @param {Number} displayScore
          * @private
          */
-        _displayStrength: function (className, score, isEmpty) {
-            var strengthLabel = '';
-
-            if (isEmpty) {
-                strengthLabel = $t('No Password');
-            } else {
-                switch (score) {
-                    case 0:
-                    case 1:
-                        strengthLabel = $t('Weak');
-                        break;
-
-                    case 2:
-                        strengthLabel = $t('Medium');
-                        break;
-
-                    case 3:
-                        strengthLabel = $t('Strong');
-                        break;
-
-                    case 4:
-                        strengthLabel = $t('Very Strong');
-                        break;
-                }
+        _displayStrength: function (displayScore) {
+            var strengthLabel = '',
+                className = this._getClassName(displayScore);
+
+            switch (displayScore) {
+                case 0:
+                    strengthLabel = $t('No Password');
+                    break;
+
+                case 1:
+                    strengthLabel = $t('Weak');
+                    break;
+
+                case 2:
+                    strengthLabel = $t('Medium');
+                    break;
+
+                case 3:
+                    strengthLabel = $t('Strong');
+                    break;
+
+                case 4:
+                    strengthLabel = $t('Very Strong');
+                    break;
             }
 
             this.options.cache.meter
@@ -111,13 +116,12 @@ define([
 
         /**
          * Get class name for score
-         * @param {int} score
-         * @param {Boolean} isEmpty
+         * @param {int} displayScore
          * @returns {String}
          * @private
          */
-        _getClassName: function (score, isEmpty) {
-            return this.options.defaultClassName + (isEmpty ? 'no-pwd' : score);
+        _getClassName: function (displayScore) {
+            return this.options.defaultClassName + displayScore;
         }
     });
 

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

@@ -271,14 +271,13 @@
             z-index: -1;
         }
 
-        .password-strength-meter-no-pwd & {
+        .password-strength-meter-0 & {
             &:before {
                 background-color: @_password-default;
                 width: 100%;
             }
         }
 
-        .password-strength-meter-0 &,
         .password-strength-meter-1 & {
             &:before {
                 background-color: @_password-weak;

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

@@ -7,11 +7,11 @@
 @account-table-border-bottom-color: @color-gray-middle1;
 @account-table-action-delete: @color-red12;
 
-@password-default: @color-gray-light01;
-@password-weak: #ffafae;
-@password-medium: #ffd6b3;
-@password-strong: #c5eeac;
-@password-very-strong: #81b562;
+@_password-default: @color-gray-light01;
+@_password-weak: #ffafae;
+@_password-medium: #ffd6b3;
+@_password-strong: #c5eeac;
+@_password-very-strong: #81b562;
 
 //
 //  Common
@@ -233,7 +233,7 @@
     }
 
     .password-strength-meter {
-        background-color: @password-default;
+        background-color: @_password-default;
         height: @form-element-input__height;
         line-height: @form-element-input__height;
         padding: @form-element-input__padding;
@@ -249,38 +249,37 @@
             z-index: -1;
         }
 
-        .password-strength-meter-no-pwd & {
+        .password-strength-meter-0 & {
             &:before {
-                background-color: @password-default;
+                background-color: @_password-default;
                 width: 100%;
             }
         }
 
-        .password-strength-meter-0 &,
         .password-strength-meter-1 & {
             &:before {
-                background-color: @password-weak;
+                background-color: @_password-weak;
                 width: 25%;
             }
         }
 
         .password-strength-meter-2 & {
             &:before {
-                background-color: @password-medium;
+                background-color: @_password-medium;
                 width: 50%;
             }
         }
 
         .password-strength-meter-3 & {
             &:before {
-                background-color: @password-strong;
+                background-color: @_password-strong;
                 width: 75%;
             }
         }
 
         .password-strength-meter-4 & {
             &:before {
-                background-color: @password-very-strong;
+                background-color: @_password-very-strong;
                 width: 100%;
             }
         }