Skip to content

Commit 6681ae6

Browse files
bwatersbwaters
committed
Merge remote-tracking branch 'origin/MAGETWO-51815-pw-checker' into develop
2 parents 635d463 + 79795ab commit 6681ae6

File tree

7 files changed

+90
-59
lines changed

7 files changed

+90
-59
lines changed

‎app/code/Magento/Customer/i18n/en_US.csv

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -517,3 +517,9 @@ Addresses,Addresses
517517
"Password forgotten","Password forgotten"
518518
"My Dashboard","My Dashboard"
519519
"You are signed out","You are signed out"
520+
"No Password","No Password"
521+
"Weak","Weak"
522+
"Medium","Medium"
523+
"Strong","Strong"
524+
"Very Strong","Very Strong"
525+

‎app/code/Magento/Customer/view/frontend/templates/form/edit.phtml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,11 @@
5959
data-input="new-password"
6060
data-validate="{required:true, 'validate-customer-password':true}"
6161
autocomplete="off" />
62-
<div id="password-strength-meter-container">
62+
<div id="password-strength-meter-container" data-role="password-strength-meter" >
6363
<div id="password-strength-meter" class="password-strength-meter">
6464
<?php /* @escapeNotVerified */ echo __('Password Strength'); ?>:
65-
<span id="password-strength-meter-label">
66-
<?php /* @escapeNotVerified */ echo __('No password'); ?>
65+
<span id="password-strength-meter-label" data-role="password-strength-meter-label" >
66+
<?php /* @escapeNotVerified */ echo __('No Password'); ?>
6767
</span>
6868
</div>
6969
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -146,11 +146,11 @@
146146
data-password-min-character-sets="<?php echo $block->escapeHtml($block->getRequiredCharacterClassesNumber()) ?>"
147147
data-validate="{required:true, 'validate-customer-password':true}"
148148
autocomplete="off">
149-
<div id="password-strength-meter-container">
149+
<div id="password-strength-meter-container" data-role="password-strength-meter" >
150150
<div id="password-strength-meter" class="password-strength-meter">
151151
<?php /* @escapeNotVerified */ echo __('Password Strength'); ?>:
152-
<span id="password-strength-meter-label">
153-
<?php /* @escapeNotVerified */ echo __('No password'); ?>
152+
<span id="password-strength-meter-label" data-role="password-strength-meter-label" >
153+
<?php /* @escapeNotVerified */ echo __('No Password'); ?>
154154
</span>
155155
</div>
156156
</div>

‎app/code/Magento/Customer/view/frontend/templates/form/resetforgottenpassword.phtml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@
2323
data-password-min-character-sets="<?php echo $block->escapeHtml($block->getRequiredCharacterClassesNumber()) ?>"
2424
data-validate="{required:true, 'validate-customer-password':true}"
2525
autocomplete="off">
26-
<div id="password-strength-meter-container">
26+
<div id="password-strength-meter-container" data-role="password-strength-meter">
2727
<div id="password-strength-meter" class="password-strength-meter">
2828
<?php /* @escapeNotVerified */ echo __('Password Strength'); ?>:
29-
<span id="password-strength-meter-label">
29+
<span id="password-strength-meter-label" data-role="password-strength-meter-label">
3030
<?php /* @escapeNotVerified */ echo __('No Password'); ?>
3131
</span>
3232
</div>

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

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,31 @@
66
/**
77
* jshint browser:true
88
*/
9-
/*eslint no-unused-vars: 0*/
109
define([
1110
'jquery',
1211
'Magento_Customer/js/zxcvbn',
1312
'mage/translate',
1413
'mage/validation'
15-
], function ($, zxcvbn, $t, validation) {
14+
], function ($, zxcvbn, $t) {
1615
'use strict';
1716

1817
$.widget('mage.passwordStrengthIndicator', {
1918
options: {
19+
cache: {},
2020
defaultClassName: 'password-strength-meter-',
21-
passwordStrengthMeterId: 'password-strength-meter-container',
22-
passwordStrengthMeterLabelId: 'password-strength-meter-label'
21+
passwordSelector: '[type=password]',
22+
passwordStrengthMeterSelector: '[data-role=password-strength-meter]',
23+
passwordStrengthMeterLabelSelector: '[data-role=password-strength-meter-label]'
2324
},
2425

2526
/**
2627
* Widget initialization
2728
* @private
2829
*/
2930
_create: function () {
31+
this.options.cache.input = $(this.options.passwordSelector, this.element);
32+
this.options.cache.meter = $(this.options.passwordStrengthMeterSelector, this.element);
33+
this.options.cache.label = $(this.options.passwordStrengthMeterLabelSelector, this.element);
3034
this._bind();
3135
},
3236

@@ -35,10 +39,10 @@ define([
3539
* @private
3640
*/
3741
_bind: function () {
38-
this._on({
39-
'change input[type="password"]': this._calculateStrength,
40-
'keyup input[type="password"]': this._calculateStrength,
41-
'paste input[type="password"]': this._calculateStrength
42+
this._on(this.options.cache.input, {
43+
'change': this._calculateStrength,
44+
'keyup': this._calculateStrength,
45+
'paste': this._calculateStrength
4246
});
4347
},
4448

@@ -48,28 +52,36 @@ define([
4852
*/
4953
_calculateStrength: function () {
5054
var password = this._getPassword(),
51-
score = zxcvbn(password).score,
52-
className = this._getClassName(score);
53-
54-
this._displayStrength(className, score);
55-
//update error messages
56-
$.validator.validateSingleElement(this.element.find('input[type="password"]'));
55+
isEmpty = password.length === 0,
56+
zxcvbnScore = zxcvbn(password).score,
57+
isValid = $.validator.validateSingleElement(this.options.cache.input),
58+
displayScore = zxcvbnScore || 1;
59+
60+
// Display score is based on combination of whether password is empty, valid, and zxcvbn strength
61+
if (isEmpty) {
62+
displayScore = 0;
63+
} else if (!isValid) {
64+
displayScore = 1;
65+
}
66+
67+
// Update label
68+
this._displayStrength(displayScore);
5769
},
5870

5971
/**
6072
* Display strength
61-
* @param {String} className
62-
* @param {Number} score
73+
* @param {Number} displayScore
6374
* @private
6475
*/
65-
_displayStrength: function (className, score) {
66-
var strengthContainer = this.element.find('#' + this.options.passwordStrengthMeterId),
67-
strengthLabel = '';
76+
_displayStrength: function (displayScore) {
77+
var strengthLabel = '',
78+
className = this._getClassName(displayScore);
6879

69-
strengthContainer.removeClass();
70-
strengthContainer.addClass(className);
80+
switch (displayScore) {
81+
case 0:
82+
strengthLabel = $t('No Password');
83+
break;
7184

72-
switch (score) {
7385
case 1:
7486
strengthLabel = $t('Weak');
7587
break;
@@ -85,13 +97,12 @@ define([
8597
case 4:
8698
strengthLabel = $t('Very Strong');
8799
break;
88-
89-
case 0:
90-
default:
91-
strengthLabel = $t('No password');
92100
}
93101

94-
this.element.find('#' + this.options.passwordStrengthMeterLabelId).text(strengthLabel);
102+
this.options.cache.meter
103+
.removeClass()
104+
.addClass(className);
105+
this.options.cache.label.text(strengthLabel);
95106
},
96107

97108
/**
@@ -100,17 +111,17 @@ define([
100111
* @private
101112
*/
102113
_getPassword: function () {
103-
return this.element.find('input[type="password"]').val();
114+
return this.options.cache.input.val();
104115
},
105116

106117
/**
107118
* Get class name for score
108-
* @param {int} score
119+
* @param {int} displayScore
109120
* @returns {String}
110121
* @private
111122
*/
112-
_getClassName: function (score) {
113-
return this.options.defaultClassName + score;
123+
_getClassName: function (displayScore) {
124+
return this.options.defaultClassName + displayScore;
114125
}
115126
});
116127

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

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@
1717

1818
@account-nav-item-hover: @color-gray91;
1919

20-
@password-strength-color__default: @color-gray-light01;
21-
@password-strength-color__weak: #ffafae;
22-
@password-strength-color__medium: #ffd6b3;
23-
@password-strength-color__strong: #c5eeac;
24-
@password-strength-color__very-strong: #81b562;
20+
@_password-default: @color-gray-light01;
21+
@_password-weak: #ffafae;
22+
@_password-medium: #ffd6b3;
23+
@_password-strong: #c5eeac;
24+
@_password-very-strong: #81b562;
2525

2626
//
2727
// Common
@@ -255,7 +255,7 @@
255255
}
256256

257257
.password-strength-meter {
258-
background-color: @password-strength-color__default;
258+
background-color: @_password-default;
259259
height: @form-element-input__height;
260260
line-height: @form-element-input__height;
261261
padding: @form-element-input__padding;
@@ -271,30 +271,37 @@
271271
z-index: -1;
272272
}
273273

274+
.password-strength-meter-0 & {
275+
&:before {
276+
background-color: @_password-default;
277+
width: 100%;
278+
}
279+
}
280+
274281
.password-strength-meter-1 & {
275282
&:before {
276-
background-color: @password-strength-color__weak;
283+
background-color: @_password-weak;
277284
width: 25%;
278285
}
279286
}
280287

281288
.password-strength-meter-2 & {
282289
&:before {
283-
background-color: @password-strength-color__medium;
290+
background-color: @_password-medium;
284291
width: 50%;
285292
}
286293
}
287294

288295
.password-strength-meter-3 & {
289296
&:before {
290-
background-color: @password-strength-color__strong;
297+
background-color: @_password-strong;
291298
width: 75%;
292299
}
293300
}
294301

295302
.password-strength-meter-4 & {
296303
&:before {
297-
background-color: @password-strength-color__very-strong;
304+
background-color: @_password-very-strong;
298305
width: 100%;
299306
}
300307
}

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

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111
@account-table-border-bottom-color: @color-gray-middle1;
1212
@account-table-action-delete: @color-red12;
1313

14-
@password-strength-color__default: @color-gray-light01;
15-
@password-strength-color__weak: #ffafae;
16-
@password-strength-color__medium: #ffd6b3;
17-
@password-strength-color__strong: #c5eeac;
18-
@password-strength-color__very-strong: #81b562;
14+
@_password-default: @color-gray-light01;
15+
@_password-weak: #ffafae;
16+
@_password-medium: #ffd6b3;
17+
@_password-strong: #c5eeac;
18+
@_password-very-strong: #81b562;
1919

2020
//
2121
// Common
@@ -237,7 +237,7 @@
237237
}
238238

239239
.password-strength-meter {
240-
background-color: @password-strength-color__default;
240+
background-color: @_password-default;
241241
height: @form-element-input__height;
242242
line-height: @form-element-input__height;
243243
padding: @form-element-input__padding;
@@ -253,30 +253,37 @@
253253
z-index: -1;
254254
}
255255

256+
.password-strength-meter-0 & {
257+
&:before {
258+
background-color: @_password-default;
259+
width: 100%;
260+
}
261+
}
262+
256263
.password-strength-meter-1 & {
257264
&:before {
258-
background-color: @password-strength-color__weak;
265+
background-color: @_password-weak;
259266
width: 25%;
260267
}
261268
}
262269

263270
.password-strength-meter-2 & {
264271
&:before {
265-
background-color: @password-strength-color__medium;
272+
background-color: @_password-medium;
266273
width: 50%;
267274
}
268275
}
269276

270277
.password-strength-meter-3 & {
271278
&:before {
272-
background-color: @password-strength-color__strong;
279+
background-color: @_password-strong;
273280
width: 75%;
274281
}
275282
}
276283

277284
.password-strength-meter-4 & {
278285
&:before {
279-
background-color: @password-strength-color__very-strong;
286+
background-color: @_password-very-strong;
280287
width: 100%;
281288
}
282289
}

0 commit comments

Comments
 (0)