Work on styles based on permissions and related.

src/app.postcss

@@ -12,6 +12,20 @@ body {
     /* font-family: 'Noto Sans', sans-serif; */
 }
 
+html.super_access #appShell {
+    background-color: hsla(0, 100%, 50%, 0.5);
+}
+
+html.manager_access #appShell {
+    background-color: hsla(0, 50%, 75%, 0.5);
+}
+html.administrator_access #appShell {
+    background-color: hsla(40, 50%, 85%, 0.5);
+}
+html.trusted_access #appShell {
+    background-color: hsla(20, 50%, 85%, 0.25);
+}
+
 /* default theme */
 /* @font-face {
     font-family: 'Liberation Sans', sans-serif;

src/lib/element_access_type.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+let log_lvl = 0;
 import { createEventDispatcher, onMount, tick } from 'svelte';
 
 // import { liveQuery } from "dexie";
@@ -20,23 +21,31 @@ const dispatch = createEventDispatcher();
 
 
 onMount(() => {
-    console.log('** Element Mounted: ** Element Access Type');
+    if (log_lvl > 1) {
+        console.log('** Element Mounted: ** Element Access Type');
+    }
 });
 
 
 $: if (entered_passcode && entered_passcode.length >= 5) {
-    console.log(`entered_passcode=${entered_passcode}`);
+    if (log_lvl) {
+        console.log(`entered_passcode=${entered_passcode}`);
+    }
     handle_check_access_type_passcode();
 }
 
 $: if (trigger && $ae_loc.access_type) {
-    console.log(`$ae_loc.access_type=${$ae_loc.access_type}`);
+    if (log_lvl) {
+        console.log(`$ae_loc.access_type=${$ae_loc.access_type}`);
+    }
 
     let access_checks_results =  ae_util.process_permission_checks($ae_loc.access_type);
 
     $ae_loc = {...$ae_loc, ...access_checks_results};
 } else if (trigger) {
-    console.log(`$ae_loc.access_type=not set`);
+    if (log_lvl) {
+        console.log(`$ae_loc.access_type=not set`);
+    }
 
     // Send an empty string to reset the permissions. This is the same as sending 'anonymous'.
     let access_checks_results =  ae_util.process_permission_checks('');
@@ -46,7 +55,9 @@ $: if (trigger && $ae_loc.access_type) {
 
 
 function handle_check_access_type_passcode() {
-    console.log(`*** handle_check_access_type_passcode() *** passcode list:`, $ae_loc.site_access_code_kv);
+    if (log_lvl > 1) {
+        console.log(`*** handle_check_access_type_passcode() *** passcode list:`, $ae_loc.site_access_code_kv);
+    }
 
     // Reminder: super > manager > administrator > trusted > public > authenticated > anonymous
 
@@ -94,6 +105,7 @@ function handle_check_access_type_passcode() {
             window.localStorage.setItem('access_type', 'anonymous');
 
             $ae_loc.access_type = 'anonymous';
+
             trigger = 'process_permission_check';
 
             // $ae_loc = $ae_loc; // Trigger Svelte just in case
@@ -124,7 +136,9 @@ function handle_check_access_type_passcode() {
 
         return true;
     } else {
-        console.log('Entered passcode too short.');
+        if (log_lvl > 1) {
+            console.log('Entered passcode too short.');
+        }
 
         // $ae_loc.access_type = null; // 'anonymous';
 
@@ -154,10 +168,12 @@ function handle_clear_access() {
 }
 
 function dispatch_access_type_changed() {
-    console.log('*** dispatch_access_type_changed() ***');
+    if (log_lvl) {
+        console.log('*** dispatch_access_type_changed() ***');
 
-    console.log(ae_util);
+        console.log(ae_util);
-    console.log($ae_loc);
+        console.log($ae_loc);
+    }
 
     dispatch('access_type_changed', {
         access_type: $ae_loc.access_type
@@ -165,10 +181,12 @@ function dispatch_access_type_changed() {
 }
 
 function dispatch_edit_mode_changed() {
-    console.log('*** dispatch_edit_mode_changed() ***');
+    if (log_lvl) {
+        console.log('*** dispatch_edit_mode_changed() ***');
 
-    console.log(ae_util);
+        console.log(ae_util);
-    console.log($ae_loc);
+        console.log($ae_loc);
+    }
 
     window.localStorage.setItem('edit_mode', $ae_loc.edit_mode);
 
@@ -201,7 +219,7 @@ function dispatch_edit_mode_changed() {
     {/if} -->
 
 
-   <div>
+   <div class="transition-all">
     {#if $ae_loc.trusted_access}
         {#if $ae_loc.manager_access}
             {#if $ae_loc?.sync_local_config}
@@ -258,7 +276,7 @@ function dispatch_edit_mode_changed() {
                     $ae_loc.edit_mode = false;
                     dispatch_edit_mode_changed();
                 }}
-                class="btn btn-sm variant-ghost-success hover:variant-filled-success"
+                class="btn btn-sm variant-ghost-success hover:variant-filled-success transition-all"
                 title="Edit mode is currently enabled. Click to disable."
                 >
                 <span class="fas fa-toggle-on mx-1"></span>
@@ -271,7 +289,7 @@ function dispatch_edit_mode_changed() {
                     $ae_loc.edit_mode = true;
                     dispatch_edit_mode_changed();
                 }}
-                class="btn btn-sm variant-ghost-warning hover:variant-filled-warning"
+                class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition-all"
                 title="Edit mode is currently disabled. Click to enable."
                 >
                 <span class="fas fa-toggle-off mx-1"></span>
@@ -281,38 +299,44 @@ function dispatch_edit_mode_changed() {
     {/if}
     </div>
 
-    <div>
+    <div class="transition-all">
     {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
         <span class="fas fa-unlock mx-1"></span>
 
+        <span
+            class="*:hover:inline"
+            >
         {#if $ae_loc.access_type == 'super'}
             <span class="fas fa-hat-wizard m-1"></span>
-            Super
+            <span class="hidden">Super</span>
         {:else if $ae_loc.access_type == 'manager'}
             <span class="fas fa-user-shield m-1"></span>
-            Manager
+            <span class="hidden">Manager</span>
         {:else if $ae_loc.access_type == 'administrator'}
             <span class="fas fa-user-ninja m-1"></span>
-            Administrator
+            <span class="hidden">Administrator</span>
         {:else if $ae_loc.access_type == 'trusted'}
             <span class="fas fa-user-check m-1"></span>
-            Trusted Access
+            <span class="hidden">Trusted Access</span>
         {:else if $ae_loc.access_type == 'public'}
-            Public Access
+            Public
+            <span class="hidden">Access</span>
         {:else if $ae_loc.access_type == 'authenticated'}
-            Authenticated Access
+            Authenticated
+            <span class="hidden">Access</span>
         {:else if $ae_loc.access_type == 'anonymous'}
             Anonymous Access
         {:else}
             Unknown Access
         {/if}
+        </span>
 
         <button
             type="button"
-            class="btn btn-sm variant-ghost-success hover:variant-filled-success access_type_lock_btn transition-all hover:transition-all"
             on:click={() => {
                 handle_clear_access();
             }}
+            class="btn btn-sm variant-ghost-success hover:variant-filled-success access_type_lock_btn transition-all"
             title="Access mode is currently enabled/unlocked. Click to exit and lock."
             >
             <span class="fas fa-lock mx-1"></span> Lock?
@@ -320,13 +344,13 @@ function dispatch_edit_mode_changed() {
     {:else}
         <button
             type="button"
-            class="btn btn-sm variant-glass-success hover:variant-filled-warning access_type_unlock_btn transition-all hover:transition-all"
             on:click={async () => {
                 show_passcode_input = !show_passcode_input;
                 await tick();
                 document.getElementById('access_passcode_input').focus();
                 // element.focus({preventScroll:false});
             }}
+            class="btn btn-sm variant-glass-success hover:variant-filled-warning access_type_unlock_btn transition-all"
             title="Anonymous public access is currently set. Access mode is disabled/locked."
             >
             <span class="fas fa-lock mx-1 lock_icon"></span>

src/routes/+layout.svelte

@@ -386,6 +386,15 @@ if (browser) {
     });
 
 
+    // let access_type_li = ['super', 'manager', 'administrator', 'trusted', 'public', 'authenticated', 'anonymous'];
+    // if ($ae_loc.access_type && access_type_li.includes($ae_loc.access_type)) {
+    //     document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
+    //     document.getElementsByTagName('html')[0].classList.add(`${$ae_loc.access_type}_access`);
+    // } else {
+    //     document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
+    // }
+
+
     let iframe = data.url.searchParams.get('iframe');
     if (iframe == 'true') {
         console.log('Use iframe layout!');
@@ -443,6 +452,14 @@ if (browser) {
 //     }
 // }
 
+// Check if in the array of: super > manager > administrator > trusted > public > authenticated > anonymous
+let access_type_li = ['super', 'manager', 'administrator', 'trusted', 'public', 'authenticated', 'anonymous'];
+$: if (browser && $ae_loc.access_type && access_type_li.includes($ae_loc.access_type)) {
+    document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
+    document.getElementsByTagName('html')[0].classList.add(`${$ae_loc.access_type}_access`);
+} else if (browser) {
+    document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
+}
 
 
 onMount(() => {
@@ -538,12 +555,13 @@ onMount(() => {
                 />
 
             <button
+                type="button"
                 on:click={() => {
                     console.log('Debug ae_loc:', $ae_loc);
                     $ae_loc.debug = !$ae_loc?.debug;
                 }}
                 id="AE-Quick-Debug"
-                class="ae_quick_debug btn btn-sm variant-glass-surface"
+                class="ae_quick_debug btn btn-sm variant-glass-surface transition-all"
                 title="Turn debug content and styles off and on"
                 >
                 &pi;
@@ -563,14 +581,15 @@ onMount(() => {
         <h1 class="text-4xl font-bold text-red-500">Access Denied</h1>
         <p class="text-lg text-center text-gray-500">You do not have access to this site. You may need a passcode and or URL site key.</p>
         <button
-            class="btn btn-sm m-1 variant-glass-surface hover:variant-outline-warning hover:variant-glass-warning text-error-400 hover:text-error-800"
+            type="button"
-            title="Reload and clear the page cache"
             on:click={() => {
                 localStorage.clear();
                 sessionStorage.clear();
                 alert('Local and Session Storage cleared. The page should now refresh on its own.');
                 window.location.reload(true);
             }}
+            class="btn btn-sm m-1 variant-glass-surface hover:variant-outline-warning hover:variant-glass-warning text-error-400 hover:text-error-800 transition-all"
+            title="Reload and clear the page cache"
             >
             <span class="fas fa-sync mx-1"></span>
             Reload and Clear Cache

src/routes/+page.svelte

@@ -63,25 +63,25 @@ onMount(() => {
         >
         <button
             type="button"
-            class="btn btn-sm m-1 variant-glass-surface hover:variant-outline-warning text-error-300 hover:text-error-800"
-            title="Reload and clear the page cache"
             on:click={() => {
                 window.location.reload(true);
             }}
+            class="btn btn-sm m-1 variant-glass-surface hover:variant-outline-warning text-error-300 hover:text-error-800 transition-all"
+            title="Reload and clear the page cache"
             >
             <span class="fas fa-sync mx-1"></span>
             Reload
         </button>
         <button
             type="button"
-            class="btn btn-sm m-1 p-1 variant-glass-surface hover:variant-outline-warning text-error-300 hover:text-error-800"
-            title="Reload and clear the page cache"
             on:click={() => {
                 localStorage.clear();
                 sessionStorage.clear();
                 alert('Local and Session Storage cleared. The page should now refresh on its own.');
                 window.location.reload(true);
             }}
+            class="btn btn-sm m-1 p-1 variant-glass-surface hover:variant-outline-warning text-error-300 hover:text-error-800 transition-all"
+            title="Reload and clear the page cache"
             >
             <span class="fas fa-sync mx-1"></span>
             Clear Storage and Reload