Custom Login Screen

1 Overview

The login page of bxp provides a number of customisation options. Background images, custom messages, interface bars and other elements via css and custom javascript insertions.

If a client wishes to completely customise the log in page, through the "Custom Login HTML" facility in bxp the following example of code would allow for a full screen replacement of all visual elements. For the login engine to continue working the field0 and field1 of the form still need to be filled in.

Then using the "Alternate Destination" for each user account a user can be redirected to a custom landing page as desired.

2 Example code

Main Menu > System Access Management > System Management > System Settings > Custom Login Info Box > Custom Login HTML

<div id="divWholeScreen" class="cssWholeScreen">
	<div id="divUserName">Username</div>
	<div id="divField1">
		<input type="text" name="textUsername" id="textUsername" value="" onchange="fn_Custom_Login()" />
	</div>
	<div id="divPassword">Password</div>
	<div id="divField0">
		* <input type="password" name="passPassword" id="passPassword" value="" onchange="fn_Custom_Login()" /> * 
	</div>
	<div id="divLogin">
		<input type="button" name="btnLogin" id="btnLogin" value="Log in" class="cssMaster_Button" onclick="fn_Javascript_PageComplete();" />
	</div>
</div>

<style type="text/css">
	.cssWholeScreen {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		overflow: auto;
		background: lime; /* Just to visualize the extent */
	}
</style>

<script type="text/javascript" language="javascript">
/* <![CDATA[ */
	document.getElementById("passPassword").setAttribute("autocomplete","off");
	
	function fn_Custom_Login(){
		document.getElementById("field1").value = document.getElementById("textUsername").value;
		document.getElementById("field0").value = document.getElementById("passPassword").value;
	}
	function fn_Custom_Submit(){
		fn_Custom_Login();
		fn_Javascript_PageComplete();
	}
	
/* ]]> */
</script>