I'm trying to make a modal login system. When the user enters wrong user/pass, a warning text is appeared on the bottom of the modal. I tried the following codes but it does not work. The first problem is that when I leave user/password fields blank, the warning message should be appeared at the bottom of the modal but it does not happen. Totally, the login button does nothing even when I enter the correct user/pass. Please help me.
What I have tried:
index.php:
<!--Login Modal-->
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Login</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="POST">
<div class="mb-3">
<label for="exampleInputText1" class="form-label">User name:</label>
<input type="text" name="username" class="form-control" id="uname" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password:</label>
<input type="password" name="pass" class="form-control" id="pass">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="btn_login" name="btn_login" class="btn btn-primary">Login</button>
</div>
</form>
<div class="alert alert-danger" id="loginStatus" role="alert">
Invalid username or password!
</div>
</div>
</div>
</div>
</div>
<!--end of login modal-->
<script src="../public/assets/js/jquery-3.6.0.min.js"></script>
<script src="../public/assets/js/bootstrap.bundle.min.js"></script>
<script src="../public/assets/js/main.js"></script>
<script>
$('#loginStatus').hide();
</script>
<script>
$(document).ready(function() {
$('#btn_login').click(function() {
var username = $('#uname').val();
var password = $('#pass').val();
if (username != '' && password != '') {
$.ajax({
url: "../app/model/login.php",
method = "POST",
data: {
user: username,
pass: password
},
success: function(data) {
if (data == 'No') {
$('#loginStatus').show(1000);
} else {
$('#exampleModal2').hide();
location.reload();
}
}
});
} else {
$('#loginStatus').show();
}
});
});
</script>
login.php:
<?php
session_start();
class User
{
public function CheckUser()
{
require "../app/core/database.php";
if (isset($_POST['user']) && isset($_POST['pass'])) {
$user = $_POST['user'];
$pass = $_POST['pass'];
$data = $user;
$sql = "SELECT * FROM users WHERE username =?;";
$stmt = mysqli_stmt_init($connection);
if (!mysqli_stmt_prepare($stmt, $sql)) {
echo "Statement failed";
exit();
} else {
mysqli_stmt_bind_param($stmt, "s", $data);
mysqli_stmt_execute($stmt);
$log_result = mysqli_stmt_get_result($stmt);
$count = mysqli_num_rows($log_result);
}
if ($count == 1) {
$row = mysqli_fetch_assoc($log_result);
$hash = $row['password'];
$hashed_pass = password_verify($pass, $hash);
if ($hashed_pass == true) {
echo "Yes";
$_SESSION['loggedin'] = true;
$_SESSION['username'] = $user;
$_SESSION['is_admin'] = $row['admin'];
header("Location: ../home/index");
} else {
$_SESSION['loggedin'] = false;
}
} else {
echo "No";
}
}
}
}