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

Making the passcode entry faster

Browse Source
This commit is contained in:
Scott Idem
2025-04-18 15:00:16 -04:00
parent ccba530223
commit 6d235d9159
2 changed files with 57 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/lib/element_access_type.svelte
View File

@@ -2,6 +2,7 @@
// *** Import Svelte specific
import { onDestroy, onMount, tick } from 'svelte';
import { afterNavigate } from '$app/navigation';
// *** Import other supporting libraries
// import { liveQuery } from "dexie";
@@ -52,6 +53,10 @@ onMount(() => {
}
entered_passcode = '';
trigger = null;
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
});
onDestroy(() => {
@@ -67,6 +72,13 @@ onDestroy(() => {
trigger = null;
});
// afterNavigate(() => {
// /** @type {HTMLElement | null} */
// const to_focus = document.getElementById('access_passcode_input');
// to_focus?.focus();
// });
$effect(() => {
if (entered_passcode && entered_passcode.length >= 5 && entered_passcode != checked_passcode) {
checked_passcode = entered_passcode;
@@ -101,6 +113,18 @@ $effect(() => {
}
});
// This does not seem to work. I feel like it should though...?
$effect(async () => {
if (show_passcode_input) {
// await tick();
// document.getElementById('access_passcode_input')?.focus();
console.log('Effect: Setting focus on the passcode input field');
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
}
});
function handle_check_access_type_passcode() {
if (log_lvl > 1) {
@@ -397,17 +421,27 @@ function handle_clear_access() {
type="button"
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});
if (show_passcode_input) {
// console.log('Button click: Setting focus on the passcode input field');
// document.getElementById('access_passcode_input')?.focus();
// element.focus({preventScroll:false});
} else {
entered_passcode = ''; // Clear the entered passcode when showing the input
}
}}
class="btn btn-sm variant-glass-success hover:variant-filled-warning access_type_unlock_btn transition-all"
title="Anonymous public access is currently set. Access mode is disabled/locked."
>
<span class="fas fa-lock mx-1 lock_icon"></span>
<span class="lock_icon">Locked</span>
<span class="fas fa-unlock mx-1 unlock_icon hidden"></span>
<span class="unlock_text">Unlock?</span>
{#if (show_passcode_input)}
<span class="unlock_text">Cancel</span>
{:else}
<span class="unlock_text">Access?</span>
{/if}
<!-- <span class="unlock_text">Cancel?</span> -->
</button>
<input
@@ -417,6 +451,7 @@ function handle_clear_access() {
class:hidden={!show_passcode_input}
type="text"
placeholder="Access code"
autofocus={show_passcode_input}
/>
<!-- <div class="current_text transition-all">{$ae_loc.access_type}</div> -->
{/if}

21
src/routes/+layout.svelte
View File

@@ -5,7 +5,7 @@
let log_lvl: number = 0;
// *** Import Svelte specific
// import { tick } from 'svelte';
import { tick } from 'svelte';
import { goto } from '$app/navigation';
import '../app.postcss';
@@ -762,7 +762,7 @@ max-w-max -->
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;
$ae_loc.app_cfg.show_element__access_type = false;
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
@@ -776,11 +776,17 @@ max-w-max -->
{:else}
<button
type="button"
onclick={() => {
onclick={async () => {
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__access_type = true;
$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();
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
@@ -806,10 +812,17 @@ max-w-max -->
type="button"
class="btn btn-sm variant-outline-surface hover:variant-ghost-success *:hover:inline-block w-full hidden px-6 py-1"
title="Sign In"
onclick={() => {
onclick={async () => {
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__access_type = true;
$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();
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;