From 0c11cfb3e2a59c0dc5616b2ac240d2584176efc8 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 11 Mar 2026 16:59:26 -0400
Subject: [PATCH] fix: replace alert() access guard in event settings with
 proper UX

- Remove blocking alert() + module-level browser guard
- Move access check to onMount with 500ms grace delay (matches /core pattern)
- Add {:else} block: Lock icon + 'Access Restricted' message + redirect link
- Remove now-unused 'browser' import; add Lock from lucide
---
 .../PROJECT__AE_Access_Control_UX.md          | 13 +++----
 .../events/[event_id]/settings/+page.svelte   | 34 +++++++++++++------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/documentation/PROJECT__AE_Access_Control_UX.md b/documentation/PROJECT__AE_Access_Control_UX.md
index 6eca7d2e..7b00b8a1 100644
--- a/documentation/PROJECT__AE_Access_Control_UX.md
+++ b/documentation/PROJECT__AE_Access_Control_UX.md
@@ -1,8 +1,9 @@
 # PROJECT: Access Control UX — Session Expired & Access Denied
 
-**Status:** Planning
+**Status:** In Progress
 **Priority:** Medium-High
 **Created:** 2026-02
+**Updated:** 2026-03-11
 **Related:** `src/routes/+layout.svelte`, `src/lib/ae_api/`, `src/lib/stores/ae_stores.ts`
 
 ---
@@ -175,7 +176,7 @@ The settings page check should mirror the `/core` pattern:
 
 ## 5. Implementation Plan
 
-### Step 1: Add `ae_auth_error` store
+### Step 1: Add `ae_auth_error` store ✅ DONE (2026-03-11)
 
 **File:** `src/lib/stores/ae_stores.ts`
 
@@ -187,7 +188,7 @@ export const ae_auth_error = writable<{ type: 'expired' | null, ts: number | nul
 
 ---
 
-### Step 2: Wire API helpers to `ae_auth_error`
+### Step 2: Wire API helpers to `ae_auth_error` ✅ DONE (2026-03-11)
 
 **Files:** `src/lib/ae_api/api_get_object.ts`, `api_post_object.ts`, `api_patch_object.ts` (same pattern in all three)
 
@@ -202,7 +203,7 @@ ae_auth_error.set({ type: 'expired', ts: Date.now() });
 
 ---
 
-### Step 3: Wire `flag_expired` in root layout
+### Step 3: Wire `flag_expired` in root layout ✅ DONE (2026-03-11)
 
 **File:** `src/routes/+layout.svelte`
 
@@ -230,7 +231,7 @@ Add the dismissible banner to the template (after/near the existing `is_offline`
 
 ---
 
-### Step 4: Create `element_access_denied.svelte`
+### Step 4: Create `element_access_denied.svelte` ⬅ NEXT
 
 **File:** `src/lib/elements/element_access_denied.svelte`
 
@@ -238,7 +239,7 @@ Reusable card for inline access denial. Props per design decision 4c.
 
 ---
 
-### Step 5: Fix Event Settings `alert()`
+### Step 5: Fix Event Settings `alert()` ⬅ NEXT
 
 **File:** `src/routes/events/[event_id]/settings/+page.svelte`
 
diff --git a/src/routes/events/[event_id]/settings/+page.svelte b/src/routes/events/[event_id]/settings/+page.svelte
index 22f682b4..03760a0d 100644
--- a/src/routes/events/[event_id]/settings/+page.svelte
+++ b/src/routes/events/[event_id]/settings/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/state';
-    import { browser } from '$app/environment';
     import { goto } from '$app/navigation';
+    import { Lock } from '@lucide/svelte';
     import { liveQuery } from 'dexie';
     import { db_events, type Event } from '$lib/ae_events/db_events';
     import { onMount } from 'svelte';
@@ -37,17 +37,15 @@
     let show_create_badge_modal: boolean = $state(false);
     let show_upload_badge_modal: boolean = $state(false);
 
-    // Guard: Only allow administrators in edit mode
-    if (!$ae_loc.administrator_access) {
-        if (browser) {
-            alert(
-                'Access Denied: Administrative privileges and Edit Mode required.'
-            );
-            goto(`/events/${event_id}`);
-        }
-    }
-
     onMount(() => {
+        // Guard: administrator access required. 500ms grace delay matches the /core
+        // layout pattern — allows the persisted store to hydrate before redirecting.
+        setTimeout(() => {
+            if (!$ae_loc.administrator_access) {
+                goto(`/events/${event_id}`);
+            }
+        }, 500);
+
         const observable = liveQuery(() => db_events.event.get(event_id));
         const subscription = observable.subscribe((value) => {
             event_obj = value;
@@ -94,6 +92,8 @@
     }
 </script>
 
+{#if $ae_loc.administrator_access}
+
 <h1 class="h1">Event Settings</h1>
 
 {#if event_obj}
@@ -434,3 +434,15 @@
         </div>
     </Modal>
 {/if}
+
+{:else}
+    <!-- Non-administrator landed here — show a brief message while the onMount redirect fires -->
+    <section class="flex flex-col items-center justify-center grow text-center space-y-4 py-20">
+        <div class="p-6 bg-error-500/10 rounded-full">
+            <Lock size={64} class="text-error-500" />
+        </div>
+        <h1 class="h1 font-black">Access Restricted</h1>
+        <p class="max-w-md opacity-70">Event settings require administrator access. Redirecting…</p>
+        <a href={`/events/${event_id}`} class="btn variant-filled-primary">Return to Event</a>
+    </section>
+{/if}