Trying to fix a bug when locking the quick access. It does not seem to stick. This ia a problem that needs to be fixed. For now I think I have a temporary workaround.
This commit is contained in:
Scott Idem
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
let log_lvl: number = 0;
|
||||
import { onMount, tick } from 'svelte';
|
||||
// let log_lvl: number = 1;
|
||||
import { onDestroy, onMount, tick } from 'svelte';
|
||||
|
||||
// import { liveQuery } from "dexie";
|
||||
|
||||
@@ -10,48 +10,87 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
import { events_loc } from '$lib/ae_events_stores';
|
||||
// import { db_events } from "$lib/db_events";
|
||||
|
||||
export let hidden: boolean = false;
|
||||
// export let hidden: boolean = false;
|
||||
|
||||
let entered_passcode: null|string = null;
|
||||
let show_passcode_input: boolean = false;
|
||||
// *** Setup Svelte properties
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
// data?: any;
|
||||
hidden: null|boolean;
|
||||
}
|
||||
|
||||
let trigger: null|string = null;
|
||||
let {
|
||||
log_lvl = 0,
|
||||
// data = null,
|
||||
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 = false;
|
||||
|
||||
// let trigger: null|string|boolean = null;
|
||||
let trigger: null|string|boolean = $state(null);
|
||||
|
||||
// const dispatch = createEventDispatcher();
|
||||
|
||||
|
||||
// WARNING: There is a bug (I think) around here related to the entered_passcode not being cleared. There seems to be something different about how Svelte handles state in this component compared to the others. This might be related to the `$effect` or `$derived` usage. Maybe there are conflicting things trying to update the $ae_loc store at the same time.
|
||||
onMount(() => {
|
||||
if (log_lvl > 1) {
|
||||
console.log('** Element Mounted: ** Element Access Type');
|
||||
}
|
||||
entered_passcode = '';
|
||||
trigger = null;
|
||||
});
|
||||
|
||||
|
||||
$: if (entered_passcode && entered_passcode.length >= 5) {
|
||||
if (log_lvl) {
|
||||
console.log(`entered_passcode=${entered_passcode}`);
|
||||
}
|
||||
handle_check_access_type_passcode();
|
||||
}
|
||||
|
||||
$: if (trigger && $ae_loc.access_type) {
|
||||
if (log_lvl) {
|
||||
console.log(`$ae_loc.access_type=${$ae_loc.access_type}`);
|
||||
onDestroy(() => {
|
||||
if (log_lvl > 1) {
|
||||
console.log('** Element Destroyed: ** Element Access Type');
|
||||
}
|
||||
|
||||
let access_checks_results = ae_util.process_permission_checks($ae_loc.access_type);
|
||||
// Clean up any references or listeners if needed
|
||||
entered_passcode = null; // Clear the entered passcode
|
||||
show_passcode_input = false;
|
||||
|
||||
$ae_loc = {...$ae_loc, ...access_checks_results};
|
||||
} else if (trigger) {
|
||||
if (log_lvl) {
|
||||
console.log(`$ae_loc.access_type=not set`);
|
||||
// Reset trigger
|
||||
trigger = null;
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (entered_passcode && entered_passcode.length >= 5) {
|
||||
if (log_lvl) {
|
||||
console.log(`entered_passcode=${entered_passcode}`);
|
||||
}
|
||||
handle_check_access_type_passcode();
|
||||
}
|
||||
});
|
||||
|
||||
// Send an empty string to reset the permissions. This is the same as sending 'anonymous'.
|
||||
let access_checks_results = ae_util.process_permission_checks('');
|
||||
$effect(() => {
|
||||
if (trigger && $ae_loc.access_type) {
|
||||
trigger = false;
|
||||
if (log_lvl) {
|
||||
console.log(`$ae_loc.access_type=${$ae_loc.access_type}`);
|
||||
}
|
||||
|
||||
$ae_loc = {...$ae_loc, ...access_checks_results};
|
||||
}
|
||||
let access_checks_results = ae_util.process_permission_checks($ae_loc.access_type);
|
||||
|
||||
$ae_loc = {...$ae_loc, ...access_checks_results};
|
||||
$ae_loc = $ae_loc;
|
||||
} else if (trigger) {
|
||||
trigger = false;
|
||||
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('');
|
||||
|
||||
$ae_loc = {...$ae_loc, ...access_checks_results};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function handle_check_access_type_passcode() {
|
||||
@@ -117,7 +156,7 @@ function handle_check_access_type_passcode() {
|
||||
return false;
|
||||
}
|
||||
|
||||
entered_passcode = null;
|
||||
entered_passcode = '';
|
||||
trigger = 'process_permission_check';
|
||||
|
||||
// WARNING 2024-08-21: For some reason the config element does not auto show or hide when the access type changes.
|
||||
@@ -156,6 +195,7 @@ function handle_clear_access() {
|
||||
$ae_loc.access_type = 'anonymous';
|
||||
trigger = 'process_permission_check';
|
||||
|
||||
entered_passcode = ''; // Clear the entered passcode
|
||||
show_passcode_input = false;
|
||||
|
||||
// $ae_loc = $ae_loc; // Trigger Svelte just in case
|
||||
@@ -171,7 +211,9 @@ function handle_clear_access() {
|
||||
|
||||
<section
|
||||
id="AE-Quick-Access-Type"
|
||||
class="ae_access_type bg-surface-100 text-surface-800 transition duration-300 delay-150 hover:delay-1000 hover:ease-out transition-all hover:transition-all hidden-print flex flex-col items-end gap-1"
|
||||
class="
|
||||
ae_access_type bg-surface-100 text-surface-800 duration-300 delay-150 hover:delay-1000 hover:ease-out transition-all hover:transition-all hidden-print flex flex-col items-end gap-1
|
||||
"
|
||||
class:hidden={hidden}
|
||||
>
|
||||
|
||||
@@ -197,7 +239,7 @@ function handle_clear_access() {
|
||||
{#if $ae_loc?.sync_local_config}
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
$ae_loc.sync_local_config = false;
|
||||
$events_loc.pres_mgmt.sync_local_config = false;
|
||||
|
||||
@@ -219,7 +261,7 @@ function handle_clear_access() {
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
$ae_loc.sync_local_config = true;
|
||||
$events_loc.pres_mgmt.sync_local_config = true;
|
||||
|
||||
@@ -244,7 +286,7 @@ function handle_clear_access() {
|
||||
{#if $ae_loc.edit_mode}
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
$ae_loc.edit_mode = false;
|
||||
// dispatch_edit_mode_changed();
|
||||
}}
|
||||
@@ -257,7 +299,7 @@ function handle_clear_access() {
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
$ae_loc.edit_mode = true;
|
||||
// dispatch_edit_mode_changed();
|
||||
}}
|
||||
@@ -305,7 +347,7 @@ function handle_clear_access() {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
handle_clear_access();
|
||||
}}
|
||||
class="btn btn-sm variant-ghost-success hover:variant-filled-success access_type_lock_btn transition-all"
|
||||
@@ -316,8 +358,9 @@ function handle_clear_access() {
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
on:click={async () => {
|
||||
onclick={async () => {
|
||||
show_passcode_input = !show_passcode_input;
|
||||
entered_passcode = ''; // Clear the entered passcode when showing the input
|
||||
await tick();
|
||||
document.getElementById('access_passcode_input')?.focus();
|
||||
// element.focus({preventScroll:false});
|
||||
|
||||
@@ -455,7 +455,7 @@ $effect(() => {
|
||||
|
||||
{#if $ae_loc.app_cfg?.show_element__access_type}
|
||||
<Element_access_type
|
||||
hidden={$ae_loc.iframe && !$ae_loc.trusted_access}
|
||||
hidden={$ae_loc.iframe && !$ae_loc.trusted_access}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user