I have this code that what I am trying to do is that when userLoggin is true, it does not draw the loggin page but main content, it is a simple application without backend, so I don’t know how to do it when userloggin is true it simply changes to drawing main content
any advice or help?
userData comes from another page saved as a cookie where the user’s registration data is saved and I request it in this script
const mainContainer = document.getElementById("main-container");
const loginContainer = document.getElementById("login-form");
const cookies = document.cookie;
const cookieArray = cookies.split(";");
let userData = null;
let UserLoggin = {
loggin: false,
};
function toggleContainers() {
if (UserLoggin.loggin) {
loginContainer.style.display = "none";
mainContainer.style.display = "grid";
} else {
loginContainer.style.display = "block";
mainContainer.style.display = "none";
}
}
for (const cookie of cookieArray) {
const trimmedCookie = cookie.trim();
if (trimmedCookie.startsWith("userData=")) {
const userDataString = trimmedCookie.split("=")[1];
userData = JSON.parse(decodeURIComponent(userDataString));
break;
}
}
if (UserLoggin.loggin) {
toggleContainers();
}
const btnLoggin = document.getElementById("btnLoggin");
btnLoggin.addEventListener("click", () => {
const password = document.getElementById("password").value;
const username = document.getElementById("username").value;
if (
userData &&
password === userData.password &&
username === userData.username
) {
console.log("¡Inicio de sesión exitoso!");
password.value = "";
username.value = "";
UserLoggin.loggin = true;
toggleContainers();
const userLoginJSON = JSON.stringify(UserLoggin);
function setCookie(name, value, daysToExpire) {
const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + daysToExpire);
const cookieValue = `${name}=${encodeURIComponent(
value
)}; expires=${expirationDate.toUTCString()}; path=/`;
document.cookie = cookieValue;
}
setCookie("userLogginData", userLoginJSON, 30);
console.log(UserLoggin);
} else {
console.log("Nombre de usuario o contraseña incorrectos.");
}
});
mainContainer.addEventListener("load", () => {
const addTableComponent = document.getElementById("addTableComponent");
const tablecontainer = document.getElementById("table-container");
addTableComponent.addEventListener("click", () => {
const tableComponent = document.createElement("column-table");
tablecontainer.insertBefore(tableComponent, addTableComponent);
});
});
