I’m just a beginner at HTML and JavaScript and I try to made a Login and sign up page. The user needs to sign up first to be able to login. If a user tries to log in an account that is not registered it will return an error message saying “user not found”. (Note: I made an array where the registered accounts is stored)
When the user successfully login his/her account the username and password that the user input in the input box will remain and the input box will be a readonly.
I want to make:
-
The login button will turn into a Logout button when a user successfully login his/her account.
-
When the user click the logout button his/her account will be logout and the input box will be reset and the user will able to login his/her account again.
HTML code:
<div class="container-fluid ml-3 mr-3 mt-3">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" id="txtUsername">
</div>
<input type="password" class="form-control" placeholder="Password" id="txtPassword">
</div>
<div class="mt-3 container text-center">
<button type="button" class="col-3 btn btn-outline-primary" id="btnLogin">Login</button>
<button type="button" class="col-3 btn btn-outline-success" data-bs-target="#registerModal" data-bs-toggle="modal" id="btnRegister">Register</button>
</div>
<div class="mt-3 container text-center">
<a href="#" class="link-dark" data-bs-target="#forgotPassModal" data-bs-toggle="modal" id="btnForgotPass">Forgot password?</a>
</div>
JavaScript:
function login(username = "", password = "") {
username = $(`#txtUsername`).val();
password = $(`#txtPassword`).val();
let indexOfUser = users.findIndex((u) => {
return u.username == username && u.password == password && !u.isDeleted;
});
if (indexOfUser == -1) {
return alert(`User not found`);
}
// Happy path
$("#txtUsername").val(username).attr('readonly', true);
$("#txtPassword").val(password).attr('readonly', true);
user = users[indexOfUser];
showUsers(indexOfUser);
}