While coding a login I want to set a limit to just allow you to try 3 times before resetting it-CodePudding

Disclaimer: Some code is in Spanish, let me know if you need it in English, also I didn't knew how to add the second HTML (plus IDK if it is relevant) please tell me if you need that too so I can change it.

I'm working on an ATM project, and I'm at the login part of it. I have 2 HTML pages, the first is the login and the second is the ATM (Ignore that part because is not finished yet)

Things I want to do:

If it validates the login, it will direct you to the .html page to work on the ATM
If the information is wrong it will give you 2 more tries and after the last one it will tell you that you ran out of tries and will start the count over and redirecting you to the first page. (This is the part where I need help for now)

// Variables para limite de intentos
let entryCount = 0
let entryLimit = 3
let error = false

// Variables para cambio de pagina
let mainScreen = document.getElementById('mainScreen')
let contentAccountScreen = document.createTextNode("Account Screen")
let accountScreen = document.createElement("span").setAttribute("id","accountScreen")

// Login 1
function login() {
    let response
    user = document.getElementById('user')
    pass = document.getElementById('password')
    if (user.value === 'Emilio' && pass.value === "abc123"){
        changeMainScreen.replaceChild(contentAccountScreen, mainScreen)
    } if (response != pass && entryCount < entryLimit) {
        entryCount  ;
        alert('Contraseña o usuario invalido, intentelo nuevamente')
        window.location.href = "index.html"
    } else(entryCount<entryLimit)
    {
        alert('Pasaste el limite de intentos')
        window.location.href = "index.html"
    } 
}

.cuerpo{
    display: flex;
    background-color: #dad158;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.boton{
    margin-top: 1rem;
}

h1 {
    text-align: center;
    margin-bottom: 100px;
}


/* Estilos calculadora */
body{
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}
#contenedor {
    max-width: 1024px;
    margin: 0 auto;
}
.cajacentro {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 12% auto !important;
    width: 450px;
    height: 100%;
    background-color: #212121;
    padding:3%;
}
section header h5, section header h2, aside h4, aside p{
    color: #ffffff;
    margin: 10px 0;
    text-align: right;
}
.tamañoresultados{
    font-size: 0.6rem;
}
.columna1{
    height: 100%;
    width: 65%;
}
.columna2{
    height: 100%;
    width: 25%;
}
.gridbotones{
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr 1fr; 
    gap: 0px 0px; 
    grid-template-areas: 
        ". . . ."
        ". . . ."
        ". . . ."
        ". . . ."; 
}
button{
    background-color: #212121;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 10px 0;
    cursor: pointer;
}
button:hover{
    background-color: #424242;
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">

    <script src="js/script.js"></script>
    <title>ATM</title>
</head>
<body >
    <div >
        <div id="mainScreen" ></div>
        <h1>ATM</h1>
        <div >
            <input type=""  id="user" placeholder="username">
            <label for="floatingInput">Usuario</label>
        </div>
        <div >
            <input type="password"  id="password" placeholder="Password">
            <label for="floatingPassword">Contraseña</label>
        </div>
        <div >
            <button type="submit"  onclick="login(location.href='cajero.html')">Ingresar</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>

CodePudding user response：

// Login 1
function login() {
    if (entryCount >= entryLimit) {
        alert('You reached the limit');
        return;
    }

    // login process..
    // if login validated redirect to html
    // window.location.href = "index.html";

    entryCount  ;

    if (entryCount < entryLimit) {
        alert('Try again');
    }
}

You shouldn't redirect to html page after increasing the count. You must check the limit at the start of login.

CodePudding user response：

You just need to modify js a bit as follows:

// Variables para limite de intentos
let entryCount = 0
let entryLimit = 3
let error = false

// Variables para cambio de pagina
let mainScreen = document.getElementById('mainScreen')
let contentAccountScreen = document.createTextNode("Account Screen")
let accountScreen = document.createElement("span").setAttribute("id","accountScreen")

// Login 1
function login() {
    let response
    user = document.getElementById('user')
    pass = document.getElementById('password')
    if (user.value === 'Emilio' && pass.value === "abc123"){
        changeMainScreen.replaceChild(contentAccountScreen, mainScreen)
    } if (response != pass && entryCount < entryLimit) {
        entryCount  ;
        alert('Contraseña o usuario invalido, intentelo nuevamente')
        window.location.href = "index.html"
    } else(entryCount >= entryLimit)
    {
        alert('Pasaste el limite de intentos')
        window.location.href = "index.html"
    } 
}

You just had to add entryCount >= entryLimit for it to work.

Just a suggestion, never trust client-side validation i.e. one can easily attempt unlimited times by just entering entryLimit = 100000 in the console.