HTML and CSS Reference
In-Depth Information
Password:<input type="password"
name="j_password"
placeholder="Password"
class="input-block-level"></input>
<button type="submit"
class="btn btn-large btn-primary">Sign In</button>
<br/><br/>
<h:link value="Not registered? Register now"
styleClass="input-block-level"
outcome="/public/pages/register"/>
</form>
</ui:define>
</ui:composition>
</html>
As you know from Chapter 12, in order to use form-based authentication, we have to use the HTML
<form>
tag;
setting the form action to
"j_security_check"
and the form method
"POST"
, setting the names of the username and
password fields to
"j_username"
and
"j_password"
, and finally adding a submit button to submit the form.
When the user clicks the register link at the end of the login page, the user is directed to the registration page.
Listing 13-24 shows the
register.xhtml
page.
Listing 13-24.
register.xhtml Page
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:ui="
http://xmlns.jcp.org/jsf/facelets
"
xmlns:h="
http://xmlns.jcp.org/jsf/html
"
xmlns:f="
http://xmlns.jcp.org/jsf/core
"
>
<ui:composition template="/WEB-INF/templates/simple.xhtml">
<ui:define name="content">
<h:form id="registerUserForm" styleClass="form-horizontal form-center">
<h3>Register</h3>
<h:outputText id="informationMessage"
value="#{userAddBacking.infoMessage}"
rendered="#{userAddBacking.infoMessage ne null}"
class="informationMessage">
</h:outputText>
<div class="form-group">
<h:outputLabel value="Login Name" for="loginName"/>
