A YUI Login Widget

Jan13

I created YUI 2 login widget, imYUILogin, for an intranet project that I am working on. I originally created it as a Dialog Container, but I recently updated it so that it could be configured as a Panel or a Module. Logging in is done ajaxally, of course.

Creating the Form

First we create the form using YUI’s standard Container classes (actually only ‘hd’ and ‘bd’ classes need to be created as ‘ft’ is created by the imYUILogin widget).

^?View Code HTML

<div id="imYUILogin">
<div class="hd">Please Login</div>
	<div class="bd">
		<div id="loginResp"></div>
		<form name="UserLoginForm" id="UserLoginForm" method="POST" action="">
		<label for="username">UserName:</label><input type="textbox" name="username" id="username" maxlength="20" />
		<label for="password">Password:</label><input type="password" name="password" id="password" maxlength="20" /> 
		</form>
	</div>
</div>

I have a div container, imYUILogin, to hold the login form. It can be named anything, but the imYUILogin widget is configured with this particular id by default. More on this later.

The loginResp is where the login response will be displayed. Again, it can be named anything you like, but the widget is configured with this id by default.

Notice that I do not have a submit button. This is created by the widget. Also the form, username and password fields must have an id.

Styling

We will create very minimal styling. The most important styling is the form container (in this case, imYUILogin). You should set it to display:none. This is so the form does not display before the widget container is configured. The imYUILogin widget will set the display once it is set up.

^?View Code CSS

#imYUILogin {
	display:none;
}
label { 
	display:block;
	float:left;
	width:90px;
	margin-top:5px;
	clear:left; 
}
#loginResp { 
	margin:5px;
	display:none;
	color:#FF0000; 
	text-align:right;
}
input {
	margin-top:5px;
}

Note: You also have to set the body class:

^?View Code HTML
<body class="yui-skin-sam">

YUI Dependencies

In order for the imYUILogin widget to display correctly, you need to load the button, container, json, and utilities files. More on loading these later.

Using the imYUILogin Widget

Depending upon how you designed your login form, you may only have to supply the form id, the submit url (the form action), and the success url. The success url option is only needed if you want the user to be redirected to another page upon a successful login.

The widget can be configured as a dialog, panel or module. The dialog option is the default so if you designed your layout (the login form) exactly as it is layed out above and you want to use the dialog option, you can simply:

^?View Code JAVASCRIPT

var imYUILogin = new YAHOO.INTRIG.imYUILogin('UserLoginForm', {
	urls: {submit: 'login.php', success: 'index.php'}
});

If you want more control:

^?View Code JAVASCRIPT

var imYUILogin = new YAHOO.INTRIG.imYUILogin('UserLoginForm', {
	urls: {submit: 'login.php', success: 'index.php'},
	container: {id: 'imYUILogin', type: 'dialog'},
	container_position: 'fixed',
        container_width: '175px',
	loginResponseID: 'loginResp',
        fields: 'username,password'
});

So the default options are:

container.id = ‘imYUILogin’.
container.type = ‘dialog’.
container_position = ‘fixed’. If set to ‘fixed’, the dialog will be modal and centered on the screen.
container_width = ’175px’. Depending upon the layout of your page, you may want to change this value.
loginResponseID = ‘loginResp’. The div that will display the login response.
fields = ‘username,password’. The id of the username and password fields. You can name them differently, but they must be comma-delimited.

Loading the imYUILogin Widget

First download the widget from Google Code. I save it under the folder assets/js/intrig/imYUILogin/.

To load the widget, I am going to use the YUI Loader Utility. It will load the widget and all my dependencies.

First load the YUI Loader Utility:

^?View Code HTML

<script type="text/javascript" src="path to utility/yuiloader/yuiloader-min.js"></script>

Now we can load the imYUILogin widget in an anonymous function:

^?View Code JAVASCRIPT

(function(){
	var loader = new YAHOO.util.YUILoader();
 
	loader.addModule ({
		name: 'INTRIG.imYUILogin',
		type: 'js',
		fullpath: 'assets/js/intrig/imYUILogin/imYUILogin.js',
		varName: 'imYUILogin'
	});
 
	loader.require("button","container","json","utilities", "INTRIG.imYUILogin");
	filter: "MIN";
	loader.insert({
		base: 'assets/js/yui/',
		loadOptional: true,
		allowRollup: true, 
		onSuccess: function() {
			var Event = YAHOO.util.Event;
			Event.onDOMReady(function(){
				var imYUILogin = new YAHOO.INTRIG.imYUILogin('UserLoginForm', {
					urls: {submit: 'login.php', success: 'index.php'},
					container: {id: 'imYUILogin', type: 'dialog'},
					container_position: 'fixed',
		                        container_width: '175px',
					loginResponseID: 'loginResp',
		                        fields: "username,password"
				}); 	 	
			});
		}
	});
})();

Json Response

The imYUILogin widget requires a Json response from the server:

^?View Code JAVASCRIPT

// if login was successful
{"type": "message", "label": "login success"}
 
// if login failed
{"type": "message", "label": "login failed"}

When a user attempts to logs in, you typically only send a message when the login was unsuccessful, so the imYUILogin widget will also accept:

^?View Code JAVASCRIPT

{"type": "continue"}

This will tell the widget that login was successful and the person should be directed to the urls.success option.

^?View Code JAVASCRIPT

urls: {submit: 'login.php', success: 'index.php'}

You can alternatively send the redirection url string in the json record that is returned from the server:

^?View Code JAVASCRIPT

{"type": "continue", "label": "index.php"}

This can be advantageous if you want to send query strings to your url that are determined by the person logging in:

^?View Code JAVASCRIPT

{"type": "continue", "label": "index.php?uid=23&whatever=true"}

If a label attribute exists in the returning json record, the widget will use this url before it checks the urls.success option.

The Panel Option

With the exception of the container_position, the Panel option can be loaded similarly to the Dialog option:

^?View Code JAVASCRIPT

var imYUILogin = new YAHOO.INTRIG.imYUILogin('frmLogin', {
	urls: {submit: 'login.php', success: 'index.php'},
	container: {id: 'imYUILogin', type: 'panel'},
	container_width: '175px',
	loginResponseID: 'loginResp',
        fields: 'username,password'
});

or:

^?View Code JAVASCRIPT

var imYUILogin = new YAHOO.INTRIG.imYUILogin('frmLogin', {
	urls: {submit: 'login.php', success: 'index.php'},
	container: {type: 'panel'}
});

The Module Option

I added the Module option to the imYUILogin widget so that you have more control over the styling of the container. This is done primarily via the hd, bd, and ft Container classes.

^?View Code CSS

.hd {
	background-color: #00FF00;
	border: solid thin #fff;
}
.bd {
	background-color: #FFFF00;
	border: solid 2px #FF0033;
}
.ft {
	background-color: #0066FF;
	border: solid 3px #FF9900;
}

Again, the Module options are similar to the Dialog and Panel options. This time I will load the dependencies via the Yahoo CDN. You can use the YUI 2 Dependency Configurator to configure the necessary files.

^?View Code HTML

<!-- Combo-handled YUI CSS files: --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/fonts/fonts-min.css&2.8.0r4/build/button/assets/skins/sam/button.css&2.8.0r4/build/container/assets/skins/sam/container.css">
 
<!-- Combo-handled YUI JS files: --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/button/button-min.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/json/json-min.js"></script>
 
<!-- imYUILogin widget file: --> 
<script type="text/javascript" src='assets/js/intrig/imYUILogin/imYUILogin.js'></script>

Now call the widget:

^?View Code JAVASCRIPT

(function(){		
	var Event = YAHOO.util.Event;
	Event.onDOMReady(function(){
		var imYUILogin = new YAHOO.INTRIG.imYUILogin('frmLogin', {
			urls: {submit: 'login', success: 'index.php'},
			container: {id: 'imYUILogin', type: 'module'},
	                container_width: '175px',
			loginResponseID: 'loginResp',
	                fields: "username,password"
		}); 	
	});
})();

That’s it. To view demos of the imYUILogin widget, go to the demo section of my site. You can download the widget from Google Code. Enjoy.

GrasshopperPebbles.com

Creating the Form

Styling

YUI Dependencies

Using the imYUILogin Widget

Loading the imYUILogin Widget

Json Response

The Panel Option

The Module Option

Profile cancel