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

Lots of work on the new global app menu.

Browse Source
This commit is contained in:
Scott Idem
2025-04-11 17:16:14 -04:00
parent 3df0739e96
commit c29cee4511
5 changed files with 309 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/ae_stores.ts
View File

@@ -149,7 +149,7 @@ export let ae_app_local_data_struct: key_val = {
show_element__header: false,
show_element__footer: false,
show_element__menu: false,
show_element__menu_btn: false,
show_element__menu_btn: true,
show_element__access_type: true,
show_element__cfg: true,

21
src/lib/element_access_type.svelte
View File

@@ -20,19 +20,21 @@ import { events_loc } from '$lib/ae_events_stores';
interface Props {
log_lvl?: number;
// data?: any;
show_passcode_input: boolean;
hidden: null|boolean;
}
let {
log_lvl = 0,
// data = null,
show_passcode_input = false,
hidden = true,
}: Props = $props();
let entered_passcode: null|string = $state(null);
// let entered_passcode: null|string = '';
let show_passcode_input: boolean = $state(false);
// let show_passcode_input: boolean = $state(false);
// let show_passcode_input: boolean = false;
// let trigger: null|string|boolean = null;
@@ -219,17 +221,26 @@ function handle_clear_access() {
class="
ae_access_type
hidden-print
bg-surface-100 text-surface-800
bg-red-100 text-gray-900
duration-300 delay-150 hover:delay-1000 hover:ease-out
transition-all hover:transition-all
flex flex-col flex-wrap gap-1
items-end justify-center
max-w-64
w-72 max-w-72
p-1 my-1
border-2 border-gray-200
"
class:hidden={hidden}
>
<header
class:hidden={!$ae_sess.show__sign_in_out__fields}
class="ae_header w-64 "
>
<h2 class="text-sm text-center font-semibold">
Passcode
</h2>
</header>
<!-- Show list of authorized sessions and presentations for a user -->
<!-- {#if $ae_loc.access_type == 'administrator'}
@@ -363,7 +374,7 @@ function handle_clear_access() {
onclick={() => {
handle_clear_access();
}}
class="btn btn-sm variant-ghost-success hover:variant-filled-success access_type_lock_btn transition-all"
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all"
title="Access mode is currently enabled/unlocked. Click to exit and lock."
>
<span class="fas fa-lock mx-1"></span> Lock?

17
src/lib/element_app_cfg.svelte
View File

@@ -96,15 +96,26 @@ function handle_clear_storage(item: null|string) {
class="
ae_app_cfg
hidden-print
bg-surface-100 text-surface-800
bg-red-100 text-gray-900
transition hover:transition-all
flex flex-col flex-wrap gap-1
items-center justify-center
max-w-72
w-72 max-w-72
p-1 my-1
border-2 border-gray-200
"
>
<header
class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail}
class="ae_header w-64 "
>
<h2 class="text-sm text-center font-semibold">
Config
</h2>
</header>
<div
class="ae_cfg_content text-xs space-y-4 my-4"
class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail}

33
src/lib/element_sign_in_out.svelte
View File

@@ -251,18 +251,19 @@ async function handle_change_password() {
class="
ae_sign_in_out
hidden-print
bg-surface-100 text-surface-800
bg-red-100 text-gray-900
transition-all duration-300 delay-150 hover:delay-1000 hover:ease-out hover:transition-all
flex flex-col flex-wrap gap-1
items-center justify-center
max-w-64
items-end justify-center
w-72 max-w-72
p-1 my-1
border-2 border-gray-200
"
class:hidden={hidden}
>
<button
type="button"
class="btn btn-sm variant-outline-surface hover:variant-filled-surface *:hover:inline"
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline w-full"
title="Sign In"
onclick={() => {
$ae_sess.show__sign_in_out__fields = !$ae_sess.show__sign_in_out__fields; // Toggle the visibility of the sign-in form
@@ -295,9 +296,9 @@ async function handle_change_password() {
<header
class:hidden={!$ae_sess.show__sign_in_out__fields}
class="ae_header"
class="ae_header w-full "
>
<h2 class="text-sm">
<h2 class="text-sm text-center font-semibold">
{#if $ae_loc?.person_id && $ae_loc?.user_id}
<!-- <button
type="button"
@@ -325,7 +326,7 @@ async function handle_change_password() {
<span
class:hidden={!$ae_sess.show__sign_in_out__fields}
class="flex flex-col gap-1 transition-all"
class="flex flex-col gap-1 transition-all w-full"
>
{#if !$ae_loc?.person_id && !$ae_loc?.user_id}
@@ -333,9 +334,8 @@ async function handle_change_password() {
<form
class="
ae_sign_in_form
flex flex-col gap-1 items-center justify-center
flex flex-col gap-1 items-end justify-center
p-1 my-1
border-2 border-gray-200
"
onsubmit={async (e) => {
e.preventDefault();
@@ -358,7 +358,7 @@ async function handle_change_password() {
>
<button
type="submit"
class="btn btn-sm variant-filled-secondary"
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary"
title="Look up user by email and send sign in email"
>
<!-- <User class="mx-1" /> -->
@@ -372,9 +372,8 @@ async function handle_change_password() {
<form
class="
ae_sign_in_form
flex flex-col gap-1 items-center
flex flex-col gap-1 items-end
p-1 my-1
border-2 border-gray-200
"
onsubmit={async (e) => {
e.preventDefault();
@@ -590,7 +589,7 @@ async function handle_change_password() {
<button
type="submit"
class="btn btn-sm variant-filled-secondary"
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary"
title="Sign in with username and password"
>
<!-- <LogIn class="mx-1" /> -->
@@ -606,7 +605,7 @@ async function handle_change_password() {
{:else}
<div class="flex flex-col gap-1 items-center justify-center">
<div class="flex flex-col gap-1 items-end justify-center">
<span class="text-sm text-gray-500">
{$ae_loc?.user.username ?? '-- not set --'}
</span>
@@ -615,7 +614,7 @@ async function handle_change_password() {
{#if $ae_loc.edit_mode}
<button
type="button"
class="btn btn-sm variant-filled-warning"
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning"
title="Change Password"
onclick={() => {
$ae_sess.show__modal_change_password = true;
@@ -631,7 +630,7 @@ async function handle_change_password() {
<!-- Display sign out option if the user is signed in -->
<button
type="button"
class="btn btn-sm variant-filled-warning"
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning"
title="Sign Out"
onclick={async () => {
if (confirm('Are you sure you want to sign out?')) {

286
src/routes/+layout.svelte
View File

@@ -20,6 +20,16 @@ const modalRegistry: Record<string, ModalComponent> = {
// modalComponentTwo: { ref: ModalComponentTwo },
// ...
};
import {
CircleX,
Eye, EyeOff,
Key,
LogIn, LogOut, LockKeyhole,
Mail, MailCheck,
Menu,
ShieldUser,
User, UserCheck
} from '@lucide/svelte';
// Highlight JS
import hljs from 'highlight.js/lib/core';
@@ -61,6 +71,11 @@ if (log_lvl > 1) {
console.log(`ae_root +layout.svelte data:`, data);
}
if (!$ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
// let account_id = localStorage.getItem('ae_account_id');
// console.log(`account_id = `, account_id);
@@ -377,6 +392,20 @@ $effect(() => {
document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
}
});
// function handle_clear_access() {
// // NOTE: I think it makes since to reset this to anonymous even if logged in as an admin or similar.
// window.localStorage.setItem('access_type', 'anonymous');
// // $ae_loc.access_type = null; // 'anonymous';
// $ae_loc.access_type = 'anonymous';
// trigger = 'process_permission_check';
// $ae_loc.app_cfg.show_element__passcode_input = false;
// return true;
// }
</script>
{#if $ae_loc?.site_google_tracking_id && $ae_loc?.site_google_tracking_id.length > 0}
@@ -448,13 +477,189 @@ $effect(() => {
max-h-max
min-w-full
max-w-max -->
<!-- Show menu on right side of page -->
<!-- Toggle the menu -->
<section
class="
ae_app__menu
hidden-print
flex flex-col
items-end justify-center
gap-1
absolute right-0 bottom-10
bg-white dark:bg-gray-800
border border-transparent
hover:border hover:border-gray-200 hover:dark:border-gray-700
rounded-lg
p-2
*:hover:inline
opacity-40
hover:opacity-100
duration-100 delay-1000 hover:delay-100 hover:ease-out
transition hover:transition-all
"
class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
>
<span class="hidden">
<User class="mx-1 inline-block text-gray-500" />
{$ae_loc?.person.full_name ?? '-- not set --'}<br />
<!-- <ShieldUser /> -->
<ShieldUser class="mx-1 inline-block text-gray-500" />
{$ae_loc?.user.username ?? '-- not set --'}<br />
</span>
{#if $ae_loc.edit_mode}
<button
type="button"
onclick={() => {
$ae_loc.edit_mode = false;
// dispatch_edit_mode_changed();
}}
class="btn btn-sm variant-ghost-success hover:variant-filled-success transition-all *:hidden:inline-block"
title="Edit mode is currently enabled. Click to disable."
>
<span class="fas fa-toggle-on mx-1"></span>
Edit
<span class="hidden">
Mode On
</span>
</button>
{:else if $ae_loc.authenticated_access}
<button
type="button"
onclick={() => {
$ae_loc.edit_mode = true;
// dispatch_edit_mode_changed();
}}
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>
Edit Mode?
</button>
{/if}
<div class="transition-all *:hover:inline">
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
<span
class="*:hover:inline"
>
<span class="fas fa-unlock mx-1"></span>
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-hat-wizard m-1"></span>
<span class="hidden">Super</span>
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield m-1"></span>
<span class="hidden">Manager</span>
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja m-1"></span>
<span class="hidden">Administrator</span>
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-check m-1"></span>
<span class="hidden">Trusted Access</span>
{:else if $ae_loc.access_type == 'public'}
Public
<span class="hidden">Access</span>
{:else if $ae_loc.access_type == 'authenticated'}
Authenticated
<span class="hidden">Access</span>
{:else if $ae_loc.access_type == 'anonymous'}
Anonymous Access
{:else}
Unknown Access
{/if}
</span>
<button
type="button"
onclick={() => {
// handle_clear_access();
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__passcode_input = false;
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
}}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
title="Access mode is currently enabled/unlocked. Click to exit and lock."
>
<span class="fas fa-lock mx-1"></span> Lock?
</button>
{:else}
<button
type="button"
onclick={() => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__passcode_input = true;
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
}}
class="
btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
*:hover:inline
"
title="Anonymous public access is currently set. Access mode is disabled/locked."
>
<!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
<!-- <span class="">Unlock?</span> -->
<ShieldUser />
<span class="hidden">Auth?</span>
</button>
{/if}
</div>
<button
type="button"
class="btn btn-sm variant-outline-surface hover:variant-ghost-success *:hover:inline-block w-full hidden"
title="Sign In"
onclick={() => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
}}
>
{#if $ae_loc?.app_cfg?.show_element__menu}
<CircleX class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
Hide Menu
<!-- </span> -->
{:else}
<Menu class="mx-1 inline-block" />
<span class="hidden">
Menu
</span>
{/if}
</button>
</section>
<!-- Show menu on right side of page -->
<section
class="
ae_app__menu
hidden-print
flex flex-col
items-center
justify-end
gap-4
min-h-96
min-w-48
@@ -462,35 +667,68 @@ max-w-max -->
bg-white dark:bg-gray-800
border border-gray-200 dark:border-gray-700
rounded-lg
p-4
p-2
opacity-50
hover:opacity-100
duration-100 delay-1000 hover:delay-100 hover:ease-out
transition hover:transition-all
"
class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
>
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
<span
class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
>
<Element_app_cfg
set_theme_mode={true}
set_theme_name={true}
/>
</span>
<!-- {/if} -->
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
<span
class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
>
<Element_app_cfg
set_theme_mode={true}
set_theme_name={true}
/>
</span>
<!-- {/if} -->
{#if $ae_loc.app_cfg?.show_element__sign_in_out}
<Element_sign_in_out
data={data}
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
/>
{/if}
{#if $ae_loc.app_cfg?.show_element__sign_in_out}
<Element_sign_in_out
data={data}
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
/>
{/if}
{#if $ae_loc.app_cfg?.show_element__access_type}
<Element_access_type
show_passcode_input={$ae_loc.app_cfg.show_element__passcode_input}
hidden={$ae_loc.iframe && !$ae_loc.trusted_access}
/>
{/if}
{#if $ae_loc.app_cfg?.show_element__access_type}
<Element_access_type
hidden={$ae_loc.iframe && !$ae_loc.trusted_access}
/>
{/if}
<button
type="button"
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline w-full"
title="Sign In"
onclick={() => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
// $ae_loc.app_cfg.show_element__menu = !$ae_loc?.app_cfg?.show_element__menu;
}}
>
{#if $ae_loc?.app_cfg?.show_element__menu}
<CircleX class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
Hide Menu
<!-- </span> -->
{:else}
<Menu class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
Menu
<!-- </span> -->
{/if}
</button>
</section>