61789f1d45
- implemented universal ingress credential rotation (slug + pin) - fixed event extension logic (`GREATEST(expires_at, NOW())`) - added UI formatter logic for natural dates (`formatNaturalExpiry`, `formatNaturalJoinTime`) - updated event cards to bounded 2-row compact cards - consolidated CLI expanding snippets - overhauled WAI-ARIA support for delegation drawers - removed legacy "Dismiss" mock buttons for cleanly styled "OK" buttons - updated tests and ensured pure zero-dependency SSR JSX compatibility Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>
313 lines
13 KiB
XML
313 lines
13 KiB
XML
export const WorkshopDrawer = ({ apps = [] }: { apps?: any[] }) => {
|
|
return (
|
|
<div id="tabWorkshopPass" style="display: none;">
|
|
<div id="eventCreateState" style="display: block;">
|
|
<p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1rem 0;">
|
|
Generate a shared event pass with a universal 6-digit PIN, vanity link
|
|
(<code style="font-size: 0.8rem;">/e/slug</code>), and CLI 1-liner for
|
|
workshops, hackathons, and multi-user kiosks.
|
|
</p>
|
|
|
|
<form
|
|
id="eventForm"
|
|
onsubmit="handleCreateEvent(event)"
|
|
style="margin-top: 1rem;"
|
|
>
|
|
{/* Event Name */}
|
|
<div style="margin-bottom: 1.25rem;">
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.875rem; color: var(--text-secondary);">
|
|
Workshop / Event Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="eventName"
|
|
placeholder="e.g. Deno & SPIRE Zero-Trust Workshop, Elite Fleet Live Demo"
|
|
required
|
|
style="width: 100%;"
|
|
/>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.25rem;">
|
|
{/* Target App */}
|
|
<div>
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.875rem; color: var(--text-secondary);">
|
|
Target App Destination
|
|
</label>
|
|
<select
|
|
id="eventAppId"
|
|
style="width: 100%; padding: 0.5rem 0.75rem; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.9rem;"
|
|
>
|
|
<option value="">Universal Sandbox (Default)</option>
|
|
{apps.map((app) => (
|
|
<option value={app.id} key={app.id}>
|
|
{app.name} ({app.domain || "Internal"})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Guest Role */}
|
|
<div>
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.875rem; color: var(--text-secondary);">
|
|
Attendee Access Role
|
|
</label>
|
|
<select
|
|
id="eventRole"
|
|
style="width: 100%; padding: 0.5rem 0.75rem; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.9rem;"
|
|
>
|
|
<option value="viewer">Viewer (Read-Only Demo)</option>
|
|
<option value="operator">Operator (Workshop Actions)</option>
|
|
<option value="user">Standard User</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Seat Capacity Presets */}
|
|
<div style="margin-bottom: 1.25rem;">
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.45rem; font-size: 0.875rem; color: var(--text-secondary);">
|
|
Seat Capacity Limit
|
|
</label>
|
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
|
|
<button
|
|
type="button"
|
|
class="pill-btn seat-pill"
|
|
onclick="selectSeats(this, 25)"
|
|
>
|
|
25 Seats
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="pill-btn seat-pill active"
|
|
onclick="selectSeats(this, 50)"
|
|
>
|
|
50 Seats
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="pill-btn seat-pill"
|
|
onclick="selectSeats(this, 100)"
|
|
>
|
|
100 Seats
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="pill-btn seat-pill"
|
|
onclick="selectSeats(this, 0)"
|
|
>
|
|
∞ Unlimited
|
|
</button>
|
|
<input
|
|
type="number"
|
|
id="eventMaxSeats"
|
|
value="50"
|
|
min="0"
|
|
max="10000"
|
|
style="width: 100px; padding: 0.35rem 0.5rem; text-align: center;"
|
|
title="Max seats (0 = unlimited)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Duration Presets */}
|
|
<div style="margin-bottom: 1.25rem;">
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.45rem; font-size: 0.875rem; color: var(--text-secondary);">
|
|
Event Duration & Expiration
|
|
</label>
|
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
|
<button
|
|
type="button"
|
|
class="pill-btn event-lifespan-pill"
|
|
onclick="selectEventLifespan(this, 1)"
|
|
>
|
|
⚡ 1 Hour
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="pill-btn event-lifespan-pill active"
|
|
onclick="selectEventLifespan(this, 3)"
|
|
>
|
|
🛠️ 3 Hours (Standard Workshop)
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="pill-btn event-lifespan-pill"
|
|
onclick="selectEventLifespan(this, 12)"
|
|
>
|
|
📅 12 Hours (All-Day Hackathon)
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="pill-btn event-lifespan-pill"
|
|
onclick="selectEventLifespan(this, 24)"
|
|
>
|
|
🗓️ 24 Hours
|
|
</button>
|
|
</div>
|
|
<input type="hidden" id="eventLifespanHours" value="3" />
|
|
</div>
|
|
|
|
{/* Custom Codes Accordion (Optional) */}
|
|
<details style="margin-bottom: 1.5rem; background: var(--surface-muted); padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);">
|
|
<summary style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary); cursor: pointer;">
|
|
▸ Custom Vanity Slug & Custom PIN Code (Optional)
|
|
</summary>
|
|
<div style="margin-top: 0.75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
|
|
<div>
|
|
<label style="display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.25rem;">
|
|
Vanity Slug (e.g. /e/deno-lab)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="eventSlug"
|
|
placeholder="auto-generated if blank"
|
|
style="width: 100%; font-size: 0.85rem;"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label style="display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.25rem;">
|
|
Custom 6-Digit PIN (e.g. 749-123)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="eventPinCode"
|
|
placeholder="auto-generated if blank"
|
|
style="width: 100%; font-size: 0.85rem;"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<div style="display: flex; gap: 0.75rem;">
|
|
<button
|
|
type="submit"
|
|
id="submitEventBtn"
|
|
class="btn-primary"
|
|
style="min-height: 42px; background: var(--success); border-color: var(--success);"
|
|
>
|
|
🎟️ Launch Workshop Pass
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
onclick="closeDelegateDrawer()"
|
|
style="min-height: 42px;"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Event Launch Success State */}
|
|
<div
|
|
id="eventHandoffState"
|
|
style="display: none; margin-top: 1.5rem; padding: 1.25rem; background: var(--surface-card); border: 2px solid var(--success); border-radius: var(--radius-md); box-shadow: var(--shadow-md);"
|
|
>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
|
|
<div style="display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0;">
|
|
<span style="font-size: 1.3rem; flex-shrink: 0;">🎟️</span>
|
|
<strong
|
|
id="createdEventTitle"
|
|
style="color: var(--text-primary); font-size: 1.1rem; overflow-wrap: break-word; word-break: break-word; max-width: 100%; display: block;"
|
|
>
|
|
Workshop Pass Live!
|
|
</strong>
|
|
</div>
|
|
<span
|
|
class="badge badge-success"
|
|
style="flex-shrink: 0; margin-left: 0.5rem;"
|
|
>
|
|
Active Now
|
|
</span>
|
|
</div>
|
|
|
|
<p style="font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1rem 0;">
|
|
Share the 6-digit PIN, 1-click link, or CLI 1-liner with attendees.
|
|
You can monitor live claimed seats and trigger the master kill switch
|
|
from the Event Cockpit below.
|
|
</p>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem;">
|
|
{/* PIN Code */}
|
|
<div>
|
|
<label style="display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem;">
|
|
6-Digit Universal PIN (for /join or Kiosk Entry)
|
|
</label>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<code
|
|
id="eventHandoffPin"
|
|
style="flex: 1; padding: 0.5rem 0.75rem; background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-family: monospace; font-size: 1.1rem; text-align: center; letter-spacing: 3px; font-weight: 700; color: var(--primary);"
|
|
>
|
|
</code>
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
aria-label="Copy Universal PIN"
|
|
style="min-height: 36px; padding: 0 0.85rem; font-size: 0.8rem;"
|
|
onclick="copyEventHandoff('pin')"
|
|
>
|
|
Copy PIN
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 1-Click Vanity Link */}
|
|
<div>
|
|
<label style="display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem;">
|
|
Direct 1-Click Workshop Entrance URL
|
|
</label>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<code
|
|
id="eventHandoffLink"
|
|
style="flex: 1; padding: 0.5rem 0.75rem; background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-family: monospace; font-size: 0.85rem; overflow-x: auto; white-space: nowrap; color: var(--success);"
|
|
>
|
|
</code>
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
aria-label="Copy Direct Link"
|
|
style="min-height: 36px; padding: 0 0.85rem; font-size: 0.8rem;"
|
|
onclick="copyEventHandoff('link')"
|
|
>
|
|
Copy URL
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CLI 1-Liner */}
|
|
<div>
|
|
<label style="display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem;">
|
|
Terminal 1-Liner (Environment Injector)
|
|
</label>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<code
|
|
id="eventHandoffCli"
|
|
style="flex: 1; padding: 0.5rem 0.75rem; background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-family: monospace; font-size: 0.8rem; overflow-x: auto; white-space: nowrap; color: var(--text-primary);"
|
|
>
|
|
</code>
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
aria-label="Copy Terminal curl command"
|
|
style="min-height: 36px; padding: 0 0.85rem; font-size: 0.8rem;"
|
|
onclick="copyEventHandoff('cli')"
|
|
>
|
|
Copy 1-Liner
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
style="width: 100%; min-height: 38px; justify-content: center; font-size: 0.85rem;"
|
|
onclick="closeEventHandoffModal()"
|
|
>
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|