GrassHopperPebbles.com Demos

YUI Widgets

imYUILogin - Dialog Option

The dialog option is the default for the YUI imYUILogin Widget. Depending on how you design your login form, when using the dialog option, you only have to supply the form id, the submit url 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.

	var imYUILogin = new YAHOO.INTRIG.imYUILogin('UserLoginForm', {
		urls: {submit: 'login.php', success: 'index.php'}
	});
Note: You have the option of using the urls.success option or placing your redirection string in the json record that is returned from the server.
	{"type":"continue", "label":"index.php"}

The default options for the imYUILogin widget are:

	container: {id: 'imYUILogin', type: 'dialog'}
	container_position: 'fixed'
	container_width: '175px'
	loginResponseID: 'loginResp'
	fields: "username,password"

If you use the default options, the widget is expecting you layout to be:

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

When a user attempts to login, you should return a json object from the server:

	{"type":"message", "label":"login success"}	
	
	or 
	
	{"type":"message", "label":"login failed"}

As noted above, you can optionally return a redirection string.

	{"type":"continue"}	
	
	or 
	
	{"type":"continue", "label":"success.php"}

Click here to view the example of the imYUILogin widget with the dialog option. Enter anything for the username and password to view the 'login failed' message. Enter demoUser for the username and demoPass for the password to login successfully.

If you view the source in the dialog example, you will see that I used the YUI Loader to load all the necessary files.

For more documentation regarding the imYUILogin Widget, view my blog post.

Tags

, , , , , , , , , , ,