CakePHP and ExtJs Login Form

22 Jul, 2008 CakePHP

This’s a quick tutorial how we can make login form with CakePHP and ExtJs, Auth component used for simplicity on user authorization, for more info about those two, you can visit their website.

creating user table

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) NOT NULL DEFAULT '',
  `password` varchar(255) NOT NULL,
  `realname` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `isAdmin` enum('No','Yes') NOT NULL DEFAULT 'No',
  `status` tinyint(2) NOT NULL,
  PRIMARY KEY  (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1

Setting up cake for user authentification :

app_controllers.php

class AppController extends Controller {
  var $components = array('Auth','RequestHandler');
 
  function beforeFilter() {
	parent::beforeFilter();
	if(isset($this->Auth)) {
	    Security::setHash('md5');
 
	    $this-->Auth->userModel = 'User';
	    $this->Auth->fields = array('username' =>; 'username','password' =>; 'password');
	    $this->Auth->loginAction = '/noc/users/login';
	    $this->Auth->loginRedirect = '/noc/main/index';
	    $this->Auth->logoutRedirect = '/';
	    $this->Auth->autoRedirect = 0;
	}
    }
 
}

I create a main controller with no model and redirected the page to /main/index when the first time user visit. You can change the route on routes.php.

Router::connect ('/', array('controller'=>'main', 'action'=>'index'));

here’s the main_controller.php

class MainController extends AppController
{
	var $name = "Main";
	var $uses = '';
	var $helpers = array('Html', 'Form','Javascript');
 
	function index($ajax = false) {
		//$this->layout = 'ajax';
	}
	function about() {
	..
	}
 
	function contact() {
	...
       }
}

my index function have an empty index.ctp, while the login function on user controller have the code below
user_controller.php

 
   function login() {
    	if($this->RequestHandler->isAjax()) {
	    if($this->Auth->user()) {
		//$timestamp = time();
	    	$this->set('success', '{success:true}');
	    	//$this->redirect('/main/index');
	    } else {
	    	$this->set('success', '{success:false}');
	    }
	} else {
	    $this->layout = 'login';
            $this->set('login','true');
	}
    }
 
    function logout() {
	    $this->redirect($this->Auth->logout());
    }
}
?>

login will check first if the requested via ajax call, if it does itl will try to authenticate the data send trough form, if not the just show up a button for login.

and finally my js part,

Ext.onReady(function(){
 
    var loginBtn = Ext.get('login-btn');
 
    loginBtn.on('click', function(){
     	var loginForm = new Ext.form.FormPanel(
     		{
		id: 'loginForm',
        	labelWidth: 80,
        	frame:true,
        	bodyStyle:'padding:5px 5px 0',
        	defaultType: 'textfield',
        	items:
        	[
 			{
 			id: 'userLoginForm',
                	fieldLabel: 'Username',
                	labelSeparator: '',
                	name: 'data[User][username]'
 
            	},
            	{
 			id: 'passLoginForm',
                	fieldLabel: 'Password',
                	labelSeparator: '',
                	inputType: 'password',
                	name: 'data[User][password]'
 
            	}
 
        	],
        	buttons:
        	[
            	{
            	text: 'Login',
            	handler: function() {
            		if(loginForm.getForm().isValid()) {
            			loginForm.getForm().submit(
            				{
					waitMsg: 'Verifiying ...',
					url:'/noc/users/login',
 
					success:function(form, action) {
						//Ext.Msg.alert('Status', 'Login successfully.');
						loginWindow.close();
						self.location='/noc/main/index';
					},
					failure: function(form, action) {
						Ext.Msg.alert('Status','Wkwkw..meh ngopo koe :p');
					}
					}
            			);
				}
            		}
            	},
            	{
            	text: 'Cancel',
            	handler: function () {
            		loginWindow.close();
            		}
            	}
            ]
 
     	}
     	); 
 
     	var loginWindow = new Ext.Window(
     		{
		title: 'Login Window',
		width: 300,
        	height: 170,
        	autoScroll: false,
        	layout: 'fit',
        	plain:true,
        	bodyStyle:'padding:5px;',
        	buttonAlign:'center',
        	modal: true,
        	items: [loginForm]
    		}
    	);
 
     	loginWindow.show();
    });
});