From 3df0739e966c9c0bce07bbc85c96c235da4b28a0 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 11 Apr 2025 15:13:00 -0400
Subject: [PATCH] Working on new Aether App Menu.

---
 src/lib/ae_core/ae_core_functions.ts |   2 +
 src/lib/ae_stores.ts                 |   5 +
 src/lib/element_access_type.svelte   |  12 ++-
 src/lib/element_app_cfg.svelte       |  14 ++-
 src/lib/element_sign_in_out.svelte   | 153 ++++++++++++++++++++++++---
 src/routes/+layout.svelte            |  63 ++++++++---
 6 files changed, 220 insertions(+), 29 deletions(-)

diff --git a/src/lib/ae_core/ae_core_functions.ts b/src/lib/ae_core/ae_core_functions.ts
index 07ea34a2..ba5160fb 100644
--- a/src/lib/ae_core/ae_core_functions.ts
+++ b/src/lib/ae_core/ae_core_functions.ts
@@ -23,6 +23,7 @@ import {
     auth_ae_obj__user_id_user_auth_key,
     send_email_auth_ae_obj__user_id,
     qry_ae_obj_li__user_email,
+    auth_ae_obj__user_id_change_password,
     // handle_load_ae_obj_id__user,
     // handle_load_ae_obj_li__user,
     // handle_create_ae_obj__user,
@@ -446,6 +447,7 @@ let export_obj = {
     auth_ae_obj__user_id_user_auth_key: auth_ae_obj__user_id_user_auth_key,
     send_email_auth_ae_obj__user_id: send_email_auth_ae_obj__user_id,
     qry_ae_obj_li__user_email: qry_ae_obj_li__user_email,
+    auth_ae_obj__user_id_change_password: auth_ae_obj__user_id_change_password,
     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_stores.ts b/src/lib/ae_stores.ts
index 0f07890b..d5b95170 100644
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -146,6 +146,11 @@ export let ae_app_local_data_struct: key_val = {
     },
 
     app_cfg: {
+        show_element__header: false,
+        show_element__footer: false,
+        show_element__menu: false,
+        show_element__menu_btn: false,
+
         show_element__access_type: true,
         show_element__cfg: true,
         show_element__cfg_detail: false,
diff --git a/src/lib/element_access_type.svelte b/src/lib/element_access_type.svelte
index 9e43c0e3..33756d66 100644
--- a/src/lib/element_access_type.svelte
+++ b/src/lib/element_access_type.svelte
@@ -215,9 +215,17 @@ function handle_clear_access() {
 
 
 <section
-    id="AE-Quick-Access-Type"
+    id="xAE-Quick-Access-Type"
     class="
-        ae_access_type bg-surface-100 text-surface-800 duration-300 delay-150 hover:delay-1000 hover:ease-out transition-all hover:transition-all hidden-print flex flex-col items-end gap-1
+        ae_access_type
+        hidden-print
+        bg-surface-100 text-surface-800
+        duration-300 delay-150 hover:delay-1000 hover:ease-out
+        transition-all hover:transition-all
+        flex flex-col flex-wrap gap-1
+        items-end justify-center
+        max-w-64
+
         "
     class:hidden={hidden}
     >
diff --git a/src/lib/element_app_cfg.svelte b/src/lib/element_app_cfg.svelte
index 284b0f42..59b118f1 100644
--- a/src/lib/element_app_cfg.svelte
+++ b/src/lib/element_app_cfg.svelte
@@ -91,7 +91,19 @@ function handle_clear_storage(item: null|string) {
 
 
 <!-- transition duration-500 delay-1000 hover:duration-500 hover:delay-1000 hover:transition-all -->
-<section id="AE-App-Cfg" class="ae_app_cfg bg-surface-100 text-surface-800 transition hover:transition-all hidden-print">
+<section
+    id="xAE-App-Cfg"
+    class="
+        ae_app_cfg
+        hidden-print
+        bg-surface-100 text-surface-800
+        transition hover:transition-all
+        flex flex-col flex-wrap gap-1
+        items-center justify-center
+        max-w-72
+
+        "
+    >
 
 <div
     class="ae_cfg_content text-xs space-y-4 my-4"
diff --git a/src/lib/element_sign_in_out.svelte b/src/lib/element_sign_in_out.svelte
index 079d7b59..9b4c86d1 100644
--- a/src/lib/element_sign_in_out.svelte
+++ b/src/lib/element_sign_in_out.svelte
@@ -3,10 +3,13 @@
 // *** Import Svelte specific
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
+import { Modal } from 'flowbite-svelte';
 
 // *** Import other supporting libraries
 import {
     CircleX,
+    Eye, EyeOff,
+    Key,
     LogIn, LogOut, LockKeyhole,
     Mail, MailCheck,
     User, UserCheck
@@ -52,7 +55,6 @@ 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.`);
@@ -62,6 +64,12 @@ $effect(() => {
 });
 
 
+let new_password = '';
+let confirm_password = '';
+let is_changing_password = false;
+let show_password_text = $state('password'); // password or text
+
+
 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
@@ -201,19 +209,54 @@ 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;
+
+    try {
+        await core_func.auth_ae_obj__user_id_change_password({
+            api_cfg: $ae_api,
+            account_id: $ae_loc.account_id,
+            user_id: $ae_loc.user_id,
+            password: new_password,
+            log_lvl: 1
+        });
+        alert('Password changed successfully.');
+        $ae_sess.show__modal_change_password = false;
+    } catch (error) {
+        console.error('Error changing password:', error);
+        alert('Failed to change password.');
+    } finally {
+        is_changing_password = false;
+    }
+}
+
 </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"
+    id="xAE-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
+        flex flex-col flex-wrap gap-1
+        items-center justify-center
+        max-w-64
+
         "
     class:hidden={hidden}
     >
@@ -290,8 +333,7 @@ function handle_lookup_user_email({email}: {email: string}) {
     <form
         class="
             ae_sign_in_form
-            flex flex-col items-start gap-1
-            p-1
+            flex flex-col gap-1 items-center justify-center
             p-1 my-1
             border-2 border-gray-200
             "
@@ -330,7 +372,7 @@ function handle_lookup_user_email({email}: {email: string}) {
     <form
         class="
             ae_sign_in_form
-            flex flex-col items-start gap-1
+            flex flex-col gap-1 items-center
             p-1 my-1
             border-2 border-gray-200
             "
@@ -564,7 +606,7 @@ function handle_lookup_user_email({email}: {email: string}) {
 
     {:else}
 
-    <div class="flex flex-col items-start gap-1">
+    <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>
@@ -610,14 +652,101 @@ function handle_lookup_user_email({email}: {email: string}) {
 
 </section>
 
+<!-- Change Password Modal -->
+<!-- They should be able to see their password (text) -->
+<!-- autocomplete="off" -->
+{#if $ae_sess.show__modal_change_password}
+<Modal
+    title="Change Password"
+    bind:open={$ae_sess.show__modal_change_password}
+    autoclose={false}
+    placement="top-center"
+    size="md"
+    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">
+            <span class="flex flex-row flex-wrap gap-1">
+                <input
+                    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"
+
+                />
+                <input
+                    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"
+                />
+            </span>
+
+            <!-- Show/Hide Password Text -->
+            <button
+                type="button"
+                class="btn btn-icon variant-soft-secondary"
+                onclick={() => {
+                    // const inputs = document.querySelectorAll('.modal-box input[type="password"]');
+                    // inputs.forEach((input) => {
+                    //     input.type = input.type === 'password' ? 'text' : 'password';
+                    // });
+                    if (show_password_text === 'password') {
+                        show_password_text = 'text';
+                    } else {
+                        show_password_text = 'password';
+                    }
+                }}
+                title="Show/Hide Password Text"
+                >
+                {#if show_password_text === 'password'}
+                    <EyeOff class="mx-1"/>
+                {:else}
+                    <Eye class="mx-1"/>
+                {/if}
+                <!-- <Eye class="mx-1"/> -->
+                <!-- <span class="hidden sm:inline">
+                    Show/Hide
+                </span> -->
+            </button>
+        </div>
+
+        <div class="flex flex-row flex-wrap gap-2">
+            <button
+                type="button"
+                class="btn variant-filled-warning"
+                onclick={handle_change_password}
+                disabled={is_changing_password}
+                >
+                <Key class="mx-1" />
+                Change Password
+            </button>
+            <button
+                type="button"
+                class="btn variant-glass-secondary"
+                onclick={() => ($ae_sess.show__modal_change_password = false)}
+                >
+                <CircleX class="mx-1" />
+                Cancel
+            </button>
+        </div>
+    </div>
+</Modal>
+{/if}
+
 <style lang="scss">
 /* BEGIN: AE's Svelte Quick Access Type component  */
 #AE-Sign-In-Out {
-    /* position: absolute; */
+    // outline: red solid thin;
+    // position: absolute;
     position: fixed;
-    /* position: relative; */
-    /* position: static; */
-    /* position: sticky; */
+    // position: relative;
+    // position: static;
+    // position: sticky;
     /* top: 1em; */
     bottom: 1.5rem;
     left: 0rem;
@@ -644,7 +773,7 @@ function handle_lookup_user_email({email}: {email: string}) {
 
     /* NOTE: transition when no longer hovering */
     transition-property: opacity, background-color;
-    transition-delay: 1.25s;
+    transition-delay: 3.25s;
     transition-duration: .75s;
     transition-timing-function: ease-out;
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 862024e8..d7598e8f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -444,6 +444,38 @@ $effect(() => {
 
 {/if}
 
+<!-- min-h-full
+max-h-max
+min-w-full
+max-w-max -->
+<!-- Show menu on right side of page -->
+<section
+    class="
+        ae_app__menu
+        hidden-print
+        flex flex-col
+        items-end justify-center
+        gap-4
+        min-h-96
+        min-w-48
+        absolute right-0 bottom-10
+        bg-white dark:bg-gray-800
+        border border-gray-200 dark:border-gray-700
+        rounded-lg
+        p-4
+    "
+    >
+
+<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
+<span
+    class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
+    >
+<Element_app_cfg
+    set_theme_mode={true}
+    set_theme_name={true}
+    />
+</span>
+<!-- {/if} -->
 
 {#if $ae_loc.app_cfg?.show_element__sign_in_out}
 <Element_sign_in_out
@@ -460,23 +492,20 @@ $effect(() => {
 {/if}
 
 
-<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
-<span
-    class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
-    >
-<Element_app_cfg
-    set_theme_mode={true}
-    set_theme_name={true}
-    />
-</span>
-<!-- {/if} -->
-
+</section>
 
 <div
-    class="flex text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1 hidden"
+    class="absolute bottom-0 left-0 flex text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1 w-full outline"
     class:ae_debug={$ae_loc.debug}
     >
-    <button
+    <!-- {#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} -->
+
+    <!-- <button
         type="button"
         onclick={() => {
             console.log('Debug ae_loc:', $ae_loc);
@@ -487,7 +516,13 @@ $effect(() => {
         title="Turn debug content and styles off and on"
         >
         &pi;
-    </button>
+    </button> -->
+
+    <!-- {#if $ae_loc.app_cfg?.show_element__access_type}
+    <Element_access_type
+        hidden={$ae_loc.iframe && !$ae_loc.trusted_access}
+        />
+    {/if} -->
 </div>