More style clean up. Less is more info.

This commit is contained in:
Scott Idem
2025-05-16 13:41:24 -04:00
parent bae46782d6
commit 40ce368e59
4 changed files with 143 additions and 43 deletions

View File

@@ -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

View File

@@ -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"

View File

@@ -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 confirm_password = $state('');
let user_email = $state('scott.idem@gmail.com'); // Used for quick lookup of user by email address
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 {
await core_func.auth_ae_obj__user_id_change_password({
let use_user_id = $ae_loc.user_id;
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,
user_id: $ae_loc.user_id,
password: new_password,
account_id: $slct.account_id,
null_account_id: false,
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">

View File

@@ -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) {