feat(sign-in): replace alert() with inline status on email sign-in button

Removes the debug alert() calls from the email magic-link flow.
Button now shows live feedback inline:
- 'Sending…' while the lookup is in flight (disabled + cursor-wait)
- 'Email sent ✓' on success (green fill)
- 'No account found' if no user matches the email
- 'Error — retry?' on network/API failure
- 'Enter an email first' if submitted empty
Clicking the button while showing a result resets it to the default label.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-13 17:01:57 -04:00
parent 0b9272e9f9
commit 9dde412781

View File

@@ -73,6 +73,9 @@
let is_changing_password = $state(false); let is_changing_password = $state(false);
let show_password_text = $state('password'); // password or text let show_password_text = $state('password'); // password or text
// Email sign-in status: null | 'sending' | 'sent' | 'not_found' | 'error'
let email_send_status: null | string = $state(null);
function sign_in() { function sign_in() {
$ae_loc.jwt = user_obj.jwt; // Store the JSON Web Token $ae_loc.jwt = user_obj.jwt; // Store the JSON Web Token
$ae_loc.person_id = person_id; // Set the person_id in the ae_loc store $ae_loc.person_id = person_id; // Set the person_id in the ae_loc store
@@ -231,17 +234,19 @@
.then((user_response) => { .then((user_response) => {
if (user_response?.user_id_random) { if (user_response?.user_id_random) {
console.log(`User found for email:`, user_response); console.log(`User found for email:`, user_response);
handle_send_auth_email({ handle_send_auth_email({ user_id: user_response.user_id_random });
user_id: user_response.user_id_random email_send_status = 'sent';
});
} else if (user_response && user_response.length > 0) { } else if (user_response && user_response.length > 0) {
console.log(`Multiple users found for email:`, user_response); console.log(`Multiple users found for email:`, user_response);
handle_send_auth_email({ handle_send_auth_email({ user_id: user_response[0].user_id_random });
user_id: user_response[0].user_id_random email_send_status = 'sent';
});
} else { } else {
alert('No user found with that email address.'); console.warn('No user found for email:', email);
email_send_status = 'not_found';
} }
})
.catch(() => {
email_send_status = 'error';
}); });
} }
@@ -378,12 +383,12 @@
onsubmit={async (e) => { onsubmit={async (e) => {
e.preventDefault(); e.preventDefault();
if ($ae_sess.auth__entered_email) { if ($ae_sess.auth__entered_email) {
alert('Attempting to look up user by email address.'); email_send_status = 'sending';
handle_lookup_user_email({ handle_lookup_user_email({
email: $ae_sess.auth__entered_email email: $ae_sess.auth__entered_email
}); });
} else { } else {
alert('Please enter an email address to look up.'); email_send_status = 'no_email';
} }
}} }}
> >
@@ -397,11 +402,31 @@
/> />
<button <button
type="submit" type="submit"
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 w-full justify-center" class="btn btn-sm w-full justify-center transition-all
{email_send_status === 'sent' ? 'preset-filled-success-500'
: email_send_status === 'sending' ? 'preset-tonal-surface opacity-70 cursor-wait'
: email_send_status === 'not_found' || email_send_status === 'error' ? 'preset-tonal-error border border-error-500'
: 'preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500'}"
disabled={email_send_status === 'sending'}
title="Look up user by email and send sign in email" title="Look up user by email and send sign in email"
onclick={() => { email_send_status = null; }}
> >
<MailCheck size="1em" class="shrink-0" /> <MailCheck size="1em" class="shrink-0" />
<span class="ml-1">Send Sign In Email</span> <span class="ml-1">
{#if email_send_status === 'sending'}
Sending…
{:else if email_send_status === 'sent'}
Email sent ✓
{:else if email_send_status === 'not_found'}
No account found
{:else if email_send_status === 'error'}
Error — retry?
{:else if email_send_status === 'no_email'}
Enter an email first
{:else}
Send Sign In Email
{/if}
</span>
</button> </button>
</form> </form>