0a4f6a8344
This commit finalizes Phase 4 of the Event & Session Overhaul: 1. Implements session pause logic across PostgreSQL schema, Valkey cache, and `auth_forward.ts` edge check (`is_paused`). 2. Implements non-destructive operational endpoints (`/api/events/:id/rotate-pin`, `/api/events/:id/expand`, `/api/events/:id/attendees`) with Zero-Trust Ownership verification. 3. Upgrades existing `end` and `extend` endpoints in `events.ts` to utilize robust Zero-Trust Ownership queries (created_by OR isGlobalAdmin). 4. Creates `EventAttendeesDrawer.tsx` to handle live participant inspection and individual session controls (Pause, Revoke). 5. Updates `EventCockpitDeck.tsx` and `SessionsScript.tsx` to mount and drive the new controls via vanilla JavaScript, respecting zero-framework guidelines. 6. Ensures `deno fmt`, `deno task lint`, `deno task check` and `deno test` execute successfully against the new schema and API guards. Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>
505 lines
23 KiB
TypeScript
505 lines
23 KiB
TypeScript
export const SessionsScript = () => {
|
|
return (
|
|
<script
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
let lastMintedToken = "";
|
|
|
|
function showNotice(msg, isError) {
|
|
const banner = document.getElementById('status-banner');
|
|
banner.textContent = msg;
|
|
banner.style.display = 'block';
|
|
banner.style.background = isError ? 'var(--danger-bg)' : 'var(--success-bg)';
|
|
banner.style.color = isError ? 'var(--danger-text)' : 'var(--success-text)';
|
|
banner.style.border = isError ? '1px solid var(--danger-border)' : '1px solid var(--success-border)';
|
|
setTimeout(() => { banner.style.display = 'none'; }, 5000);
|
|
}
|
|
|
|
function openDelegateDrawer() {
|
|
document.getElementById('delegateDrawer').style.display = 'block';
|
|
document.getElementById('delegateDrawer').scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
|
|
function closeDelegateDrawer() {
|
|
document.getElementById('delegateDrawer').style.display = 'none';
|
|
// Reset WorkshopDrawer 2-State Machine
|
|
const eventCreateState = document.getElementById('eventCreateState');
|
|
if (eventCreateState) eventCreateState.style.display = 'block';
|
|
const eventHandoffState = document.getElementById('eventHandoffState');
|
|
if (eventHandoffState) eventHandoffState.style.display = 'none';
|
|
const eventForm = document.getElementById('eventForm');
|
|
if (eventForm) eventForm.reset();
|
|
const drawerTitle = document.getElementById('delegateDrawerTitle');
|
|
if (drawerTitle) drawerTitle.textContent = 'Create New Pass / Session';
|
|
}
|
|
|
|
function switchDelegateTab(tabId) {
|
|
document.getElementById('tabDirectPass').style.display = 'none';
|
|
document.getElementById('tabWorkshopPass').style.display = 'none';
|
|
document.getElementById('tabBtnDirectPass').classList.remove('active');
|
|
document.getElementById('tabBtnWorkshopPass').classList.remove('active');
|
|
|
|
document.getElementById(tabId).style.display = 'block';
|
|
if (tabId === 'tabDirectPass') {
|
|
document.getElementById('tabBtnDirectPass').classList.add('active');
|
|
} else {
|
|
document.getElementById('tabBtnWorkshopPass').classList.add('active');
|
|
}
|
|
}
|
|
|
|
function selectSeats(btn, count) {
|
|
document.querySelectorAll('.seat-pill').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
document.getElementById('eventMaxSeats').value = count;
|
|
}
|
|
|
|
function selectEventLifespan(btn, hours) {
|
|
document.querySelectorAll('.event-lifespan-pill').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
document.getElementById('eventLifespanHours').value = hours;
|
|
}
|
|
|
|
function handleTargetAppChange(appName) {
|
|
if (appName) {
|
|
const scopeVal = 'app:' + appName;
|
|
document.querySelectorAll('.scope-checkbox').forEach(cb => {
|
|
if (cb.value === scopeVal) cb.checked = true;
|
|
});
|
|
}
|
|
}
|
|
|
|
function selectLifespan(btn, hours) {
|
|
document.querySelectorAll('.lifespan-pill').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
document.getElementById('delegateHours').value = hours;
|
|
}
|
|
|
|
function selectMode(btn, mode) {
|
|
document.querySelectorAll('.mode-pill').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
document.getElementById('delegateMode').value = mode;
|
|
|
|
const accordion = document.getElementById('customScopesSection');
|
|
if (mode === 'custom') {
|
|
accordion.open = true;
|
|
}
|
|
}
|
|
|
|
async function handleDelegateSession(e) {
|
|
e.preventDefault();
|
|
const label = document.getElementById('delegateLabel').value.trim();
|
|
const lifespanHours = parseInt(document.getElementById('delegateHours').value) || 1;
|
|
let mode = document.getElementById('delegateMode').value;
|
|
const targetApp = document.getElementById('delegateTargetApp') ? document.getElementById('delegateTargetApp').value : '';
|
|
|
|
const customScopes = [];
|
|
if (targetApp) {
|
|
customScopes.push('app:' + targetApp);
|
|
}
|
|
if (mode === 'custom' || targetApp) {
|
|
document.querySelectorAll('.scope-checkbox:checked').forEach(cb => {
|
|
if (!customScopes.includes(cb.value)) {
|
|
customScopes.push(cb.value);
|
|
}
|
|
});
|
|
if (targetApp && mode !== 'custom' && mode !== 'admin') {
|
|
mode = 'custom';
|
|
}
|
|
}
|
|
|
|
const btn = document.getElementById('submitDelegateBtn');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Minting...';
|
|
|
|
try {
|
|
const res = await fetch('/api/sessions/delegate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ label, lifespanHours, mode, customScopes }),
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
lastMintedToken = data.token;
|
|
document.getElementById('handoffMagicLinkText').textContent = window.location.origin + '/pass?token=' + data.token;
|
|
document.getElementById('handoffCliText').textContent = 'export AUTH_YES_TOKEN="' + data.token + '"';
|
|
document.getElementById('handoffCurlText').textContent = '-H "Authorization: Bearer ' + data.token + '"';
|
|
document.getElementById('handoffModal').style.display = 'block';
|
|
showNotice('Delegated session created for: ' + data.label, false);
|
|
} else {
|
|
showNotice(data.error || 'Failed to delegate session', true);
|
|
}
|
|
} catch (err) {
|
|
showNotice('Network error delegating session', true);
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = 'Mint & Delegate Session';
|
|
}
|
|
}
|
|
|
|
async function handleCreateEvent(e) {
|
|
e.preventDefault();
|
|
const name = document.getElementById('eventName').value.trim();
|
|
const appId = document.getElementById('eventAppId').value || null;
|
|
const role = document.getElementById('eventRole').value || 'viewer';
|
|
const maxSeats = parseInt(document.getElementById('eventMaxSeats').value) || 0;
|
|
const lifespanHours = parseInt(document.getElementById('eventLifespanHours').value) || 3;
|
|
const slug = document.getElementById('eventSlug').value.trim() || undefined;
|
|
const pinCode = document.getElementById('eventPinCode').value.trim() || undefined;
|
|
|
|
const btn = document.getElementById('submitEventBtn');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Launching...';
|
|
|
|
try {
|
|
const res = await fetch('/api/events', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name, appId, role, maxSeats, lifespanHours, slug, pinCode }),
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok && data.success) {
|
|
const ev = data.event;
|
|
document.getElementById('createdEventTitle').textContent = ev.name + ' Live!';
|
|
document.getElementById('eventHandoffPin').textContent = ev.pin_code;
|
|
document.getElementById('eventHandoffLink').textContent = window.location.origin + '/e/' + ev.slug;
|
|
document.getElementById('eventHandoffCli').textContent = 'curl -sSL ' + window.location.origin + '/join/' + ev.slug + '?format=env | source /dev/stdin';
|
|
|
|
document.getElementById('eventCreateState').style.display = 'none';
|
|
document.getElementById('eventHandoffState').style.display = 'block';
|
|
document.getElementById('delegateDrawerTitle').textContent = 'Event Pass Active';
|
|
|
|
showNotice('Workshop pass created: ' + ev.name, false);
|
|
} else {
|
|
showNotice(data.error || 'Failed to create event pass', true);
|
|
}
|
|
} catch (err) {
|
|
showNotice('Network error creating event pass', true);
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = '🎟️ Launch Workshop Pass';
|
|
}
|
|
}
|
|
|
|
function copyEventHandoff(type) {
|
|
let text = '';
|
|
if (type === 'pin') text = document.getElementById('eventHandoffPin').textContent;
|
|
if (type === 'link') text = document.getElementById('eventHandoffLink').textContent;
|
|
if (type === 'cli') text = document.getElementById('eventHandoffCli').textContent;
|
|
navigator.clipboard.writeText(text);
|
|
showNotice('Copied to clipboard: ' + text, false);
|
|
}
|
|
|
|
function closeEventHandoffModal() {
|
|
closeDelegateDrawer();
|
|
window.location.reload();
|
|
}
|
|
|
|
function copyHandoff(type) {
|
|
let text = '';
|
|
if (type === 'link') text = document.getElementById('handoffLinkText').textContent;
|
|
if (type === 'cli') text = document.getElementById('handoffCliText').textContent;
|
|
if (type === 'curl') text = document.getElementById('handoffCurlText').textContent;
|
|
if (type === 'magic') text = document.getElementById('handoffMagicLinkText').textContent;
|
|
navigator.clipboard.writeText(text);
|
|
showNotice('Copied to clipboard: ' + text, false);
|
|
}
|
|
|
|
function closeHandoffModal() {
|
|
document.getElementById('handoffModal').style.display = 'none';
|
|
window.location.reload();
|
|
}
|
|
|
|
async function extendSession(sessionId, hours) {
|
|
try {
|
|
const res = await fetch('/api/sessions/' + sessionId + '/extend', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ extendHours: hours }),
|
|
});
|
|
if (res.ok) {
|
|
showNotice('Session extended by ' + hours + ' hour(s)!', false);
|
|
setTimeout(() => window.location.reload(), 600);
|
|
} else {
|
|
const data = await res.json();
|
|
showNotice(data.error || 'Failed to extend session', true);
|
|
}
|
|
} catch (err) {
|
|
showNotice('Network error extending session', true);
|
|
}
|
|
}
|
|
|
|
function openEditScopesModal(sessionId, label, scopesJson) {
|
|
const scopes = JSON.parse(scopesJson || '[]');
|
|
document.getElementById('editScopesSessionId').value = sessionId;
|
|
document.getElementById('editScopesLabel').textContent = label;
|
|
|
|
document.querySelectorAll('.edit-scope-chk').forEach(cb => {
|
|
cb.checked = scopes.includes(cb.value);
|
|
});
|
|
|
|
document.getElementById('editScopesModal').style.display = 'flex';
|
|
}
|
|
|
|
function closeEditScopesModal() {
|
|
document.getElementById('editScopesModal').style.display = 'none';
|
|
}
|
|
|
|
async function saveUpdatedScopes() {
|
|
const sessionId = document.getElementById('editScopesSessionId').value;
|
|
const customScopes = [];
|
|
document.querySelectorAll('.edit-scope-chk:checked').forEach(cb => {
|
|
customScopes.push(cb.value);
|
|
});
|
|
|
|
try {
|
|
const res = await fetch('/api/sessions/' + sessionId + '/scopes', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ customScopes }),
|
|
});
|
|
if (res.ok) {
|
|
showNotice('Session scopes updated!', false);
|
|
setTimeout(() => window.location.reload(), 600);
|
|
} else {
|
|
const data = await res.json();
|
|
showNotice(data.error || 'Failed to update scopes', true);
|
|
}
|
|
} catch (err) {
|
|
showNotice('Network error updating scopes', true);
|
|
}
|
|
}
|
|
|
|
function copyText(text) {
|
|
navigator.clipboard.writeText(text);
|
|
showNotice('Copied to clipboard!', false);
|
|
}
|
|
|
|
async function rotatePin(eventId) {
|
|
try {
|
|
const res = await fetch('/api/events/' + eventId + '/rotate-pin', {
|
|
method: 'POST'
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok && data.success) {
|
|
const pinElem = document.getElementById('pin-' + eventId);
|
|
if (pinElem) {
|
|
pinElem.textContent = data.pinCode;
|
|
}
|
|
showNotice('Event PIN rotated successfully', false);
|
|
} else {
|
|
showNotice(data.error || 'Failed to rotate PIN', true);
|
|
}
|
|
} catch (err) {
|
|
showNotice('Network error rotating PIN', true);
|
|
}
|
|
}
|
|
|
|
async function expandSeats(eventId, count) {
|
|
try {
|
|
const res = await fetch('/api/events/' + eventId + '/expand', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ addSeats: count }),
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok && data.success) {
|
|
showNotice('Expanded capacity by ' + count + ' seats', false);
|
|
setTimeout(() => window.location.reload(), 600);
|
|
} else {
|
|
showNotice(data.error || 'Failed to expand seats', true);
|
|
}
|
|
} catch (err) {
|
|
showNotice('Network error expanding seats', true);
|
|
}
|
|
}
|
|
|
|
function closeAttendeesDrawer() {
|
|
document.getElementById('attendeesDrawer').style.display = 'none';
|
|
}
|
|
|
|
async function openAttendeesDrawer(eventId, eventName) {
|
|
document.getElementById('attendeesDrawerEventName').textContent = eventName;
|
|
document.getElementById('attendeesDrawerContent').innerHTML = '<div style="display: flex; justify-content: center; align-items: center; height: 100%; color: var(--text-muted); font-size: 0.9rem;">Loading attendees...</div>';
|
|
document.getElementById('attendeesDrawer').style.display = 'block';
|
|
document.getElementById('attendeesDrawer').scrollIntoView({ behavior: 'smooth' });
|
|
|
|
try {
|
|
const res = await fetch('/api/events/' + eventId + '/attendees');
|
|
const data = await res.json();
|
|
|
|
if (res.ok && data.success) {
|
|
const attendees = data.attendees;
|
|
if (attendees.length === 0) {
|
|
document.getElementById('attendeesDrawerContent').innerHTML = '<div style="padding: 1rem; text-align: center; color: var(--text-muted);">No attendees currently active.</div>';
|
|
return;
|
|
}
|
|
|
|
let html = '<div style="display: flex; flex-direction: column; gap: 0.5rem;">';
|
|
for (const att of attendees) {
|
|
const isPaused = att.is_paused === true;
|
|
html += \`
|
|
<div class="card" style="padding: 0.75rem; margin: 0; display: flex; justify-content: space-between; align-items: center; border-left: 3px solid \${isPaused ? 'var(--warning)' : 'var(--success)'}; opacity: \${isPaused ? '0.7' : '1'};">
|
|
<div>
|
|
<div style="font-weight: 600; font-size: 0.9rem; color: var(--text-primary); \${isPaused ? 'text-decoration: line-through;' : ''}">\${att.username}</div>
|
|
<div style="font-size: 0.75rem; color: var(--text-secondary);">Expires: \${new Date(att.expires_at).toLocaleString()}</div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<button type="button" class="btn-outline" style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 28px;" onclick="toggleSessionPause('\${att.id}', \${!isPaused}, '\${eventId}', '\${eventName}')">
|
|
\${isPaused ? '▶️ Unpause' : '⏸️ Pause'}
|
|
</button>
|
|
<button type="button" class="btn-danger revoke-btn" data-session-id="\${att.id}" style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 28px;" aria-label="Revoke">
|
|
Revoke
|
|
</button>
|
|
</div>
|
|
</div>
|
|
\`;
|
|
}
|
|
html += '</div>';
|
|
document.getElementById('attendeesDrawerContent').innerHTML = html;
|
|
|
|
// Re-bind revoke buttons
|
|
document.getElementById('attendeesDrawerContent').querySelectorAll('.revoke-btn').forEach(btn => {
|
|
btn.addEventListener('click', async (e) => {
|
|
if (!confirm('Revoke this session immediately?')) return;
|
|
const sessionId = e.currentTarget.getAttribute('data-session-id');
|
|
const originalText = e.currentTarget.textContent;
|
|
e.currentTarget.textContent = 'Revoking...';
|
|
e.currentTarget.disabled = true;
|
|
|
|
try {
|
|
const revokeRes = await fetch('/api/sessions/' + sessionId, { method: 'DELETE' });
|
|
if (revokeRes.ok) {
|
|
openAttendeesDrawer(eventId, eventName); // Refresh list
|
|
} else {
|
|
const revokeData = await revokeRes.json();
|
|
showNotice(revokeData.error || 'Failed to revoke session', true);
|
|
e.currentTarget.textContent = originalText;
|
|
e.currentTarget.disabled = false;
|
|
}
|
|
} catch (err) {
|
|
showNotice('Network error revoking session', true);
|
|
e.currentTarget.textContent = originalText;
|
|
e.currentTarget.disabled = false;
|
|
}
|
|
});
|
|
});
|
|
|
|
} else {
|
|
document.getElementById('attendeesDrawerContent').innerHTML = '<div style="padding: 1rem; color: var(--danger-text);">Failed to load attendees: ' + (data.error || 'Unknown error') + '</div>';
|
|
}
|
|
} catch (err) {
|
|
document.getElementById('attendeesDrawerContent').innerHTML = '<div style="padding: 1rem; color: var(--danger-text);">Network error loading attendees.</div>';
|
|
}
|
|
}
|
|
|
|
async function toggleSessionPause(sessionId, shouldPause, eventId, eventName) {
|
|
try {
|
|
const res = await fetch('/api/sessions/' + sessionId + '/pause', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ is_paused: shouldPause }),
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok && data.success) {
|
|
showNotice('Session ' + (shouldPause ? 'paused' : 'unpaused') + ' successfully', false);
|
|
openAttendeesDrawer(eventId, eventName); // Refresh list
|
|
} else {
|
|
showNotice(data.error || 'Failed to toggle pause state', true);
|
|
}
|
|
} catch (err) {
|
|
showNotice('Network error toggling pause state', true);
|
|
}
|
|
}
|
|
|
|
// Event Cockpit Actions
|
|
document.querySelectorAll('.extend-event-btn').forEach(btn => {
|
|
btn.addEventListener('click', async (e) => {
|
|
const eventId = e.currentTarget.getAttribute('data-event-id');
|
|
e.currentTarget.disabled = true;
|
|
try {
|
|
const res = await fetch('/api/events/' + eventId + '/extend', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ extendHours: 1 })
|
|
});
|
|
if (res.ok) {
|
|
showNotice('Event extended by 1 hour!', false);
|
|
setTimeout(() => window.location.reload(), 600);
|
|
} else {
|
|
const data = await res.json();
|
|
showNotice(data.error || 'Failed to extend event', true);
|
|
e.currentTarget.disabled = false;
|
|
}
|
|
} catch (err) {
|
|
showNotice('Network error extending event', true);
|
|
e.currentTarget.disabled = false;
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.end-event-btn').forEach(btn => {
|
|
btn.addEventListener('click', async (e) => {
|
|
if (!confirm('Are you sure you want to end this workshop? This will immediately revoke ALL active guest sessions and they will lose access.')) return;
|
|
|
|
const eventId = e.currentTarget.getAttribute('data-event-id');
|
|
e.currentTarget.disabled = true;
|
|
e.currentTarget.textContent = 'Revoking...';
|
|
|
|
try {
|
|
const res = await fetch('/api/events/' + eventId + '/end', {
|
|
method: 'POST',
|
|
});
|
|
if (res.ok) {
|
|
showNotice('Workshop ended and all sessions revoked.', false);
|
|
setTimeout(() => window.location.reload(), 600);
|
|
} else {
|
|
const data = await res.json();
|
|
showNotice(data.error || 'Failed to end event', true);
|
|
e.currentTarget.disabled = false;
|
|
e.currentTarget.textContent = '🔴 End & Revoke All';
|
|
}
|
|
} catch (err) {
|
|
showNotice('Network error ending event', true);
|
|
e.currentTarget.disabled = false;
|
|
e.currentTarget.textContent = '🔴 End & Revoke All';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Revoke handler
|
|
document.querySelectorAll('.revoke-btn').forEach(btn => {
|
|
btn.addEventListener('click', async (e) => {
|
|
if (!confirm('Revoke this session immediately?')) return;
|
|
|
|
const sessionId = e.currentTarget.getAttribute('data-session-id');
|
|
const originalText = e.currentTarget.textContent;
|
|
e.currentTarget.textContent = 'Revoking...';
|
|
e.currentTarget.disabled = true;
|
|
|
|
try {
|
|
const res = await fetch('/api/sessions/' + sessionId, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (res.ok) {
|
|
window.location.reload();
|
|
} else {
|
|
const data = await res.json();
|
|
showNotice(data.error || 'Failed to revoke session', true);
|
|
e.currentTarget.textContent = originalText;
|
|
e.currentTarget.disabled = false;
|
|
}
|
|
} catch (err) {
|
|
showNotice('Network error revoking session', true);
|
|
e.currentTarget.textContent = originalText;
|
|
e.currentTarget.disabled = false;
|
|
}
|
|
});
|
|
});
|
|
`,
|
|
}}
|
|
>
|
|
</script>
|
|
);
|
|
};
|