How to use your own custom layout and styling

The default Airlock IAM layout provides a clean and simple user interface. If your situation requires placing additional content on the login pages, such as advertisements, info on other services/products or about your company, etc. you can provide your own page layout.

  1. Assuming you have a complete set of files that make up your page (HTML, CSS, javascript, images, etc.) you need to do the following:
  2. Copy all images to instances/auth/loginapp-layout/images
  3. Copy all JavaScript source files to instances/auth/loginapp-layout/js
  4. Copy all CSS files to instances/auth/loginapp-layout/css (which you have to create first)
  5. From your HTML file, copy everything within the <body> ... </body> tags to instances/auth/loginapp-layout/layout/layout.jsp

    6. Make sure you retain the taglib line

    Update all image and JavaScript file references to point to /images/ and /js/, respectively

    If you have multiple HTML files for different flows (e.g. one for login, another for registration, and a third one for token migration), you have to do this for each file and put the contents into independent layout files

  6. From your HTML file, extract all elements within the <head> ... </head> tags which are required for your page and copy them to instances/auth/loginapp-layout/html-header-custom.jsp 

    7. Take care to replace previous lines in this file which are no longer necessary, e.g. the favicon definitions (see also below "Note about favicons")

    Also note that jQuery is required by Airlock IAM and already included in the page's head (if you absolutely need to know the exact version number, please check in html-header.jsp in loginapp.war)

Next, you need to specify where in your layout the Airlock IAM specific content (e.g. login form etc.) must be included. A minimal layout may look as follows:

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!-- Including the header -->
<jsp:include page="/header-custom.jsp"/>

<!-- The title of the page -->
<h1><fmt:message key="${param.contentTitleKey}"/></h1>

<!-- The actual body -->
<jsp:include page="${param.content}"/>

<!-- The footer -->
<jsp:include page="/footer-custom.jsp"/>
  • Accordingly, all your layout files created in step 4 above need to be modified to include references to Airlock IAM content:
  • <jsp:include page="${param.content}"/>

    • Required. Includes the main content (login form, feedback messages etc.).

  • <jsp:include page="/content/language-selection.jsp"/>

    • Optional. Includes the language switcher. By default, called in  header-custom.jsp  

    Can be removed if all your users speak the same language 

  • <fmt:message key="${param.contentTitleKey}"/>

    • Optional. Includes the translated heading.

If you have one single layout file, it will be applied to almost all pages. Please check instances/auth/loginapp-layout/layout/minimal-layout.jsp for exceptions. Depending on your situation, you may want to adjust it accordingly.

If, on the other hand, you have multiple layout files, you will have to define which page uses which layout. In the page's JSP, set the layout attribute.

For example in login.jsp:

<%@ page contentType="text/html" pageEncoding="UTF-8" %>
<%@ taglib prefix="iam" uri="/WEB-INF/tld/layout.tld" %>
<iam:layout
    layout="/layout/my-company-layout.jsp"
    htmlTitleKey="loginpage.title"
    contentTitleKey="loginpage.form-caption" 
    pageId="login">

    <jsp:attribute name="htmlHeader">/content/login-header.jsp</jsp:attribute>
    <jsp:attribute name="content">/content/login-content.jsp</jsp:attribute>
</iam:layout>