Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(badges): two-step confirm before sending email review link

Browse Source 
Replace the single alert() call with an inline confirmation row per badge.
Clicking "Email Link" shows "Send / Cancel" in place so accidental sends
are avoided. Only one badge can be in confirm state at a time.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-06-06 18:35:40 -04:00
parent 29a24812f4
commit c9b0acfa06
1 changed files with 38 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_obj_li.svelte
View File

@@ -42,6 +42,9 @@ import {
// Track per-badge copy state for the "Review Link" clipboard button // Track per-badge copy state for the "Review Link" clipboard button
let copy_status: Record<string, 'idle' | 'copied'> = $state({}); let copy_status: Record<string, 'idle' | 'copied'> = $state({});
// Track which badge has a pending email confirmation (null = none pending)
let email_confirm_badge_id: string | null = $state(null);
// Access level shortcuts // Access level shortcuts
let is_trusted = $derived($ae_loc.trusted_access === true); let is_trusted = $derived($ae_loc.trusted_access === true);
let is_admin = $derived($ae_loc.administrator_access === true); let is_admin = $derived($ae_loc.administrator_access === true);
@@ -80,8 +83,13 @@ async function copy_review_link(event_badge_obj: any) {
} }
} }
// TODO: replace alert with actual email API call when available // TODO: replace with actual email API call when available
function send_review_email(event_badge_obj: any) { function confirm_send_review_email(event_badge_obj: any) {
email_confirm_badge_id = event_badge_obj.event_badge_id;
}
function do_send_review_email(event_badge_obj: any) {
email_confirm_badge_id = null;
const name = const name =
event_badge_obj?.full_name_override ?? event_badge_obj?.full_name_override ??
event_badge_obj?.full_name ?? event_badge_obj?.full_name ??
@@ -404,16 +412,34 @@ let visible_badge_obj_li = $derived(
<!-- 4. Email Review Link: Manager+ always; Administrator + Edit Mode otherwise --> <!-- 4. Email Review Link: Manager+ always; Administrator + Edit Mode otherwise -->
{#if is_admin && (is_edit_mode || is_manager)} {#if is_admin && (is_edit_mode || is_manager)}
<button {#if email_confirm_badge_id === event_badge_obj.event_badge_id}
type="button" <!-- Inline confirmation: shown after clicking Email Link -->
class="hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-700 flex items-center gap-1 px-3 py-2 text-base font-bold transition-colors duration-1000 hover:duration-300 min-w-0 preset-tonal-primary rounded-lg border border-primary-200-800" <div class="flex items-center gap-2 px-2 py-1 rounded-lg bg-warning-100 dark:bg-warning-900/30 border border-warning-300 dark:border-warning-700 text-sm">
onclick={() => <span class="text-warning-800 dark:text-warning-200 font-medium">Send link to {display_name}?</span>
send_review_email(event_badge_obj)} <button
title="Email a review link to {display_name}"> type="button"
<Mail size="1em" /> class="flex items-center gap-1 px-2 py-1 rounded font-bold preset-filled-warning-500 text-sm"
<span class="hidden sm:inline" onclick={() => do_send_review_email(event_badge_obj)}>
>Email Link</span> <Mail size="0.9em" />
</button> Send
</button>
<button
type="button"
class="flex items-center gap-1 px-2 py-1 rounded font-bold preset-tonal-surface text-sm"
onclick={() => { email_confirm_badge_id = null; }}>
Cancel
</button>
</div>
{:else}
<button
type="button"
class="hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-700 flex items-center gap-1 px-3 py-2 text-base font-bold transition-colors duration-1000 hover:duration-300 min-w-0 preset-tonal-primary rounded-lg border border-primary-200-800"
onclick={() => confirm_send_review_email(event_badge_obj)}
title="Email a review link to {display_name}">
<Mail size="1em" />
<span class="hidden sm:inline">Email Link</span>
</button>
{/if}
{/if} {/if}
</div> </div>
</div> </div>