show or hide password widget created

Author: ajithkumar-maragathavel

app/code/Magento/Customer/view/frontend/requirejs-config.js

@@ -12,6 +12,7 @@ var config = {
             passwordStrengthIndicator: 'Magento_Customer/js/password-strength-indicator',
             zxcvbn: 'Magento_Customer/js/zxcvbn',
             addressValidation: 'Magento_Customer/js/addressValidation',
+            showPassword: 'Magento_Customer/js/show-password',
             'Magento_Customer/address': 'Magento_Customer/js/address',
             'Magento_Customer/change-email-password': 'Magento_Customer/js/change-email-password'
         }

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

@@ -104,6 +104,10 @@ use Magento\Customer\Block\Widget\Name;
                     autocomplete="off" />
             </div>
         </div>
+        <div class="field choice">
+            <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"}}'>
+            <label for="show-password" class="label"><span><?= $block->escapeHtml(__('Show Password')) ?></span></label>
+        </div>
     </fieldset>
 
     <fieldset class="fieldset additional_info">

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

@@ -42,6 +42,10 @@
                                data-validate="{required:true}">
                     </div>
                 </div>
+                <div class="field choice">
+                    <input type="checkbox" name="show-password" title="Show Password" id="show-password" class="checkbox" data-role="show-password" data-mage-init='{"showPassword": {"passwordSelector": "#pass"}}'>
+                    <label for="show-password" class="label"><span><?= $block->escapeHtml(__('Show Password')) ?></span></label>
+                </div>
                 <?= $block->getChildHtml('form_additional_info') ?>
                 <div class="actions-toolbar">
                     <div class="primary"><button type="submit" class="action login primary" name="send" id="send2"><span><?= $block->escapeHtml(__('Sign In')) ?></span></button></div>

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

@@ -259,6 +259,10 @@ $formData = $block->getFormData();
                        autocomplete="off">
             </div>
         </div>
+        <div class="field choice">
+            <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"}}'>
+            <label for="show-password" class="label"><span><?= $block->escapeHtml(__('Show Password')) ?></span></label>
+        </div>
     </fieldset>
 
     <fieldset class="fieldset additional_info">

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

@@ -37,6 +37,10 @@
                 <input type="password" class="input-text" name="password_confirmation" id="password-confirmation" data-validate="{required:true,equalTo:'#password'}" autocomplete="off">
             </div>
         </div>
+        <div class="field choice">
+            <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"}}'>
+            <label for="show-password" class="label"><span><?= $block->escapeHtml(__('Show Password')) ?></span></label>
+        </div>
     </fieldset>
     <div class="actions-toolbar">
         <div class="primary">

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

@@ -0,0 +1,49 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery'
+], function($) {
+    'use strict';
+
+    $.widget('mage.showPassword', {
+        options: {
+            passwordSelector: '',
+            showPasswordSelector: '[data-role=show-password]',
+            passwordInputType: 'password',
+            textInputType: 'text'
+        },
+
+        /**
+         * Widget initialization
+         * @private
+         */
+        _create: function () {
+            this._bind();
+        },
+
+        /**
+         * Event binding, will monitor click event on show password.
+         * @private
+         */
+        _bind: function () {
+            this._on(this.options.showPasswordSelector, {
+                'click': this._showPassword
+            });
+        },
+
+        /**
+         * Show/Hide password
+         * @private
+         */
+        _showPassword: function () {
+            if ($(this.options.passwordSelector).attr("type") == this.options.passwordInputType) {
+                $(this.options.passwordSelector).attr("type", this.options.textInputType);
+            } else {
+                $(this.options.passwordSelector).attr("type", this.options.passwordInputType);
+            }
+        }
+    });
+});