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
This commit is contained in:
Scott Idem
2026-03-11 16:59:26 -04:00
parent 53c517ec30
commit 0c11cfb3e2
2 changed files with 30 additions and 17 deletions

View File

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