pets.xhtml

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- you have to know about JSF facelets to understand what's happenning here really -->

<!-- this root tag says, "for this page use /WEB-INF/incl/layout/template.xhtml as reusable template -->
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                template="/WEB-INF/incl/layout/template.xhtml">
                
	<!-- This makes a call to this method:
	https://github.com/GluuFederation/oxAuth/blob/version_3.1.4/Server/src/main/java/org/xdi/oxauth/auth/Authenticator.java#L524-L524
	-->
	<f:metadata>
		<f:viewAction action="#{authenticator.prepareAuthenticationForStep}" if="#{not identity.loggedIn}"/>
	</f:metadata>
    
    	<!-- defines a fragment called head - it's used to generate the HTML HEAD of resulting markup -->
	<ui:define name="head">
		<meta name="description" content="Gluu Inc." />
		<!-- Here we use # {...} which are JSF EL expressions, they bind server values to this markup -->
		<link href="#{oxAuthConfigurationService.getCssLocation()}/bootstrap.min.css" rel="stylesheet"/>
		<link rel="stylesheet" href="#{oxAuthConfigurationService.getCssLocation()}/style.css"/>
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet"/>
	</ui:define>

	<ui:define name="body">
		<!-- this is copy pasted from somewhere ... -->
		<header class="bs-docs-nav navbar navbar-static-top" id="top">
			<div class="container">
				<div class="navbar-header">
					<a target="_blank" class="navbar-brand">
					<img src="../img/logo.png" alt="logo" /></a>
				</div>
			</div>
		</header>
	
		<h:form id="PetForm">
			<!-- these divs were stolen from some other page... HTML+CSS  so annoying -->
			<div class="bs-docs-section">
				<div class="container">
					<div class="step_bx">
						<h2>Pet login</h2>
						<p>Enter the name of your pet:</p>
						
						<!-- This form field is referenced in authenticate method of script -->
						<input class="form-control" id="PetForm:petName" name="PetForm:petName"
							type="text" autocomplete="off" />
							
						<!-- commandButton component makes the form to be submitted: it triggers this Java method to
						   https://github.com/GluuFederation/oxAuth/blob/version_3.1.4/Server/src/main/java/org/xdi/oxauth/auth/Authenticator.java#L117
						   which in turn ends up calling the authenticate method in script.
						
						   Usage of msgs[ ... ] is employed to lookup predefined UI labels you can find at
						   https://github.com/GluuFederation/oxAuth/blob/version_3.1.4/Server/src/main/resources/oxauth.properties
						-->
						<h:commandButton class="btn btn-done" value="#{msgs['login.login']}"
							action="#{authenticator.authenticate}" />		
					</div>
				</div>
			</div>		
		</h:form>

	</ui:define>
	
</ui:composition>