I am creating a login page using PHP and AJAX. I want a user to attempt login only 3 times, after then a timer should be started, if user doesn't enter correct details. Timer should be started so that it will not change even if the user refreshes the page. I am sending data from a AJAX page and validating it into a PHP page.My all code for timer starts from if (res.error == 'not_found')
statement . Here are my codes :
AJAX code :
var validateCounter = 0;
var counter = 60;
//login form code
$('#loginForm').submit(function(e) {
e.preventDefault();
var username = $('#loginEmail').val();
var password = $('#loginPassword').val();
var form1 = document.getElementById('loginForm');
var len = form1.length;
$.ajax({
method: "post",
url: "loginserver.php",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(response) {
var res = JSON.parse(response);
if (username == '' || password == '') {
for (i = 0; i < (len - 1); i++) {
form1.elements[i].style.border = "1px solid red";
form1.elements[i].style.textShadow = "1px 1px 2px #000";
}
} else {
if (res.error == 'not_found') {
for (i = 0; i < (len - 1); i++) {
form1.elements[i].style.border = "1px solid red";
form1.elements[i].value = null;
}
validateCounter += 1;
console.log(validateCounter);
if (validateCounter > 2) {
var interval = setInterval(function() {
counter--;
if (counter <= 0) {
clearInterval(interval);
$('#timer').fadeOut();
$('#loginEmail').attr('disabled', false);
$('#loginPassword').attr('disabled', false);
$('#loginSubmit').attr('disabled', false);
validateCounter = 0;
} else {
$('#timer').show();
$('#timer span').text(counter + " s");
$('#loginEmail').css('border', 'none');
$('#loginEmail').attr('disabled', true);
$('#loginPassword').css('border', 'none');
$('#loginPassword').attr('disabled', true);
$('#loginSubmit').attr('disabled', true);
}
}, 1000);
}
} else if (res.success == 'authorized') {
location.href = "index.php";
}
}
}
});
});
PHP code :
<?php
session_start();
include('../dbconnection.php');
function validate($data){
return htmlspecialchars($data);
}
$adminName = validate($_POST['loginEmail']);
$adminPass = validate($_POST['loginPassword']);
//validating admin
$select_stmt = $connection -> prepare("SELECT * FROM `admin`
WHERE `admin_username`=? AND `admin_password`=?");
$select_stmt -> bind_param('ss',$adminName, $adminPass);
$select_stmt -> execute();
// get result into a variable
$result = $select_stmt -> get_result();
//store result using fetch_array
$data = $result -> fetch_assoc();
//get rows from result
$num_rows = $result -> num_rows;
if( $num_rows > 0){
echo json_encode(array('success' => 'authorized'));
$_SESSION['adminId'] = $data['admin_id'];
}else{
echo json_encode(array('error'=>'not_found'));
}
?>
Actually this login page is for website's admin only and no one else can login from here. Since I know the username and password I will login successfully, but if any other person wants to login, then he should be totally locked after 3 attempts. A timer should start after 3 attempts , so that it will not change when - 1 : Page is refreshed 2 : incognito mode is started 3 : browser is closed and reopened These all 3 criteria should be in the person's device who is trying to login. I should still be able to login from my device .