jQuery – hide/show password

It is possible to add to the Toolset login form the typical eye icon to show/hide the password. It is necessary to add some jQuery on the page where the Toolset login shortcode is included. I usually put everything in a Content Template, where I can also add CSS and JS.

In the Content Template content I add the shortcode:

[wpv-login-form redirect_url="[wpv-bloginfo show='url']/login/" redirect_url_fail="" allow_remember="true" remember_default="true"]

Then I can add this jQuery to add the eye icon (I’ve to aapend it as html, I’m using a FontAwesome’s icon) and a checkbox input to activate the hide/show password behaviour:

jQuery(document).ready(function($){

  $('input#user_pass').after('<label id="label-toggle"><input type="checkbox" id="toggle" value="0"><i id="toggleEye" class="fas fa-eye"></i></label>');


  $("#toggle").change(function(){

    // Check the checkbox state
    if($(this).is(':checked')){
      // Changing type attribute
      $("#user_pass").attr("type","text");

      // Change the Text
      $("#toggleText").text("Hide");
      $("#toggleEye").addClass("fa-eye-slash");
    }else{
      // Changing type attribute
      $("#user_pass").attr("type","password");

      // Change the Text
      $("#toggleText").text("Show");
      $("#toggleEye").removeClass("fa-eye-slash");
    }

  });
});

Finally I add some CSS to hide the checkbox and to set the eye in the correct position in the left padding of the text field:

// My CSS

input#user_pass {
  padding-right: 24px;
}
label#label-toggle {
    display: inline-block !important;
    margin-left: -22px;
}
label#label-toggle #toggle {
  display:none;
}

I found the the jQuery solution here:

https://makitweb.com/show-and-hide-password-field-text-with-jquery-and-javascript/

DEMO