From b967eed0a54026da82fdbd35aa9cae2ab9451a1b Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 4 Apr 2025 18:31:31 -0400
Subject: [PATCH] Lots of work on user person security. Also some general clean
 up. Wrapping up for the day.

---
 src/lib/ae_core/ae_core_functions.ts          |  12 +
 src/lib/ae_core/core__person.ts               |  39 +-
 src/lib/ae_core/core__user.ts                 | 136 +++++
 src/lib/ae_journals/db_journals.ts            |   1 +
 src/lib/ae_stores.ts                          |  32 ++
 src/lib/element_access_type.svelte            |  28 -
 src/lib/element_app_cfg.svelte                |   4 +-
 src/lib/element_sign_in_out.svelte            | 516 ++++++++++++++++++
 src/routes/+layout.svelte                     |  10 +-
 src/routes/+layout.ts                         |   2 +-
 src/routes/core/+page.svelte                  |   6 +-
 .../[presenter_id]/presenter_view.svelte      |   2 +-
 .../session/[session_id]/session_view.svelte  |   2 +-
 .../ae_comp__event_session_obj_li.svelte      |   2 +-
 src/routes/journals/+page.svelte              |  11 +-
 15 files changed, 749 insertions(+), 54 deletions(-)
 create mode 100644 src/lib/ae_core/core__user.ts
 create mode 100644 src/lib/element_sign_in_out.svelte

diff --git a/src/lib/ae_core/ae_core_functions.ts b/src/lib/ae_core/ae_core_functions.ts
index cf0425b5..42b42252 100644
--- a/src/lib/ae_core/ae_core_functions.ts
+++ b/src/lib/ae_core/ae_core_functions.ts
@@ -18,6 +18,16 @@ import {
     // handle_db_save_ae_obj_li__person
 } from "$lib/ae_core/core__person";
 
+import {
+    auth_ae_obj__username_password,
+    auth_ae_obj__user_id_user_auth_key,
+    // handle_load_ae_obj_id__user,
+    // handle_load_ae_obj_li__user,
+    // handle_create_ae_obj__user,
+    // handle_update_ae_obj__user,
+    // handle_db_save_ae_obj_li__user
+} from "$lib/ae_core/core__user";
+
 import {
     generate_qr_code,
 } from "$lib/ae_core/core__qr_code";
@@ -430,6 +440,8 @@ let export_obj = {
     handle_load_ae_obj_li__person: handle_load_ae_obj_li__person,
     handle_create_ae_obj__person: handle_create_ae_obj__person,
     handle_update_ae_obj__person: handle_update_ae_obj__person,
+    auth_ae_obj__username_password: auth_ae_obj__username_password,
+    auth_ae_obj__user_id_user_auth_key: auth_ae_obj__user_id_user_auth_key,
     handle_update_ae_obj_id_crud: handle_update_ae_obj_id_crud,
     handle_download_export__obj_type: handle_download_export__obj_type,
     generate_qr_code: generate_qr_code
diff --git a/src/lib/ae_core/core__person.ts b/src/lib/ae_core/core__person.ts
index 53eada10..f76c59b8 100644
--- a/src/lib/ae_core/core__person.ts
+++ b/src/lib/ae_core/core__person.ts
@@ -55,37 +55,46 @@ export async function handle_load_ae_obj_id__person(
 export async function handle_load_ae_obj_li__person(
         {
             api_cfg,
-            account_id,
+            for_obj_type = 'account',
+            for_obj_id,
+            enabled = 'enabled',
+            hidden = 'not_hidden',
+            limit = 99,
+            offset = 0,
+            order_by_li = {'start_datetime': 'DESC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
+            params_json = null,
             params={},
             try_cache=true,
             log_lvl=0
         }: {
             api_cfg: any,
-            account_id: string,
+            for_obj_type: string,
+            for_obj_id: string,
+            enabled?: string,
+            hidden?: string,
+            limit?: number,
+            offset?: number,
+            order_by_li?: key_val,
+            params_json?: null|key_val,
             params?: key_val,
             try_cache?: boolean,
             log_lvl?: number
         }
     ) {
-    console.log(`*** handle_load_ae_obj_li__person() *** account_id=${account_id}`);
-
-    let enabled: string = (params.qry__enabled ?? 'enabled'); // all, disabled, enabled
-    let hidden: string = (params.qry__hidden ?? 'not_hidden'); // all, hidden, not_hidden
-    let limit: number = (params.qry__limit ?? 99); // 99
-    let offset: number = (params.qry__offset ?? 0); // 0
-
-
-    let params_json: key_val = {};
+    console.log(`*** handle_load_ae_obj_li__person() *** for_obj_type=${for_obj_type} for_obj_id=${for_obj_id} enabled=${enabled} hidden=${hidden} limit=${limit} offset=${offset}`);
 
     // console.log('params_json:', params_json);
 
-    ae_promises.load__person_obj_li = await api.get_ae_obj_li_for_obj_id_crud({
+    ae_promises.load__person_obj_li = await api.get_ae_obj_li_for_obj_id_crud_v2({
         api_cfg: api_cfg,
         obj_type: 'person',
         for_obj_type: 'account',
-        for_obj_id: account_id,
-        use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
-        use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value
+        for_obj_id: for_obj_id,
+        use_alt_tbl: false,
+        use_alt_mdl: false,
+        use_alt_exp: false,
+        // use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
+        // use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value
         enabled: enabled,
         hidden: hidden,
         order_by_li: {'given_name': 'ASC', 'family_name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
diff --git a/src/lib/ae_core/core__user.ts b/src/lib/ae_core/core__user.ts
new file mode 100644
index 00000000..e58ef61f
--- /dev/null
+++ b/src/lib/ae_core/core__user.ts
@@ -0,0 +1,136 @@
+import type { key_val } from '$lib/ae_stores';
+import { api } from '$lib/api';
+
+import { db_core } from "$lib/ae_core/db_core";
+
+let ae_promises: key_val = {};
+
+
+// Updated 2025-04-04
+export async function auth_ae_obj__username_password(
+        {
+            api_cfg,
+            account_id,
+            null_account_id = false,
+            username,
+            password,
+            params = {},
+            try_cache = true,
+            log_lvl = 1
+        }: {
+            api_cfg: any,
+            account_id: string,
+            null_account_id?: boolean,
+            username: string,
+            password: string,
+            params?: key_val,
+            try_cache?: boolean,
+            log_lvl?: number
+        }
+    ) {
+    if (log_lvl) {
+        console.log(`*** auth_ae_obj__username_password() *** account_id=${account_id} username=${username} password=${password}`);
+    }
+
+    let endpoint = '/user/authenticate';
+
+    if (null_account_id) {
+        params['null_account_id'] = true;
+    }
+    params['username'] = username; // Required
+    params['password'] = password; // Required
+    if (log_lvl > 1) {
+        console.log(`auth_ae_obj__username_password() - params:`, params);
+    }
+
+    ae_promises.auth__username_password = await api.get_object({
+        api_cfg: api_cfg,
+        endpoint: endpoint,
+        params: params,
+        // data: {},
+        log_lvl: log_lvl
+        })
+    .then(async function (user_obj_get_result) {
+        if (user_obj_get_result) {
+            // if (try_cache) {
+            //     // This is expecting a list
+            //     db_save_ae_obj_li__user({
+            //         obj_type: 'user',
+            //         obj_li: [user_obj_get_result],
+            //         log_lvl: log_lvl
+            //     });
+            // }
+            return user_obj_get_result;
+        } else {
+            console.log('No results returned.');
+            return null;
+        }
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+
+
+
+    if (log_lvl) {
+        console.log('ae_promises.auth__username_password:', ae_promises.auth__username_password);
+    }
+    return ae_promises.auth__username_password;
+}
+
+
+// Updated 2025-04-04
+export async function auth_ae_obj__user_id_user_auth_key(
+        {
+            api_cfg,
+            account_id,
+            user_id,
+            user_auth_key,
+            params = {},
+            try_cache = true,
+            log_lvl = 1
+        }: {
+            api_cfg: any,
+            account_id: string,
+            user_id: string,
+            user_auth_key: string,
+            params?: key_val,
+            try_cache?: boolean,
+            log_lvl?: number
+        }
+    ) {
+    if (log_lvl) {
+        console.log(`*** auth_ae_obj__user_id_user_auth_key() *** account_id=${account_id} user_id=${user_id}`);
+    }
+
+    let endpoint = '/user/authenticate';
+
+    params['user_id'] = user_id; // Required
+    params['auth_key'] = user_auth_key; // Required
+    if (log_lvl > 1) {
+        console.log(`auth_ae_obj__user_id_user_auth_key() - params:`, params);
+    }
+
+    ae_promises.auth__user_id_user_key = await api.get_object({
+        api_cfg: api_cfg,
+        endpoint: endpoint,
+        params: params,
+        log_lvl: log_lvl
+        })
+    .then(async function (user_obj_get_result) {
+        if (user_obj_get_result) {
+            return user_obj_get_result;
+        } else {
+            console.log('No results returned.');
+            return null;
+        }
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+
+    if (log_lvl) {
+        console.log('ae_promises.auth__user_id_user_key:', ae_promises.auth__user_id_user_key);
+    }
+    return ae_promises.auth__user_id_user_key;
+}
\ No newline at end of file
diff --git a/src/lib/ae_journals/db_journals.ts b/src/lib/ae_journals/db_journals.ts
index d564ecf4..ad9d3c7a 100644
--- a/src/lib/ae_journals/db_journals.ts
+++ b/src/lib/ae_journals/db_journals.ts
@@ -299,6 +299,7 @@ export class MySubClassedDexie extends Dexie {
                 id, journal_id,
                 code,
                 account_id,
+                person_id,
                 conference, type,
                 name,
                 start_datetime, end_datetime,
diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts
index 7c628df2..0f07890b 100644
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -102,6 +102,37 @@ export let ae_app_local_data_struct: key_val = {
 
     'user_email': null, // Currently used with Sponsorships only?
 
+    // Added 2025-04-04
+    person_id: null, // The current person_id of the logged-in user (if any)
+    person: {
+        id: null, // The current person_id of the logged-in user
+        // profile_id: null, // The current person_profile_id of the logged-in user
+        // pronouns: null,
+        // informal_name: null,
+        // given_name: null,
+        // family_name: null,
+        // professional_title: null,
+        full_name: null, // convenience
+        // affiliations: null,
+        primary_email: null, // The primary email of the logged-in person/user
+        user_id: null, // The user ID of the logged-in user
+    },
+
+    // Added 2025-04-04
+    user_id: null, // The current user_id of the logged-in user (if any)
+    user: {
+        id: null, // The current user_id of the logged-in user
+        username: null,
+        name: null,
+        email: null, // The email of the logged-in user
+        allow_auth_key: null, // For sign in without password
+        super: false, // Is the user a super user
+        manager: false, // Is the user a global manager (can manage accounts and users)
+        administrator: false, // Is the user an account administrator
+        public: false, // Is the user a public user (can view public content)
+        person_id: null, // The person ID of the logged-in user
+    },
+
     'qry__enabled': 'enabled', // all, disabled, enabled
     'qry__hidden': 'not_hidden', // all, hidden, not_hidden
     'qry__limit': 20,
@@ -118,6 +149,7 @@ export let ae_app_local_data_struct: key_val = {
         show_element__access_type: true,
         show_element__cfg: true,
         show_element__cfg_detail: false,
+        show_element__sign_in_out: true, // Show the sign-in/out button in the UI
         show_opt__debug: true,
         show_opt__permissions: true,
         show_opt__reset: true,
diff --git a/src/lib/element_access_type.svelte b/src/lib/element_access_type.svelte
index bce8e05f..09369da0 100644
--- a/src/lib/element_access_type.svelte
+++ b/src/lib/element_access_type.svelte
@@ -166,34 +166,6 @@ function handle_clear_access() {
 
     return true;
 }
-
-// function dispatch_access_type_changed() {
-//     if (log_lvl) {
-//         console.log('*** dispatch_access_type_changed() ***');
-
-//         console.log(ae_util);
-//         console.log($ae_loc);
-//     }
-
-//     dispatch('access_type_changed', {
-//         access_type: $ae_loc.access_type
-//     });
-// }
-
-// function dispatch_edit_mode_changed() {
-//     if (log_lvl) {
-//         console.log('*** dispatch_edit_mode_changed() ***');
-
-//         console.log(ae_util);
-//         console.log($ae_loc);
-//     }
-
-//     window.localStorage.setItem('edit_mode', $ae_loc.edit_mode);
-
-//     dispatch('edit_mode_changed', {
-//         edit_mode: $ae_loc.edit_mode
-//     });
-// }
 </script>
 
 
diff --git a/src/lib/element_app_cfg.svelte b/src/lib/element_app_cfg.svelte
index d426ed90..284b0f42 100644
--- a/src/lib/element_app_cfg.svelte
+++ b/src/lib/element_app_cfg.svelte
@@ -288,8 +288,8 @@ function handle_clear_storage(item: null|string) {
     /* position: relative; */
     /* position: static; */
     /* position: sticky; */
-    /* top: 1em; */
-    bottom: 1.5rem;
+    top: 4.5em;
+    /* bottom: 9.5rem; */
     left: 0rem;
 
     padding: .5rem;
diff --git a/src/lib/element_sign_in_out.svelte b/src/lib/element_sign_in_out.svelte
new file mode 100644
index 00000000..58588763
--- /dev/null
+++ b/src/lib/element_sign_in_out.svelte
@@ -0,0 +1,516 @@
+<script lang="ts">
+
+// *** Import Svelte specific
+import { browser } from '$app/environment';
+
+// *** Import other supporting libraries
+import {
+    LogIn, LogOut, LockKeyhole,
+    User
+    } from '@lucide/svelte';
+
+// *** Import Aether specific variables and functions
+import type { key_val } from '$lib/ae_stores';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils/ae_utils';
+import { core_func } from '$lib/ae_core/ae_core_functions';
+
+// *** Setup Svelte properties
+interface Props {
+    log_lvl?: number;
+    data?: any;
+    hidden: null|boolean;
+}
+
+let {
+    log_lvl = 0,
+    data = null,
+    hidden = true,
+    }: Props = $props();
+
+
+let url_user_id = data.url.searchParams.get('user_id');
+let url_user_key = data.url.searchParams.get('user_key'); // Reminder that "key" is the site's auth key.
+
+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
+let person_id = $state(null); // Use $state to ensure reactivity
+let person_obj: key_val = $state({}); // Use $state to ensure reactivity
+
+$effect(() => {
+    if (user_id && person_id && trigger) {
+        // alert(`Ready to sign in person! \n\nuser_id: ${user_id}\nperson_id: ${person_id}\n\nThis is a test alert to confirm the values are set.`);
+        trigger = false;
+        sign_in();
+    }
+});
+
+function sign_in() {
+    $ae_loc.person_id = person_id; // Set the person_id in the ae_loc store
+    $ae_loc.person = person_obj; // Store the full person object for reference
+    $ae_loc.user_id = user_id; // Set the user_id in the ae_loc store
+    $ae_loc.user = user_obj; // Store the full user object for reference
+
+    if (user_obj.super) {
+        $ae_loc.access_type = 'super';
+    } else if (user_obj.manager) {
+        $ae_loc.access_type = 'manager';
+    } else if (user_obj.administrator) {
+        $ae_loc.access_type = 'administrator';
+    } else if (user_obj.verified) {
+        // They are "trusted" because the user has been verified. External staff usually start with this level.
+        $ae_loc.access_type = 'trusted';
+    } else if (user_obj.public) {
+        $ae_loc.access_type = 'public';
+    } else {
+        $ae_loc.access_type = 'authenticated';
+    }
+
+    let access_checks_results =  ae_util.process_permission_checks($ae_loc.access_type);
+    // WARNING: I think this is causing a loop in Svelte or something.
+    // Last ten effects were:
+    // Uncaught Svelte error: effect_update_depth_exceeded
+    // Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
+    // https://svelte.dev/e/effect_update_depth_exceeded
+    $ae_loc = {
+        ...$ae_loc,
+        ...access_checks_results
+        };
+    // $ae_loc = {...access_checks_results};
+}
+
+function sign_out() {
+    // Clear the session information
+    $ae_loc.person_id = null;
+    $ae_loc.person = {};
+    $ae_loc.user_id = null;
+    $ae_loc.user = {};
+
+    user_id = null; // Clear the user_id
+    user_obj = {}; // Clear the user object
+    person_id = null; // Clear the person_id
+    person_obj = {}; // Clear the person object
+
+    $ae_loc.access_type = ''; // Clear the access type
+    let access_checks_results =  ae_util.process_permission_checks('');
+    $ae_loc = {...$ae_loc, ...access_checks_results};
+
+    console.log('Signed out successfully.');
+}
+
+
+if (browser) {
+    if (url_user_id) {
+        // Pre-fill the auth__entered_user_id if passed in via the URL.
+        $ae_sess.auth__entered_user_id = url_user_id;
+    }
+    if (url_user_key) {
+        // Pre-fill the auth__entered_key if passed in via the URL.
+        $ae_sess.auth__entered_user_key = url_user_key;
+    }
+}
+
+</script>
+
+
+<!-- It is important to keep in mind that a Person can only fully sign in if they have a linked User record. -->
+<!-- *:hover:inline -->
+<section
+    id="AE-Sign-In-Out"
+    class="
+        ae_sign_in_out
+        hidden-print
+        bg-surface-100 text-surface-800
+        transition-all duration-300 delay-150 hover:delay-1000 hover:ease-out hover:transition-all
+        flex flex-col flex-wrap items-start gap-1
+        "
+    class:hidden={hidden}
+    >
+    <button
+        type="button"
+        class="btn btn-sm variant-outline-surface hover:variant-filled-surface"
+        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
+        }}
+        >
+        {#if $ae_loc?.person_id && $ae_loc?.user_id}
+
+            {#if $ae_sess.show__sign_in_out__fields}
+                Hide Sign-In Options
+            {:else}
+                <User class="mx-1 inline-block text-gray-500" />
+                {$ae_loc?.person.full_name ?? '-- not set --'}
+            {/if}
+        {:else}
+
+            {#if $ae_sess.show__sign_in_out__fields}
+                Hide Sign-In Options
+            {:else}
+                <LockKeyhole size="1.25em" class="mx-1 inline-block text-gray-500" />
+                <!-- <User class="mx-1 inline-block text-gray-500" /> -->
+                Sign-In?
+            {/if}
+
+        {/if}
+    </button>
+
+    <header
+        class:hidden={!$ae_sess.show__sign_in_out__fields}
+        class="ae_header"
+        >
+        <h2 class="text-sm">
+            {#if $ae_loc?.person_id && $ae_loc?.user_id}
+                <!-- <button
+                    type="button"
+                    class="btn btn-sm variant-outline-surface hover:variant-filled-surface"
+                    title="Show/Hide Sign-In/Out Options"
+                    onclick={() => {
+                        $ae_sess.show__sign_in_out__fields = !$ae_sess.show__sign_in_out__fields; // Toggle the visibility of the sign-in form
+                    }}
+                    > -->
+                    {$ae_loc?.person.full_name ?? '-- not set --'}
+                    <!-- <span class="text-sm text-gray-500">
+                    {$ae_loc?.user.username ?? '-- not set --'}
+                    </span> -->
+                    <!-- {#if log_lvl > 1}
+                        <span class="text-xs text-gray-500">({$ae_loc.person_id} / {$ae_loc.user_id})</span>
+                    {/if} -->
+                <!-- </button> -->
+            {:else}
+                    <!-- <LogIn class="mx-1" /> -->
+                    Sign In
+
+            {/if}
+        </h2>
+    </header>
+
+    <span
+        class:hidden={!$ae_sess.show__sign_in_out__fields}
+        class="transition-all"
+        >
+    {#if !$ae_loc?.person_id && !$ae_loc?.user_id}
+    <!-- We need to get the person's linked User ID and auth_key or User username and password to sign in. -->
+
+    <form
+        class="ae_sign_in_form flex flex-col items-start gap-1"
+        onsubmit={async (e) => {
+            e.preventDefault();
+
+            // WARNING: Logging in as a global user does not work yet. The API needs to be updated. Currently it returns multiple user records from the v_user view if there is more than one person record linked to the user ID.
+
+            if ($ae_sess.auth__entered_user_id && $ae_sess.auth__entered_user_key) {
+
+                // Try to use the user ID and user auth key passed in the URL params for authentication
+                alert('Attempting to authenticate with User ID and Auth Key.');
+
+                ae_promises['user'] = await core_func.auth_ae_obj__user_id_user_auth_key({
+                    api_cfg: $ae_api,
+                    account_id: $ae_loc.account_id,
+                    // null_account_id: false, // Set to true to allow to authenticate as global user (Super or Manager)
+                    user_id: $ae_sess.auth__entered_user_id,
+                    user_auth_key: $ae_sess.auth__entered_user_key,
+                    log_lvl: 2,
+                }).then((user_response) => {
+                    // console.log(`HERE:`, user_response);
+                    if (user_response.user_id_random) {
+                        console.log(`Successfully authenticated in with User ID and User Auth Key: ${user_response.username}`, user_response);
+                        user_obj = user_response; // Store the user object for later use
+                        user_id = user_obj.user_id_random; // Use the user_id_random for further API calls
+                        // person_id = user_obj.person_id_random;
+                    } else {
+                        alert('Failed to authenticate: ' + user_response.error);
+                    }
+                }).then((response) => {
+                    if (!user_id) {
+                        // If we didn't get a user_id, return early
+                        console.error('No user_id obtained from auth_ae_obj__username_password');
+                        return;
+                    }
+
+                    // Next we need to get the person's information. This is odd because we need to look it up based on the account_id and user_id. There should only be one account person record per user. 99% of the time the user's account ID will be the same as the person's account ID. The exception is for AE Global users (Super or Manager) who can have multiple accounts but only one person record per account.
+
+                    let params = {
+                        user_id_random: user_id, // The user_id_random from the above authentication
+                    }
+
+                    let params_json: key_val = {};
+
+                    params_json['and_qry'] = {};
+
+                    if (user_id) {
+                        params_json['and_qry']['user_id_random'] = user_id;
+                    }
+
+                    // WARNING: This function returns a list. We only want the first one. There should be no more than 1 record returned.
+                    ae_promises['person'] = core_func.handle_load_ae_obj_li__person({
+                        api_cfg: $ae_api,
+                        for_obj_type: 'account',
+                        for_obj_id: $ae_loc.account_id,
+                        params_json: params_json,
+                        params: params,
+                        log_lvl: 1,
+                    }).then((person_response) => {
+                        if (person_response[0].person_id_random) {
+                            console.log(`Successfully loaded person for user_id_random (${user_id}):`, person_response[0]);
+                            person_obj = person_response[0];
+                            person_id = person_obj.person_id_random;
+
+                            trigger = true; // Set trigger to true to indicate we can now sign in
+                        } else {
+                            alert('Failed to load person information: ' + person_response.error);
+                        }
+                    }).then(() => {
+                        // Once all promises are resolved, we can check if we have both user_id and person_id
+                        if (user_id && person_id) {
+                            // Set the session information
+                            // $ae_loc.person_id = person_id; // Set the person_id in the ae_loc store
+                            // $ae_loc.person = person_obj; // Store the full person object for reference
+                            // $ae_loc.user_id = user_id; // Set the user_id in the ae_loc store
+                            // $ae_loc.user = user_obj; // Store the full user object for reference
+
+                            console.log(`Successfully authenticated and loaded user and person records:
+                                user_id: ${user_id},
+                                person_id: ${person_id}
+                            `);
+                            // window.location.reload(); // Reload to get the new session
+                        } else {
+                            console.error('Failed to authenticate and load data: missing user_id or person_id');
+                        }
+                    });
+
+                });
+                // console.log('DONE???', ae_promises);
+
+            } else if ($ae_sess.auth__entered_username && $ae_sess.auth__entered_password) {
+
+                // Try to use the username/password for authentication
+                // alert('Attempting to authenticate with Username and Password.');
+                ae_promises['user'] = await core_func.auth_ae_obj__username_password({
+                    api_cfg: $ae_api,
+                    account_id: $ae_loc.account_id,
+                    // null_account_id: false, // Set to true to allow to authenticate as global user (Super or Manager)
+                    username: $ae_sess.auth__entered_username,
+                    password: $ae_sess.auth__entered_password,
+                    log_lvl: 1,
+                }).then((user_response) => {
+                    if (user_response.user_id_random) {
+                        console.log(`Successfully authenticated in with Username (${user_response.username}) and Password:`, user_response);
+                        user_obj = user_response; // Store the user object for later use
+                        user_id = user_obj.user_id_random; // Use the user_id_random for further API calls
+                        // person_id = user_obj.person_id_random;
+                    } else {
+                        alert('Failed to authenticate: ' + user_response.error);
+                    }
+                }).then((response) => {
+                    if (!user_id) {
+                        // If we didn't get a user_id, return early
+                        console.error('No user_id obtained from auth_ae_obj__username_password');
+                        return;
+                    }
+
+                    // Next we need to get the person's information. This is odd because we need to look it up based on the account_id and user_id. There should only be one account person record per user. 99% of the time the user's account ID will be the same as the person's account ID. The exception is for AE Global users (Super or Manager) who can have multiple accounts but only one person record per account.
+
+                    let params = {
+                        user_id_random: user_id, // The user_id_random from the above authentication
+                    }
+
+                    let params_json: key_val = {};
+
+                    params_json['and_qry'] = {};
+
+                    if (user_id) {
+                        params_json['and_qry']['user_id_random'] = user_id;
+                    }
+
+                    // WARNING: This function returns a list. We only want the first one. There should be no more than 1 record returned.
+                    ae_promises['person'] = core_func.handle_load_ae_obj_li__person({
+                        api_cfg: $ae_api,
+                        for_obj_type: 'account',
+                        for_obj_id: $ae_loc.account_id,
+                        params_json: params_json,
+                        params: params,
+                        log_lvl: 1,
+                    }).then((person_response) => {
+                        if (person_response[0].person_id_random) {
+                            console.log(`Successfully loaded person for user_id_random (${user_id}):`, person_response[0]);
+                            person_obj = person_response[0];
+                            person_id = person_obj.person_id_random;
+
+                            trigger = true; // Set trigger to true to indicate we can now sign in
+                        } else {
+                            alert('Failed to load person information: ' + person_response.error);
+                        }
+                    }).then(() => {
+                        // Once all promises are resolved, we can check if we have both user_id and person_id
+                        if (user_id && person_id) {
+                            // Set the session information
+                            // $ae_loc.person_id = person_id; // Set the person_id in the ae_loc store
+                            // $ae_loc.person = person_obj; // Store the full person object for reference
+                            // $ae_loc.user_id = user_id; // Set the user_id in the ae_loc store
+                            // $ae_loc.user = user_obj; // Store the full user object for reference
+
+                            console.log(`Successfully authenticated and loaded user and person records:
+                                user_id: ${user_id},
+                                person_id: ${person_id}
+                            `);
+                            // window.location.reload(); // Reload to get the new session
+                        } else {
+                            console.error('Failed to authenticate and load data: missing user_id or person_id');
+                        }
+                    });
+                });
+
+                // console.log('DONE???', ae_promises);
+
+            } else {
+                alert('Please enter either a User ID and Auth Key or Username and Password.');
+                return false; // Prevent form submission if no credentials are provided
+            }
+
+        }}
+        >
+        {#if $ae_sess.auth__entered_user_id}
+
+            <input
+                type="text"
+                class="input max-w-36"
+                placeholder="User ID"
+                value={$ae_sess.auth__entered_user_id ?? ''}
+                oninput={(e) => $ae_sess.auth__entered_user_id = e.target.value}
+                >
+            <input
+                type="text"
+                class="input max-w-36"
+                placeholder="Auth Key"
+                value={$ae_sess.auth__entered_user_key ?? ''}
+                oninput={(e) => $ae_sess.auth__entered_user_key = e.target.value}
+                >
+
+        {:else}
+
+            <input
+                type="text"
+                class="input max-w-48"
+                placeholder="Username"
+                value={$ae_sess.auth__entered_username ?? ''}
+                oninput={(e) => $ae_sess.auth__entered_username = e.target.value}
+                >
+            <input
+                type="text"
+                class="input max-w-48"
+                placeholder="Password"
+                value={$ae_sess.auth__entered_password ?? ''}
+                oninput={(e) => $ae_sess.auth__entered_password = e.target.value}
+                >
+
+        {/if}
+
+        <button
+            type="submit"
+            class="btn btn-sm variant-filled-success"
+            title="Sign In"
+            >
+            <LogIn class="mx-1" />
+            Sign In
+        </button>
+    </form>
+
+    {:else}
+
+    <div class="flex flex-col items-start gap-1">
+        <span class="text-sm text-gray-500">
+            {$ae_loc?.user.username ?? '-- not set --'}
+        </span>
+        <!-- Display sign out option if the user is signed in -->
+        <button
+            type="button"
+            class="btn btn-sm variant-filled-warning"
+            title="Sign Out"
+            onclick={async () => {
+                if (confirm('Are you sure you want to sign out?')) {
+                    sign_out();
+                }
+            }}
+            >
+            <LogOut class="mx-1" />
+            Sign Out
+        </button>
+    </div>
+
+    {/if}
+
+    </span>
+
+</section>
+
+<style lang="scss">
+/* BEGIN: AE's Svelte Quick Access Type component  */
+#AE-Sign-In-Out {
+    /* position: absolute; */
+    position: fixed;
+    /* position: relative; */
+    /* position: static; */
+    /* position: sticky; */
+    /* top: 1em; */
+    bottom: 1.5rem;
+    left: 0rem;
+
+    padding: .5rem;
+
+    /* lightyellow */
+    /* background-color: hsla(60,100%,90%,.30);  */
+    /* background-color: rgba(var(--color-surface-500) / .5); */
+
+    border-top: solid thin hsla(0,0%,0%,.25);
+    border-right: solid thin hsla(0,0%,0%,.25);
+    border-bottom: solid thin hsla(0,0%,0%,.25);
+    border-top-right-radius: .5em;
+    border-bottom-right-radius: .5em;
+
+    opacity: .15;
+    // opacity: .85;
+    /* opacity: 1; */
+
+    font-size: .75rem;
+
+    z-index: 5;
+
+    /* NOTE: transition when no longer hovering */
+    transition-property: opacity, background-color;
+    transition-delay: 1.25s;
+    transition-duration: .75s;
+    transition-timing-function: ease-out;
+}
+
+#AE-Sign-In-Out:hover {
+    /* lightyellow */
+    /* background-color: hsla(60,100%,90%,.95); */
+    /* background-color: rgba(var(--color-surface-500) / 1); */
+
+    // Doing this to give it more space. Especially for password managers
+    // top: 65%;
+
+    border-top: solid thin hsla(0,0%,0%,.95);
+    border-right: solid thin hsla(0,0%,0%,.95);
+    border-bottom: solid thin hsla(0,0%,0%,.95);
+
+    opacity: 1;
+
+    /* NOTE: transition when hover starts */
+    transition-property: opacity, background-color;
+    transition-delay: .5s;
+    transition-duration: .25s;
+    transition-timing-function: ease-in;
+}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5b66812b..3a38a103 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -47,6 +47,7 @@ import { events_loc, events_slct } from '$lib/ae_events_stores';
 
 import Element_access_type from '$lib/element_access_type.svelte';
 import Element_app_cfg from '$lib/element_app_cfg.svelte';
+import Element_sign_in_out from '$lib/element_sign_in_out.svelte';
 // import Element_data_store from '$lib/element_data_store_v2.svelte';
 
 interface Props {
@@ -444,6 +445,13 @@ $effect(() => {
 {/if}
 
 
+{#if $ae_loc.app_cfg?.show_element__sign_in_out}
+<Element_sign_in_out
+    data={data}
+    hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
+    />
+{/if}
+
 
 {#if $ae_loc.app_cfg?.show_element__access_type}
 <Element_access_type
@@ -454,7 +462,7 @@ $effect(() => {
 
 <!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
 <span
-    class:hidden={!$ae_loc?.app_cfg?.show_element__cfg}
+    class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
     >
 <Element_app_cfg
     set_theme_mode={true}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index e9e99540..a7f8e1e5 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -204,7 +204,7 @@ export async function load({ fetch, params, parent, route, url }) { // params, r
                     ae_loc_init['key_checked'] = true; // Se to true to allow access without a key.
                     ae_loc_init['allow_access'] = true; // No access key is required here.
                 } else {
-                    let access_key = url.searchParams.get('key');
+                    let access_key = url.searchParams.get('key'); // Technically this is the site's auth key.
 
                     if (access_key) {
                         if (log_lvl) {
diff --git a/src/routes/core/+page.svelte b/src/routes/core/+page.svelte
index d3a86121..a8ba5890 100644
--- a/src/routes/core/+page.svelte
+++ b/src/routes/core/+page.svelte
@@ -70,7 +70,8 @@ let person_id_random_li: string[] = [];
 
         let person_results = core_func.handle_load_ae_obj_li__person({
             api_cfg: $ae_api,
-            account_id: $slct.account_id,
+            for_obj_type: 'account',
+            for_obj_id: $slct.account_id,
             params: params,
             log_lvl: 1
         })
@@ -184,7 +185,8 @@ let person_id_random_li: string[] = [];
     on:change={() => {
         core_func.handle_load_ae_obj_li__person({
             api_cfg: $ae_api,
-            account_id: $slct.account_id,
+            for_obj_type: 'account',
+            for_obj_id: $slct.account_id,
             params: {
                 'qry__enabled': 'enabled',
                 'qry__hidden': 'not_hidden',
diff --git a/src/routes/events/[event_id]/presenter/[presenter_id]/presenter_view.svelte b/src/routes/events/[event_id]/presenter/[presenter_id]/presenter_view.svelte
index 9393396d..432c4f18 100644
--- a/src/routes/events/[event_id]/presenter/[presenter_id]/presenter_view.svelte
+++ b/src/routes/events/[event_id]/presenter/[presenter_id]/presenter_view.svelte
@@ -1203,7 +1203,7 @@ $: if ($lq__event_presenter_obj) {
                             qry__limit: 300,
                         }
 
-                        $slct.person_obj_li = core_func.handle_load_ae_obj_li__person({api_cfg: $ae_api, account_id: $slct.account_id, params: params})
+                        $slct.person_obj_li = core_func.handle_load_ae_obj_li__person({api_cfg: $ae_api, for_obj_type: 'account', for_obj_id: $slct.account_id, params: params})
                         .then(function (load_results) {
                             console.log(`Loaded person_obj_li:`, load_results);
 
diff --git a/src/routes/events/[event_id]/session/[session_id]/session_view.svelte b/src/routes/events/[event_id]/session/[session_id]/session_view.svelte
index b3a52de4..9b42066e 100644
--- a/src/routes/events/[event_id]/session/[session_id]/session_view.svelte
+++ b/src/routes/events/[event_id]/session/[session_id]/session_view.svelte
@@ -682,7 +682,7 @@ $: if ($lq__event_session_obj) {
 
                     // $slct.person_obj_li = await core_func.handle_load_ae_obj_li__person({api_cfg: $ae_api, account_id: $slct.account_id, params: params});
 
-                    $slct.person_obj_li = core_func.handle_load_ae_obj_li__person({api_cfg: $ae_api, account_id: $slct.account_id, params: params})
+                    $slct.person_obj_li = core_func.handle_load_ae_obj_li__person({api_cfg: $ae_api, for_obj_type: 'account', for_obj_id: $slct.account_id, params: params})
                     .then(function (load_results) {
                         console.log(`Loaded person_obj_li:`, load_results);
 
diff --git a/src/routes/events/ae_comp__event_session_obj_li.svelte b/src/routes/events/ae_comp__event_session_obj_li.svelte
index 1a49c642..97869cf6 100644
--- a/src/routes/events/ae_comp__event_session_obj_li.svelte
+++ b/src/routes/events/ae_comp__event_session_obj_li.svelte
@@ -372,7 +372,7 @@ let ae_triggers: key_val = {};
                     qry__limit: 300,
                 }
 
-                $slct.person_obj_li = core_func.handle_load_ae_obj_li__person({api_cfg: $ae_api, account_id: $slct.account_id, params: params});
+                $slct.person_obj_li = core_func.handle_load_ae_obj_li__person({api_cfg: $ae_api, for_obj_type: 'account', for_obj_id: $slct.account_id, params: params});
 
                 $events_slct.event_session_id = session_obj?.event_session_id_random;
 
diff --git a/src/routes/journals/+page.svelte b/src/routes/journals/+page.svelte
index baaf46ce..82eaf7e0 100644
--- a/src/routes/journals/+page.svelte
+++ b/src/routes/journals/+page.svelte
@@ -43,9 +43,16 @@ let ae_acct = data[$slct.account_id];
 
 let lq__journal_obj_li = $derived(liveQuery(async () => {
     let results = await db_journals.journal
-    .orderBy('tmp_sort_2')
+    .where('person_id')
+    .equals($ae_loc.person_id)
     .reverse()
-    .toArray()
+    .sortBy('tmp_sort_2')
+
+    // .orderBy('tmp_sort_2')
+    // .reverse()
+    // .toArray()
+
+
     // .sortBy('start_datetime')
     // () => db_journals.journals
     //     .where('conference')