I've created a simple html, css login I want to add timer

If login x3 failed some text will show can't login need to wait 15 seconds to login again.

var login_attempts = 3;

function check_form() {
  var name = document.getElementById("name").value;
  var pass = document.getElementById("pass").value;
  if (name == "admin" && pass == "admin") {
    alert("SuccessFully Logged In");
    document.getElementById("name").value = "";
    document.getElementById("pass").value = "";
  } 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;
}

body {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  font-family: helvetica;
}

#wrapper {
  text-align: center;
  margin: 0 auto;
  padding: 0px;
  width: 995px;
}

#form1 {
  background-color: white;
  width: 380px;
  margin-left: 305px;
  box-shadow: 0px 0px 10px 0px #D8D8D8;
}

#form1 p {
  color: #FA8258;
  font-weight: bold;
}

#form1 #login_label {
  color: #FA8258;
  padding: 20px;
  font-size: 25px;
  border-bottom: 1px solid #E6E6E6;
  font-weight: bold;
}

#form1 input[type="text"],
input[type="password"] {
  width: 300px;
  height: 40px;
  padding-left: 10px;
  margin-top: 10px;
  border: 1px solid #D8D8D8;
}

#form1 input[type="submit"] {
  margin-top: 10px;
  width: 300px;
  height: 40px;
  background-color: #FA8258;
  border: none;
  color: white;
  box-shadow: 0px 3px 0px 0px #FE642E;
  border-radius: 3px;
  font-weight: bold;
}

<div id="wrapper">

  <form id="form1" method="post" action="" onsubmit="return check_form();">
    <p id="login_label">USER LOGIN</p>
    <input type="text" id="name" placeholder="Enter Username" required>
    <br>
    <input type="password" id="pass" placeholder="Enter Password" required>
    <br>
    <input type="submit" value="SUBMIT FORM">
    <p>Username : admin Password : admin</p>
    <br>
  </form>
</div>

CodePudding user response：

You can extract the disable and call it after 15 seconds using setTimeout

I added the message too and use an event listener

const toggle = disabled => {
  document.getElementById("message").hidden = !disabled; // toggle the message
  document.getElementById("name").disabled =
  document.getElementById("pass").disabled =
  document.getElementById("form1").disabled = disabled;
  login_attempts = disabled ? 0 : 3; // give more attempts
};
 ...

if (login_attempts == 0) {
  toggle(1); // disable
  setTimeout(toggle, 15000); // called without parameter will enable
}

var login_attempts = 3;

const toggle = disabled => {
  document.getElementById("message").hidden = !disabled; // toggle the message
  document.getElementById("name").disabled =
  document.getElementById("pass").disabled =
  document.getElementById("form1").disabled = disabled;
  login_attempts = disabled ? 0 : 3; // give more attempts
};

document.getElementById("form1").addEventListener("submit", function(e) {
  e.preventDefault();

  var name = document.getElementById("name").value;
  var pass = document.getElementById("pass").value;
  if (name == "admin" && pass == "admin") {
    alert("SuccessFully Logged In");
    document.getElementById("name").value = "";
    document.getElementById("pass").value = "";
  } 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) {
        toggle(1); // disable
        setTimeout(toggle, 15000); // called without parameter will enable
      }
    }
  }
})

body {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  font-family: helvetica;
}

#wrapper {
  text-align: center;
  margin: 0 auto;
  padding: 0px;
  width: 995px;
}

#form1 {
  background-color: white;
  width: 380px;
  margin-left: 305px;
  box-shadow: 0px 0px 10px 0px #D8D8D8;
}

#form1 p {
  color: #FA8258;
  font-weight: bold;
}

#form1 #login_label {
  color: #FA8258;
  padding: 20px;
  font-size: 25px;
  border-bottom: 1px solid #E6E6E6;
  font-weight: bold;
}

#form1 input[type="text"],
input[type="password"] {
  width: 300px;
  height: 40px;
  padding-left: 10px;
  margin-top: 10px;
  border: 1px solid #D8D8D8;
}

#form1 input[type="submit"] {
  margin-top: 10px;
  width: 300px;
  height: 40px;
  background-color: #FA8258;
  border: none;
  color: white;
  box-shadow: 0px 3px 0px 0px #FE642E;
  border-radius: 3px;
  font-weight: bold;
}

<div id="wrapper">

  <form id="form1" method="post" action="">
    <p id="login_label">USER LOGIN</p>
    <input type="text" id="name" placeholder="Enter Username" required>
    <br>
    <input type="password" id="pass" placeholder="Enter Password" required>
    <br>
    <input type="submit" value="SUBMIT FORM">
    <p id="message" hidden>Please wait 15 seconds before trying again</p>
    <p>Username : admin Password : admin</p>
    <br>
  </form>
</div>

CodePudding user response：

You can use .setTimeout()

Take a look at the DOCS here:
https://developer.mozilla.org/en-US/docs/Web/API/setTimeout