YUI Coder

JavaScript [login.js]

// set up YUI loader
var loader = new YAHOO.util.YUILoader({
    require: ["container","connection",
              "cookie",
              "animation",
              "button",
              "dom","event"
              ],
   loadOptional: true,
   onSuccess: function() {
	Yevent = YAHOO.util.Event;
	Yconnect = YAHOO.util.Connect;
	Ydom = YAHOO.util.Dom;
	Ycook = YAHOO.util.Cookie;
// fire of init() function once the document has finished loading and the dom is ready
    YAHOO.util.Event.onDOMReady(init);
	},
	timeout: 10000,
	allowRollup: true,
	base: '/scripts/yui/build/',
	combine: false
});
loader.insert();

function init() {

 // Create a dialog box to put the login form into
  	    stdDialog = new YAHOO.widget.SimpleDialog("dlgstd", {
	    width: "auto",
	    fixedcenter:true,
	    modal:false,
	    visible:false,
	    close: false,
	    constraintoviewport: true
	  });
	     stdDialog.setHeader("Login:");
	     stdDialog.render(document.body);

  var buttons=[{ text:"Login", handler: function(){
  var loginCallback = {
       cache:false,
       success: function(o){
         response = o.responseText.split(",");
         if(response[0] == "ok"){
          stdDialog.setHeader("Login: Success");
          YAHOO.util.Cookie.set(response[1], response[2], {});
document.location.href = "dashboard.pl";
						}
						else {
							stdDialog.setHeader("Login: Failed, Please Try Again");
						}
	    				},
	    				failure: function(o){
	    					alert('ERROR! Connection to server failed! Please try again.');
	    					}
	    		    };
		var formObject = document.getElementById('login');
		YAHOO.util.Connect.setForm(formObject);
		var username = formObject.username.value;
		var password = formObject.password.value;
		if(username == ""){
			stdDialog.setHeader("Login: Username field is empty");
			var error = 1;
		}
		else if(password == ""){
			stdDialog.setHeader("Login: Password field is empty");
			var error = 1;
		}
		if(!error){
		var cObj = YAHOO.util.Connect.asyncRequest('POST', 'login.pl', loginCallback);
		}

	}, isDefault:true }];
		stdDialog.cfg.setProperty("buttons", buttons);
		stdDialog.cfg.setProperty("postmethod", 'async');
	    stdDialog.cfg.setProperty("text",'
<form id=login method=post action=login.pl>
<table>
<tr>
<td><b>Username:</b></td>
<td>
<input type=text name=username id=username></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td>
<input type=password name=password id=pass>
<input type=hidden name=action value=login></td>
</tr>
</table>
</form>

');

		stdDialog.show();

}

Perl Script [login.pl]

#!/usr/bin/perl
use CGI qw(:standard);
$query = new CGI;

if($query->param('action') eq 'login'){
print "Context-type: text/html \n\n";
# Here is where we define the username and password for authent
 if($query->param('username') eq 'username' && $query->param('password') eq 'password'){
 print "ok,someRandomKeyShouldGoHere," . $query->param('username');
 }
 else {
  print "no";
 }
 exit;
}

  print header;
  print start_html(-title=>'Login',
                   -style=>{src=>'/scripts/yui/build/fonts/fonts.css'},
                   -script=>[{-type => 'text/javascript',-src =>'yui/build/yuiloader/yuiloader-min.js'},
{-type => 'text/javascript',-src =>'login.js'}],
                   -class=>'yui-skin-sam'
                   );
 print end_html;