Estoy intentando realizar un login mediante html y php usando Ajax y JQuery.
He conseguido hacer:
Que el usuario introduzca los datos y mediante jQuery y Ajax llame a un script php que comprueba los datos en la BBDD.
Lo que me gustaría hacer es:
Si el usuario y/o contraseña no son correctos, que muestre un elemento oculto en mi index.php con el mensaje de error.
Código del index:
<?php
session_start();
// Checking the session
if(isset($_SESSION['userSession'])){
if(!empty($_SESSION['userSession'])){
header("Location: models/userPanel.php");
}
}
?>
<!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>
<button type="button" id="registerBtn" onclick="location.href='models/registerForm.php';">Register</button>
</div>
</form>
</div>
</div>
<script>
$('form[id=\'loginForm\']').on('submit', function(e){
e.preventDefault();
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 = "home.php"; ', 4000);
}
else
{
$('#error').fadeIn(1000, function(){
$('#error').html(response);
$('#btnLogin').html('Sign In');
});
}
},
});
return false;
});
/* login submit */
</script>
</body>
</html>
Código del archivo loginProcess.php
<?php
session_start();
print_r($_POST);
require_once 'dbConfig.php';
$query = "SELECT idUser, name, surname, mail, level
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
$userName = $mysqli->real_escape_string(trim($_POST["userMail"]));
$passwd = $mysqli->real_escape_string(trim($_POST["psw"]));
// Crypt the Password
$password = md5($passwd);
print_r($password);
// Attempt to prepare the query
if($stmt = $mysqli->prepare($query)){
if($stmt->bind_param("ss", $userName, $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 "<script>
$('#error').fadeIn(3000, function(){
$('#error').html(Invalid username or password);
$('#btnLogin').html('Sign In');
});
</script>";
}else{
$row = $result->fetch_array();
print_r($row);
}
$mysqli->close();
}else{
// TODO handle error
}
}
}
}
?>
¿Cómo podría llamar al elemento del index? Estoy intentando hacer un echo con un script pero parece no funcionar.
Gracias por todo.