Skip to content

Commit 1f7e5b5

Browse files
ajithkumar-maragathavelajithkumar-maragathavel
committed
show password funtionality using uicomponent
1 parent 9677540 commit 1f7e5b5

File tree

6 files changed

+82
-37
lines changed

6 files changed

+82
-37
lines changed

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,9 +104,8 @@ use Magento\Customer\Block\Widget\Name;
104104
autocomplete="off" />
105105
</div>
106106
</div>
107-
<div class="field choice">
108-
<input type="checkbox" name="show-password" title="Show Password" id="show-password" class="checkbox" data-role="show-password" data-mage-init='{"showPassword": {"passwordSelector": "#current-password,#password,#password-confirmation"}}'>
109-
<label for="show-password" class="label"><span><?= $escaper->escapeHtml(__('Show Password')) ?></span></label>
107+
<div class="field choice" data-bind="scope: 'showPassword'">
108+
<!-- ko template: getTemplate() --><!-- /ko -->
110109
</div>
111110
</fieldset>
112111

@@ -180,6 +179,16 @@ script;
180179
"passwordStrengthIndicator": {
181180
"formSelector": "form.form-edit-account"
182181
}
182+
},
183+
"*": {
184+
"Magento_Ui/js/core/app": {
185+
"components": {
186+
"showPassword": {
187+
"component": "Magento_Customer/js/show-password",
188+
"passwordSelector": "#current-password,#password,#password-confirmation"
189+
}
190+
}
191+
}
183192
}
184193
}
185194
</script>

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,8 @@
4242
data-validate="{required:true}">
4343
</div>
4444
</div>
45-
<div class="field choice">
46-
<input type="checkbox" name="show-password" title="Show Password" id="show-password" class="checkbox" data-role="show-password" data-mage-init='{"showPassword": {"passwordSelector": "#pass"}}'>
47-
<label for="show-password" class="label"><span><?= $escaper->escapeHtml(__('Show Password')) ?></span></label>
45+
<div class="field choice" data-bind="scope: 'showPassword'">
46+
<!-- ko template: getTemplate() --><!-- /ko -->
4847
</div>
4948
<?= $block->getChildHtml('form_additional_info') ?>
5049
<div class="actions-toolbar">
@@ -59,6 +58,14 @@
5958
"*": {
6059
"Magento_Customer/js/block-submit-on-send": {
6160
"formId": "login-form"
61+
},
62+
"Magento_Ui/js/core/app": {
63+
"components": {
64+
"showPassword": {
65+
"component": "Magento_Customer/js/show-password",
66+
"passwordSelector": "#pass"
67+
}
68+
}
6269
}
6370
}
6471
}

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -259,9 +259,8 @@ $formData = $block->getFormData();
259259
autocomplete="off">
260260
</div>
261261
</div>
262-
<div class="field choice">
263-
<input type="checkbox" name="show-password" title="Show Password" id="show-password" class="checkbox" data-role="show-password" data-mage-init='{"showPassword": {"passwordSelector": "#password,#password-confirmation"}}'>
264-
<label for="show-password" class="label"><span><?= $escaper->escapeHtml(__('Show Password')) ?></span></label>
262+
<div class="field choice" data-bind="scope: 'showPassword'">
263+
<!-- ko template: getTemplate() --><!-- /ko -->
265264
</div>
266265
</fieldset>
267266

@@ -358,6 +357,14 @@ script;
358357
"*": {
359358
"Magento_Customer/js/block-submit-on-send": {
360359
"formId": "form-validate"
360+
},
361+
"Magento_Ui/js/core/app": {
362+
"components": {
363+
"showPassword": {
364+
"component": "Magento_Customer/js/show-password",
365+
"passwordSelector": "#password,#password-confirmation"
366+
}
367+
}
361368
}
362369
}
363370
}

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,8 @@
3737
<input type="password" class="input-text" name="password_confirmation" id="password-confirmation" data-validate="{required:true,equalTo:'#password'}" autocomplete="off">
3838
</div>
3939
</div>
40-
<div class="field choice">
41-
<input type="checkbox" name="show-password" title="Show Password" id="show-password" class="checkbox" data-role="show-password" data-mage-init='{"showPassword": {"passwordSelector": "#password,#password-confirmation"}}'>
42-
<label for="show-password" class="label"><span><?= $escaper->escapeHtml(__('Show Password')) ?></span></label>
40+
<div class="field choice" data-bind="scope: 'showPassword'">
41+
<!-- ko template: getTemplate() --><!-- /ko -->
4342
</div>
4443
</fieldset>
4544
<div class="actions-toolbar">
@@ -48,3 +47,17 @@
4847
</div>
4948
</div>
5049
</form>
50+
<script type="text/x-magento-init">
51+
{
52+
"*": {
53+
"Magento_Ui/js/core/app": {
54+
"components": {
55+
"showPassword": {
56+
"component": "Magento_Customer/js/show-password",
57+
"passwordSelector": "#password,#password-confirmation"
58+
}
59+
}
60+
}
61+
}
62+
}
63+
</script>

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

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,56 @@
11
/**
2-
* Copyright © Magento, Inc. All rights reserved.
3-
* See COPYING.txt for license details.
4-
*/
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
55

66
define([
7-
'jquery'
8-
], function ($) {
7+
'jquery',
8+
'ko',
9+
'uiComponent'
10+
], function ($, ko, Component) {
911
'use strict';
1012

11-
$.widget('mage.showPassword', {
12-
options: {
13-
passwordSelector: '',
14-
showPasswordSelector: '[data-role=show-password]',
15-
passwordInputType: 'password',
16-
textInputType: 'text'
13+
return Component.extend({
14+
passwordSelector: '',
15+
showPasswordSelector: '[data-role=show-password]',
16+
passwordInputType: 'password',
17+
textInputType: 'text',
18+
19+
defaults: {
20+
template: 'Magento_Customer/show-password'
1721
},
1822

19-
/**
20-
* Widget initialization
21-
* @private
22-
*/
23-
_create: function () {
24-
this._bind();
23+
/** @inheritdoc */
24+
initialize: function () {
25+
this._super();
2526
},
2627

2728
/**
28-
* Event binding, will monitor click event on show password.
29-
* @private
29+
* @return {Object}
3030
*/
31-
_bind: function () {
32-
this._on(this.options.showPasswordSelector, {
33-
'click': this._showPassword
31+
initObservable: function () {
32+
var self = this;
33+
this._super()
34+
.observe({
35+
isChecked: ko.observable(false)
36+
});
37+
38+
this.isChecked.subscribe(function () {
39+
self._showPassword();
3440
});
41+
return this;
3542
},
3643

3744
/**
3845
* Show/Hide password
3946
* @private
4047
*/
4148
_showPassword: function () {
42-
var passwordField = this.options.passwordSelector;
49+
var passwordField = this.passwordSelector;
4350

4451
$(passwordField).attr('type',
45-
$(passwordField).attr('type') === this.options.passwordInputType ?
46-
this.options.textInputType : this.options.passwordInputType
52+
$(passwordField).attr('type') === this.passwordInputType ?
53+
this.textInputType : this.passwordInputType
4754
);
4855
}
4956
});

‎app/code/Magento/Customer/view/frontend/web/template/show-password.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<input type="checkbox" name="show-password" title="Show Password" id="show-password" class="checkbox" data-role="show-password" data-bind="checked: isChecked">
2+
<label for="show-password" class="label"><span data-bind="i18n: 'Show Password'"></span></label>

0 commit comments

Comments
 (0)