alchemistkay/guestguard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tier2): smarter fraud detection — Block G

Browse Source 
Per-event fraud tuning. Hosts can now dial the medium / high / block
boundaries, allowlist trusted networks, and feed verdicts back on
flagged accesses — the seed corpus for a future ML model.

Schema (migration 0011)
- events.fraud_{medium,high,block}_threshold default 30/60/85 so
  existing events behave identically until a host changes them
- access_logs.geo_{country,city,lat,lon} for future enrichment
- fraud_feedback table — verdict ('legitimate' | 'suspicious') + note,
  PK on access_log_id so re-mark is an upsert
- event_allowlists table — (event_id, ip_cidr) primary key, inet column
  so containment checks use the native >>= operator (indexed lookup)

Domain
- FraudThresholds with Valid() + Band() helpers; Default trio echoed
  through GET responses so the frontend doesn't duplicate constants
- ParseAllowlistCIDR accepts bare IPs (auto-widens to /32 or /128) and
  canonicalises the output (203.0.113.42 → 203.0.113.42/32)
- Event.Thresholds() falls back to defaults if columns weren't
  populated yet, so the API never wedges every score into "low"

Storage
- AllowlistRepo: List / Add / Remove + Matches() — the latter pushes
  CIDR containment into Postgres rather than streaming rows back
- FeedbackRepo: Record (upserts) + ListForEvent (joined through guests)
- EventRepo.GetThresholds + UpdateThresholds, plus the threshold
  columns baked into scanEvent so every event load carries them
- AccessLogRepo.BelongsToEvent — stops a hostile editor on event A
  from marking event B's access logs

API
- GET/PUT /events/{id}/security/thresholds (viewer/editor)
- GET/POST/DELETE /events/{id}/security/allowlist
- POST /events/{id}/access-logs/{log_id}/feedback (editor)
- GET /events/{id}/security/feedback
- RSVP scoring path: allowlist short-circuit fires before the fraud
  engine; the engine's score is then re-banded against the event's
  thresholds (engine.Risk becomes advisory — API is the source of
  truth for "what counts as block here")
- CORS Allow-Methods already includes PUT (Block D fix)

Fraud engine
- Single-signal cap: it now takes ≥2 sub-scores of ≥70 to push the
  final into HIGH. Fixes the well-known "second visit with a slightly
  shifted fingerprint scores 60+" false positive
- Engine band remains advisory; API re-bands using per-event
  thresholds before deciding to block

Frontend
- SecurityCard.vue: visual band ribbon (proportional to thresholds),
  three sliders with mutual clamping so dragging medium past high
  pushes high (not an invalid ordering), reset-to-defaults button,
  CIDR allowlist with inline add + per-row remove, verdict-history
  inbox. Toast feedback on save/add/remove
- "Security" tab added to the event-detail tab nav (5th tab,
  right of Analytics)
- Viewer role hides write affordances; server enforces too

Tests
- Domain: ThresholdsBand, ThresholdsValid, ParseAllowlistCIDR (bare
  IP widening + traversal/typo rejection), FraudFeedbackValid
- Integration: thresholds round-trip + invalid ordering rejection,
  allowlist CRUD + duplicate 409 + invalid CIDR 400 + IP auto-widen,
  feedback record + upsert + cross-tenant 404 + invalid verdict 400,
  viewer can read / editor can write / outsider gets 404
- Full integration suite green (315.8s, all 36 top-level tests pass)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Kwaku Danso
2026-05-19 21:33:57 +01:00
parent e5b187c575
commit b873012191
22 changed files with 1953 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/AnalyticsCard.vue
+157 -100
View File
@@ -2,10 +2,14 @@
// Tier 2 Block E — host analytics dashboard card. Shown on the event
// detail page; viewer+ role.
//
// Charts are inline SVG rather than chart.js — we avoid the ~70kB bundle
// hit for charts this small, and keep the page server-renderable. If the
// host's expectations grow (zoom, tooltips, animations) chart.js becomes
// the right call.
// Layout philosophy (post-UX-pass): hosts mostly want to answer three
// questions on a glance — "Are people coming?", "Who haven't I heard
// back from?", and "Was my last send-out worth it?". The hierarchy
// reflects that: hero metrics first, supporting charts grouped beneath,
// the long stale-guest list collapsed by default.
//
// Charts are inline SVG rather than chart.js — keeps the bundle lean and
// the page server-renderable.
interface Overview {
invited: number
@@ -54,6 +58,14 @@ async function refresh() {
}
onMounted(refresh)
// --- derived stats ---
const responseRatePct = computed(() => {
const o = data.value?.overview
if (!o || o.invited === 0) return 0
return Math.round(((o.attending + o.declined + o.maybe) / o.invited) * 100)
})
const responseRateMax = computed(() => {
const series = data.value?.response_rate ?? []
return Math.max(1, ...series.map((p) => p.count))
@@ -78,6 +90,17 @@ const funnelPct = computed(() => {
}
})
// Total headcount including plus-ones — the number caterers and venues
// actually need. More useful than "attending" alone, which understates the
// crowd.
const totalHeadcount = computed(() => {
const o = data.value?.overview
if (!o) return 0
return o.attending + o.plus_ones_total
})
// SVG path for the 30-day response sparkline. Empty string when there's
// no data so the path renders as nothing instead of "M NaN,NaN".
const responseRateLineD = computed(() => {
const series = data.value?.response_rate ?? []
if (series.length === 0) return ''
@@ -94,10 +117,15 @@ const responseRateLineD = computed(() => {
.join(' ')
})
// Same series as a filled area underneath the line — gives the
// sparkline visual weight without dominating the surrounding text.
const responseRateAreaD = computed(() => {
const d = responseRateLineD.value
if (!d) return ''
return `${d} L600,80 L0,80 Z`
})
function exportCSV() {
// Issue a fresh ws-ticket-style download. Browsers preserve the
// Authorization header on <a download> if we set it via fetch, so we
// use fetch + blob + anchor.
const url = `${config.public.apiBase}/events/${props.eventId}/analytics/export.csv`
fetch(url, {
headers: auth.liveAccessToken() ? { Authorization: `Bearer ${auth.liveAccessToken()}` } : {},
@@ -127,8 +155,11 @@ function fmtDate(iso?: string | null) {
<template>
<section class="card">
<header class="mb-3 flex items-center justify-between">
<h2 class="text-lg font-semibold">Analytics</h2>
<header class="mb-5 flex flex-wrap items-center justify-between gap-3">
<div>
<h2 class="text-lg font-semibold">Analytics</h2>
<p class="text-xs text-zinc-500">Last 30 days · {{ responseRatePct }}% response rate</p>
</div>
<button class="btn-ghost text-sm" :disabled="!data" @click="exportCSV">Export CSV</button>
</header>
@@ -136,125 +167,151 @@ function fmtDate(iso?: string | null) {
<p v-else-if="error" class="text-sm text-red-400">{{ error }}</p>
<div v-else-if="data" class="space-y-6">
<!-- Overview tiles -->
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
<div class="rounded-md border border-zinc-800 bg-zinc-950 p-3">
<p class="text-xs uppercase tracking-wider text-zinc-500">Invited</p>
<p class="mt-1 text-2xl font-semibold tabular-nums">{{ data.overview.invited }}</p>
<!-- Hero row — the three numbers a host opens this tab for. -->
<div class="grid grid-cols-1 gap-3 md:grid-cols-3">
<!-- Headcount: attending guests + their plus-ones. The big
number is what the venue / caterer needs. -->
<div class="relative overflow-hidden rounded-lg border border-brand-700/60 bg-brand-500/[0.06] p-4">
<p class="text-xs font-medium uppercase tracking-wider text-brand-400">Headcount</p>
<p class="mt-1 text-4xl font-semibold tabular-nums text-brand-200">{{ totalHeadcount }}</p>
<p class="mt-1 text-xs text-zinc-400">
{{ data.overview.attending }} attending
<template v-if="data.overview.plus_ones_total > 0">
· +{{ data.overview.plus_ones_total }} plus-ones
</template>
</p>
</div>
<div class="rounded-md border border-brand-900/60 bg-brand-950/20 p-3">
<p class="text-xs uppercase tracking-wider text-brand-400">Attending</p>
<p class="mt-1 text-2xl font-semibold tabular-nums text-brand-200">{{ data.overview.attending }}</p>
<!-- Waiting on: hosts can act on this number; the chase list is
below. -->
<div class="relative overflow-hidden rounded-lg border border-amber-800/40 bg-amber-950/10 p-4">
<p class="text-xs font-medium uppercase tracking-wider text-amber-400">Awaiting reply</p>
<p class="mt-1 text-4xl font-semibold tabular-nums text-amber-200">{{ data.overview.pending }}</p>
<p class="mt-1 text-xs text-zinc-400">
of {{ data.overview.invited }} invited
</p>
</div>
<div class="rounded-md border border-zinc-800 bg-zinc-950 p-3">
<p class="text-xs uppercase tracking-wider text-zinc-500">Declined</p>
<p class="mt-1 text-2xl font-semibold tabular-nums">{{ data.overview.declined }}</p>
</div>
<div class="rounded-md border border-zinc-800 bg-zinc-950 p-3">
<p class="text-xs uppercase tracking-wider text-zinc-500">Maybe</p>
<p class="mt-1 text-2xl font-semibold tabular-nums">{{ data.overview.maybe }}</p>
</div>
<div class="rounded-md border border-zinc-800 bg-zinc-950 p-3">
<p class="text-xs uppercase tracking-wider text-zinc-500">Pending</p>
<p class="mt-1 text-2xl font-semibold tabular-nums">{{ data.overview.pending }}</p>
</div>
<div class="rounded-md border border-zinc-800 bg-zinc-950 p-3">
<p class="text-xs uppercase tracking-wider text-zinc-500">Plus-ones</p>
<p class="mt-1 text-2xl font-semibold tabular-nums">+{{ data.overview.plus_ones_total }}</p>
<!-- Declined + Maybe stacked here; less prominent than the two
above because a host can't act on them. -->
<div class="relative overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950 p-4">
<p class="text-xs font-medium uppercase tracking-wider text-zinc-500">Won't make it</p>
<p class="mt-1 text-4xl font-semibold tabular-nums text-zinc-200">{{ data.overview.declined }}</p>
<p class="mt-1 text-xs text-zinc-400">
<span v-if="data.overview.maybe > 0">+{{ data.overview.maybe }} maybe</span>
<span v-else>declined</span>
</p>
</div>
</div>
<!-- Response rate over time -->
<div>
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">Responses, last 30 days</p>
<svg viewBox="0 0 600 80" preserveAspectRatio="none" class="h-20 w-full">
<path :d="responseRateLineD" fill="none" stroke="#22c55e" stroke-width="1.5" />
</svg>
</div>
<!-- Funnel -->
<div>
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">Funnel</p>
<div class="space-y-1.5">
<div class="flex items-center gap-3">
<span class="w-24 shrink-0 text-xs text-zinc-400">Invited</span>
<div class="h-6 flex-1 overflow-hidden rounded bg-zinc-900">
<div class="h-full rounded bg-brand-500" :style="{ width: '100%' }"></div>
</div>
<span class="w-12 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ data.funnel.invited }}</span>
</div>
<div class="flex items-center gap-3">
<span class="w-24 shrink-0 text-xs text-zinc-400">Opened</span>
<div class="h-6 flex-1 overflow-hidden rounded bg-zinc-900">
<div class="h-full rounded bg-brand-400" :style="{ width: funnelPct.opened + '%' }"></div>
</div>
<span class="w-12 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ data.funnel.opened }}</span>
</div>
<div class="flex items-center gap-3">
<span class="w-24 shrink-0 text-xs text-zinc-400">Responded</span>
<div class="h-6 flex-1 overflow-hidden rounded bg-zinc-900">
<div class="h-full rounded bg-brand-300" :style="{ width: funnelPct.responded + '%' }"></div>
</div>
<span class="w-12 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ data.funnel.responded }}</span>
<!-- Context row: how fast they're replying + the funnel. Side by
side on desktop so they tell one coherent story. -->
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<div class="rounded-lg border border-zinc-800 bg-zinc-950 p-4">
<div class="mb-3 flex items-center justify-between">
<p class="text-xs font-medium uppercase tracking-wider text-zinc-500">Replies, last 30 days</p>
</div>
<svg viewBox="0 0 600 80" preserveAspectRatio="none" class="h-20 w-full">
<path :d="responseRateAreaD" fill="rgb(34 197 94 / 0.12)" />
<path :d="responseRateLineD" fill="none" stroke="#22c55e" stroke-width="1.5" />
</svg>
</div>
</div>
<!-- Time-to-respond + plus-ones side by side -->
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div>
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">Time to respond</p>
<div class="space-y-1.5">
<div v-for="b in data.time_to_respond" :key="b.label" class="flex items-center gap-3">
<span class="w-12 shrink-0 text-xs text-zinc-400">{{ b.label }}</span>
<div class="h-4 flex-1 overflow-hidden rounded bg-zinc-900">
<div class="h-full rounded bg-brand-500" :style="{ width: ((b.count / ttrMax) * 100) + '%' }"></div>
<div class="rounded-lg border border-zinc-800 bg-zinc-950 p-4">
<p class="mb-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Funnel</p>
<div class="space-y-2">
<div class="flex items-center gap-3">
<span class="w-20 shrink-0 text-xs text-zinc-400">Invited</span>
<div class="h-5 flex-1 overflow-hidden rounded bg-zinc-900">
<div class="h-full rounded bg-brand-500" :style="{ width: '100%' }"></div>
</div>
<span class="w-8 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ b.count }}</span>
<span class="w-10 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ data.funnel.invited }}</span>
</div>
</div>
</div>
<div>
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">Plus-ones (attending)</p>
<div class="space-y-1.5">
<div v-for="b in data.plus_ones" :key="b.label" class="flex items-center gap-3">
<span class="w-12 shrink-0 text-xs text-zinc-400">{{ b.label }}</span>
<div class="h-4 flex-1 overflow-hidden rounded bg-zinc-900">
<div class="h-full rounded bg-brand-500" :style="{ width: ((b.count / plusOnesMax) * 100) + '%' }"></div>
<div class="flex items-center gap-3">
<span class="w-20 shrink-0 text-xs text-zinc-400">Opened</span>
<div class="h-5 flex-1 overflow-hidden rounded bg-zinc-900">
<div class="h-full rounded bg-brand-400" :style="{ width: funnelPct.opened + '%' }"></div>
</div>
<span class="w-8 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ b.count }}</span>
<span class="w-10 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ data.funnel.opened }}</span>
</div>
<div class="flex items-center gap-3">
<span class="w-20 shrink-0 text-xs text-zinc-400">Responded</span>
<div class="h-5 flex-1 overflow-hidden rounded bg-zinc-900">
<div class="h-full rounded bg-brand-300" :style="{ width: funnelPct.responded + '%' }"></div>
</div>
<span class="w-10 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ data.funnel.responded }}</span>
</div>
</div>
</div>
</div>
<!-- Stale guests -->
<div>
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">
Haven't responded yet ({{ data.stale_guests.length }})
</p>
<p v-if="data.stale_guests.length === 0" class="text-sm text-zinc-500">
Everyone you've invited has replied. 🎉
</p>
<ul v-else class="space-y-1.5">
<!-- Distributions — always visible. Two compact charts side by
side share the height of one tall chart so they cost no extra
scroll. -->
<div class="rounded-lg border border-zinc-800 bg-zinc-950">
<div class="border-b border-zinc-900 px-4 py-3">
<p class="text-sm font-medium text-zinc-200">Reply speed &amp; plus-ones</p>
</div>
<div class="grid grid-cols-1 gap-5 p-4 md:grid-cols-2">
<div>
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">Time to respond</p>
<div class="space-y-1.5">
<div v-for="b in data.time_to_respond" :key="b.label" class="flex items-center gap-3">
<span class="w-12 shrink-0 text-xs text-zinc-400">{{ b.label }}</span>
<div class="h-4 flex-1 overflow-hidden rounded bg-zinc-900">
<div class="h-full rounded bg-brand-500" :style="{ width: ((b.count / ttrMax) * 100) + '%' }"></div>
</div>
<span class="w-8 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ b.count }}</span>
</div>
</div>
</div>
<div>
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">Plus-ones (attending)</p>
<div class="space-y-1.5">
<div v-for="b in data.plus_ones" :key="b.label" class="flex items-center gap-3">
<span class="w-12 shrink-0 text-xs text-zinc-400">{{ b.label }}</span>
<div class="h-4 flex-1 overflow-hidden rounded bg-zinc-900">
<div class="h-full rounded bg-brand-500" :style="{ width: ((b.count / plusOnesMax) * 100) + '%' }"></div>
</div>
<span class="w-8 shrink-0 text-right text-xs tabular-nums text-zinc-300">{{ b.count }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- Stale guests — always visible. With 10+ rows we cap the list
and point at the CSV export for the full count, so the panel
doesn't dominate the page even on busy events. -->
<div class="rounded-lg border border-zinc-800 bg-zinc-950">
<div class="flex items-center gap-2 border-b border-zinc-900 px-4 py-3">
<svg class="h-4 w-4 text-amber-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM10 4a1 1 0 011 1v5l3 1a1 1 0 11-.5 1.93l-3.5-1.16A1 1 0 019 10.83V5a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
<p class="text-sm font-medium text-zinc-200">
{{ data.stale_guests.length === 0 ? "Everyone's replied" : `${data.stale_guests.length} haven't replied yet` }}
</p>
</div>
<ul v-if="data.stale_guests.length > 0" class="space-y-1.5 p-4">
<li
v-for="g in data.stale_guests.slice(0, 10)"
:key="g.guest_id"
class="flex items-center justify-between rounded-md border border-zinc-800 bg-zinc-950 px-3 py-2 text-sm"
class="flex items-center justify-between rounded-md border border-zinc-800 bg-zinc-900/40 px-3 py-2 text-sm"
>
<div class="min-w-0 flex-1">
<div class="truncate font-medium text-zinc-100">{{ g.name }}</div>
<div class="truncate text-xs text-zinc-500">
{{ g.email || 'no email' }} · invited {{ fmtDate(g.invited_at) }}
<span v-if="g.has_opened" class="ml-1 text-amber-400">opened</span>
</div>
</div>
<span
v-if="g.has_opened"
class="ml-3 shrink-0 rounded-full bg-amber-900/30 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-amber-300"
title="Opened their link but hasn't responded"
>Opened</span>
</li>
<li v-if="data.stale_guests.length > 10" class="px-3 pt-1 text-xs text-zinc-500">
and {{ data.stale_guests.length - 10 }} more — export the CSV for the full list.
</li>
</ul>
<p v-if="data.stale_guests.length > 10" class="mt-2 text-xs text-zinc-500">
and {{ data.stale_guests.length - 10 }} more — export the CSV for the full list.
</p>
</div>
</div>
</section>
frontend/components/BrandingCard.vue
+127 -20
View File
@@ -46,6 +46,20 @@ const saving = ref(false)
const error = ref<string | null>(null)
const allowedFonts = ref<string[]>([])
// Toast state — auto-dismisses after a few seconds; the user can also
// click it to dismiss. Kind drives the colour: success = brand-green,
// error = red. We keep this local to the component rather than reaching
// for a global toast system (the same inline pattern is used on the
// account + billing pages already).
type Toast = { kind: 'success' | 'error'; text: string }
const toast = ref<Toast | null>(null)
let toastTimer: ReturnType<typeof setTimeout> | null = null
function showToast(t: Toast, ms = 4000) {
toast.value = t
if (toastTimer) clearTimeout(toastTimer)
toastTimer = setTimeout(() => { toast.value = null }, ms)
}
// Form state — strings so empty maps cleanly to "clear this field".
const primary = ref('')
const accent = ref('')
@@ -99,26 +113,67 @@ async function upload(file: File): Promise<string> {
return json.url as string
}
// Object URLs for the file the user just picked, shown in the preview
// pane while the upload is in flight. Once the server returns its real
// URL we swap to that and revoke the temporary one. Without this the
// preview stays empty until the round-trip completes, which feels broken
// even when uploads are fast.
const logoObjectURL = ref<string | null>(null)
const coverObjectURL = ref<string | null>(null)
function revokeIf(u: string | null) {
if (u) URL.revokeObjectURL(u)
}
async function onLogoSelect(e: Event) {
const file = (e.target as HTMLInputElement).files?.[0]
if (!file) return
revokeIf(logoObjectURL.value)
logoObjectURL.value = URL.createObjectURL(file)
uploadingLogo.value = true
error.value = null
try { logoURL.value = await upload(file) }
catch (e: any) { error.value = useErrMessage(e, 'Logo upload failed') }
finally { uploadingLogo.value = false }
try {
logoURL.value = await upload(file)
} catch (e: any) {
error.value = useErrMessage(e, 'Logo upload failed')
// Roll back the local preview so the host doesn't think the upload
// succeeded when it didn't.
revokeIf(logoObjectURL.value)
logoObjectURL.value = null
} finally {
uploadingLogo.value = false
}
}
async function onCoverSelect(e: Event) {
const file = (e.target as HTMLInputElement).files?.[0]
if (!file) return
revokeIf(coverObjectURL.value)
coverObjectURL.value = URL.createObjectURL(file)
uploadingCover.value = true
error.value = null
try { coverURL.value = await upload(file) }
catch (e: any) { error.value = useErrMessage(e, 'Cover upload failed') }
finally { uploadingCover.value = false }
try {
coverURL.value = await upload(file)
} catch (e: any) {
error.value = useErrMessage(e, 'Cover upload failed')
revokeIf(coverObjectURL.value)
coverObjectURL.value = null
} finally {
uploadingCover.value = false
}
}
// Resolved URLs the preview pane consumes. Prefer the server URL once it's
// landed; while the upload is in flight we show the local object URL so
// the host sees their image straight away.
const logoPreviewURL = computed(() => logoURL.value || logoObjectURL.value || '')
const coverPreviewURL = computed(() => coverURL.value || coverObjectURL.value || '')
onUnmounted(() => {
revokeIf(logoObjectURL.value)
revokeIf(coverObjectURL.value)
})
async function save() {
saving.value = true
error.value = null
@@ -134,8 +189,11 @@ async function save() {
greeting_message: greeting.value,
},
})
showToast({ kind: 'success', text: 'Branding saved.' })
} catch (e: any) {
error.value = useErrMessage(e, 'Could not save branding')
const msg = useErrMessage(e, 'Could not save branding')
error.value = msg
showToast({ kind: 'error', text: msg })
} finally {
saving.value = false
}
@@ -246,13 +304,14 @@ function fmtDate(iso?: string) {
:disabled="!canEdit || uploadingLogo"
@change="onLogoSelect"
/>
<div v-if="logoURL" class="mt-2 flex items-center gap-2">
<img :src="logoURL" alt="logo preview" class="h-12 w-12 rounded object-contain bg-zinc-900" />
<div v-if="logoPreviewURL" class="mt-2 flex items-center gap-2">
<img :src="logoPreviewURL" alt="logo preview" class="h-12 w-12 rounded object-contain bg-zinc-900" />
<span v-if="uploadingLogo" class="text-xs text-zinc-500">Uploading…</span>
<button
v-if="canEdit"
v-if="canEdit && !uploadingLogo"
type="button"
class="text-xs text-zinc-500 hover:text-red-300"
@click="logoURL = ''"
@click="logoURL = ''; revokeIf(logoObjectURL); logoObjectURL = null"
>Remove</button>
</div>
</div>
@@ -265,13 +324,14 @@ function fmtDate(iso?: string) {
:disabled="!canEdit || uploadingCover"
@change="onCoverSelect"
/>
<div v-if="coverURL" class="mt-2 flex items-center gap-2">
<img :src="coverURL" alt="cover preview" class="h-12 w-24 rounded object-cover" />
<div v-if="coverPreviewURL" class="mt-2 flex items-center gap-2">
<img :src="coverPreviewURL" alt="cover preview" class="h-12 w-24 rounded object-cover" />
<span v-if="uploadingCover" class="text-xs text-zinc-500">Uploading…</span>
<button
v-if="canEdit"
v-if="canEdit && !uploadingCover"
type="button"
class="text-xs text-zinc-500 hover:text-red-300"
@click="coverURL = ''"
@click="coverURL = ''; revokeIf(coverObjectURL); coverObjectURL = null"
>Remove</button>
</div>
</div>
@@ -290,23 +350,33 @@ function fmtDate(iso?: string) {
:style="previewStyle"
>
<div
v-if="coverURL"
v-if="coverPreviewURL"
class="h-28 w-full bg-cover bg-center"
:style="{ backgroundImage: `url(${coverURL})` }"
:style="{ backgroundImage: `url(${coverPreviewURL})` }"
></div>
<div v-else class="h-28 w-full" :style="{ background: 'var(--brand-primary)' }"></div>
<div class="p-4">
<div class="mb-3 flex items-center gap-3">
<img v-if="logoURL" :src="logoURL" alt="" class="h-10 w-10 rounded object-contain bg-zinc-900" />
<img v-if="logoPreviewURL" :src="logoPreviewURL" alt="" class="h-10 w-10 rounded object-contain bg-zinc-900" />
<div>
<p class="text-xs uppercase tracking-widest" :style="{ color: 'var(--brand-primary)' }">Invitation</p>
<!-- Eyebrow text uses the accent colour — visible on
every page, gives the host immediate feedback that
their accent choice landed. -->
<p class="text-xs uppercase tracking-widest" :style="{ color: 'var(--brand-accent)' }">Invitation</p>
<h3 class="text-xl font-semibold text-zinc-50">{{ eventName || 'Your event name' }}</h3>
</div>
</div>
<p class="mb-3 text-xs text-zinc-400">
{{ eventVenue || 'Venue' }} · {{ fmtDate(eventDate) || 'When' }}
</p>
<p v-if="greeting" class="mb-4 text-sm text-zinc-300">{{ greeting }}</p>
<!-- Greeting takes a 3px accent-colour left border so the
accent shows up even when the host hasn't customised
the message itself. -->
<p
v-if="greeting"
class="mb-4 rounded-r border-l-[3px] bg-zinc-900/40 py-1.5 pl-3 pr-2 text-sm text-zinc-300"
:style="{ borderColor: 'var(--brand-accent)' }"
>{{ greeting }}</p>
<button
type="button"
class="w-full rounded-md px-3 py-2 text-sm font-medium text-zinc-950"
@@ -315,7 +385,44 @@ function fmtDate(iso?: string) {
>Submit RSVP</button>
</div>
</div>
<p class="mt-2 text-xs text-zinc-500">
Primary fills the main button; accent picks out the eyebrow + greeting border.
</p>
</div>
</div>
<!-- Save feedback toast. Teleported to body so the fixed positioning
isn't trapped by the card's stacking context. Click to dismiss
early; auto-fades after 4s. -->
<Teleport to="body">
<Transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="translate-y-2 opacity-0"
enter-to-class="translate-y-0 opacity-100"
leave-active-class="transition duration-200 ease-in"
leave-from-class="translate-y-0 opacity-100"
leave-to-class="translate-y-2 opacity-0"
>
<button
v-if="toast"
type="button"
class="fixed bottom-6 right-6 z-50 flex max-w-sm items-center gap-2 rounded-lg border px-4 py-3 text-left text-sm shadow-lg backdrop-blur"
:class="toast.kind === 'success'
? 'border-brand-700/60 bg-brand-950/90 text-brand-100'
: 'border-red-800/60 bg-red-950/90 text-red-100'"
:aria-live="toast.kind === 'error' ? 'assertive' : 'polite'"
role="status"
@click="toast = null"
>
<svg v-if="toast.kind === 'success'" class="h-4 w-4 shrink-0 text-brand-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 5.296a1 1 0 010 1.408l-8 8a1 1 0 01-1.408 0l-4-4a1 1 0 011.408-1.408L8 12.592l7.296-7.296a1 1 0 011.408 0z" clip-rule="evenodd" />
</svg>
<svg v-else class="h-4 w-4 shrink-0 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM10 5a1 1 0 011 1v4a1 1 0 11-2 0V6a1 1 0 011-1zm0 8.5a1.25 1.25 0 110 2.5 1.25 1.25 0 010-2.5z" clip-rule="evenodd" />
</svg>
<span>{{ toast.text }}</span>
</button>
</Transition>
</Teleport>
</section>
</template>
frontend/components/SecurityCard.vue
+386
View File
@@ -0,0 +1,386 @@
<script setup lang="ts">
// Tier 2 Block G — security controls for one event.
//
// Three concerns share this card because they're conceptually one
// surface ("tune the fraud detector for this event"):
// 1. Thresholds — what score counts as medium/high/block.
// 2. Allowlist — CIDRs that bypass scoring entirely.
// 3. Feedback inbox — host verdicts on past flagged accesses (the
// seed corpus for the future ML model).
//
// Reads are viewer+; writes (PUT/POST/DELETE) are editor+. The server
// enforces the role gate; this component just hides write affordances
// from viewers so the buttons don't promise something a click would
// reject.
interface Thresholds {
medium: number
high: number
block: number
defaults: { medium: number; high: number; block: number }
}
interface AllowlistEntry {
event_id: string
cidr: string
label?: string
created_at: string
}
interface FeedbackEntry {
access_log_id: string
verdict: 'legitimate' | 'suspicious'
note?: string
created_at: string
}
const props = defineProps<{
eventId: string
yourRole?: 'owner' | 'editor' | 'viewer' | null
}>()
const canEdit = computed(() => props.yourRole === 'owner' || props.yourRole === 'editor')
// --- state ---
const loading = ref(true)
const error = ref<string | null>(null)
const saving = ref(false)
const thresholds = ref<Thresholds>({ medium: 30, high: 60, block: 85, defaults: { medium: 30, high: 60, block: 85 } })
const allowlist = ref<AllowlistEntry[]>([])
const feedback = ref<FeedbackEntry[]>([])
// Inline-add form for new CIDR rows.
const newCIDR = ref('')
const newLabel = ref('')
const addingCIDR = ref(false)
// Toast — same shape as the BrandingCard toast.
type Toast = { kind: 'success' | 'error'; text: string }
const toast = ref<Toast | null>(null)
let toastTimer: ReturnType<typeof setTimeout> | null = null
function showToast(t: Toast, ms = 4000) {
toast.value = t
if (toastTimer) clearTimeout(toastTimer)
toastTimer = setTimeout(() => { toast.value = null }, ms)
}
async function refresh() {
loading.value = true
error.value = null
try {
const [th, al, fb] = await Promise.all([
useApi<Thresholds>(`/events/${props.eventId}/security/thresholds`),
useApi<{ entries: AllowlistEntry[] }>(`/events/${props.eventId}/security/allowlist`),
useApi<{ feedback: FeedbackEntry[] }>(`/events/${props.eventId}/security/feedback`),
])
thresholds.value = th
allowlist.value = al.entries || []
feedback.value = fb.feedback || []
} catch (e: any) {
error.value = useErrMessage(e, 'Could not load security settings')
} finally {
loading.value = false
}
}
onMounted(refresh)
// --- thresholds ---
// Keep the three sliders mutually ordered: dragging medium past high
// pushes high; same for high past block. Without this the host can
// momentarily produce an invalid ordering and submit it — server
// would 400 but the form feels broken.
function clampOrder(which: 'medium' | 'high' | 'block') {
if (which === 'medium' && thresholds.value.medium > thresholds.value.high) {
thresholds.value.high = thresholds.value.medium
}
if (which === 'high') {
if (thresholds.value.high < thresholds.value.medium) thresholds.value.medium = thresholds.value.high
if (thresholds.value.high > thresholds.value.block) thresholds.value.block = thresholds.value.high
}
if (which === 'block' && thresholds.value.block < thresholds.value.high) {
thresholds.value.high = thresholds.value.block
}
}
async function saveThresholds() {
saving.value = true
try {
await useApi(`/events/${props.eventId}/security/thresholds`, {
method: 'PUT',
body: {
medium: thresholds.value.medium,
high: thresholds.value.high,
block: thresholds.value.block,
},
})
showToast({ kind: 'success', text: 'Thresholds saved.' })
} catch (e: any) {
showToast({ kind: 'error', text: useErrMessage(e, 'Could not save thresholds') })
} finally {
saving.value = false
}
}
function resetThresholds() {
thresholds.value.medium = thresholds.value.defaults.medium
thresholds.value.high = thresholds.value.defaults.high
thresholds.value.block = thresholds.value.defaults.block
}
// --- allowlist ---
async function addCIDR() {
if (!newCIDR.value.trim()) return
addingCIDR.value = true
try {
await useApi(`/events/${props.eventId}/security/allowlist`, {
method: 'POST',
body: { cidr: newCIDR.value.trim(), label: newLabel.value.trim() },
})
newCIDR.value = ''
newLabel.value = ''
showToast({ kind: 'success', text: 'Allowlist entry added.' })
await refresh()
} catch (e: any) {
showToast({ kind: 'error', text: useErrMessage(e, 'Could not add allowlist entry') })
} finally {
addingCIDR.value = false
}
}
async function removeCIDR(entry: AllowlistEntry) {
if (!confirm(`Remove allowlist entry ${entry.cidr}?`)) return
try {
await useApi(
`/events/${props.eventId}/security/allowlist?cidr=${encodeURIComponent(entry.cidr)}`,
{ method: 'DELETE' },
)
showToast({ kind: 'success', text: 'Allowlist entry removed.' })
await refresh()
} catch (e: any) {
showToast({ kind: 'error', text: useErrMessage(e, 'Could not remove allowlist entry') })
}
}
function fmtDate(iso?: string | null) {
if (!iso) return ''
try { return new Date(iso).toLocaleDateString() } catch { return iso }
}
</script>
<template>
<section class="card">
<header class="mb-3 flex items-center justify-between">
<div>
<h2 class="text-lg font-semibold">Security</h2>
<p class="text-xs text-zinc-500">
Tune the fraud detector for this event.
</p>
</div>
</header>
<p v-if="error" class="mb-3 text-sm text-red-400">{{ error }}</p>
<p v-if="loading" class="text-sm text-zinc-500">Loading security settings…</p>
<div v-else class="space-y-8">
<!-- Thresholds -->
<div>
<div class="mb-3 flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-zinc-100">Risk thresholds</h3>
<p class="text-xs text-zinc-500">
Scores at or above each cut-off land in that band. Defaults work for most events.
</p>
</div>
<div class="flex items-center gap-2">
<button
v-if="canEdit"
type="button"
class="text-xs text-zinc-400 hover:text-zinc-200"
@click="resetThresholds"
>Reset to defaults</button>
<button
v-if="canEdit"
type="button"
class="btn-primary text-sm"
:disabled="saving"
@click="saveThresholds"
>{{ saving ? 'Saving…' : 'Save thresholds' }}</button>
</div>
</div>
<!-- Visual band ribbon: each segment width matches its threshold
range. Gives the host an at-a-glance read of where their
cut-offs sit, instead of three abstract numbers. -->
<div class="mb-4 h-2 w-full overflow-hidden rounded-full bg-zinc-900">
<div class="flex h-full w-full">
<div :style="{ width: thresholds.medium + '%' }" class="bg-brand-700"></div>
<div :style="{ width: (thresholds.high - thresholds.medium) + '%' }" class="bg-amber-700"></div>
<div :style="{ width: (thresholds.block - thresholds.high) + '%' }" class="bg-orange-700"></div>
<div :style="{ width: (100 - thresholds.block) + '%' }" class="bg-red-700"></div>
</div>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
<label class="block text-sm">
<span class="mb-1 flex items-center justify-between text-xs text-zinc-400">
<span><span class="inline-block h-2 w-2 rounded-full bg-brand-500 mr-1.5"></span>Medium</span>
<span class="font-mono tabular-nums text-zinc-300">{{ thresholds.medium }}</span>
</span>
<input
v-model.number="thresholds.medium"
type="range"
min="0"
max="100"
:disabled="!canEdit"
class="w-full accent-brand-500"
@input="clampOrder('medium')"
/>
</label>
<label class="block text-sm">
<span class="mb-1 flex items-center justify-between text-xs text-zinc-400">
<span><span class="inline-block h-2 w-2 rounded-full bg-amber-500 mr-1.5"></span>High</span>
<span class="font-mono tabular-nums text-zinc-300">{{ thresholds.high }}</span>
</span>
<input
v-model.number="thresholds.high"
type="range"
min="0"
max="100"
:disabled="!canEdit"
class="w-full accent-amber-500"
@input="clampOrder('high')"
/>
</label>
<label class="block text-sm">
<span class="mb-1 flex items-center justify-between text-xs text-zinc-400">
<span><span class="inline-block h-2 w-2 rounded-full bg-red-500 mr-1.5"></span>Block</span>
<span class="font-mono tabular-nums text-zinc-300">{{ thresholds.block }}</span>
</span>
<input
v-model.number="thresholds.block"
type="range"
min="0"
max="100"
:disabled="!canEdit"
class="w-full accent-red-500"
@input="clampOrder('block')"
/>
</label>
</div>
</div>
<!-- Allowlist -->
<div>
<h3 class="mb-1 text-sm font-semibold text-zinc-100">IP allowlist</h3>
<p class="mb-3 text-xs text-zinc-500">
Networks that bypass scoring. Use for office Wi-Fi, the venue's
guest network, or a family router. Accepts a single IP or a CIDR
range. Score is forced to 0 for matching requests.
</p>
<div v-if="canEdit" class="mb-3 flex items-end gap-2">
<div class="flex-1">
<label class="label">CIDR</label>
<input
v-model="newCIDR"
type="text"
placeholder="203.0.113.0/24 or 10.0.0.42"
class="input font-mono text-sm"
/>
</div>
<div class="flex-1">
<label class="label">Label (optional)</label>
<input
v-model="newLabel"
type="text"
placeholder="Office Wi-Fi"
class="input text-sm"
/>
</div>
<button
type="button"
class="btn-primary text-sm"
:disabled="addingCIDR || !newCIDR.trim()"
@click="addCIDR"
>{{ addingCIDR ? 'Adding…' : 'Add' }}</button>
</div>
<ul v-if="allowlist.length" class="space-y-1.5">
<li
v-for="entry in allowlist"
:key="entry.cidr"
class="flex items-center justify-between rounded-md border border-zinc-800 bg-zinc-950 px-3 py-2"
>
<div class="min-w-0 flex-1">
<p class="font-mono text-sm text-zinc-100">{{ entry.cidr }}</p>
<p class="text-xs text-zinc-500">
{{ entry.label || 'no label' }} · added {{ fmtDate(entry.created_at) }}
</p>
</div>
<button
v-if="canEdit"
type="button"
class="text-xs text-zinc-400 hover:text-red-300"
@click="removeCIDR(entry)"
>Remove</button>
</li>
</ul>
<p v-else class="text-sm text-zinc-500">No allowlist entries yet.</p>
</div>
<!-- Feedback inbox — read-only summary; the actual "mark legitimate / suspicious"
lives on the live monitor / activity feed where the host sees the
access in context. This is the audit trail. -->
<div>
<h3 class="mb-1 text-sm font-semibold text-zinc-100">Verdict history</h3>
<p class="mb-3 text-xs text-zinc-500">
Your previous "legitimate" / "suspicious" marks on flagged accesses. Seeds the model and silences known false positives.
</p>
<ul v-if="feedback.length" class="space-y-1.5">
<li
v-for="f in feedback.slice(0, 10)"
:key="f.access_log_id"
class="flex items-center justify-between rounded-md border border-zinc-800 bg-zinc-950 px-3 py-2 text-sm"
>
<div class="min-w-0 flex-1">
<p class="text-zinc-200">
Marked <strong :class="f.verdict === 'legitimate' ? 'text-brand-300' : 'text-red-300'">{{ f.verdict }}</strong>
<span class="ml-1 text-xs text-zinc-500">· {{ fmtDate(f.created_at) }}</span>
</p>
<p v-if="f.note" class="truncate text-xs text-zinc-500">{{ f.note }}</p>
</div>
</li>
<li v-if="feedback.length > 10" class="text-xs text-zinc-500">
and {{ feedback.length - 10 }} more.
</li>
</ul>
<p v-else class="text-sm text-zinc-500">No verdicts yet.</p>
</div>
</div>
<Teleport to="body">
<Transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="translate-y-2 opacity-0"
enter-to-class="translate-y-0 opacity-100"
leave-active-class="transition duration-200 ease-in"
leave-from-class="translate-y-0 opacity-100"
leave-to-class="translate-y-2 opacity-0"
>
<button
v-if="toast"
type="button"
class="fixed bottom-6 right-6 z-50 flex max-w-sm items-center gap-2 rounded-lg border px-4 py-3 text-left text-sm shadow-lg backdrop-blur"
:class="toast.kind === 'success'
? 'border-brand-700/60 bg-brand-950/90 text-brand-100'
: 'border-red-800/60 bg-red-950/90 text-red-100'"
role="status"
@click="toast = null"
>{{ toast.text }}</button>
</Transition>
</Teleport>
</section>
</template>
frontend/components/TeamCard.vue
+1 -1
View File
@@ -127,7 +127,7 @@ function fmtDate(iso?: string | null) {
<template>
<section class="card">
<header class="mb-3 flex items-center justify-between">
<h2 class="text-lg font-semibold">Team</h2>
<h2 class="text-lg font-semibold">Collaborators</h2>
<button
v-if="isOwner"
type="button"