Combiner la validation de Primefaces: <p: mot de passe> et afficher / cacher le texte / mot de passe icône ensemble

Oscar P:

Je suis en train de définir une validation de mot de passe dans Primefaces en utilisant p: mot de passe et je dois ajouter l'icône de mot de passe show oeil aussi.
Je besoin de quelque chose comme l'image ci - dessous, afficher ou masquer le texte / mot de passe lorsque l' utilisateur clique sur le curseur.

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>      

Code JAVASCRIPT:

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");
   }
}

Je ne sais pas comment changer le texte par mot de passe et vice versa en utilisant javascript et p: mot de passe, et je ne savez pas comment comment activer / désactiver le show-pass et cache-col icône lorsque l'utilisateur clique sur l'icône.

Melloware:

Il est beaucoup plus simple que vous ne avez pas besoin de supprimer l'attribut juste changer. En utilisant JQuery. Dans l'exemple ci-dessous votre mdp1 est en h: sous forme appelée « frmPassword » et le nom de votre bouton 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');
}