The password
component is an extended version of the JSF <h:inputSecret>
component, which also provides a strength indicator and the match mode.
The basic declaration for the component will provide no feedback on the input password and will just render a simple input component:
<p:password value="#{passwordBean.password}" />
To enable the strength indicator, the feedback
attribute should be set to true
. By default, the indicator will be rendered right next to the component when it is hovered:
When feedback
is enabled, it's also possible to set the prompt label and the strength label with the promptLabel
, weakLabel
, goodLabel
, and strongLabel
attributes. This will help to localize the password input component according to the need:
<p:password value="#{passwordBean.password}" feedback="true" promptLabel="#{msg['password.promptLabel']}" weakLabel="#{msg['password.weakLabel']}" goodLabel="#{msg['password.goodLabel']}" strongLabel="#{msg['password.strongLabel']}" />
To render the indicator in the inline mode without hovering, the inline
attribute should be set to true
.
Strength testing is done by differently weighing the characters in the ranges [0-9]
, [a-zA-Z]
, and [!@#$%^&*?_~.,;=]
.
It is also possible to check a password match by providing the match
attribute, which identifies another password
component with its ID to match the value against. The following panel grid definition contains a message component, along with two password
components and a commandButton
component, to invoke the validation:
<h:panelGrid id="passwords" columns="1"> <p:messages id="messages" showDetail="true" /> <p:password id="passwordMatch1" value="#{passwordBean.password}" match="passwordMatch2" /> <p:password id="passwordMatch2" value="#{passwordBean.password}" /> <p:commandButton update="passwords" value="Save" /> </h:panelGrid>
When the input password does not match the actual password, the validation error will be thrown, as shown in the following screenshot:
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on every Servlet 3.x compatible application server, such as JBoss WildFly or Apache TomEE.
The showcase for the recipe is available under http://localhost:8080/pf-cookbook/views/chapter3/password.jsf
.