JSF 2 InputSecret Example

The h:inputSecret component is one of the most popular JSF Tags or components, it’s like h:inputText component with a one big difference in that it is hiding the text that’s typed within it. The main attribute of the h:inputSecret component is a value attribute that can be associated (binded) into a bean property. This tutorial will show the proper use of h:inputSecret as a placeholder for the password in a login form.

Also Read:

JSF 2 Tutorials

JSF Tutorials

Introduction to JSF

1. ManagedBean

LoginBean.java

package net.javabeat.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class LoginBean {
	private String username = "";
	private String password = "";
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}

	public String login(){
		if(this.username.isEmpty() == false && this.username.equalsIgnoreCase("Josha")
				&& this.password.isEmpty() == false && this.password.equals("Josha1@#$")){
			return "success";
		}
		return "failure";
	}
}

2. The Views

login.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:form>
	<h1>
		<h:outputText value="JavaBeat JSF 2.2 Examples" />
	</h1>
	<h2>
		<h:outputText value="Password Example" />
	</h2>
	<table>
		<tr><td>Enter Your Username : </td><td><h:inputText value="#{loginBean.username}"/></td></tr>
		<tr><td>Enter Your Password : </td><td><h:inputSecret value="#{loginBean.password}"/></td></tr>
		<tr><td colspan="2"><h:commandButton value="Login" action="#{loginBean.login}"/></td></tr>
	</table>
	<br/>
</h:form>
</html>

success.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:form>
	<h1>
		<h:outputText value="JavaBeat JSF 2.2 Examples" />
	</h1>
	<h2>
		<h:outputText value="Password Example" />
	</h2>
	Welcome <h:outputText value="#{loginBean.username}"/>
	<br/>
</h:form>
</html>

failure.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:form>
	<h1>
		<h:outputText value="JavaBeat JSF 2.2 Examples" />
	</h1>
	<h2>
		<h:outputText value="Password Example" />
	</h2>
		Login Failure, Please Try Again !
	<br/>
</h:form>
</html>

3. The Deployment Descriptor (web.xml)

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5" metadata-complete="true">
	<context-param>
		<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>client</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.application.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

4. JSF 2 InputSecret Demo

The below snapshots show you a simple login form that displays an h:inputSecret component for accepting the password of the logged user. The password text will not be displayed as a clear text, but it will be encrypted using a star (*) per each single character the user has entered. The sample will display a welcome message in case the user has logged in successfully. In case the user has failed to log in, a failure message will be displayed.

[wpdm_file id=12]

1. ManagedBean

2. The Views

3. The Deployment Descriptor (web.xml)

4. JSF 2 InputSecret Demo

About Amr Mohammed