More style clean up. Less is more info.

src/lib/ae_core/core__user.ts

@@ -247,7 +247,6 @@ export async function qry_ae_obj_li__user_email(
         console.log(`*** qry_ae_obj_li__user_email() *** account_id=${account_id} email=${email}`);
     }
 
-    // /user/lookup_email
     let endpoint = '/user/lookup_email';
 
     params['email'] = email; // Required

src/lib/e_app_access_type.svelte

@@ -290,7 +290,7 @@ function handle_clear_access() {
         class="ae_header w-64 "
         >
         <h2 class="text-sm text-center font-semibold">
-            Passcode
+            Passcode Sign In
         </h2>
     </header>
 
@@ -359,7 +359,7 @@ function handle_clear_access() {
             {/if}
         {/if}
 
-        {#if $ae_loc.edit_mode}
+        <!-- {#if $ae_loc.edit_mode}
             <button
                 type="button"
                 onclick={() => {
@@ -388,7 +388,7 @@ function handle_clear_access() {
                     Mode?
                 </span>
             </button>
-        {/if}
+        {/if} -->
     {/if}
     </div>
 
@@ -476,7 +476,7 @@ function handle_clear_access() {
                     trigger_clear_access = true;
                     // show_passcode_input = true;
                 }}
-                class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all"
+                class="btn btn-sm variant-outline-warning hover:variant-ghost-warning transition-all"
                 title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
                 >
                 <!-- <span class="fas fa-lock mx-1"></span> -->
@@ -490,7 +490,7 @@ function handle_clear_access() {
     {#if (show_passcode_input)}
     <span class="flex flex-row gap-1 items-center justify-center">
         <ShieldEllipsis class="inline-block" />
-        <span class="unlock_text">Passcode?</span>
+        <span class="unlock_text">Passcode:</span>
 
         <input
             id="access_passcode_input"

src/lib/e_app_sign_in_out.svelte

@@ -12,7 +12,7 @@ import {
     Key,
     LogIn, LogOut, LockKeyhole,
     Mail, MailCheck,
-    User, UserCheck
+    User, UserCheck, UserLock
     } from '@lucide/svelte';
 
 // *** Import Aether specific variables and functions
@@ -42,13 +42,6 @@ let url_user_email = data.url.searchParams.get('user_email');
 
 let ae_promises: key_val = {};
 
-
-// let user_id: string|null = null;
-// let user_obj: key_val = {};
-
-// let person_id: string|null = null;
-// let person_obj: key_val = {};
-
 let trigger: null|boolean = $state(null); // Use $state to ensure reactivity
 let user_id = $state(null); // Use $state to ensure reactivity
 let user_obj: key_val = $state({}); // Use $state to ensure reactivity
@@ -64,8 +57,9 @@ $effect(() => {
 });
 
 
-let new_password = $state('');
+let user_email = $state('scott.idem@gmail.com'); // Used for quick lookup of user by email address
-let confirm_password = $state('');
+let new_password = $state('test12345');
+let confirm_password = $state('test12345');
 let is_changing_password = $state(false);
 let show_password_text = $state('password'); // password or text
 
@@ -241,34 +235,104 @@ function handle_lookup_user_email({email}: {email: string}) {
 
 
 async function handle_change_password() {
-    if (new_password !== confirm_password) {
-        alert('Passwords do not match.');
-        return;
-    }
-
     if (!new_password) {
         alert('Password cannot be empty.');
         return;
     }
 
-    is_changing_password = true;
+    if (new_password !== confirm_password) {
+        alert('Passwords do not match.');
+        return;
+    }
 
-    try {
+    let use_user_id = $ae_loc.user_id;
-        await core_func.auth_ae_obj__user_id_change_password({
+    let use_password = new_password;
+    let wait_for_lookup = true;
+
+    // Look up the user by email address to get their user ID
+    if (user_email) {
+        wait_for_lookup = true;
+        // ae_promises.load__user_obj_li = await core_func.qry_ae_obj_li__user_email({
+        //     api_cfg: $ae_api,
+        //     account_id: $slct.account_id,
+        //     null_account_id: false,
+        //     email: user_email,
+        //     log_lvl: 1
+        // }).then((user_response) => {
+        //     if (!user_response) {
+        //         // This means a 404 was returned
+        //         alert('No user found with that email address.');
+        //         return;
+        //     } else if (user_response?.user_id_random) {
+        //         console.log(`User found for email:`, user_response);
+        //         use_user_id = user_response.user_id_random;
+        //     } else if (user_response.length > 0) {
+        //         console.log(`Multiple users found for email:`, user_response);
+        //         use_user_id = user_response[0].user_id_random;
+        //     }
+        // });
+
+        ae_promises.load__user_obj_li = await core_func.qry_ae_obj_li__user_email({
             api_cfg: $ae_api,
-            account_id: $ae_loc.account_id,
+            account_id: $slct.account_id,
-            user_id: $ae_loc.user_id,
+            null_account_id: false,
-            password: new_password,
+            email: user_email,
             log_lvl: 1
         });
-        alert('Password changed successfully.');
+
-        $ae_sess.show__modal_change_password = false;
+        if (!ae_promises.load__user_obj_li) {
+            // This means a 404 was returned
+            alert('No user found with that email address.');
+            return;
+        } else if (ae_promises.load__user_obj_li?.user_id_random) {
+            console.log(`User found for email:`, ae_promises.load__user_obj_li);
+            use_user_id = ae_promises.load__user_obj_li.user_id_random;
+        } else if (ae_promises.load__user_obj_li.length > 0) {
+            console.log(`Multiple users found for email:`, ae_promises.load__user_obj_li);
+            use_user_id = ae_promises.load__user_obj_li[0].user_id_random;
+        }
+    } else {
+        wait_for_lookup = false;
+    }
+
+    is_changing_password = true;
+
+    if (user_email && wait_for_lookup) {
+        console.log('Waiting for user lookup to complete...');
+        // await ae_promises.load__user_obj_li;
+    }
+
+    try {
+        ae_promises.change_password = await core_func.auth_ae_obj__user_id_change_password({
+            api_cfg: $ae_api,
+            account_id: $ae_loc.account_id,
+            user_id: use_user_id,
+            password: use_password,
+            log_lvl: log_lvl
+        });
+        // await core_func.auth_ae_obj__user_id_change_password({
+        //     api_cfg: $ae_api,
+        //     account_id: $ae_loc.account_id,
+        //     user_id: use_user_id,
+        //     password: use_password,
+        //     log_lvl: log_lvl
+        // });
+        // alert('Password changed successfully.');
+        // $ae_sess.show__modal_change_password = false;
     } catch (error) {
         console.error('Error changing password:', error);
-        alert('Failed to change password.');
+        alert('Unexpected Response. Failed to change password.');
     } finally {
         is_changing_password = false;
     }
+    if (ae_promises.change_password) {
+        console.log('Password changed successfully.');
+        alert('Password changed successfully.');
+        $ae_sess.show__modal_change_password = false;
+    } else {
+        console.error('Failed to change password.');
+        alert('Failed to change password. Check password length.');
+    }
 }
 
 </script>
@@ -293,7 +357,7 @@ async function handle_change_password() {
     >
     <button
         type="button"
-        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline w-full"
+        class="btn btn-sm variant-outline-warning hover:variant-ghost-warning *:hover:inline w-full"
         title="Sign In"
         onclick={() => {
             $ae_sess.show__sign_in_out__fields = !$ae_sess.show__sign_in_out__fields; // Toggle the visibility of the sign-in form
@@ -303,7 +367,7 @@ async function handle_change_password() {
 
             {#if $ae_sess.show__sign_in_out__fields}
                 <CircleX class="mx-1" />
-                Hide Sign-In Options
+                Hide User Sign-In Options
             {:else}
                 <User class="mx-1 inline-block text-gray-500" />
                 {$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}
@@ -312,12 +376,13 @@ async function handle_change_password() {
 
             {#if $ae_sess.show__sign_in_out__fields}
                 <CircleX class="mx-1" />
-                Hide Sign-In Options
+                Hide User Sign-In Options
             {:else}
-                <LockKeyhole size="1.25em" class="mx-1 inline-block text-gray-500" />
+                <!-- <LockKeyhole size="1.25em" class="mx-1 inline-block text-gray-500" /> -->
+                <UserLock size="1.25em" class="mx-1 inline-block text-gray-500" />
                 <!-- <User class="mx-1 inline-block text-gray-500" /> -->
                 <span class="hidden">
-                Sign-In?
+                User Sign-In?
                 </span>
             {/if}
 
@@ -348,7 +413,7 @@ async function handle_change_password() {
                 <!-- </button> -->
             {:else}
                     <!-- <LogIn class="mx-1" /> -->
-                    Sign In
+                    User Sign In
 
             {/if}
         </h2>
@@ -635,7 +700,7 @@ async function handle_change_password() {
 
     {:else}
 
-    <div class="flex flex-col gap-1 items-end justify-center">
+    <div class="flex flex-col gap-1 items-center justify-center">
         <span class="text-sm text-gray-500">
             {$ae_loc?.user?.username ?? '-- not set --'}
         </span>
@@ -694,24 +759,52 @@ async function handle_change_password() {
     class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative mx-auto w-full divide-y"
     >
     <div class="modal-box flex flex-col gap-2 items-center justify-center">
-        <div class="flex flex-row flex-wrap gap-2">
+        <!-- If the user is a global Manger or Super then they can change the password for any user. Otherwise, they can only change their own password. Show email address field for a quick lookup to get the user.id. -->
+        <div class="flex flex-col flex-wrap gap-2">
+            <span class="text-sm text-gray-500">
+                Your Username: {$ae_loc?.user?.username ?? '-- not set --'}
+            </span>
+            <span class="text-sm text-gray-500">
+                Your Email: {$ae_loc?.user?.email ?? '-- not set --'}
+            </span>
+            <span class="text-sm text-gray-500">
+                Your User ID: {$ae_loc?.user_id ?? '-- not set --'}
+            </span>
+        </div>
+        {#if ($ae_loc?.manager_access)}
+            <div class="flex flex-row flex-wrap gap-2">
+                <input
+                    type="text"
+                    name="user_email"
+                    autocomplete="off"
+                    placeholder="User's email address"
+                    bind:value={user_email}
+                    class="input input-bordered w-48 max-w-full"
+                />
+            </div>
+        {/if}
+
+        <!-- Allow for new password and confirm password fields. -->
+        <div class="flex flex-row flex-wrap gap-2 items-center justify-center">
             <span class="flex flex-row flex-wrap gap-1">
                 <input
+                    required
                     type={show_password_text}
                     autocomplete="new-password"
                     name="new_password"
                     placeholder="New Password"
                     bind:value={new_password}
-                    class="input input-bordered w-48 max-w-full"
+                    class="input input-bordered w-48 max-w-full required:border-red-500"
 
                 />
                 <input
+                    required
                     type={show_password_text}
                     autocomplete="off"
                     name="confirm_password"
                     placeholder="Confirm Password"
                     bind:value={confirm_password}
-                    class="input input-bordered w-48 max-w-full"
+                    class="input input-bordered w-48 max-w-full required:border-red-500"
                 />
             </span>
 
@@ -742,6 +835,12 @@ async function handle_change_password() {
                     Show/Hide
                 </span> -->
             </button>
+
+            <div>
+                <span class="text-sm text-warning-800 dark:text-gray-200">
+                    Password must be at <strong>least 10 characters</strong> long. It is recommend that you use a pass phrase (multiple words as your password) or a complex password (uppercase letter, lowercase letters, numbers, and special characters).
+                </span>
+            </div>
         </div>
 
         <div class="flex flex-row flex-wrap gap-2">

src/lib/e_app_sys_menu.svelte

@@ -133,8 +133,10 @@ max-w-max -->
         overflow-y-auto
         p-1
 
+        w-full
+
         bg-white/10 dark:dark-gray-800/10
-        hover:bg-white/100 dark:hover:bg-gray-800/100
+        hover:bg-red-100/50 dark:hover:bg-gray-800/100
 
         relative
         *:hover:inline
@@ -343,7 +345,7 @@ max-w-max -->
         class:w-48={$ae_loc?.app_cfg?.show_element__menu}
         class:visible={$ae_loc?.app_cfg?.show_element__menu}
         class:invisible={!$ae_loc?.app_cfg?.show_element__menu}
-        class="btn btn-sm variant-outline-surface hover:variant-ghost-success px-6 py-1"
+        class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success px-6 py-1"
         title="Show or hide the menu"
         onclick={async () => {
             if (!$ae_loc?.app_cfg?.show_element__menu) {
@@ -423,7 +425,7 @@ max-w-max -->
 
     <button
         type="button"
-        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline px-6 py-1"
+        class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success *:hover:inline px-6 py-1"
         title="Sign In"
         onclick={() => {
             if (!$ae_loc?.app_cfg?.show_element__menu) {