Moving on to the user sign in/out
This commit is contained in:
@@ -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; */
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user