nicer auth and saving admin

Former-commit-id: 140a6ee2d6a6f7fb9b8c445c1f86bd3db177a1ce

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,
     });

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 = '<a class="account-button nav-link" href="#">My Account</a>';
+        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
         });
     }
 }

client/public/components/templates/navbar.html

@@ -27,10 +27,10 @@
                     </ul>
                 </li>
                 <li class="account-item menu-item"><a class="account-button nav-link" href="#">My Account</a>
-                <li class="menu-item stock-mode" style="display: flex;">
+                <li class="menu-item stock-mode" style="display: none;">
                     STOCK MODE
                     <label class="switch">
-                        <input type="checkbox">
+                        <input class="stock-slider" type="checkbox">
                         <span class="slider round"></span>
                     </label>
                 </li>

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');

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,
+        });
+    };
+}