To create this type of page, you need to start with the login.jsp file that shipped with Access Manager 3.0. This file needs to be modified to run on Access Manager 3.1.x. For instructions, see Modifications Required for a 3.0 Login Page
in the Novell Access Manager 3.1 SP1 Installation Guide.
Figure A-7 illustrates such a page which has been modified to remove the Novell branding and logo. It has also been modified to prompt the user for an email address in addition to a username and password.
Figure A-7 Custom Page Derived from the 3.0 login.jsp File
To create this page, see the following sections:
The bold lines in the following sample file are the lines that have been modified to change the branding and the login prompts.
<%@ page language="java" %> <%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <%@ page import="com.novell.nidp.common.provider.*" %> <%@ page import="java.util.*" %> <%@ page import="com.novell.nidp.ui.*" %> <%@ page import="com.novell.nidp.*" %> <%@ page import="com.novell.nidp.servlets.*" %> <%@ page import="com.novell.nidp.resource.*" %> <%@ page import="com.novell.nidp.resource.jsp.*" %> <%@ page import="com.novell.nidp.common.xml.w3c.*" %> <% ContentHandler handler = new ContentHandler(request,response); %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//<%=handler.getLanguageCode()%>"> <html lang="<%=handler.getLanguageCode()%>"> <head> <link rel="stylesheet" href="<%= request.getContextPath() %>/images/hf_style.css" type="text/css"> <style type="text/css" media="screen"><!-- #headimage { position: relative; top: 0px; left: 0px; z-index: 1} #title { position: relative; top: 40px; left: 5px; color: white; z-index: 4} #locallabel { position: relative; top: 78px; left: 10px; z-index: 4} #login { text-align: center } --></style> <META HTTP-EQUIV="Content-Language" CONTENT="<%=handler.getLanguageCode()%>"> <title>MY WORLD</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="<%= request.getContextPath() %>/images/showhide_2.js"></script> <script language="JavaScript"> var i = 0; function imageSubmit() { if (i == 0) { i = 1; document.IDPLogin.submit(); } return false; } </script> </head> <body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" rightmargin="0" onLoad="document.IDPLogin.Ecom_User_ID.focus();" > <form name="IDPLogin" enctype="application/x-www-form-urlencoded" method="POST" action="<%= (String) request.getAttribute("url") %>" AUTOCOMPLETE="off"> <table style="margin-top: 6em" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="50%" height="80 px"> </td> <td colspan="2"> <div id="title"><b>HHB Partner</b></div> <div id="locallabel"><b>My Company</b></div> <div id="headimage"><img src="<%= request.getContextPath() %>/images/Odyssey_Head.gif" alt="" height="80" width="550" border="0"></div> </td> <td width="100%"> </td> </tr> <tr> <td width="50%"> </td> <td style="background-color: #efeee9; padding: 10px" colspan="2"> <% String err = (String) request.getAttribute(NIDPConstants.ATTR_LOGIN_ERROR); if (err != null) { %> <div><label><%=err%></label></div> <% } // Determine if this login page is being used for account identification // purposes %> <span id="login2" style="display: block;"> <table> <tr> <td nowrap="nowrap"> <div> <label style="width: 100px"><%=handler.getResource(JSPResDesc.USERNAME)%></label></label> </div> </td> <td width="100%" nowrap="nowrap"> <div> <input type="text" class="smalltext" name="Ecom_User_ID" size="30"> </div> </td> </tr> <tr> <td nowrap="nowrap"> <div> <label style="width: 100px">Email Address:</label></label> </div> </td> <td width="100%" nowrap="nowrap"> <div> <input type="text" class="smalltext" name="Ecom_User_Mail" size="30"> </div> </td> </tr> <tr> <td nowrap="nowrap"> <div> <label><%=handler.getResource(JSPResDesc.PASSWORD)%></label> </div> </td> <td style="white-space: nowrap"> <div> <input type="password" class="smalltext" name="Ecom_Password" size="30"> <input alt="<%=handler.getResource(JSPResDesc.LOGIN)%>" border="0" name="loginButton2" src="<%=handler.getImage("btnlogin.gif",true)%>" type="image" value="Login" onClick="return imageSubmit()"> </div> </td> </tr> </table> </span> </td> <td width="100%"> </td> </tr> <tr> <td width="50%"></td> <td style="background-color: #E6D88C; padding-left: 10px"><img style="padding-right: 200px" src="<%= request.getContextPath() %>/images/LAP_interoperable_logo_100.gif" align="absmiddle" border="0"></td> <td style="background-color: #E6D88C; padding-right: 10px" align="right" width="100"> </td> <td width="100%"></td> </tr> <% if (NIDPCripple.isCripple()) { %> <tr> <td colspan=4 width="100%" align="center"><%=NIDPCripple.getCrippleAdvertisement(request.getLocale())%></td> </tr> <% } %> </table> </form> </body> </html>
After modifying the file, you still need to create a method and a contract. The method needs to use a name/password class and have the following properties defined:
Query property values:
Property Name: Query
Property Value: (&(objectclass=person)(mail=%Ecom_User_Mail%))
JSP property values:
Property Name: JSP
Property Value: <filename>
Replace <filename> with the name of your custom login page. Do not include the JSP extension in the value.
MainJSP property values:
Property Name: MainJSP
Property Value: true
You then need to create a contract that uses this method and assign it to a protected resource.