Combine Primefaces passwords validation: and show/hide text/password icon together

I’m trying to set a password validation in Primefaces using p:password and I need to add the show password eye icon too.
I need something like the picture below, show or hide the text/password when user clicks cursor.

PRIMEFACES JSF code:

    <h:outputLabel for="pwd1" value="Password:  " />
    <p:password  styleClass="Wid40" id="pwd1" value="#mybean.password1}" match="pwd2" 
                 label="Password:" required="true" placeholder="Password" > 
        <button type="button" onclick="checkPassPwd1()" ><i class="show-pass fa fa-eye fa-lg"></i></button>
    </p:password> 

    <h:outputLabel for="pwd2" value="Repeat Password:  " />         
    <p:password  styleClass="Wid40" id="pwd2" value="#{mybean.password2}" 
                required="true" placeholder="Password" > 

    <button type="button" onclick="checkPassPwd2()" ><i class="show-pass fa fa-eye fa-lg"></i></button> 
   </p:password>      

JAVASCRIPT code:

function checkPassPwd1() {
    var obj=document.getElementById('pwd1');
    var c=obj.nextElementSibling
    if (ojb.getAttribute('type') == "password") {
        c.removeAttribute("class");
        c.setAttribute("class","fas fa-eye");
        obj.removeAttribute("type");
        obj.setAttribute("type","text");
    } else {
        ojb.removeAttribute("type");
        obj.setAttribute('type','password');
        c.removeAttribute("class");
        c.setAttribute("class","fas fa-eye-slash");
    }
}


function checkPassPwd2() {
    var obj=document.getElementById('pwd2');
    var c=obj.nextElementSibling
    if (ojb.getAttribute('type') == "password") {
        c.removeAttribute("class");
        c.setAttribute("class","fas fa-eye");
        obj.removeAttribute("type");
        obj.setAttribute("type","text");
    } else {
        ojb.removeAttribute("type");
        obj.setAttribute('type','password');
        c.removeAttribute("class");
        c.setAttribute("class","fas fa-eye-slash");
   }
}

I don’t know how to change the text to password and vice versa using javascript and p:password, and I don´t know how to enable/disable the show-pass and hide-pass icon when the user clicks the icon.

Answer

It is way simpler than that you don’t need to remove the attribute just change it. Using JQuery. In the example below your pwd1 is in an h:form called “frmPassword” and name your button id=”button1″.

var field = $('#frmPassword\:pwd1');
var button= $('#frmPassword\:button1');

if (field.attr('type') === 'password') {
   field.attr('type', 'text');
   button.removeClass('fas fa-eye-slash');
   button.addClass('fas fa-eye');
} else {
   field.attr('type', 'password');
   button.removeClass('fas fa-eye');
   button.addClass('fas fa-eye-slash');
}

Edit 10/11/2021: This is built into PrimeFaces 10 as toggleMask feature. See Showcase: http://primefaces.org/showcase/ui/input/password.xhtml