What to do?
1. Create a php file for the view section. I've named it authenticateView.php
<div style="height:300px;width: 500px;">
<div id="login-panel">
</div>
</div>
Ext.onReady(function(){
Ext.QuickTips.init();
new Ext.Panel({
id : "ext-panel",
renderTo : "login-panel",
bodyStyle : "background-color:aliceblue;",
height : 250,
width : 500,
items : [
new Ext.FormPanel({
id : "login-form",
bodyStyle : "background-color:transparent",
style : {
'padding-top': 80
},
border : false,
height : 180,
width : 370,
monitorValid : true,
items : [
new Ext.form.TextField({
id : 'username',
name : 'username',
fieldLabel : 'Username',
allowBlank : false,
blankText : 'Username is required.',
msgTarget : 'side',
width : 200
}),
new Ext.form.TextField({
id : 'password',
name : 'password',
inputType : 'password',
fieldLabel : 'Password',
blankText : 'Password is required.',
allowBlank : false,
msgTarget : 'side',
width : 200
})
],
buttons:[
{
text : 'Login',
handler : function(){
authenticate(Ext.getCmp('username').getValue(),Ext.getCmp('password').getValue())
}
},
{
text : 'Reset',
handler : function(){
Ext.getCmp('login-form').getForm().reset();
}
}
]
})
]
})
})
function authenticate(u,p){
var dataPanel = Ext.getCmp('ext-panel');
Ext.Ajax.on('beforerequest',function(conn,o,result){
dataPanel.getEl().mask('Authenticating...','x-mask-loading');
})
Ext.Ajax.on('requestcomplete',function(conn,o,result){
dataPanel.getEl().unmask(true);
})
Ext.Ajax.on('requestexception',function(conn,o,result){
dataPanel.getEl().unmask(true);
Ext.MessageBox.show({
title : 'Message',
msg : '<div style="margin-top:5px;text-align:center;color:red;">Server Error</div>',
width : 300,
buttons : Ext.MessageBox.OK,
animEl : 'ext-panel',
iconCls : 'login-button-icon'
});
});
Ext.Ajax.request({
url : "index.php?page=login&action=authenticateScript&wp=0",
method : "POST",
params : {_password:p,_user:u},
callback : function(options,success,result){
var response = Ext.util.JSON.decode(result.responseText);
if(!response.success){
Ext.MessageBox.show({
title : 'Message',
msg : '<div style="margin-top:5px;text-align:center">' + response.error.reason + '</div>',
width : 300,
buttons : Ext.MessageBox.OK,
animEl : 'ext-panel',
iconCls : 'login-button-icon'
});
}else{
Ext.MessageBox.show({
title : 'Message',
msg : '<div style="margin-top:5px;text-align:center">Login Successful</div>',
width : 300,
buttons : Ext.MessageBox.OK,
animEl : 'ext-panel',
iconCls : 'login-button-icon'
});
}
}
})
}
3. Created a Controller which I named it LoginController.php
<?php
class LoginController extends ActionController{
function doAuthenticate(){
$this->dynamicJs = "";
}
function doAuthenticateScript(){
$message['success'] = false;
$name = $_POST['_user'];
$pass = $_POST['_password'];
require_once 'application/model/login/LoginModel.php';
$loginModel = new LoginModel();
$loginModel->autheticateUser($name, $pass);
if(!LoginModel::$SUCCESS){
$message['error']['reason'] = LoginModel::$MESSAGE;
}else{
$message['success'] = true;
}
echo json_encode($message);
}
}
?>
4. Created the model layer which I name it LoginModel.php
<?php
class LoginModel{
public static $SUCCESS = false;
public static $MESSAGE;
function autheticateUser($user,$pass){
if($user == 'admin'){
if($pass == 'admin'){
LoginModel::$SUCCESS = true;
}else{
LoginModel::$MESSAGE = "Password is invalid!";
}
}else{
LoginModel::$MESSAGE = "Username is invalid!";
}
}
}
?>
 |
| When authenticating a user... |
 |
| If username is invalid... |
 |
| If password is invalid... |
 |
| When login is succesfull... |
I can share the code if you want to have it. Pop me an email at theredfont01@gmail.com
