Shauna Shauna - 7 months ago 28
Javascript Question

Login attempts and redirect

I have created some code for a login page. What I want is, if the username and password are correct, then go to the Home.html page. Otherwise stay on the login page but only give the user 3 attempts to log in. I cant seem to figure out what is wrong as it doesnt count how many attempts i make nor does it redirect to the home.html page when i get it right. Thanks.



var counter = 0;

function checkdetails() {
var name = "",
password = "";

name = form1.txtusername.value
password = form1.txtpassword.value

if (name == "Shauna" && password == "8nss") {
window.alert("Both right")
window.location.replace("Home.html");

form1.txtusername.value = ""
form1.txtpassword.value = ""

} else if (name == "Shauna" && password != "8nss") {
window.alert("Incorrect Password.")
counter = counter + 1

window.alert(3 - counter + " attempts left")
form1.txtusername.value = ""
form1.txtpassword.value = ""

} else if (name != "Shauna" && password == "8nss") {
window.alert("Incorrect Username")
counter = counter + 1

window.alert(3 - counter + " attempts left")
form1.txtusername.value = ""
form1.txtpassword.value = ""
} else if (name != "Shauna" && password != "8nss") {
window.alert("Both Wrong")
counter = counter + 1

window.alert(3 - counter + " attempts left")
form1.txtusername.value = ""
form1.txtpassword.value = ""
}
if (counter == 3) {
window.alert("Incorrect details - Login failed")
window.close()
}

}

<form action="" method="post" name="form1" onsubmit="checkdetails()">
<table bgcolor="white" width="500" border="0" align="center">
<col width="200">
<col width="200">


<tr>
<th colspan="2" align="center" bgcolor="grey">Login</th>
</tr>


<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2" align="center">Username</td>
</tr>

<tr>
<td colspan="2" align="center">
<label>
<input type="text" name="txtusername" id="txtusername" class="info" required/>
</label>
</td>

<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2" align="center">Password</td>
</tr>


<tr>
<td colspan="2" align="center">
<label>
<input type="password" name="txtpassword" id="txtpassword" class="info" required/>
</label>
</td>
</tr>



<tr>
<td>&nbsp;</td>
</tr>


<tr>
<td colspan="2">
<label>
<input type="checkbox" name="terms" value="terms" id="terms" />Remember Me</label>
</td>
</tr>
<br>
<br>
<br>
<tr>
</tr>


<tr>
<td>&nbsp;</td>
</tr>

<tr>
<td>
<label>
<input type="submit" name="Login" id="Login" value="Login" />
</label>
</td>
<td>
<label>
<input type="reset" name="Reset" id="Reset" value="Reset" />
</label>
</td>
</tr>
</table>
</form>




Answer

Here's one way of doing what you're trying to do via JavaScript. I'm handling the onsubmit of the form and using JavaScript to validate it and return true or false to the handler, depending on how well it validated. I removed quite a bit of the duplication of code effort too and simplified the logic.

NB this is a very poor way of handling logins and client side validation of login attempts, but given that it's just for an assignment exercise, this is just one way to do what you need.

<meta charset="UTF-8">
<script>
var remainingAttempts = 3;

function checkDetails() {
    var name = form1.txtusername.value;
    var password = form1.txtpassword.value;
    console.log('name', name);
    console.log('password', password);
    var validUsername = validateUsername(name);
    var validPassword = validatePassword(password);
    if (validUsername && validPassword) {
        window.alert("Login successful");
    } else {
        form1.txtusername.value = '';
        form1.txtpassword.value = '';
        remainingAttempts--;

        var msg = '';
        if (validPassword) {
            msg += 'Username incorrect: ';
        } else if (validUsername) {
            msg += 'Password incorrect: ';
        } else {
            msg += 'Both username and password are incorrect: ';
        }

        msg += remainingAttempts + ' attempts left.';
        alert(msg);

        if (remainingAttempts <= 0) {
            alert('Closing window...');
            window.close();
        }
    }

    return validUsername && validPassword;
}

function validateUsername(username) {
    return username == 'Shauna';
}

function validatePassword(password) {
    return password == '8nss';
}
</script>

<form id="form1" name="form1" method="post" action="Home.html" onsubmit="return checkDetails();">
<table>
<tr>
<th colspan="2" align="center" bgcolor="grey">Login</th></tr>
Username
<tr><td colspan="2" align="center"><label><input type="text" name="txtusername" id="txtusername" class="info" required /></tr>
<tr><td>&nbsp;</td></tr>
<tr><td colspan="2" align="center">Password</td></tr>
<tr>
    <td colspan="2" align="center"><label>
    <input type="password" name="txtpassword" id="txtpassword" class="info" required/>
  </label></td>
</tr>
<tr>
    <td colspan="2">
        <label>
        <input type="checkbox" name="terms" value="terms" id="terms"/>Remember Me</label>
    </td>
</tr>
<br><br><br>
<tr>
</tr>
<tr>
    <td>
        <label>
        <input type="submit" name="Login" id="Login" value="Login"/>
        </label>
    </td>
    <td>
        <label>
        <input type="reset" name="Reset" id="Reset" value="Reset" />
        </label>
    </td>
</tr>
</table>
</form>