Toggle Password

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="../assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of Show Password
                    $('.js-toggle-password').each(function () {
                      new HSTogglePassword(this).init()
                    });
                  });
                </script>

Examples

Preview
HTML

Password

                    
                      <!-- Form Group -->
                      <div class="form-group w-md-50">
                        <label for="passwordLabel" class="input-label">Password</label>

                        <div class="input-group input-group-merge">
                          <input type="password" class="js-toggle-password form-control" id="passwordLabel" placeholder="Enter password" value="TH6R95E9LsdT"
                                 data-hs-toggle-password-options='{
                                   "target": ".js-password-toggle-target",
                                   "defaultClass": "tio-hidden",
                                   "showClass": "tio-visible",
                                   "classChangeTarget": "#changePassIcon"
                                 }'>
                          <a class="input-group-append js-password-toggle-target" href="javascript:;">
                            <span class="input-group-text">
                              <i id="changePassIcon"></i>
                            </span>
                          </a>
                        </div>
                      </div>
                      <!-- End Form Group -->

With checkbox

Preview
HTML

Current password

New password

Show password

                    
                      <!-- Current Password -->
                      <div class="form-group">
                        <label for="currentPasswordLabel" class="input-label">Current password</label>
                        <input type="password" class="js-toggle-password form-control" id="currentPasswordLabel" placeholder="Enter password" value="TH6R95E9LsdT"
                               data-hs-toggle-password-options='{
                                 "target": "#changePasswordToggleCheckboxEg"
                               }'>
                      </div>

                      <!-- New Password -->
                      <div class="form-group">
                        <label for="newPasswordLabel" class="input-label">New password</label>
                        <input type="password" class="js-toggle-password form-control" id="newPasswordLabel" placeholder="Enter password"
                               data-hs-toggle-password-options='{
                                 "target": "#changePasswordToggleCheckboxEg"
                               }'>
                      </div>

                      <div class="form-group">
                        <div class="custom-control custom-checkbox">
                          <input type="checkbox" id="changePasswordToggleCheckboxEg" class="custom-control-input">
                          <label class="custom-control-label" for="changePasswordToggleCheckboxEg">Show password</label>
                        </div>
                      </div>
                      <!-- End New Password -->