Customise Logon.html page

RLJB

Hi All

I know this isn't exactly a Aware configuration question, it is more a HTML/javascript question, but perhaps someone else has solved this already and can help?

We have multiple business spaces for different clients and use a custom login page for each one that logs into their specific domain (see the code below for a copy of one). This works ok BUT when someone enters the wrong details they are directed back to the standard little blue box logon form.

Does anyone know how to change this so they are directed back to thier original login page (ie the one below)?

Thanks

Rod

ps: I know this is pretty bad HTML code, but it works!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Funnel Login</title>

<script language="JavaScript">
function checkform(){
	if (document.submitForm.userName.value == '')
	{
		// something is wrong
		alert('Oops! Username can not be blank, try again.');
		return false;
	}
	else if (document.submitForm.password.value == '')
	{
		// something else is wrong
		alert('Oops! Password can not be blank, try again.');
		return false;
	}
	// If the script gets this far through all of your fields
	// without problems, it's ok and you can submit the form

return true;
}</script>

<script language="JavaScript">
function doSubmit() {displayWindow = window.open('', "_self", "scrollbars=1,menubar=0,toolbar=0,resizable=1,location=0,status=0");
document.submitForm.submit();document.submitForm.reset();}</script>

</head><body bgcolor="#ffffff" link="#000" vlink="#000">

  <tr>
    <td>
      <p align="center"><img height="0" alt="funnel" hspace="0" src="funnellogo.png" width="0" border="0" ></p></td></tr></table>
      <p></p>
      <p></p>
      <p></p>
<p>
<p></p>

<p align="center"><img src="funnellogo.png" align="center"></p>
<table border="0" cellpadding="0" cellspacing="0" width="402" align="center">
<tbody>
<tr>
<td height="27">
      <p align="right">&nbsp;</p></td>
</tr>

<form action="http://OurIP:8080/Start/logonOp.aw?domain=funnel" method="post" name="submitForm" target="_self" id="submitForm" onsubmit="return checkform()"></tbody></table>

<table width="402" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>

</tr>
<tr><td>
<p class="Text"><br >
&nbsp;&nbsp; <span style="COLOR: #1697b6; FONT-FAMILY: Calibri,Arial">
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Username:</span>&nbsp;&nbsp;
<input name="userName" size="24" >
&nbsp;&nbsp;&nbsp;</p>
<p><span class="Text"> &nbsp;&nbsp;&nbsp;</span><span
 style="COLOR: #1697b6; FONT-FAMILY: Calibri,Arial">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Password:</span><span class="Text">&nbsp;&nbsp;&nbsp;
<input name="password" type="password" size="24">
</span> </p>
<label></label>
<p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value=" Go! ">
</p></td>
</tr>
<tr>
<td height="10" ></td>
</tr>
<tr>
<td height="10" class="TextSmall"><p><br >
</p></td>
</tr>

</table></form>

<p style="COLOR: #000; FONT-FAMILY: Arial; TEXT-ALIGN: center"><small>&nbsp;
&nbsp;<small>forgot your password? </small><small
 style="COLOR: #1697b6"><a href="http://OurIP:8080/Start/logonFP.aw?domain=funnel">Reset
it here</a><br><br><a href="http://OurIP:8080/Start/LoginError.html" target="_blank"><img alt="loginproblems" src="loginfix.png" align="center"></a><br></small></small></p>

  <table align="center" border="0" cellpadding="0"
 cellspacing="0" width="402">
        <tbody>
          <tr>
<br >

<br >
            <td
 style="COLOR: rgb(0,0,102); FONT-FAMILY: Arial; TEXT-ALIGN: center" 
    >
            <p><a href="http://www.ourwebsite.com"
 target="_blank"><small><small>ourwebsite.com</small></small></a></p>
            </td>
            <td style="COLOR: rgb(0,0,102); FONT-FAMILY: Arial; TEXT-ALIGN: center" 
    >
            <p><a href="http://www.ourwebsite.com.au/terms" target="_blank"><small><small>Terms of Service</small></small></a></p>
            </td>
          </tr>
        </tbody>
      </table></td></tr>
    <tr>
	
  <td >
  <p style="COLOR: rgb(0,0,0); FONT-FAMILY: Arial; TEXT-ALIGN: center"  ><small><small>Copyright 2009-2011. All rights reserved.<br>.</small></small></p>
  </td>
<td><p align="center"><img alt="logo" src="logosmall.png" ></p></td>
    </tr></tbody></table>

</body></html>

aware_support

Custom login page can be specified in the logonPage URL parameter - see the User Guide

RLJB

Yes, but if you enter the wrong password, you will be directed back to the generic login page, not your custom one that you specify in the URL.

For example;

Using: http://OurIP:8080/Start/logonOp.aw?domain=frm&logonPage=logon2rod.html

when entering a wrong password, I get the error message and redirected to:

http://OurIP:8080/Start/logonOp.aw?logonPage=logon2.html

(not my customised page logon2rod.html above)

I would like to change where you get redirected to on unsuccessful login, so in the example above it goes back to logon2rod.html

aware_support

http://OurIP:8080/Start/logonOp.aw?domain=frm&logonPage=logon2rod.html&errorPage=logon2rod.html

RLJB

Ok, that looks cool, but it doesn't work?

it just throws back to OurIP:8080/Start/logonOp.aw?logonPage=logon2.html

ACDC

I find this solution works well for managing different business spaces

Provide your client with their own unique url

eg: http://xxx.xxx.xxx.xxx:8080/AwareIM/XYZ.html

Contents of html file called XYZ.html

</head>
<body background="../AwareIM/AwareIM/Logon/bluegreybg.gif" topmargin="0">

<Center>
<IFRAME src="../AwareIM/logonOp.aw?domain=Library&logonPage=logon2.html" width="100%" height="100%" frameborder="0" scrolling="no" >
<p>Your browser does not support iframes.</p>
</iframe>
<Center>

</body>

</html>

Add any additional customisation html to this file

aware_support

To get error page processing to work do the following:

1) Open the file AwareIM/Tomcat/webapps/AwareIM/login.html for editing
2) Locate the following section:
{
hideLabel: true,
name: domain,
inputType: 'hidden',
value: '<default>'
}
3) Add the following section after the above section adding a comma between them:
{
hideLabel: true,
name: errorPage,
inputType: 'hidden',
value: 'YourErrorPage'
}

so that it becomes:

{
hideLabel: true,
name: domain,
inputType: 'hidden',
value: '<default>'
},
{
hideLabel: true,
name: errorPage,
inputType: 'hidden',
value: 'YourErrorPage'
}

leopdurr

This code work and it also display the same page if there is an error.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Horizon Login</title>
<script type="text/javascript" src="ext30/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext30/ext-all.js"></script>

<script type="text/javascript">
	Ext.onReady(function(){
	    Ext.QuickTips.init();
	 
	    var login = new Ext.FormPanel({
	        
			monitorValid:true,
			onSubmit:   Ext.emptyFn,
			submit: function() {
				this.getForm().getEl().dom.action = "logonOp.aw";
				this.getForm().getEl().dom.submit();
			},

	        items:[
	        	
	            {
	                hideLabel:   true,
	                name:       'domain',
	                inputType:  'hidden',
	                value:      '<default>'
	            }
	        ],


	    });
	 		 
	    var win = new Ext.Window({
	        layout:'fit',
	        width:300,
	        height: 150,
	        closable: false,
	        resizable: false,
	        plain: true,
	        items: [login]
		});
		
	    win.on ("show", function () {
	    	var f = login.getForm ().findField ('userName');
	    	f.focus.defer(1000, f);
	    });
		win.show();
	});
	
	function handleEnter (e, loginForm)
	{
		if (e.getKey () == Ext.EventObject.ENTER)
			loginForm.submit ();
	}
	
</script>

<style>

body {
margin: 0; /* this will serve just as well /
font-family: Arial, Helvetica, sans-serif; / you need some backups here */
font-size: 12px;
color: #FFFFFF;
background-color: #183670;
}

/* base */

#login-box {
width:250px;
height: 350px;
color: #ebebeb;
font: 12px Arial, Helvetica, sans-serif;
background: url(login_bg.png) no-repeat left top;
padding-top: 50px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 200px;
}

#login-box img {
border:none;
}

#login-box h1 {
padding:0;
margin:0;
color: #ebebeb;
font: bold 16px "Calibri", Arial;
}

#login-box-name {
float: left;
display:inline;
padding: 5px;
width: 60px;
}

#login-box-field {
float: left;
width:200px;
margin-top: 0;
margin-right: 0;
margin-left: 0;
display: inline;
padding: 5px;
}

.form-login {
width: 150px;
border: 1px solid #0d2c52;
background-color:#1e4f8a;
font-size: 16px;
color: #ebebeb;
}

.login-box-options {
clear:both;
padding-left:87px;
font-size: 11px;
}

.login-box-options a {
color: #ebebeb;
font-size: 11px;
}
.inp_field{
border:0;
height:30px;
line-height:30px;
text-align:left;
font-size:12px;
color:#fff;
text-shadow:#007dab 0 1px 0;
background:#0092c8;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
cursor:pointer;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
.inp_login{
border:0;
padding:0 30px;
height:30px;
line-height:30px;
text-align:center;
font-size:12px;
color:#fff;
text-shadow:#007dab 0 1px 0;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
cursor:pointer;
background-color: #97B8D1;
-moz-box-shadow:0 0 10px #4e707c;
-webkit-box-shadow:0 0 10px #4e707c;
box-shadow:0 0 10px #4e707c;

/* // login form */

</style>

</head>
<body>
<div style="margin-top:100px" align="center">
<div id="login-box">

<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><h1>Login Details</h1></td>
</tr>
<tr><td>
<p><br >
Username:<br />
<input name="userName" size="24" class="inp_field"></p>
<p>Password: <br />
<input name="password" type="password" size="24" class="inp_field">
</p>
<label></label>
<p>
<input type="submit" value="Login" class="inp_login">
</p></td>
</tr>

</form>
</table>
</div></div>
</body></html>

RLJB

Just a shout out of thanks to leopdur and support, have this working now and it looks v nice - good functionality.

RocketRod

leopdurr can you show me where to change the above to add in testingMode=true.

Sorry but I know no html at all and can't get it to work. I wont to have something similar to also operate on a test BS.

Cheers Rod

RocketRod

Can anyone assist please?

Cheers Rod

juicer

I am just a beginner at html myself and I don't have time to test this, but

If your login page is similar to the one above,

after
<p>Password: <br />
<input name="password" type="password" size="24" class="inp_field">
</p>

try
<input name="testingMode" type="hidden" value="true">

RLJB

Rod, try putting it in after the <form action="logonOp.aw?

EG:

<form action="logonOp.aw?domain=mybusinessspace&testingMode=true" method="post"

RocketRod

Awesome guys... thanks to you BOTH as BOTH suggestions worked!!

Truly awesome forum where people are always happy to assist and share.

Cheers Rod