So I'm trying to make a simple login system using HTML, CSS and Javascript. No passwords, just a simple click on a button to log you in through a profile. I would have thought doing this would be easier than creating a password system, however finding examples and information on this is few and far between.
I'm currently trying to solve an issue with the userlist for the nav bar on the sign in page, as none of the user profiles are being displayed. I'm using a javascript function to produce the navbar, which (should) take the name and id from the User javascript page, then display it.
I have tried replicating other code that seems to be a functional example of what I'm trying to produce, however the 3 buttons that should be showing in the nav bar display are empty.
HTML SIGN IN PAGE:
<!doctype html>
<meta charset=utf-8>
<link rel="stylesheet" href="style.css">
<body style="background-color:white;"></body>
<script src="index.js" type="module"></script>
<title>Sign In</title>
//Irrelevant Code Here
<main>
<section class="signin-container">
<h2>Select a user profile to sign in with:</h2>
<nav class ="userlist"><p>No users were returned</p> </nav>
</section>
</main>
JAVASCRIPT USER PAGE:
const users = [
{
id: '1',
name: 'George',
},
{
id: '2',
name: 'Sam',
},
{
id: '3',
name: 'Benjamin',
},
];
export function getAllUsers() {
return users;
}
export function getUser(id) {
return users.filter(user => user.id === id)[0];
}
JAVASCRIPT INDEX PAGE:
const ui = {};
const templates = {};
const user = () => localStorage.getItem('user') ?? null;
async function getAllUsers() {
const response = await fetch('/users');
if (response.ok) {
populateUserList(await response.json());
}
}
function populateUserList(users) { //Adds users to signin page
const userList = document.querySelector('nav.userlist');
userList.removeChild(userList.firstElementChild);
for (const user of users) {
const button = document.createElement('button');
button.dataset.user = user.id;
button.textContent = user.name;
button.addEventListener('click', login);
userList.append(button);
}
}
function populateUserData(user) {
for (const elem of document.querySelectorAll('.username')) {
elem.textContent = user.name;
}
ui.footer.loginStatus.textContent = `Welcome, ${user.name}!`;
}
async function getUserData(userid) {
const response = await fetch(`/user/${userid}`);
if (response.ok) {
return await response.json();
}
else {
return false;
}
}
async function login(event) {
const userid = event.target.dataset.user;
const user = await getUserData(userid);
populateUserData(user);
localStorage.setItem('user', userid);
if (ui.previous === 'logout' || !ui.previous) {
window.location.href = "index.html";
}
else
{
window.history.back()
}
storeState();
hideElement(ui.buttons.login);
showElement(ui.buttons.logout);
}
function logout() {
localStorage.removeItem('user');
window.location.reload()
}
async function checkLoggedIn() {
if (user()) {
hideElement(ui.buttons.login);
showElement(ui.buttons.logout);
populateUserData(await (getUserData(user())));
}
}
async function main() {
getHandles()
await getAllUsers();
await checkLoggedIn();
}
main();