Enhanced password input

The password component is an extended version of the JSF <h:inputSecret> component, which also provides a strength indicator and the match mode.

How to do it…

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:

How to do it…

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.

How it works…

Strength testing is done by differently weighing the characters in the ranges [0-9], [a-zA-Z], and [!@#$%^&*?_~.,;=].

There's more…

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:

There's more…

Note

You can set the autocomplete attribute to off for the password field, but beware that nearly all major browsers are now ignoring this attribute for the password fields.

PrimeFaces Cookbook Showcase application

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.147.60.63