Moving on to the user sign in/out

This commit is contained in:
Scott Idem
2025-07-15 17:55:53 -04:00
parent 8692771efb
commit 7b853ede8c
5 changed files with 360 additions and 181 deletions

View File

@@ -1,31 +1,47 @@
<script lang="ts">
import { onMount } from 'svelte';
import {
Settings
} from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import Element_theme from '$lib/e_app_theme.svelte';
// import Element_theme from '$lib/e_app_theme.svelte';
let notes: null|string = null;
let all: boolean = false;
// export let theme_mode: null|string = null;
export let set_theme_mode: null|boolean = null;
// export let theme_name: null|string = null;
export let set_theme_name: null|boolean = null;
interface Props {
log_lvl?: number;
hide?: null|boolean;
expand?: boolean;
// export let theme_mode: null|string = null;
// set_theme_mode?: null|boolean;
// export let theme_name: null|string = null;
// set_theme_name?: null|boolean;
}
let {
log_lvl = $bindable(0),
hide = $bindable(false),
expand = $bindable(false),
// set_theme_mode = null,
// set_theme_name = null
}: Props = $props();
// const dispatch = createEventDispatcher();
onMount(() => {
// console.log('** Element Mounted: ** Element App Config');
if (set_theme_mode) {
$slct_trigger = 'set_theme_mode';
}
if (set_theme_name) {
$slct_trigger = 'set_theme_name';
}
});
// onMount(() => {
// // console.log('** Element Mounted: ** Element App Config');
// if (set_theme_mode) {
// $slct_trigger = 'set_theme_mode';
// }
// if (set_theme_name) {
// $slct_trigger = 'set_theme_name';
// }
// });
// $: if ($slct_trigger == 'set_theme_mode' && $ae_loc?.app_cfg?.theme_mode) {
// console.log(`$ae_loc.app_cfg.theme_mode=${$ae_loc?.app_cfg?.theme_mode}`);
@@ -93,7 +109,7 @@ function handle_clear_storage(item: null|string) {
<!-- transition duration-500 delay-1000 hover:duration-500 hover:delay-1000 hover:transition-all -->
<section
id="xAE-App-Cfg"
id="AE-App-Cfg"
class="
ae_app_cfg
hidden-print
@@ -108,11 +124,12 @@ function handle_clear_storage(item: null|string) {
p-1 my-1
border-2 border-gray-200
"
class:hidden={hide}
>
<header
class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail}
class="ae_header w-64 "
class:hidden={!expand}
class="ae_header w-full"
>
<h2 class="text-sm text-center font-semibold">
Config
@@ -122,7 +139,7 @@ function handle_clear_storage(item: null|string) {
<div
class="ae_cfg_content text-xs space-y-4 my-4"
class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail}
class:hidden={!expand}
data-sveltekit-preload-data="false"
>
@@ -163,12 +180,7 @@ function handle_clear_storage(item: null|string) {
</section>
<!-- END: Access Type -->
<Element_theme
set_theme_mode={set_theme_mode}
set_theme_name={set_theme_name}
/>
<!-- END: Theme -->
<section class="space-y-2">
@@ -204,7 +216,7 @@ function handle_clear_storage(item: null|string) {
<button
class="btn btn-sm preset-tonal-warning"
title="Reload and clear the page cache"
on:click={() => {
onclick={() => {
// $ae_loc.
window.location.reload(true);
}}
@@ -218,7 +230,7 @@ function handle_clear_storage(item: null|string) {
<button
class="btn btn-sm preset-tonal-warning"
title="Clear the browser storage for this page"
on:click={() => {
onclick={() => {
if (!confirm('Are you sure you want to clear the local and session storage?')) {
return false;
}
@@ -246,17 +258,72 @@ function handle_clear_storage(item: null|string) {
</div>
<!-- class:justify-between={expand}
class:justify-end={!expand} -->
<div
class="flex flex-row gap-2 items-center justify-between w-full"
<button
class="btn btn-sm preset-tonal-warning ae_cfg_btn hover:transition-all"
on:click={() => {
$ae_loc.app_cfg.show_element__cfg_detail = !$ae_loc.app_cfg.show_element__cfg_detail;
}}
>
<span class="fas fa-cog mx-1"></span>
<span class="cfg_text">Config</span>
</button>
<!-- {#if !expand} -->
<span>
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-secret mx-1"></span> Super Access
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield mx-1"></span> Manager Access
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja mx-1"></span> Administrator Access
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-nurse mx-1"></span> Trusted Access
{:else if $ae_loc.access_type == 'authenticated'}
<span class="fas fa-user-friends mx-1"></span> Authenticated Access
{:else if $ae_loc.access_type == 'anonymous'}
<span class="fas fa-users mx-1"></span> Anonymous Access
{:else}
<span class="fas fa-unlock mx-1"></span> Unknown Access
{/if}
<!-- <button
class="btn btn-sm variant-glass-secondary access_type_lock_btn hover:transition-all"
on:click={() => {
handle_clear_access();
}}
title="Access mode is currently enabled/unlocked. Click to exit and lock."
>
<span class="fas fa-lock mx-1"></span> Lock
</button> -->
{:else}
Not logged in
{/if}
</span>
<!-- {/if} -->
<button
class="
ae_cfg_btn
btn btn-sm
preset-tonal-warning
group transition-all
"
onclick={() => {
expand = !expand;
}}
>
<!-- <span class="fas fa-cog m-1"></span> -->
<span class="inline-block" title="Settings">
<Settings />
</span>
<span
class="
cfg_text
hidden
group-hover:inline
"
>
Settings
</span>
</button>
</div>
</section>
@@ -264,11 +331,11 @@ function handle_clear_storage(item: null|string) {
<style lang="postcss">
.ae_cfg_btn .cfg_text {
display: none;
/* display: none; */
}
.ae_cfg_btn:hover .cfg_text {
display: initial;
/* display: initial; */
/* outline: solid thin red; */
}