[Resolved] Show/hide password on both password input fields when user changes password

[Author]

Posts

[MargeP6083]

Tell us what you are trying to do?
Trying to find a solution for a show password on input that is global, throughout the site on login and change password forms.

The change password form has 2 input fields. I would like to show text on both. The link below shows on just one input field.
https://toolset.com/forums/topic/modify-custom-field-to-display-like-a-password-field/#post-1198609

Is it possible to add this for all forms on a site?

Thanks!

[Minesh]

Hello. Thank you for contacting the Toolset support.

You need to add the code I shared with the ticket for those two fields where you want to implement it.

If you do not know how to do it, please let me know, I would be happy to help and for that I need admin access details as well as problem URL where I can see your two password fields.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

\I have set the next reply to private which means only you and I have access to it.

[Minesh]

Thanks! OK, I understand and did that. There is a jump when ticking the boxes. Viewed here: hidden link Is this a style issue?
==>
Yes - there was a style issue from the custom CSS you added to your form's CSS box.

Both text and password fields should have the same bottom martin and I set that and that resolved the jumping issue:

input[type="password"] {
   max-width:400px;
  margin-bottom: 10px;
}
input[type="text"] {
margin-bottom:10px;
}

Is there no way to add this globally to all password fields. It's an accessibility issue. Our users have disabilities. Some need this function. Looks like this is native to WordPress login with the eye icon in the password field.
==>
There is no such feature but I've adjusted the code so it should work for all password fields where you just need to set the password field name while calling the following function.

function toggle_pwd_field(field) {
  pass_id = jQuery('input[name="'+field+'"]').attr("id");
  var x = document.getElementById(pass_id);
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

As you can see we are passing the password field name and it will call the following same function every time.
For example:

<div class="col-md-2"><input type="checkbox" onclick="toggle_pwd_field('user_pass')"> Show Password</div>
<div class="col-md-2"><input type="checkbox" onclick="toggle_pwd_field('user_pass2')"> Show Password</div>

[MargeP6083]

My issue is resolved now. Thanks very much!