javascript - 認知の複雑さが問題を軽減

Question

あるゲームのアイデアで JavaScript を使用してログイン システムを作成しましたが、どうやら私のアイデアでは複雑すぎるようです。1 つの機能を複数に分割する必要がありますか? コンピューターの処理時間は短縮されますか? クリティカルかどうかはわかりません。

とにかく、これはコードです：

class Log {
  constructor() {
    this.list = {
      username: ["admin", "helper"],
      password: ["admin", "h24"]
    };
    this.user = document.getElementById('username');
    this.psw = document.getElementById('password');
    this.posUser = null;
    this.posPsw = null;
    this.t = true;
  }

  login() {
    if (this.user.value != '' && this.user.value != null) {
      if (!this.list.username.includes(this.user.value.toLowerCase())) {
        errors.innerHTML = 'This user does not exist.';
      } else {
        for (let i = 0; i < this.list.username.length; i++) { //user[pos]
          let j = this.user.value.toLowerCase();
          if (j === this.list.username[i]) {
            this.posUser = i;
          }
        }
        for (let k = 0; k < this.list.password.length; k++) { //psw[pos]
          let l = this.psw.value;
          if (l === this.list.password[k]) {
            this.posPsw = k;
          }
        }
        if (this.posUser === this.posPsw) {
          //access
          console.log('access');
        } else { // user[pos] != psw[pos] then show error
          errors.innerHTML = 'Incorrect password.';
        }
      }
    }
  }
}
let errors = document.querySelector('.error');
let invite = new Log();

document.querySelector('.btnLog').addEventListener('click', function() {
  invite.login();
});

* {
  margin: 5px;
}

<div class="form">
  <div class="inline">
    <label>user</label><input type="text" id="username" autocomplete="off" />
  </div>
  <div class="inline">
    <label>psw</label><input type="password" id="password" autocomplete="off" />
    <div class="eye"></div>
  </div>
  <div class="flex-start">
    <button class="btn btnLog">login</button>
  </div>
  <div class="inline none -error">
    <div class="err_img"></div>
    <div class="error"></div>
  </div>
</div>