Estoy realizando un proyecto de login y gestión de usuarios en el cual estoy aprendiendo jQuery y Ajax.
Tengo la funcionalidad básica, es decir, un usuario hace login y sale un mensaje de usuario y/o contraseña incorrecta si no es válido.
Lo que quiero conseguir (estoy buscando modos de hacerlo), es poder redireccionar a la página de usuario una vez el logueo es correcto. (No sé si tengo que hacerlo desde php, o bien podría usar jQuery).
Este es mi index.php:
<?php
require_once 'php/logOut.php';
session_start();
if(isset($_SESSION['userSession'])){
if(!empty($_SESSION['userSession'])){
header("Location: models/userPanel.php");
}
}
if (isset($_GET['logOut'])) {
logOut();
}
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- CSS imports -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" />
<!-- JQuery include -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- <script type="text/javascript" src="js/loginForm.js"></script> -->
<meta charset="utf-8">
<title>Login</title>
</head>
<body>
<!-- Navigation Bar content -->
<nav class="navBar">
<ul>
<li><a class="hover" href="index.php">Index</a></li>
</ul>
</nav>
<!-- Body content -->
<div class="bodyContainer">
<!-- Form -->
<div class="formContainer">
<p class="formTitle">Login form</p>
<form id="loginForm" method="post">
<div class="formDataContainer">
<div id="error"><!-- Error will be shown here ! --></div>
<label for="userMail"><span class="labelText">Email</span></label>
<input type="email" placeholder="Enter Username" name="userMail" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<label for="psw"><span class="labelText">Password</span></label>
<input type="password" placeholder="Enter Password" name="psw" required autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<button type="submit" id="btnLogin" name="btnLogin">Sing in</button>
</div>
</form>
</div>
</div>
<script>
$('#error').fadeOut();
$('form[id=\'loginForm\']').on('submit', function(e){
e.preventDefault();
$("#error").fadeOut();
var data = $(this).serialize();
$.ajax({
type: 'POST', url: 'php/loginProcess.php', data: data, beforeSend: function(){
$('#error').fadeOut();
$('#btnLogin').html('Sending ...');
}, success: function(response){
if (response == 'ok'){
$('#btnLogin').html('Signing In ...');
setTimeout(' window.location.href = "models/userPanel.php"; ', 4000);
}else{
$('#error').fadeIn(1000, function(){
$('#error').html(response);
$('#btnLogin').html('Sign In');
});
}
},
});
return false;
});
/* login submit */
</script>
</body>
</html>
Y este, mi controlador de PHP:
<?php
session_start();
require_once 'dbConfig.php';
$query = "SELECT idUser, name, surname, mail, level, password
FROM users
WHERE mail = ? AND password = ?";
// TODO recoger datos
if(isset($_POST["userMail"]) && isset($_POST["psw"])){
if(!empty($_POST["userMail"]) && !empty($_POST["psw"])){
// TODO comprobamos la base de datos
// Clean obtained data
$userMail = $mysqli->real_escape_string(trim($_POST["userMail"]));
$passwd = $mysqli->real_escape_string(trim($_POST["psw"]));
// Crypt the Password
$password = md5($passwd);
// Attempt to prepare the query
if($stmt = $mysqli->prepare($query)){
if($stmt->bind_param("ss", $userMail, $password)){
$stmt->execute();
// Obtain the result
$result = $stmt->get_result();
// If there is no result, we will show an error message
if($result->num_rows === 0){
echo "Invalid username or password";
}else{
// If we have data, we will check again the obtained data
$row = $result->fetch_array();
if($row["mail"] === $userMail && $row["password"] === $password){
// If correct, we will log in the user
$_SESSION['userSession']['mail'] = $row['mail'];
$_SESSION['userSession']['name'] = $row['name'];
$_SESSION['userSession']['surname'] = $row['surname'];
// TODO redirect
}
}
$mysqli->close();
}else{
// TODO handle error
}
}
}
}
?>
Tal y como se puede ver, tengo un TODO para la redirección en el archivo de control de PHP pero no sé cómo podría hacerlo. He intentado soluciones vía jQuery y no funcionan.
Muchas gracias de antemano.
Edit
Tras ver la respuesta, he intentado hacer el código como me comentan pero ahora la redirección no se efectúa correctamente.
$('#error').fadeOut();
$('form[id=\'loginForm\']').on('submit', function(e){
e.preventDefault();
$("#error").fadeOut();
var data = $(this).serialize();
$.ajax({
type: 'POST', url: 'php/loginProcess.php', data: data, beforeSend: function(){
$('#error').fadeOut();
$('#btnLogin').html('Sending ...');
}, success: function(response){
if (response == 'ok'){
$('#btnLogin').html('Signing In ...');
window.location("models/userPanel.php");
setTimeout(' window.location.href = "models/userPanel.php"; ', 4000);
}else{
$('#error').fadeIn(1000, function(){
$('#error').html(response);
$('#btnLogin').html('Sign In');
});
}
},
});
return false;
});