Combine primefaces p:keyboard and p:password components - jsf-2

Question

I have an issue here, that I want combine p:password and p:keyboard components in primefaces, I want password options like strength, on keyboard with password="true" so I can get strength meter, validations, match ,.. etc what special for p:password on keyboard of password='true' OR vice versa, adding keyboard to p:password.
I think easier to add keyboard to password field, as example password auto clear value when validation or re-enter form while keyboard save it !
Any idea how to do this, or workaround to make that?
In another word a solution for this equation :
<p:keyboard id="pwdPassword" value="#{loginManagedBean.password}" password="true" required="true" requiredMessage="Please enter your password"/>
And
<p:password id="pwd1" name="pwd1" value="#{loginManagedBean.newpassword}" match="pwd2" feedback="true" required="true" requiredMessage="Please Enter your new password">
<f:validateLength minimum="6" />
</p:password>
= ?

Answer 1

There is a workaround that you might find interesting.
The strategy is to synchronize the value between a keyboard and a password component and hide the input value for one of them.
If you check what's happening behind the curtains (here and here) you will be able to see some possibilities.
The first one that comes to my mind is hiding the input from the main password component and write some javascript code to make things appear and disappear as needed.
Here is the scenario I've created to test the idea:
<h:form id="mainForm">
<h:panelGrid columns="2" id="matchGrid" cellpadding="5">
<h:outputLabel for="pwd1" value="Password 1: *" />
<h:panelGroup>
<p:keyboard id="pwdPassword" widgetVar="kVar" value="#{viewMBean.password}" password="true" required="true" requiredMessage="Please enter your password"/>
<p:password id="pwd1" widgetVar="pVar" value="#{viewMBean.password2}" match="pwd2" label="Password 1" required="true" feedback="true" />
</h:panelGroup>
<h:outputLabel for="pwd2" value="Password 2: *" />
<p:password id="pwd2" value="#{viewMBean.password2}" label="Password 2" required="true" />
</h:panelGrid>
</h:form>
And here is the javascript:
function updateStrength() {
var p = PF('pVar');
var k = PF('kVar');
p.jq.val(k.jq.val());
var value = p.jq.val(),
label = null,
meterPos = null;
if (value.length === 0) {
label = p.cfg.promptLabel;
meterPos = '0px 0px';
} else {
var score = p.testStrength(p.jq.val());
if (score < 30) {
label = p.cfg.weakLabel;
meterPos = '0px -10px';
}
else if (score >= 30 && score < 80) {
label = p.cfg.goodLabel;
meterPos = '0px -20px';
}
else if (score >= 80) {
label = p.cfg.strongLabel;
meterPos = '0px -30px';
}
}
//update meter and info text
p.meter.css('background-position', meterPos);
p.infoText.text(label);
}
$(document).ready(function() {
var p = PF('pVar');
//p.jq.hide();
var k = PF('kVar');
k.jq.focus(function() {
p.show();
}).blur(function() {
if (!$.keypad._keypadShowing) {
p.hide();
}
}).keyup(updateStrength);
PrimeFaces.widget.Password.prototype.show = function() {
$(".keypad-close").click(function() {
console.log("close p");
p.hide();
});
$(".keypad-key").click(updateStrength);
//align panel before showing
if (!this.cfg.inline) {
this.panel.css({
left: '',
top: '',
'z-index': ++PrimeFaces.zindex
})
.position({
my: 'left top',
at: 'right top',
of: k.jq
});
this.panel.fadeIn();
}
else {
this.panel.slideDown();
}
};
});
I hope that will give you more "ammo" to deal with that challenge of yours.