Login button will be Logout button

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:

  1. The login button will turn into a Logout button when a user successfully login his/her account.

  2. 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">
   <input type="password" class="form-control" placeholder="Password" id="txtPassword">
<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 class="mt-3 container text-center">
   <a href="#" class="link-dark" data-bs-target="#forgotPassModal" data-bs-toggle="modal" id="btnForgotPass">Forgot password?</a>


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];