javascript/ajax login system

Question

I want to use script/ajax for my login system. So far I've been able to get back the array with all the errors and, if log in is successful set the $_SESSION['id']:

<script type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function () {  
var username = $('input[id=username]').val(); // get the username 
var password = $('input[id=password]').val(); // and the password
    if (username != '' || password !='') { // if not empty 

     $.ajax({
            type: "POST",
            url: "loginUser.php",
            data : "username="+username+"&password="+password,
            dataType: "json",
            success: function (data) {
            var success = data['success'];
            if(success == 'false'){
            var error = data['message'];
            alert(error); // the array with all the errors
             }else{
       $('#mask , .login-popup').fadeOut(300 , function() {
       $('#mask').remove();  
    });// end fadeOut function()
setTimeout("location.href = 'home.php';",1500);
    }
  }
  });//end success function

  } else {
alert('Enter some text ! '); // just in case somebody to click witout writing anything :)
    }
    });//end click function
});//end ready function
  </script>

loginUser.php basically check all the function and then send back the data like this:

if (empty($_POST)===false){
$email = sanitize($_POST['username']);
$password = sanitize($_POST['password']);


if (empty($email) === true || empty ($password) === true){ 

    $errors[] = 'You need to enter a username and password';
} else if (mail_exists($email) === false){
    $errors[] = 'we can\'t find that username. have you registered?';
}else if (user_active($email) === false){
    $errors[] = 'you haven\'t activated your account!';
}else {
$login = login($email, $password);
if ($login === false){
    $errors[] = 'username/password combination is incorrect!';
}else {
//set user session 
$_SESSION['id'] = $login;

//redirect user to home
    echo json_encode(array("success"=>'true'
                ));
}

   }
echo json_encode(array("success"=>'false',
            "message"=>$errors,             
            ));
                          }

as I said, I get ALL the alert if password and username are not correct and I get the $_SESSION set if password and username are correct but the popup stays shown and I don't get redirect (but I can access because of the SESSION set). Is it correct to test if success is == true or == false???

***EDIT: fixed, the problem was in the php file. look at my answer....

Redirect on callback. Although if you redirect the user to another page after login, you might just perform the login upon redirection. No need for ajax — Alejandro Urbano Alvarez
– Alejandro Urbano Alvarez, Commented Oct 10, 2012 at 12:20
@mattia:What do you get in "data" for both cases(valid and invalid login)? — Irfan
– Irfan, Commented Oct 10, 2012 at 13:03
I wanted to give the errors (in case the login is unsuccessful) in a nice way and I thought ajax/javascript was the best way. do you see what I do wrong in my code? — Mat
– Mat, Commented Oct 10, 2012 at 13:05
@Irfan if login is not valid I get the message connected to the error (user not active, user not find, etc)... if login is valid I send (al least it's what I try to do) success=>'true'... at this point I would like to make a nice fadeOut of the login popup and redirect the user to home.php — Mat
– Mat, Commented Oct 10, 2012 at 13:12

Mat · Accepted Answer · 2012-10-10 16:07:32Z

fixed! the problem was in the if else logic in the php file:

JS:

<script type="text/javascript">
 $(document).ready(function() {
      $("input[type=button]").click(function () {
      var username = $('input[id=username]').val(); // get the content of what user typed ( in textarea ) 
      var password = $('input[id=password]').val(); // get the content of what user typed ( in textarea ) 
                            $.ajax({
                            type: "POST",
                            url: "loginUser.php",
                            data : "username="+username+"&password="+password,
                            dataType: "json",
                            success: function (data) {
                            var success = data['success'];
                            if(success == false){
        var error = data['message'];
                            alert(error); // just in case somebody to click on share witout writing anything :


                                }

                                if(success == true) {
   $('#mask , .login-popup').fadeOut(300 , function() {
   $('#mask').remove();  
                                });// end fadeOut function()
    setTimeout("location.href = 'home.php';",1000);                                 
                                                }
                                                    }

                        });//end ajax             
                 });//end click function
         });//end ready function

loginUser.php:

   <?php
    if (empty($_POST)===false){
$email = sanitize($_POST['username']);
$password = sanitize($_POST['password']);

if (empty($email) === true || empty ($password) === true){ 
            $result = false;
            $errors = 'You need to enter a username and password';
            echo json_encode(array("success"=>$result,
                                   "message"=>$errors,             
                                   ));
} else if (mail_exists($email) === false){
            $result = false;
            $errors= 'we can\'t find that username. have you registered?';
            echo json_encode(array("success"=>$result,
                                   "message"=>$errors,             
                             ));
}else if (user_active($email) === false){
            $result = false;
            $errors = 'you haven\'t activated your account!';
            echo json_encode(array("success"=>$result,
                            "message"=>$errors,             
                             ));
}else {
$login = login($email, $password);
if ($login === false){
            $result = false;
            $errors = 'username/password combination is incorrect!';
            echo json_encode(array("success"=>$result,
                            "message"=>$errors,             
                             ));
} else {
//set user session 
$_SESSION['user_id'] = $login;
$result = true;
    echo json_encode(array("success"=>$result
                               ));

}
}
}
?>

Collectives™ on Stack Overflow

javascript/ajax login system

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related