登錄按鈕將是注銷按鈕

Question

我只是 HTML 和 JavaScript 的初學者，我嘗試創建一個登錄和注冊頁面。 用戶需要先注冊才能登錄。 如果用戶嘗試登錄未注冊的帳戶，它將返回一條錯誤消息，提示“找不到用戶”。 （注意：我做了一個數組，用於存儲注冊帳戶）

當用戶成功登錄他/她的帳戶時，用戶在輸入框中輸入的用戶名和密碼將保留並且輸入框將是只讀的。

我要實現：

1. 當用戶成功登錄他/她的帳戶時，登錄按鈕將變成注銷按鈕。

2. 當用戶點擊注銷按鈕時，他/她的帳戶將被注銷，輸入框將被重置，用戶將能夠再次登錄他/她的帳戶。

HTML 代碼：

<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);
 
}

Answer 1

正如其他用戶評論的那樣，現實世界的登錄系統總是涉及后端服務器，但在您的情況下，您可以這樣做：

• 將用戶的登錄狀態存儲在全局變量中
• 決定要做什么：登錄或注銷，加上相應的按鈕樣式

這是一個例子：

$('#btnLogin').on('click', login);
var loginStatus = false;

function login(username = "", password = "") {
    if (loginStatus) {
        logout();
        return;
    }
    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
    loginStatus = true;
    $("#txtUsername").val(username).attr('readonly', true);
    $("#txtPassword").val(password).attr('readonly', true);
    user = users[indexOfUser];
    showUsers(indexOfUser);

    //style login button as logout
    $('#btnLogin').text("Logout");
}

function logout() {
    loginStatus = false;
    $("#txtUsername").val("").attr('readonly', false);
    $("#txtPassword").val("").attr('readonly', false);
    user = null;
    //style logout button as login
    $('#btnLogin').text("Login");
}