Cisco Identity Services Engine User Guide, Release 1.2
Sample Code for Sponsor and Guest Portal Customizations
Downloads: This chapterpdf (PDF - 548.0KB) The complete bookPDF (PDF - 16.6MB) | Feedback

Table of Contents

Sample Code for Sponsor and Guest Portal Customizations

Sample Code for Custom Guest Notifications from Sponsor Portal

E-Mail Notification Template

SMS Text Message Notification Template

Print Notification Template

Sample HTML for Custom Pages for the Guest Portal

Fields Used on Custom HTML Pages

Login Page Sample HTML

Detect C ookies at Login Sample HTML

S uccessful Guest Login Page Sample HTML

Error Page Sample HTML

Acceptable Use Policy (AUP) Page Sample HTML

C hange Password Page Sample HTML

S elf-Registration Page Sample HTML

Self-Registration Result Page Sample HTML

Device Registration Page Sample HTML

S ample style.css for Custom Guest Portal HTML Pages

Sample Code for Sponsor and Guest Portal Customizations

Cisco ISE enables you customize the guest notifications in the Sponsor portal and the look-and-feel of the Guest portal.

Sample Code for Custom Guest Notifications from Sponsor Portal

You can customize the templates used by sponsors to send guests their login credentials:

E-Mail Notification Template

The following is an example of the login information for the body of an e-mail in an English language template:

Welcome to the Guest Portal, your username is $username$ and password is $password$

The $username$ and $password$ strings will be replaced with the username and password values from the Guest User account.

In the e-mail body, you can use special variables to provide the details for the created guest account. When using these variables, you must use all uppercase or all lowercase letters, and you cannot mix them. For example, the string for username can be either $USERNAME$ or $username%, but it cannot be $UserName$.

You can use these variables in the e-mail notification template:

    • $USERNAME$ = The username created for the guest.
    • $PASSWORD$ = The password created for the guest.
    • $STARTTIME$ = The time from which the guest account will be valid.
    • $ENDTIME$ = The time at which the guest account will expire.
    • $FIRSTNAME$ = The first name of the guest.
    • $LASTNAME$ = The last name of the guest.
    • $EMAIL$ = The e-mail address of the guest.
    • $TIMEZONE$ = The time zone of the user.
    • $MOBILENUMBER$ = The mobile number of the guest.
    • $OPTION1$ = Optional field for editing.
    • $OPTION2$ = Optional field for editing.
    • $OPTION3$ = Optional field for editing.
    • $OPTION4$ = Optional field for editing.
    • $OPTION5$ = Optional field for editing.
    • $DURATION$ = Duration of time for which the account will be valid.
    • $RESTRICTEDWINDOW$ = The time window during which the guest is not allowed to log in.
    • $TIMEPROFILE$ = The name of the time profile assigned.

SMS Text Message Notification Template

In the text message, you can use special variables to provide the details for the created guest account. When using these variables, you must use all uppercase or all lowercase letters, and you cannot mix them. For example, the string for username can be either $USERNAME$ or $username%, but it cannot be $UserName$.

You can use these variables in the SMS text message notification template:

    • $USERNAME$ = The username created for the guest.
    • $PASSWORD$ = The password created for the guest.
    • $STARTTIME$ = The time from which the guest account will be valid.
    • $ENDTIME$ = The time at which the guest account will expire.
    • $FIRSTNAME$ = The first name of the guest.
    • $LASTNAME$ = The last name of the guest.
    • $EMAIL$ = The e-mail address of the guest.
    • $TIMEZONE$ = The time zone of the user.
    • $MOBILENUMBER$ = The mobile number of the guest.
    • $OPTION1$ = Optional field for editing.
    • $OPTION2$ = Optional field for editing.
    • $OPTION3$ = Optional field for editing.
    • $OPTION4$ = Optional field for editing.
    • $OPTION5$ = Optional field for editing.
    • $DURATION$ = Duration of time for which the account will be valid.
    • $RESTRICTEDWINDOW$ = The time window during which the guest is not allowed to log in.
    • $TIMEPROFILE$ = The name of the time profile assigned.

To send the text message to the mobile phone number of the guest, use the variable $MOBILENUMBER$. The $MOBILENUMBER$ variable is replaced by the mobile phone number as entered by the sponsor.

Print Notification Template

In the printed copy, you can use special variables to provide the details for the created guest account. When using these variables, you must use all uppercase or all lowercase letters, and you cannot mix them. For example, the string for username can be either $USERNAME$ or $username%, but it cannot be $UserName$.

You can use these variables in the print notification template:

    • $USERNAME$ = The username created for the guest.
    • $PASSWORD$ = The password created for the guest.
    • $STARTTIME$ = The time from which the guest account will be valid.
    • $ENDTIME$ = The time at which the guest account will expire.
    • $FIRSTNAME$ = The first name of the guest.
    • $LASTNAME$ = The last name of the guest.
    • $EMAIL$ = The e-mail address of the guest.
    • $TIMEZONE$ = The time zone of the user.
    • $MOBILENUMBER$ = The mobile number of the guest.
    • $OPTION1$ = Optional field for editing.
    • $OPTION2$ = Optional field for editing.
    • $OPTION3$ = Optional field for editing.
    • $OPTION4$ = Optional field for editing.
    • $OPTION5$ = Optional field for editing.
    • $DURATION$ = Duration of time for which the account will be valid.
    • $RESTRICTEDWINDOW$ = The time window during which the guest is not allowed to log in.
    • $TIMEPROFILE$ = The name of the time profile assigned.

Sample HTML for Custom Pages for the Guest Portal

You can use these examples to create HTML pages for the guest portal pages. When you create custom portals by uploading your own HTML pages, the details policy, language templates, and portal themes do not apply. So, if these features are important to you, you will need to write the HTML code to deliver similar functionality, or use the standard portal pages instead.

When you upload custom html files, these changes apply only to the guest portal. The other portals use the settings defined in the portal theme (see “Customizing the Web Portal Images and Color Scheme” section). To better synchronize the look-and-feel amongst the portals, upload your custom logos and banners to the portal theme too.

These HTML examples reference a directory structure for a portal named demo2:

Fields Used on Custom HTML Pages

You must define some of these fields in the Cisco ISE Admin UI, including:

  • Guest password policy: Choose Administration > Web Portal Management > Settings > Guest > Password Policy .
  • Guest username policy: Choose Administration > Web Portal Management > Settings > Guest > Username Policy .

 

Table D-1 Custom HTML Pages Fields

Field
ID Name
Restrictions
Login Page

Username

guestUser.name

1000 alphanumeric, and special characters. Specified in Cisco ISE Admin.

Password

guestUser.password

1000 characters, alphanumeric. Specified in Cisco ISE Admin.

Self Registration Page

First name

guestUser.firstName

100 alphanumeric, and special characters

Last name

guestUser.lastName

100 alphanumeric, and special characters

Email address

guestUser.emailAddress

100 alphanumeric, and special characters

Phone number

guestUser.phoneNumber

1000 alphanumeric, and special characters

Company

guestUser.company

1000 alphanumeric, and special characters

Optional data 1-5

guestUser.optionaData 1
guestUser.optionaData 2
guestUser.optionaData 3
guestUser.optionaData 4
guestUser.optionaData 5

4000 alphanumeric, and special characters

TimeZone

guestUser.timezone

drop-down box

Change Password Page

Username

username

1000 alphanumeric, and special characters. Specified in Cisco ISE Admin.

Old password

currentpassword

1000 alphanumeric, and special characters. Specified in Cisco ISE Admin.

New password

newpassword

1000 alphanumeric, and special characters. Defined in Cisco ISE Admin.

Confirm password

confirmpassword

1000 alphanumeric, and special characters. Specified in Cisco ISE Admin.

AUP Page

Accept terms and conditions

guestUser.acceptUsePolicy

check box

Device Registration Page

Device ID

registeredMac

6-pair alphanumeric character set

Login Page Sample HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
<script language='javascript'>
 
</script>
</head>
<body class="pagebg">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="107">&nbsp;</td>
</tr>
<tr>
<td height="172" align="center" valign="middle"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" height="172" align="left" valign="middle"><table width="75%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="27%"><img src="portals/demo2/logo.png" alt="" width="218" height="63" /></td>
<td width="73%"><table width="85%" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td height="35" align="left" class="headding">ISE 1.1</td>
</tr>
<tr>
<td align="left" class="label">Guest Access</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left" class="headding1">Version:1.1</td>
</tr>
</table></td>
</tr>
</table></td>
<td width="45%" align="right" valign="middle"><table width="50%" border="0" cellspacing="0" cellpadding="0">
<form id="cuesLoginForm" method="POST" action="/guestportal/LoginCheck.action">
<tr>
<td width="32%" height="30" align="left" valign="middle" class="label">Username :</td>
<td width="68%" align="left"><input alt="Username:" name="guestUser.name" id="username" type="text" size="20" value=""/></td>
</tr>
<tr>
<td height="30" align="left" valign="middle" class="label">Password :</td>
<td align="left"><input alt="Password:" name="guestUser.password" id="password" type="password" size="20" value=""/></td>
</tr>
<tr>
<td height="12" align="left" valign="middle"></td>
<td height="12" align="left"></td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left"><input type="submit" name="button" id="button" value="Log In" />
</td>
</tr>
<input type="hidden" name="drpPassword" id="drpPassword" />
<input type="hidden" name="drpUsername" id="drpUsername" />
</form>
<!-- <form id="doSelfService" action="/guestportal/SelfService.action">-->
<!-- <input type="hidden" id="buttonClicked" name="buttonClicked" value=""></input>-->
<!-- <input type="hidden" id="switch_url" name="switch_url" value=""></input>-->
<!-- <input type="hidden" id="redirect" name="redirect" value=""></input>-->
<!-- <input type="hidden" id="err_flag" name="err_flag" value=""></input>-->
<!-- </form>-->
 
<!-- form for self service -->
<struts2:form id="selfServiceForm" action="SelfService.action">
<input type="hidden" id="buttonClicked" name="buttonClicked" value="${buttonClicked}"></input>
<input type="hidden" id="switch_url" name="switch_url" value="${switch_url}"></input>
<input type="hidden" id="redirect" name="redirect" value="${redirect}"></input>
<input type="hidden" id="err_flag" name="err_flag" value="${err_flag}"></input>
</struts2:form>
 
<struts2:form id="changePasswordForm" action="ChangePassLoginMultiPortal.action">
<input type="hidden" id="username" name="guestUser.name" value="${username}"></input>
<input type="hidden" id="password" name="guestUser.password" value="${password}"></input>
</struts2:form>
 
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left">&nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left"><a href="javascript:doChangePassword();" class="link" >Change Password</a>&nbsp;&nbsp;
<a href="javascript:doSelf();" class="link">SelfService</a>&nbsp;&nbsp;
<a href="javascript:submitMyForm();" class="link">Device Registration</a>
</td>
</tr>
 
</table></td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>
 
<script>
function doSelf()
{
document.forms[0].action = "SelfService.action";
document.getElementById("buttonClicked").value = document.getElementById("buttonClicked").value;
document.getElementById("redirect").value = document.getElementById("redirect").value;
document.getElementById("switch_url").value = document.getElementById("switch_url").value;
document.forms[0].submit();
}
 
function doChangePassword()
{
//var changePasswordForm = document.getElementById("changePasswordForm");
//changePasswordForm.submit();
document.forms[0].action = "ChangePassLoginMultiPortal.action";
document.getElementById("username").value = document.getElementById("username").value;
document.getElementById("password").value = document.getElementById("password").value;
document.forms[0].submit();
}
 
function submitMyForm(){
document.forms[0].action = "DevRegPortalLogin.action";
document.getElementById("drpUsername").value = document.getElementById("username").value;
document.getElementById("drpPassword").value = document.getElementById("password").value;
document.forms[0].submit();
}
 

</script>

Detect Cookies at Login Sample HTML

If users have cookies disabled in their web browser, Cisco ISE redirects them to the default guest portal when logging in, which bypasses your customized portal. You can prevent this redirect by adding code to detect whether cookies are disabled. If they are disabled, an error message displays instructing users to enable cookies and and the login button is disabled.

<script>
 
var UI_METHODS = UI_METHODS || {};
 
UI_METHODS.manageCookies = {
 
createCookie : function ( name, value, days ) {
var expires = "";
if (days) {
var date = new Date();
date.setTime( date.getTime() + (days * 24 * 60 * 60 * 1000) );
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=/";
return true;
},
 
readCookie : function ( name ) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
 
for (var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
 
return null;
},
 
eraseCookie : function ( name ) {
UI_METHODS.manageCookies.createCookie(name, '', -1);
return true;
}
};
 
var are_cookies_enabled = function ( ) {
 
// Cannot rely on this: Some browsers (like IE) will return "true" here even if all cookies are blocked!
// var cookieEnabled = (navigator.cookieEnabled) ? true : false;
 
var areCookiesEnabled = false,
cookieName = "testcookie";
 
UI_METHODS.manageCookies.createCookie( cookieName, 1, 365 );
 
areCookiesEnabled = ( UI_METHODS.manageCookies.readCookie( cookieName ) != null ) ?
UI_METHODS.manageCookies.eraseCookie( cookieName ) :
areCookiesEnabled;
 
return ( areCookiesEnabled );
};
 
</script>
 
<script type="text/javascript">
document.getElementById('loginsubmit').disabled=false;
if ( !are_cookies_enabled() ) {
document.getElementById('cookieMsg')['style']['display'] = 'block';
document.getElementById('loginsubmit').disabled=true;
 
}
 
</script>

Successful Guest Login Page Sample HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/CustomPortal/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ccebfe">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left" valign="middle"><img src="portals/CustomPortal/logo.png" alt="" width="90" height="90" /></td>
<td width="72%" class="headding">ISE 1.0 Guest Portal </td>
<td width="13%" align="right" valign="middle" > </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" bgcolor="#ccebfe"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="content">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<!--INSERT HEADER HERE --><td align="left" class="headding2"> CoA Successful </td><!--END HEADER HERE -->
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left"><table width="50%" border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td height="12" align="left" valign="middle"></td>
<td height="12" align="left"></td>
</tr>
<form id="loginform" action="/guestportal/Login.action" method="post">
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left"><input type="submit" name="button2" id="button2" onclick="javascript:doOk()" value="OK" /> </td>
</tr>
</form>
</table></td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2008-2009, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>
 
<script>
 
function doOk()
{
document.forms[0].action = "Login.action";
document.forms[0].submit();
}
</script>

Error Page Sample HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Error Detected</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
<script language='javascript'>
 
</script>
</head>
<body class="pagebg">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="107">&nbsp;</td>
</tr>
<tr>
<td height="172" align="center" valign="middle"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" height="172" align="left" valign="middle"><table width="75%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="27%"><img src="portals/demo2/logo.png" alt="" width="218" height="63" /></td>
<td width="73%"><table width="85%" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td height="35" align="left" class="heading">Error Detected in Guest Portal</td>
</tr>
<tr>
<!--INSERT ERROR HERE -->
<td height="35" align="left" class="heading">Second</td>
<!--END ERROR HERE -->
</tr>
</table></td>
</tr>
</table></td>
<td width="45%" align="right" valign="middle"><table width="50%" border="0" cellspacing="0" cellpadding="0">
 
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left">&nbsp;&nbsp;&nbsp;
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>
 
<script>
function doSelf()
{
document.forms[0].action = "Login.action";
document.forms[0].submit();
}
</script>

Acceptable Use Policy (AUP) Page Sample HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ccebfe">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left" valign="middle"><img src="portals/demo2/logo.png" alt="" width="157" height="44" /></td>
<td width="72%" class="headding">ISE 1.1 Guest Portal </td>
<td width="13%" align="right" valign="middle" > </td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#ccebfe"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="content">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="left" class="headding2">Acceptable Use Policy</td>
</tr>
<tr>
<td align="left" >Please accept the policy:<br /><br />
 
1. You are responsible for </br>(1) maintaining the confidentiality of the password and </br>(2) all activities that occur under your username and password.
</br></br>
2. Cisco systems offers the Service for activities such as the active use of e-mail, instant messaging, browsing the World Wide Web and accessing corporate intranets. High volume data transfers, especially sustained high volume data transfers, are not permitted. Hosting a web server or any other server by use of our Service is prohibited. Trying to access someone else’s account, sending unsolicited bulk e-mail, collection of other people’s personal data without their knowledge and interference with other network users are all prohibited.
</br></br>
3. Cisco systems reserves the right to suspend the Service if (1) Cisco systems reasonably believes that your use of the Service is unreasonably excessive or (2) you are using the Service for criminal or illegal activities.
</br></br>
4. You do not have the right to resell this Service to a third party.
 
</br></br>
5. Cisco systems reserves the right to revise, amend or modify these Terms & Conditions, our other policies and agreements, and aspects of the Service itself. Notice of any revision, amendment, or modification will be posted on Cisco system’s website and will be effective as to existing users 30 days after posting same.
</br></br></td>
</tr>
<form action="/guestportal/AcceptPolicy.action" method="post">
<tr>
<td align="left"><input type="checkbox" name="guestUser.acceptUsePolicy" id="guestUser.acceptUsePolicy" value="false" onclick="javascript:enableButtons()" />Accept terms and conditions</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left"><input type="Submit" id="acceptButton" value="Accept" />
<input type="button" id="declineButton" value="Decline" onclick="javascript:doDeclineTerms()"/></td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
</form>
</table></td>
</tr>
</table>
<form id="declineTerms" onsubmit="return true;" action="/guestportal/DeclinePolicy.action" method="post"><table class="wwFormTable">
<input type="hidden" id="buttonClicked" name="buttonClicked" value=""></input>
<input type="hidden" id="switch_url" name="switch_url" value=""></input>
<input type="hidden" id="redirect" name="redirect" value=""></input>
<input type="hidden" id="err_flag" name="err_flag" value=""></input>
</table></form>
 
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>
 
<script>
enableButtons();
function enableButtons(){
accepttermsCheckbox = document.getElementById('guestUser.acceptUsePolicy').checked;
if (!accepttermsCheckbox) {
document.getElementById('acceptButton').disabled = true;
document.getElementById('guestUser.acceptUsePolicy').value = false;
}
else {
document.getElementById('acceptButton').disabled = false;
document.getElementById('guestUser.acceptUsePolicy').value = true;
}
}
</script>
 
<script>
function doDeclineTerms()
{
var declineTermsForm = document.getElementById("declineTerms");
declineTermsForm.submit();
}
</script>

Change Password Page Sample HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
</head>
<body class="pagebg">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="107">&nbsp;</td>
</tr>
<tr>
<td height="172" align="center" valign="middle"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" height="172" align="left" valign="middle"><table width="75%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="27%"><img src="portals/demo2/logo.png" alt="" width="218" height="63" /></td>
<td width="73%"><table width="85%" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td height="35" align="left" class="headding">ISE 1.1</td>
</tr>
<tr>
<td align="left" class="label">Guest Access</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left" class="headding1">Version:1.1</td>
</tr>
</table></td>
</tr>
</table></td>
<td width="45%" align="right" valign="middle"><table width="65%" border="0" cellspacing="0" cellpadding="0">
<form action="/guestportal/ChangePassword.action" method="post">
<tr>
<td height="30" align="left" valign="middle" class="label">Enter current password :</td>
<td align="left"><input alt="Password:" name="currentpassword" id="currentpassword" type="password" size="20" value=""/></td>
</tr>
<tr>
<td height="30" align="left" valign="middle" class="label">Enter new password :</td>
<td align="left"><input alt="Password:" name="newpassword" id="newpassword" type="password" size="20" value=""/></td>
</tr>
<tr>
<td height="30" align="left" valign="middle" class="label">Re-enter new password :</td>
<td align="left"><input alt="Password:" name="confirmpassword" id="confirmpassword" type="password" size="20" value=""/></td>
</tr>
<tr>
<td height="12" align="left" valign="middle"></td>
<td height="12" align="left"></td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left"><input type="submit" name="button" id="button" value="Log In" />
</td>
</tr>
</form>
</table></td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>

Self-Registration Page Sample HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ccebfe">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left" valign="middle"><img src="portals/demo2/logo.png" alt="" width="157" height="44" /></td>
<td width="72%" class="headding">ISE 1.1 Guest Portal </td>
<td width="13%" align="right" valign="middle" > </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" bgcolor="#ccebfe"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="content">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="left" class="headding2">Self Registration</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left"><table width="50%" border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<form id="selfServiceForm" action="/guestportal/SelfServiceSubmit.action" method="post">
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">First Name :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.firstName" id="firstName" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Last Name :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.lastName" id="lastName" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Email Address :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.emailAddress" id="emailId" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Phone Number :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.phoneNumber" id="phoneno" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Company :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.company" id="company" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Optional Data 1 :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.optionalData1" id="data1" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Optional Data 2 :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.optionalData2" id="data2" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Optional Data 3 :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.optionalData3" id="data3" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Optional Data 4 :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.optionalData4" id="data4" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">Optional Data 5 :</td>
<td width="70%" align="left"><input alt="Username:" name="guestUser.optionalData5" id="data5" type="text" size="20" /></td>
</tr>
<tr>
<td width="30%" height="30" align="left" valign="middle" class="content">TimeZone :</td>
<td width="70%" align="left"><select name="guestUser.timezone">
<option value="UTC">UTC</option>
<option value="America\New_York">America\New_York</option>
<option value="Europe\London">Europe\London</option>
</select></td>
</tr>
<tr>
<td height="12" align="left" valign="middle"></td>
<td height="12" align="left"></td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left"><input type="submit" name="button" id="button" onclick="javascript:doOnSubmit()" value="Submit" />
<input type="submit" name="button2" id="button2" onclick="javascript:doCancel()" value="Cancel" /> </td>
</tr>
</form>
</table></td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>
 
<script>
function doOnSubmit()
{
var selfServiceForm = document.getElementById("selfServiceForm");
selfServiceForm.submit();
}
function doCancel()
{
document.forms[0].action = "Login.action";
document.forms[0].submit();
}
</script>

Self-Registration Result Page Sample HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ccebfe">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left" valign="middle"><img src="portals/demo2/logo.png" alt="" width="157" height="44" /></td>
<td width="72%" class="headding">ISE 1.1 Guest Portal </td>
<td width="13%" align="right" valign="middle" > </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" bgcolor="#ccebfe"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="content">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<!--INSERT HEADER HERE --><td align="left" class="headding2"> Self Registration created user: fsdf</td><!--END HEADER HERE -->
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left"><table width="50%" border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<!--INSERT RESULTS HERE --><tr><td width="30%" align="left" class="content"> User name: fsdf</td></tr><tr><td width="30%" align="left" class="content"> Password: 9F_</td></tr><tr><td width="30%" align="left" class="content"> First Name: fdsf</td></tr><tr><td width="30%" align="left" class="content"> Last Name: sdf</td></tr><tr><td width="30%" align="left" class="content"> Email Address: </td></tr><tr><td width="30%" align="left" class="content"> Phone Number: </td></tr><tr><td width="30%" align="left" class="content"> Company: </td></tr><tr><td width="30%" align="left" class="content"> Optional Data 1: </td></tr><tr><td width="30%" align="left" class="content"> Optional Data 2: </td></tr><tr><td width="30%" align="left" class="content"> Optional Data 3: </td></tr><tr><td width="30%" align="left" class="content"> Optional Data 4: </td></tr><tr><td width="30%" align="left" class="content"> Optional Data 5: </td></tr><!--END RESULTS HERE -->
<tr>
<td height="12" align="left" valign="middle"></td>
<td height="12" align="left"></td>
</tr>
<form id="loginform" action="/guestportal/Login.action" method="post">
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left"><input type="submit" name="button2" id="button2" onclick="javascript:doOk()" value="OK" /> </td>
</tr>
</form>
</table></td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</body>
</html>
 
<script>
 
function doOk()
{
document.forms[0].action = "Login.action";
document.forms[0].submit();
}
</script>

Device Registration Page Sample HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest Portal Login</title>
<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />
<script language='javascript'>
 
</script>
</head>
<body bgcolor="#ccebfe">
<form id="deviceRegistrationPortal" action="/guestportal/RegisterDevice.action" method="post">
 
<input type="hidden" name="drpUsername" id="drpUsername" value="" />
<input type="hidden" name="devRegLimit" id="devRegLimit" value="" />
 
<input type="hidden" name="regDevices" id="regDevices" value="" />
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left" valign="middle"><img src="portals/demo2/logo.png" alt="" width="157" height="44" /></td>
<td width="72%" class="headding">ISE 1.1 Device Registration Portal</td>
<td width="13%" align="right" valign="middle" > </td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#ccebfe"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="content">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#abcee4" style="padding:10px; border:#6b93ac solid 1px;">
<tr>
<td style="padding:10px 0 0 10px;">Please register your device :<br />
Please note that you can not register more than 5 devices</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="padding:0 0 0 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7%">MAC Address : </td>
<td width="93%"><input id="registeredMac" name="registeredMac" type="text" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="padding:0 0 0 10px;"><input type="Submit" value="Register" /></td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table></td>
</tr>
 
<tr>
<td align="left">&nbsp;</td>
</tr>
<tr>
<td align="left">
</td>
</tr>
<tr>
<td align="left">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
<div id="footer">
<div style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>
</div>
</form>
</body>
</html>

Sample style.css for Custom Guest Portal HTML Pages

@charset "utf-8";
/* CSS Document */
 
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.pagebg {
background:url("../demo2/pageBg.jpg") repeat-x;
}
.label {
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:12px;
}
#footer {
height:23px;
font-family:Arial, Helvetica, sans-serif;
color:#022d4d;
position:absolute;
width:100%;
margin:0px auto;
text-align:left;
bottom:-0px;
font-size:12px;
}
.headding {
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:20px;
}
.headding1 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#ffffff;
}
.headding2 {
font-family:Arial, Helvetica, sans-serif;
color:#022d4d;
font-size:17px;
font-weight:bold;
}
.headding3 {
font-family:Arial, Helvetica, sans-serif;
color:#022d4d;
font-size:12px;
font-weight:bold;
}
.content {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#022d4d;
}
.link {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; text-decoration:none;}
a.link:link {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; text-decoration:none;}
a.link:hover {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; text-decoration:underline; }