From 78d43acdcbfa6bcbfe2f4427dfc78d08ef9b1a40 Mon Sep 17 00:00:00 2001
From: Ben <36240171+benkyd@users.noreply.github.com>
Date: Wed, 27 Apr 2022 01:03:49 +0100
Subject: [PATCH] nicer auth and saving admin
Former-commit-id: 140a6ee2d6a6f7fb9b8c445c1f86bd3db177a1ce
---
client/public/auth.mjs | 20 ++++++-----
client/public/components/navbar.mjs | 33 +++++++++++++++++--
.../public/components/templates/navbar.html | 4 +--
client/public/index.mjs | 2 ++
client/public/localStorage-listener.mjs | 29 ++++++++++++++++
5 files changed, 75 insertions(+), 13 deletions(-)
create mode 100644 client/public/localStorage-listener.mjs
diff --git a/client/public/auth.mjs b/client/public/auth.mjs
index dfff757..ba36520 100644
--- a/client/public/auth.mjs
+++ b/client/public/auth.mjs
@@ -11,7 +11,7 @@ let auth0 = null;
async function CheckRedirect() {
const isAuthenticated = await auth0.isAuthenticated();
if (isAuthenticated) {
- localStorage.loggedIn = true;
+ localStorage.setItem('loggedIn', true);
return;
}
@@ -22,7 +22,7 @@ async function CheckRedirect() {
await auth0.handleRedirectCallback();
} catch (e) {
window.alert(e.message || 'authentication error, sorry');
- localStorage.loggedIn = false;
+ localStorage.setItem('loggedIn', false);
Signout();
}
@@ -32,8 +32,9 @@ async function CheckRedirect() {
}
export async function InitAuth0() {
- localStorage.loggedIn = false;
- localStorage.user = 'Guest';
+ // localStorage.setItem('loggedIn', false);
+ // localStorage.setItem('user', 'Guest');
+ // localStorage.setItem('admin', false);
auth0 = await window.createAuth0Client({
domain: AUTH0CONFIG.domain,
@@ -46,9 +47,9 @@ export async function InitAuth0() {
const isAuthenticated = await auth0.isAuthenticated();
if (isAuthenticated) {
const user = await auth0.getUser();
- localStorage.user = user.given_name || user.nickname;
+ localStorage.setItem('user', user.given_name || user.nickname);
NotifyNavbar('login', user);
- localStorage.loggedIn = true;
+ localStorage.setItem('loggedIn', true);
// tell the server about the logon, so that it can make the proper
// entry in the database, if there is for example an address
@@ -63,6 +64,8 @@ export async function InitAuth0() {
const res = await fetch('/api/auth/login', fetchOptions).then(res => res.json());
console.log(res);
+ localStorage.setItem('admin', res.user.admin);
+
// do stuff
}
}
@@ -88,8 +91,9 @@ export async function LoginSignup() {
}
export async function Signout() {
- localStorage.loggedIn = false;
- localStorage.user = 'Guest';
+ localStorage.setItem('loggedIn', false);
+ localStorage.setItem('user', 'Guest');
+ localStorage.setItem('admin', false);
await auth0.logout({
returnTo: window.location.origin,
});
diff --git a/client/public/components/navbar.mjs b/client/public/components/navbar.mjs
index 1db13e4..6754ffd 100644
--- a/client/public/components/navbar.mjs
+++ b/client/public/components/navbar.mjs
@@ -1,5 +1,6 @@
import { RegisterComponent, Component, SideLoad } from './components.mjs';
import { LoginSignup, Signout } from '../auth.mjs';
+import * as StorageListener from '../localStorage-listener.mjs';
// due to peculiarities in asynchronus loading of components,
// we need to have this remember the state of the logged in user
@@ -40,6 +41,11 @@ class NavBar extends Component {
}
OnLogin() {
+ if (!localStorage.user || localStorage.user === 'Guest') {
+ this.OnLogout();
+ return;
+ }
+
const account = this.root.querySelector('.account-item');
// doing this with proper dom manipulation wasn't working
@@ -60,18 +66,39 @@ class NavBar extends Component {
OnLogout() {
const account = this.root.querySelector('.account-item');
account.innerHTML = 'My Account';
+ const loginButton = this.root.querySelector('.account-button');
+ loginButton.addEventListener('click', () => {
+ LoginSignup(this);
+ });
}
OnRender() {
this.SetupHamburger();
+ this.OnLogin();
+
+ if (localStorage.admin === true) {
+ this.root.querySelector('.stock-mode').style.display = 'flex';
+ } else {
+ this.root.querySelector('.stock-mode').style.display = 'none';
+ }
+
+ StorageListener.ListenOnKey('admin', (e) => {
+ const admin = e.value;
+ if (admin) {
+ this.root.querySelector('.stock-mode').style.display = 'flex';
+ } else {
+ this.root.querySelector('.stock-mode').style.display = 'none';
+ }
+ });
+
+ this.root.querySelector('stock-slider').addEventListener('change', (e) => {
+ console.log(e);
+ });
// setup log in button
const loginButton = this.root.querySelector('.account-button');
loginButton.addEventListener('click', () => {
LoginSignup(this);
- // remove event listener and then change the
- // text to the users name and a dropdown that gives
- // them the option to log out
});
}
}
diff --git a/client/public/components/templates/navbar.html b/client/public/components/templates/navbar.html
index a47e68e..cbd4401 100644
--- a/client/public/components/templates/navbar.html
+++ b/client/public/components/templates/navbar.html
@@ -27,10 +27,10 @@
diff --git a/client/public/index.mjs b/client/public/index.mjs
index bc25551..c1df717 100644
--- a/client/public/index.mjs
+++ b/client/public/index.mjs
@@ -1,9 +1,11 @@
// import { RendererPreInit, BrickRenderer } from './brick-renderer/index.mjs';
import { InitAuth0 } from './auth.mjs';
+import * as StorageListener from './localStorage-listener.mjs';
function main() {
InitAuth0();
+ StorageListener.Init();
// clear basket
// localStorage.removeItem('basket');
diff --git a/client/public/localStorage-listener.mjs b/client/public/localStorage-listener.mjs
new file mode 100644
index 0000000..b8f89cb
--- /dev/null
+++ b/client/public/localStorage-listener.mjs
@@ -0,0 +1,29 @@
+
+const CallbackKeyArray = [];
+
+const OldSetItem = localStorage.setItem;
+
+export function ListenOnKey(key, callback) {
+ CallbackKeyArray.push({
+ key,
+ callback,
+ });
+}
+
+function OnStorage(event) {
+ CallbackKeyArray.forEach((callback) => {
+ if (callback.key === event.key) {
+ callback.callback(event);
+ }
+ });
+}
+
+export function Init() {
+ localStorage.setItem = function (key, value) {
+ OldSetItem.apply(this, arguments);
+ OnStorage({
+ key,
+ value,
+ });
+ };
+}