Oscar P:
Estou tentando definir uma validação de senha em Primefaces usando p: password e eu preciso adicionar o ícone do olho show de senha também.
Eu preciso de algo como a imagem abaixo, mostrar ou ocultar o texto / senha quando o usuário clica cursor.
código Primefaces JSF:
<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>
código 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");
}
}
Eu não sei como alterar o texto a senha e vice-versa usando javascript e p: password, e eu não sei como ativar / desativar o passa-show e ícone-pass esconder quando o usuário clica no ícone.
Melloware:
É a maneira mais simples do que você não precisa para remover o atributo basta alterá-lo. Usando JQuery. No exemplo abaixo, o seu pwd1 está em um h: formulário chamado "frmPassword" eo nome do seu botão 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');
}