Magento bindings used and refactored show password uicomponent

Author: ajithkumar-maragathavel

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

@@ -5,40 +5,30 @@
 
 define([
     'jquery',
-    'ko',
     'uiComponent'
-], function ($, ko, Component) {
+], function ($, Component) {
     'use strict';
 
     return Component.extend({
         passwordSelector: '',
-        showPasswordSelector: '[data-role=show-password]',
         passwordInputType: 'password',
         textInputType: 'text',
 
         defaults: {
-            template: 'Magento_Customer/show-password'
-        },
-
-        /** @inheritdoc */
-        initialize: function () {
-            this._super();
+            template: 'Magento_Customer/show-password',
+            isPasswordVisible: false
         },
 
         /**
          * @return {Object}
          */
         initObservable: function () {
-            var self = this;
-
             this._super()
-                .observe({
-                    isChecked: ko.observable(false)
-                });
+                .observe(['isPasswordVisible']);
 
-            this.isChecked.subscribe(function () {
-                self._showPassword();
-            });
+            this.isPasswordVisible.subscribe(function (isChecked) {
+                this._showPassword(isChecked);
+            }.bind(this));
 
             return this;
         },
@@ -47,12 +37,9 @@ define([
          * Show/Hide password
          * @private
          */
-        _showPassword: function () {
-            var passwordField = this.passwordSelector;
-
-            $(passwordField).attr('type',
-                $(passwordField).attr('type') === this.passwordInputType ?
-                this.textInputType : this.passwordInputType
+        _showPassword: function (isChecked) {
+            $(this.passwordSelector).attr('type',
+                isChecked ? this.textInputType : this.passwordInputType
             );
         }
     });

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

@@ -5,5 +5,5 @@
  */
  -->
 
-<input type="checkbox" name="show-password" title="Show Password" id="show-password" class="checkbox" data-role="show-password" data-bind="checked: isChecked">
-<label for="show-password" class="label"><span data-bind="i18n: 'Show Password'"></span></label>
+<input type="checkbox" name="show-password" title="Show Password" id="show-password" class="checkbox" data-role="show-password" ko-checked="isPasswordVisible">
+<label for="show-password" class="label"><span translate="'Show Password'"></span></label>