Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Work on styles based on permissions and related.

Browse Source
This commit is contained in:
Scott Idem
2024-11-21 19:33:19 -05:00
parent 24a75d509f
commit fbb45d50a7
4 changed files with 88 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app.postcss
View File

@@ -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;

72
src/lib/element_access_type.svelte
View File

@@ -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_loc);
console.log(ae_util);
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_loc);
console.log(ae_util);
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>

25
src/routes/+layout.svelte
View File

@@ -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"
title="Reload and clear the page cache"
type="button"
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

8
src/routes/+page.svelte
View File

@@ -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