I have created a login button that is supposed to take the Array stored in the browser local storage, read each item and check if the username and password written in the input boxes are inside the Array).
The Array is successfuly taken from storage, but when the code is supposed to read it and compare the items to the input for some reason it always says the input isn't in the Array. How could I fix that? Code follows:
const loginForm = document.getElementById("loginForm");
const loginButton = document.getElementById("loginButton");
const loginError = document.getElementById("loginError");
const registerForm = document.getElementById("registerForm");
const registerButton = document.getElementById( "registerButton");
const registerError = document.getElementById("registerError");
/*HERE IS THE PROBLEMATIC LOGIN BUTTON*/
loginButton.addEventListener("click", (e)=> {
e.preventDefault();
const username = loginForm.username.value;
const password = loginForm.password.value;
const user ={ username, password};
let checkUser =[];
checkUser = JSON.parse(localStorage.getItem("registred users"));
let checkUserInfo = checkUser.includes(user, 0);
if( checkUserInfo == true){
alert("Login sucessful!");
location.reload();
} else {
loginError.style.opacity = 2;
}
})
registerButton.addEventListener("click", (e)=> {
e.preventDefault();
const registerUsername = registerForm.registerUsername.value;
const registerPassword = registerForm.registerPassword.value;
const confirmPassword = registerForm.confirmPassword.value;
const registerEmail = registerForm.registerEmail.value;
const userData = {registerUsername, registerPassword};
let registredUserData = [];
if(registerPassword.length > 8 && registerPassword.match(/[a-z]+/) && registerPassword.match(/[A-Z]+/) && registerPassword.match(/[0-9]+/) && registerPassword.match(/[$@#&!]+/) && registerPassword === confirmPassword && registerEmail.match(/[@/]+/ ) ){
registredUserData = JSON.parse(localStorage.getItem("registred users"));
registredUserData.push(userData);
localStorage.setItem("registred users",JSON.stringify(registredUserData));
location.reload();
} else {
registerError.style.opacity = 2;
}
})
You are comparing two objects for equality. Even though you use includes, it still checks if the value you put in is equal to an element in the array.
If you need to check for both username and password, loop through the array with some and see if the properties of one of the objects are equal to the provided input.
let checkUserInfo = checkUser.some(u => u.username === user.username && u.password === user.password);
Also keep in mind that this type of client side authentication is dummy auth for demonstration purposes only; it will not function as real authentication for any service.
You shouldn't use the includes to search for a similar object in an array of objects. You have to search one by one. You should use a filter type method like find() or some().
Your code would be something like:
/*HERE IS THE PROBLEMATIC LOGIN BUTTON*/
loginButton.addEventListener("click", (e)=> {
e.preventDefault();
const username = loginForm.username.value;
const password = loginForm.password.value;
const user ={ username, password};
let checkUser =[];
checkUser = JSON.parse(localStorage.getItem("registred users"));
let checkUserInfo = checkUser.some(item => item.username === user.username && item.password === user.password);
if( checkUserInfo == true){
alert("Login sucessful!");
location.reload();
} else {
loginError.style.opacity = 2;
}
})
Obs.: This is a extremely bad way to store password data. You should use some library that uses hash like bcryptjs.