How to toggle the eye icon and eye icon slash in the login page for the password input type

Using this Methode we can toggle the eye icon images in the login pages.

_.extend(LoginRegisterLoginView.prototype, {

        template:jj_login_register_login_tpl,

        events: _.extend({}, LoginRegisterLoginView.prototype.events, {

          'click .fa-eye': 'togglePassword',

          'click .fa-eye-slash': 'togglePassword'

        }),
        togglePassword: function () {

          var passwordInput = this.$el.find('#login-password');

          var eyeIcon = this.$el.find('.fa-eye');

          var eyeSlashIcon = this.$el.find('.fa-eye-slash');

     

          if (passwordInput.attr('type') === 'password') {

            passwordInput.attr('type', 'text');

            eyeIcon.show();

            eyeSlashIcon.hide();

          } else {

            passwordInput.attr('type', 'password');

            eyeIcon.hide();

            eyeSlashIcon.show();

          }

        },
        })

      });

Leave a comment

Your email address will not be published. Required fields are marked *