I am facing an issue with my sign-up form where I only need 2 out of the 6 input details to create a user object. Specifically, I require the username and password for a user to log in. However, I have encountered difficulties trying to extract only these two values from an object containing all 6 values stored in local storage. As a workaround, I created a separate array called 'userLogin' that holds just the necessary username and password values, which I then added to the local storage.
Now, when users try to log in using the provided form, I want to compare their input with the stored usernames and passwords. Unfortunately, when I check the console, it shows "ne," indicating a mismatch. I have tried various approaches and formulations to make it work but haven't found success yet. I suspect the problem lies in retrieving the correct items, although I'm not entirely certain. Your input on this matter would be greatly appreciated.
// Sign up page
const login = document.querySelector(".login");
const loginSubmit = document.querySelector(".loginSubmit");
let users = [];
let user = {};
let userLogin = [];
signupForm.addEventListener("submit", (e) => {
e.preventDefault();
user = Object.fromEntries( [...document.querySelectorAll(".signup ul input")].map(e =>[e.name, e.value]));
users.push(user);
userLogin.push(user.username);
userLogin.push(user.password);
localStorage.setItem('UserData', JSON.stringify(userLogin));
console.log(localStorage);
});
// Log in page
const loginForm = document.querySelector(".login-form");
loginForm.addEventListener("submit", (e) => {
let usernameInput = document.querySelector(".lg-username").value;
let passwordInput = document.querySelector(".lg-password").value;
e.preventDefault();
if (localStorage.getItem("UserData")) {
const dataUsername = JSON.parse(localStorage.getItem('UserData', 'username'));
const dataPassword = JSON.parse(localStorage.getItem('UserData', 'password'));
if(usernameInput === dataUsername && passwordInput === dataPassword) {
console.log("ye");
}else{
console.log("ne");
}
}else{
console.log("not regis");
}
console.log(localStorage)
});
html signup form:
<form class="join-form">
<ul>
<li><input type="text" name="username" class="username" placeholder="Username" required /></li>
<li><input type="text" name="fullname" class="fullname" placeholder="Full Name" required /></li>
<li><input type="email" name="email" class="email" placeholder="Email Address" required pattern=".+@gmail\.com" /></li>
<li><input type="text" name="phone" class="phone" placeholder="Phone Number" required /></li>
<li><input type="text" name="postcode" class="postcode" placeholder="Post Code" required /></li>
<li><input type="password" name="password" class="password" placeholder="Enter a password" required /></li>
</ul>
<input type="submit" class="signupSubmit">
</form>
html log in form:
<form class="login-form">
<ul>
<li><input type="text" name="username" class="lg-username" placeholder="Username" required></li>
<li><input type="password" name="password" class="lg-password" placeholder="Password" required></li>
</ul>
<input type="submit" class="loginSubmit">
</form>