Seam-gen generates a standard login page that we can personalize. It is called login.xhtml and you can find it in the /view/ path. It uses the JBoss Seam authentication features, so we will extend it to include our login support code. Also, it uses the template.xhtml page that we have already seen.

Let's see the code:

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.com/products/seam/taglib" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:rich="http://richfaces.org/rich" template="layout/template.xhtml">
<ui:define name="body">
<h:form id="login">
<rich:panel>
<f:facet name="header">Login</f:facet>
<p>Please login here</p>
<div class="dialog">
<h:panelGrid columns="2" rowClasses="prop" columnClasses="name,value">
<h:outputLabel for="username">
Username
</h:outputLabel>
<h:inputText id="username"
value="#{credentials.username}"/>
<h:outputLabel for="password">
Password
</h:outputLabel>
<h:inputSecret id="password"
value="#{credentials.password}"/>
<h:outputLabel for="rememberMe">
Remember me
</h:outputLabel>
<h:selectBooleanCheckbox id="rememberMe" value="#{identity.rememberMe}"/>
</h:panelGrid>
</div>
<p>
<i>Note - </i>
You may login with the username 'admin' and a blank password.
</p>
</rich:panel>
<div class="actionButtons">
<h:commandButton value="Login"
action="#{identity.login}"/>
</div>
</h:form>
</ui:define>
</ui:composition>

Again, we see DOCTYPE and the Facelets ui:composition component that wraps content to be included in another Facelet. As you can see, in fact, after the xmlns declarations, there is the template attribute that points to the template.xhtml page we have seen and uses it as a template.

Remember the body insertion point in template.xhtml? How do we insert code at that point?

The answer is simple just use the<ui:define> tag and set the name attribute as one of the insertion points:

<ui:define name="body">
<! - this code will be inserted -->
</ui:define>

We can find it in our login.xhtml page. It includes the personalized part of the login.xhtml page, that is the one with the login form.

We can see the code to declare<h:form> and the<rich:panel> component inside it. It contains the inputs for username and password (and a Remember me checkbox). Below the panel, there is the standard JSF h:commandButton that calls the login action. We don't want an Ajax login, so it's okay to use a standard action component that will redirect to the home page after the login is complete.

All of those components point to a special Seam component called identity, which manages the login phase.

We are not going to edit this page a lot, the only thing we will do is delete the Note section, as we don't need it:

<p>
<i>Note - </i> You may login with the username 'admin' and a blank password.
</p>

This is how the login page appears: