From 6d235d915985fb5df4879806c1eee75085675169 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 18 Apr 2025 15:00:16 -0400
Subject: [PATCH] Making the passcode entry faster

---
 src/lib/element_access_type.svelte | 45 ++++++++++++++++++++++++++----
 src/routes/+layout.svelte          | 21 +++++++++++---
 2 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/src/lib/element_access_type.svelte b/src/lib/element_access_type.svelte
index 6c47da26..d7cb0865 100644
--- a/src/lib/element_access_type.svelte
+++ b/src/lib/element_access_type.svelte
@@ -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}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index eaf30f84..e96235bf 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -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;