OOP and AJAX form submission issues - php

Question

After submitting my form below via ajax the message always comes back as failed, even with the correct login information! I've coded this in a non oop style too and it works perfectly, but when i use this style of code it hangs up. The live site is http://andyholmes.me/demo/summersproperty/OOP/login.php and the username is admin#summersproperty.com and password is admin
login.php -
<?PHP
session_start();
include('includes/class.login.php');
$login = new Login();
$token = $_SESSION['token'] = md5(uniqid(mt_rand(), true));
if ($_POST['ajax']) {
exit($login->getStatus());
}
?>
<style>
#message { display: none; cursor: pointer; }
.loader { display: none; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#loginForm").submit(function(e) {
$(this).fadeOut(300);
$('.loader').delay(300).fadeIn(100);
$.post("<?=$_SERVER['PHP_SELF'];?>", { username: $('#username').val(), password: $('#password').val(), ajax: true }).done(function(data) {
if (data.logged_in == true) {
// Redirect with javascript
$('.loader').delay(2000).fadeOut(100);
$('#message').html('<p>Success! We\'ll redirect you in a minute...</p>').delay(2200).fadeIn(200);
} else {
$('.loader').delay(2000).fadeOut(100);
$('#message').html('<p>Failed... Click to try again!').delay(2200).fadeIn(200);
$('#message').on('click', function(){
$(this).fadeOut(200);
$('#loginForm').delay(350).fadeIn(200);
});
}
});
return false;
});
});
</script>
<form id="loginForm" method="POST" action="">
<table>
<tr><td>Username:</td><td><input type="text" name="username" id="username"/></td></tr>
<tr><td>Password:</td><td><input type="password" name="password" id="password"/></td></tr>
</table>
<input type="hidden" name="token" value="<?=$token;?>"/>
<input type="submit" name="login" value="Log In"/>
</form>
<div class="loader">
<img src="loader.gif"/>
</div>
<div id="message"></div>
and the login class -
<?PHP
class Login
{
private $_id;
private $_username;
private $_password;
private $_passmd5;
private $_errors;
private $_access;
private $_login;
private $_token;
public function __construct()
{
$this->_errors = array();
$this->_login = isset($_POST['login']) ? 1 : 0;
$this->_access = 0;
$this->_token = $_POST['token'];
$this->_id = 0;
$this->_username = ($this->_login) ? $this->filter($_POST['username']) : $_SESSION['username'];
$this->_password = ($this->_login) ? $this->filter($_POST['password']) : '';
$this->_passmd5 = ($this->_login) ? md5($this->_password) : $_SESSION['password'];
}
public function isLoggedIn()
{
($this->_login) ? $this->verifyPost() : $this->verifySession();
return $this->_access;
}
public function filter($var)
{
return preg_replace('/[^a-zA-Z0-9]/','',$var);
}
public function verifyPost()
{
try
{
if(!$this->isTokenValid())
throw new Exception('Invalid form submission');
if(!$this->isDataValid())
throw new Exception('Invalid form data entered');
if(!$this->verifyDatabase())
throw new Exception('Invalid username/password combination');
$this->_access = 1;
$this->registerSession();
}
catch(Exception $e)
{
$this->_errors[] = $e->getMessage();
}
}
public function verifySession()
{
if($this->sessionExist() && $this->verifyDatabase())
$this->_access = 1;
}
public function verifyDatabase()
{
include('dbConfig.php');
$data = mysql_query("SELECT user_id FROM users WHERE user_username = '{$this->_username}' AND user_password = '{$this->_passmd5}'");
if(mysql_num_rows($data))
{
list($this->_id) = #array_values(mysql_fetch_assoc($data));
return true;
}
else
{
return false;
}
}
public function isDataValid()
{
return (preg_match('/^[a-zA-Z0-9]/', $this->_username) && preg_match('/^[a-zA-Z0-9]/', $this->_password)) ? 1 : 0;
}
public function isTokenValid()
{
return (!isset($_SESSION['token']) || $this->_token != $_SESSION['token']) ? 0 : 1;
}
public function registerSession()
{
$_SESSION['id'] = $this->_id;
$_SESSION['username'] = $this->_username;
$_SESSION['password'] = $this->_passmd5;
}
public function sessionExist()
{
return (isset($_SESSION['username']) && isset($_SESSION['password'])) ? 1 : 0;
}
public function showErrors()
{
echo "<h3>Errors</h3>";
foreach($this->_errors as $key=>$value)
echo $value."<br>";
}
public function getStatus()
{
return json_encode(array('logged_in' => $this->isLoggedIn(), 'errors' => $this->showErrors()));
}
}
?>
By the way, i know i need to use PDOs etc, but i just want to get the script to a point where it works nicely before i change the database connection data. I know im close, but its really frustrating!
If you can help me, i will be most grateful!
EDIT NOTES: This code has been updated for an issue that has come up after using the suggestion from user1781670

Answer 1

<?PHP
session_start();
include('includes/class.login.php');
$login = new Login();
$token = $_SESSION['token'] = md5(uniqid(mt_rand(), true));
if ($_POST['ajax']) {
exit($login->getStatus());
}
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#loginForm").submit(function(e) {
$.post("<?=$_SERVER['PHP_SELF'];?>", { username: $('#username').val(), password: $('#password').val(), ajax: true }).done(function(data) {
if (data.logged_in == true) {
// Redirect with javascript
} else {
// Inject errors to html
// data.errors
}
});
return false;
});
});
</script>
<form id="loginForm" method="POST" action="">
<table>
<tr><td>Username:</td><td><input type="text" name="username" id="username"/></td></tr>
<tr><td>Password:</td><td><input type="password" name="password" id="password"/></td></tr>
</table>
<input type="hidden" name="token" value="<?=$token;?>"/>
<input type="submit" name="login" value="Log In"/>
</form>
As you can see I modified your jquery removing you PHP code inside because that's not the place where it goes, also I changed the syntax a little to one more clear at least for me. Also note that "data" is a json returned by your PHP function getStatus who returns the login status as json.
Now you just need to create the PHP function that return the json. Maybe can help you to checkout json_encode. If you get stuck please tell us.
Example of getStatus function:
JavaScript objects are like associate arrays in PHP except JavaScript objects can have functions. So, is not surprise you need to pass an associative array to json_encode.
public function getStatus()
{
return json_encode(array('logged_in' => $this->isLoggedIn(), 'errors' => $this->showErrors()));
}
$.post automatically knows it received a JSON (it's the default option), so you can access it's properties with data.logged_in and data.errors.
This is the problem: you show your login form and when the user submit the form, through ajax you open a connection and send the data entered by the user and you expect the server to return information. But how is that data gonna be returned? how are you gonna handle it? well, that is JSON for. It's a syntax to write JavaScript objects, so with json_encode you return a JSON and when your JavaScript receives that JSON you can access it's data and check if it was a successful login.