0

I have a php login form with some authentication and validation. The particular script I have so far which I want to run is as follows:

<script type="text/javascript">
var login_attempts=3;
function check_form()
 {
    //This is where I want the code to check if the form is valid and will be submitted
 {
   alert("SuccessFully Logged In");
   //Not sure if I need this as the form contains PHP so if the credentials are correct then tehy go to another page
 }

  else
      {
       if(login_attempts==0)
       {
       alert("No Login Attempts Available");
       }

    else
      {
      login_attempts=login_attempts-1;
      alert("Login Failed Now Only "+login_attempts+" Login Attempts Available");

    if(login_attempts==0)
       {
        document.getElementById("name").disabled=true;
        document.getElementById("pass").disabled=true;
        document.getElementById("form1").disabled=true;
  }
 }
}

return false;
}   
</script>

The reason I want this, is so that after a user has attempted to login 3 times I want an alert box to display a message and also stop the user from entering anything in the box. I don't actually want to lock the account from the DB end as the users are authenticating on information other than a username and password.

I am quite novice when it comes to Js so sorry if I missed anything out

Edit: PHP login code

<?php
if($_POST)
  {
    include 'config.php';
$ref=$_POST['ref'];
$fullname=$_POST['fullname'];
$postcode=$_POST['postcode'];
$dob=$_POST['dob'];
$email=$_POST['email'];

$sUser=mysqli_real_escape_string($conn,$orielref);
$sPass=mysqli_real_escape_string($conn,$fullname);
$sPostcode=mysqli_real_escape_string($conn,$postcode);
$sDob=mysqli_real_escape_string($conn,$dob);
$sEmail=mysqli_real_escape_string($conn,$email);
$query="SELECT * From customers where ref_number='$sUser' and full_name='$sPass' and post_code='$sPostcode' and date_of_birth='$sDob' and email_address='$sEmail'";
$result=mysqli_query($conn,$query);
if(mysqli_num_rows($result)==1)
{   $row = $result->fetch_array(MYSQLI_ASSOC);
    session_start();
    $_SESSION['id'] = $row['id'];
    $_SESSION['ref_number'] = $row['ref_number'];
    header('location:index.php');
}
}

?>
treyBake
  • 6,440
  • 6
  • 26
  • 57
MC123
  • 48
  • 10
  • 3
    Since that is a security script, you shouldn't validate that on front, you should validate it on backend. The reason is that any1 can just reset the variable in front. Also we need the actual submission code. If your page gets refreshed, that variable will be reset. You can go around that by saving variable in a cookie or storage. – zozo May 17 '19 at 14:33
  • 1
    Yeah, this is something that you should put on the server side, not in the browser. – Niet the Dark Absol May 17 '19 at 14:35
  • @zozo Thanks for the info, but it is actually more to display a message to the user about calling up - it is the login page to a certain system that not all clients will have access to. They maybe don't have access at all so i would want a prompt to appear with information on what to do – MC123 May 17 '19 at 14:36
  • @MC123 Ok... the script itself is not bad (can be improved but that's beside the point). What are the difficulties you are getting in? Also we need the submit code and server response in order to be able to help. – zozo May 17 '19 at 14:37
  • This code should be in the backend. The script itself is OK let`s say. I would still suggest "locking" the user in the DB. – DigitalJedi May 17 '19 at 14:40
  • I just want a message to display with instructions, it is not so much a security feature and I dont want instances of locked accounts as it isnt necessarily a username and pass that a user authenticates on – MC123 May 17 '19 at 14:45

1 Answers1

0

First read ppl comments (are valid). Moving over them (if you still want to) you need to make an ajax request to your login page.

Since no info was provided regarding php response and method of calling I will suggest a solution but can't provide much code.

If you use jquery take a look at http://api.jquery.com/jquery.ajax/.

Replace your first comment with:

$.ajax({
  method: "POST",
  url: "/login.php",
  data: { username: $('#username').val(), pass: $('#pass').val() },
  success: function(response) {
     if (response.valid) {
         alert('Logged In');
     }
     else {
         login_attempts=login_attempts-1;
         alert("Login Failed Now Only "+login_attempts+" Login Attempts Available");
     }
  }
})

If you want vanilla you can check my answer about vanilla ajax (is old and I'm sure there may be better answeres to it but should still work) here: Insert external page html into a page html and adapt it to your needs.

If you edit your question to provide more detailed info I can provide a much better answer, but in its current state... that's pretty much all I can give without listing tens of possibilities.

Edit: You added the login code: You need to return an answer to the client add to last line something like:

echo json_encode(['valid' => true]); // If login successful

or

echo json_encode(['valid' => false]); // If login not successful

Also you have sql injection possible there... really bad approach (but that's unrelated to current question). I suggest reading about pdo and prepared statements (https://www.php.net/manual/en/book.pdo.php and https://www.w3schools.com/php/php_mysql_prepared_statements.asp).

zozo
  • 8,230
  • 19
  • 79
  • 134