javascript authentication validation sanitization login-attempts

How to call my username and password from my login form which is "login succesfully" using if else statement? For login attempt

This is Login attempt using JavaScript. I don't know how to code calling my username and password in my login form. My login form is already in MySQL database.

Here is my code:

var attempt = 3;

function userLogin() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password1").value;
    if (username == "" || password == "") {
        alert("Please complete the required field!");
    } else {
        if (username == " " && password == " ") {
            alert("Login successfully");
        } else {
            attempt--;
            document.getElementById("msg").innerHTML = "<center class='text-danger'>Invalid username or password</center>";
            alert("You have left " + attempt + " login attempt;");
            if (attempt == 0) {
                document.getElementById("username").disabled = true;
                document.getElementById("password1").disabled = true;
                document.getElementById("login").disabled = true;
                document.getElementById("reset").style.display = "inline";
            }
        }
    }
}

I want to know how to code here

if (username == " " && password == " "){ 
    alert ("Login successfully");
}

calling my username and password which if correct it says "log in successfully" if not it will login attempt 3times then block

Solution

You should handle authentication server-side. (with PHP?)

If you are doing it client side you should research some web security stuff. It wouldn't be hard for a bad actor to hit F12 and see you login credentials and/or change the attempt variable from DevTools.

With PHP (using a POST request) you could do something like this: /login.php:

<!DOCTYPE html>
<html>
  <body>
    <?php
      if(isset($_POST['username']) && isset($_POST['password'])){
        //Get the login details from the database (stored in $password and $attempts)
        
        if($_POST['password'] == $password && $attempts > 0){
          echo "Logged in successfully";
          //then you would save a token client and server side or something
        }else{
          $attempts--;
          echo "You have $attempts remaining";
        }
        
      }
    ?>
    <form>
      <input name="username" placeholder="Username">
      <input name="password" placeholder="Password" type="password">
      <button>Login</button>
    </form>
  </body>
</html>