Skip to content

Commit 3cf4a5f

Browse files
author
Oleksandr Dubovyk
committed
MAGETWO-54163: Inconsistent password validation on "Create Account" Storefront form
1 parent 4b6e1da commit 3cf4a5f

File tree

3 files changed

+40
-45
lines changed

3 files changed

+40
-45
lines changed

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

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ define([
1717
$.widget('mage.passwordStrengthIndicator', {
1818
options: {
1919
cache: {},
20-
defaultClassName: 'password-strength-meter-',
2120
passwordSelector: '[type=password]',
2221
passwordStrengthMeterSelector: '[data-role=password-strength-meter]',
2322
passwordStrengthMeterLabelSelector: '[data-role=password-strength-meter-label]'
@@ -54,14 +53,15 @@ define([
5453
var password = this._getPassword(),
5554
isEmpty = password.length === 0,
5655
zxcvbnScore = zxcvbn(password).score,
57-
isValid = $.validator.validateSingleElement(this.options.cache.input),
58-
displayScore = zxcvbnScore || 1;
56+
displayScore,
57+
isValid;
5958

6059
// Display score is based on combination of whether password is empty, valid, and zxcvbn strength
6160
if (isEmpty) {
6261
displayScore = 0;
63-
} else if (!isValid) {
64-
displayScore = 1;
62+
} else {
63+
isValid = $.validator.validateSingleElement(this.options.cache.input);
64+
displayScore = isValid ? zxcvbnScore : 1;
6565
}
6666

6767
// Update label
@@ -75,27 +75,32 @@ define([
7575
*/
7676
_displayStrength: function (displayScore) {
7777
var strengthLabel = '',
78-
className = this._getClassName(displayScore);
78+
className = 'password-';
7979

8080
switch (displayScore) {
8181
case 0:
8282
strengthLabel = $t('No Password');
83+
className += 'none';
8384
break;
8485

8586
case 1:
8687
strengthLabel = $t('Weak');
88+
className += 'weak';
8789
break;
8890

8991
case 2:
9092
strengthLabel = $t('Medium');
93+
className += 'medium';
9194
break;
9295

9396
case 3:
9497
strengthLabel = $t('Strong');
98+
className += 'strong';
9599
break;
96100

97101
case 4:
98102
strengthLabel = $t('Very Strong');
103+
className += 'very-strong';
99104
break;
100105
}
101106

@@ -112,16 +117,6 @@ define([
112117
*/
113118
_getPassword: function () {
114119
return this.options.cache.input.val();
115-
},
116-
117-
/**
118-
* Get class name for score
119-
* @param {int} displayScore
120-
* @returns {String}
121-
* @private
122-
*/
123-
_getClassName: function (displayScore) {
124-
return this.options.defaultClassName + displayScore;
125120
}
126121
});
127122

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

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -41,43 +41,43 @@
4141
.lib-font-size(18);
4242
}
4343
}
44-
44+
4545
.fieldset {
4646
.lib-form-hasrequired(bottom);
4747
&:after {
4848
margin-top: 35px;
4949
}
5050
}
5151
}
52-
52+
5353
.block-addresses-list {
5454
.items.addresses {
5555
> .item {
5656
margin-bottom: @indent__base;
57-
57+
5858
&:last-child {
5959
margin-bottom: 0;
6060
}
6161
}
6262
}
6363
}
64-
64+
6565
.form-address-edit {
6666
#region_id {
6767
display: none;
6868
}
69-
69+
7070
.actions-toolbar .action.primary {
7171
&:extend(.abs-button-l all);
7272
}
7373
}
74-
74+
7575
.form-edit-account {
7676
.fieldset.password {
7777
display: none;
7878
}
7979
}
80-
80+
8181
.box-billing-address,
8282
.box-shipping-address,
8383
.box-information,
@@ -96,43 +96,43 @@
9696
h2 {
9797
margin-top: 0;
9898
}
99-
99+
100100
.toolbar {
101101
text-align: center;
102102
.limiter-options {
103103
width: auto;
104104
}
105105
}
106-
106+
107107
.limiter {
108108
>.label {
109109
&:extend(.abs-visually-hidden all);
110110
}
111111
}
112-
112+
113113
.block:not(.widget) {
114114
&:extend(.abs-account-blocks all);
115115
}
116116
}
117-
117+
118118
.sidebar-additional {
119119
margin-top: 40px;
120120
}
121-
121+
122122
.table-wrapper {
123123
&:last-child {
124124
margin-bottom: 0;
125125
}
126-
126+
127127
.action {
128128
margin-right: 15px;
129-
129+
130130
&:last-child {
131131
margin-right: 0;
132132
}
133133
}
134134
}
135-
135+
136136
.table-return-items {
137137
.qty {
138138
.input-text {
@@ -141,7 +141,7 @@
141141
}
142142
}
143143
}
144-
144+
145145
// Checkout address (create shipping address)
146146
.field.street {
147147
.field.additional {
@@ -214,10 +214,10 @@
214214
margin-bottom: 0;
215215
}
216216
}
217-
217+
218218
.title {
219219
margin-bottom: @indent__s;
220-
220+
221221
strong {
222222
.lib-heading(h4);
223223
.column.main & {
@@ -271,42 +271,42 @@
271271
z-index: -1;
272272
}
273273

274-
.password-strength-meter-0 & {
274+
.password-none & {
275275
&:before {
276276
background-color: @_password-default;
277277
width: 100%;
278278
}
279279
}
280280

281-
.password-strength-meter-1 & {
281+
.password-weak & {
282282
&:before {
283283
background-color: @_password-weak;
284284
width: 25%;
285285
}
286286
}
287287

288-
.password-strength-meter-2 & {
288+
.password-medium & {
289289
&:before {
290290
background-color: @_password-medium;
291291
width: 50%;
292292
}
293293
}
294294

295-
.password-strength-meter-3 & {
295+
.password-strong & {
296296
&:before {
297297
background-color: @_password-strong;
298298
width: 75%;
299299
}
300300
}
301301

302-
.password-strength-meter-4 & {
302+
.password-very-strong & {
303303
&:before {
304304
background-color: @_password-very-strong;
305305
width: 100%;
306306
}
307307
}
308308
}
309-
309+
310310
.control.captcha-image {
311311
.lib-css(margin-top, @indent__s);
312312

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -253,35 +253,35 @@
253253
z-index: -1;
254254
}
255255

256-
.password-strength-meter-0 & {
256+
.password-none & {
257257
&:before {
258258
background-color: @_password-default;
259259
width: 100%;
260260
}
261261
}
262262

263-
.password-strength-meter-1 & {
263+
.password-weak & {
264264
&:before {
265265
background-color: @_password-weak;
266266
width: 25%;
267267
}
268268
}
269269

270-
.password-strength-meter-2 & {
270+
.password-medium & {
271271
&:before {
272272
background-color: @_password-medium;
273273
width: 50%;
274274
}
275275
}
276276

277-
.password-strength-meter-3 & {
277+
.password-strong & {
278278
&:before {
279279
background-color: @_password-strong;
280280
width: 75%;
281281
}
282282
}
283283

284-
.password-strength-meter-4 & {
284+
.password-very-strong & {
285285
&:before {
286286
background-color: @_password-very-strong;
287287
width: 100%;

0 commit comments

Comments
 (0)