i made a login system with JavaScript for a game idea i had, but apparently my ide says it is too complex, do i need to split one function in more pieces? Do it reduces computer processing time? I just don't know if it's critical or not.
Anyway this is the code:
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>
