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

Trying to improve the sign in and passcode logic. Also related bug fixes with focus. Made Journal Entries marked as public visible to others.

Browse Source
This commit is contained in:
Scott Idem
2025-08-21 13:55:23 -04:00
parent edfe9dee7a
commit 33c6cb862e
7 changed files with 48 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/ae_stores.ts
View File

@@ -346,6 +346,8 @@ let ae_app_session_data_defaults: key_val = {
disable_sys_footer: false,
sys_menu: {
expand: false,
focus_passcode_input: false,
},
debug_menu: {

19
src/lib/e_app_access_type.svelte
View File

@@ -25,6 +25,7 @@ import { events_loc } from '$lib/ae_events_stores';
interface Props {
log_lvl?: number;
hide?: null|boolean;
focus_input: boolean;
expand?: boolean;
show_passcode_input: boolean;
trigger_clear_access: null|boolean;
@@ -33,6 +34,7 @@ interface Props {
let {
log_lvl = $bindable(0),
hide = $bindable(false),
focus_input = $bindable(false),
expand = $bindable(false),
show_passcode_input = $bindable(false),
trigger_clear_access = $bindable(null),
@@ -54,15 +56,16 @@ let trigger: null|string|boolean = $state(null);
// 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(() => {
log_lvl = 2;
if (log_lvl > 1) {
console.log('** Element Mounted: ** Element Access Type');
}
entered_passcode = '';
trigger = null;
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
// /** @type {HTMLElement | null} */
// const to_focus = document.getElementById('access_passcode_input');
// to_focus?.focus();
});
onDestroy(() => {
@@ -122,11 +125,15 @@ $effect(() => {
});
// This does not seem to work. I feel like it should though...?
$effect(async () => {
if (show_passcode_input) {
$effect(() => {
if (!hide && focus_input) {
focus_input = false;
log_lvl = 2;
// await tick();
// document.getElementById('access_passcode_input')?.focus();
console.log('Effect: Setting focus on the passcode input field');
if (log_lvl > 1) {
console.log('Effect: Setting focus on the passcode input field');
}
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();

4
src/lib/e_app_sign_in_out.svelte
View File

@@ -30,9 +30,9 @@ interface Props {
}
let {
log_lvl = 0,
log_lvl = $bindable(0),
data = null,
hidden = true,
hidden = $bindable(true),
}: Props = $props();

40
src/lib/e_app_sys_menu.svelte
View File

@@ -249,7 +249,7 @@ max-w-max -->
if (!expand) {
expand = true;
$ae_loc.sys_menu.expand = true;
$ae_sess.sys_menu.expand = true;
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
// $ae_loc.sys_menu.expand_btn = false;
@@ -281,7 +281,7 @@ max-w-max -->
if (expand) {
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = false;
// $ae_loc.sys_menu.expand_access_type = false;
expand = false;
// $ae_loc.sys_menu.expand = true;
@@ -322,14 +322,18 @@ max-w-max -->
onclick={async () => {
expand = true;
$ae_sess.sys_menu.expand = true;
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
$ae_sess.app_cfg.show_element__passcode_input = true;
$ae_sess.sys_menu.focus_passcode_input = true;
// $ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
// $ae_loc.app_cfg.show_element__access_type = true;
// $ae_loc.app_cfg.show_element__passcode_input = true;
await tick();
// await tick();
console.log('Layout button click: Focus on passcode input!');
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
@@ -426,25 +430,29 @@ max-w-max -->
onclick={async () => {
if (!expand) {
expand = true;
$ae_sess.sys_menu.expand = true;
// $ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
if ($ae_loc?.access_type == 'anonymous') {
$ae_sess.app_cfg.show_element__passcode_input = true;
$ae_sess.sys_menu.focus_passcode_input = true;
// $ae_sess.app_cfg.show_element__passcode_input = true;
} else {
$ae_sess.app_cfg.show_element__passcode_input = false;
// $ae_sess.app_cfg.show_element__passcode_input = false;
$ae_loc.sys_menu.expand_user = false; // Not in use yet
$ae_sess.show__sign_in_out__fields = false;
}
// $ae_loc.app_cfg.show_element__passcode_input = true;
await tick();
console.log('Layout button click: Focus on passcode input!');
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
// await tick();
// console.log('Layout button click: Focus on passcode input!');
// /** @type {HTMLElement | null} */
// const to_focus = document.getElementById('access_passcode_input');
// to_focus?.focus();
} else {
expand = false;
$ae_sess.sys_menu.expand = false;
// $ae_loc.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_btn = true;
// $ae_loc.app_cfg.show_element__passcode_input = false;
@@ -522,11 +530,14 @@ max-w-max -->
onclick={() => {
if (!expand) {
expand = true;
$ae_loc.sys_menu.expand = true;
$ae_sess.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
// $ae_loc.sys_menu.expand_access_type = true;
// $ae_sess.app_cfg.show_element__passcode_input = true;
$ae_sess.sys_menu.focus_passcode_input = true;
} else {
$ae_loc.sys_menu.expand = false;
$ae_sess.sys_menu.expand = false;
$ae_loc.sys_menu.expand_user = false; // Not in use yet
$ae_sess.show__sign_in_out__fields = false;
// $ae_loc.sys_menu.expand_btn = true;
@@ -570,9 +581,9 @@ max-w-max -->
<!-- {/if} -->
{#if $ae_loc?.app_cfg?.show_element__sign_in_out}
<!-- hide={$ae_loc.sys_menu.hide_user} -->
<!-- expand={$ae_loc.sys_menu.expand_user} -->
<Element_sign_in_out
hide={$ae_loc.sys_menu.hide_user}
expand={$ae_loc.sys_menu.expand_user}
data={data}
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
/>
@@ -582,6 +593,7 @@ max-w-max -->
<!-- hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !expand} -->
<Element_access_type
bind:hide={$ae_loc.sys_menu.hide_access_type}
bind:focus_input={$ae_sess.sys_menu.focus_passcode_input}
bind:expand={$ae_loc.sys_menu.expand_access_type}
bind:show_passcode_input={$ae_sess.app_cfg.show_element__passcode_input}
bind:trigger_clear_access={trigger_clear_access}