Kwaku Danso
dee3d738ac
The previous pass made the labels friendlier but didn't actually explain what the Gate does. A real user (correctly) read "trusted networks" as "any guest outside my IP is treated as fraud," which is the opposite of what's happening — and missed the entire value prop: stopping forwarded invitation links from being used by uninvited people. That's the central pain GuestGuard solves; the Gate page has to lead with it, not bury it under controls. What changed on the Gate card: - Big value-prop block at the top in plain language: "Every guest gets their own personal invitation link. The Gate watches each link and stops forwarded or shared invitations from being used by people who weren't on your list." Also explicit: "Real invited guests don't notice it. You don't need to set anything up — the Gate is on by default with sensible settings." - New "How does the Gate work?" collapsible explainer with a 4-step walkthrough using Aunty Patience as the protagonist. Covers what signals the Gate looks at, when guests *do* get flagged, and the reassurance that normal day-to-day variation (Wi-Fi → mobile data, changing rooms) doesn't trigger anything. - Preset descriptions rewritten to talk about the actual pain instead of generic strictness levels. "Stops forwarded links from being used by people who weren't invited" lands much harder than "Recommended for most parties." - Trusted networks section opens with an explicit "What this is and isn't" panel that directly addresses the misconception: adding a network here is a *speed-up* for guests on your Wi-Fi, NOT a whitelist that classifies everyone else as suspicious. Empty state reads "No trusted networks — and that's fine. The Gate is doing its job" so a host doesn't feel they've missed a setup step. - Pill on the section header tags it "Optional · most hosts don't need this" to drop its prominence. The button copy went from "Use my current network" (which read like "approve myself") to "Trust the network I'm on right now." No backend changes. Internal Go names (FraudThresholds, /security/* endpoints) untouched — never user-visible, renaming would churn for zero end-user benefit. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
607 lines
25 KiB
Vue
607 lines
25 KiB
Vue
<script setup lang="ts">
|
||
// Tier 2 Block G — "Gate" for one event. This is the user-facing rebrand
|
||
// of what the internal codebase still calls the fraud detector.
|
||
//
|
||
// The metaphor is the bouncer at the door of an event: a host tells the
|
||
// gate how strict to be, lists a few "trusted places" their guests will
|
||
// be arriving from, and reviews any decisions the gate has already made.
|
||
// No CIDRs, no risk scores, no sliders by default — those live under an
|
||
// Advanced disclosure for the rare power user.
|
||
|
||
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
|
||
}
|
||
|
||
// Friendly presets. Each maps to a (medium, high, block) triple. The
|
||
// preset detector picks the one whose block-threshold is closest to the
|
||
// current value; if nothing matches we render "Custom".
|
||
//
|
||
// Tuning rationale:
|
||
// - Relaxed: only obvious crashers stopped. block=95 = "needs near-perfect
|
||
// confidence to refuse".
|
||
// - Balanced: matches the engineering defaults (30/60/85). Most events.
|
||
// - Strict: tight check for private events. block=70.
|
||
// - Very strict: VIP-list level. block=55 — even mild signal mismatches
|
||
// get refused.
|
||
type PresetId = 'relaxed' | 'balanced' | 'strict' | 'very_strict' | 'custom'
|
||
interface Preset {
|
||
id: PresetId
|
||
label: string
|
||
description: string
|
||
medium: number
|
||
high: number
|
||
block: number
|
||
}
|
||
const PRESETS: Preset[] = [
|
||
{
|
||
id: 'relaxed',
|
||
label: 'Relaxed',
|
||
description: "Casual party — fine if friends share their link with each other.",
|
||
medium: 50, high: 80, block: 95,
|
||
},
|
||
{
|
||
id: 'balanced',
|
||
label: 'Balanced',
|
||
description: "Recommended. Stops forwarded links from being used by people who weren't invited, without nagging anyone normal.",
|
||
medium: 30, high: 60, block: 85,
|
||
},
|
||
{
|
||
id: 'strict',
|
||
label: 'Strict',
|
||
description: "Wedding or private event — uninvited plus-ones are a problem and the guest list matters.",
|
||
medium: 25, high: 50, block: 70,
|
||
},
|
||
{
|
||
id: 'very_strict',
|
||
label: 'Very strict',
|
||
description: "VIP or high-profile guest list. Even small mismatches get flagged for your review.",
|
||
medium: 15, high: 35, block: 55,
|
||
},
|
||
]
|
||
|
||
const props = defineProps<{
|
||
eventId: string
|
||
yourRole?: 'owner' | 'editor' | 'viewer' | null
|
||
}>()
|
||
|
||
const canEdit = computed(() => props.yourRole === 'owner' || props.yourRole === 'editor')
|
||
|
||
const config = useRuntimeConfig()
|
||
const auth = useAuth()
|
||
|
||
// --- 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[]>([])
|
||
|
||
const showAdvanced = ref(false)
|
||
const showAddNetwork = ref(false)
|
||
const newNetworkIP = ref('')
|
||
const newNetworkLabel = ref('')
|
||
const addingNetwork = ref(false)
|
||
const detectingIP = ref(false)
|
||
|
||
// Toast — same pattern used elsewhere.
|
||
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 gate settings')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
onMounted(refresh)
|
||
|
||
// Which preset does the current threshold triple correspond to?
|
||
// Exact match wins; otherwise "Custom". Selecting a preset writes its
|
||
// triple over the current values and saves on the next click.
|
||
const currentPreset = computed<PresetId>(() => {
|
||
const t = thresholds.value
|
||
for (const p of PRESETS) {
|
||
if (p.medium === t.medium && p.high === t.high && p.block === t.block) {
|
||
return p.id
|
||
}
|
||
}
|
||
return 'custom'
|
||
})
|
||
|
||
async function selectPreset(p: Preset) {
|
||
if (!canEdit.value) return
|
||
thresholds.value.medium = p.medium
|
||
thresholds.value.high = p.high
|
||
thresholds.value.block = p.block
|
||
await saveThresholds(true)
|
||
}
|
||
|
||
// Keep the three sliders ordered while the user drags. Without this you
|
||
// can briefly create an invalid ordering and the server 400s on save.
|
||
function clampOrder(which: 'medium' | 'high' | 'block') {
|
||
const t = thresholds.value
|
||
if (which === 'medium' && t.medium > t.high) t.high = t.medium
|
||
if (which === 'high') {
|
||
if (t.high < t.medium) t.medium = t.high
|
||
if (t.high > t.block) t.block = t.high
|
||
}
|
||
if (which === 'block' && t.block < t.high) t.high = t.block
|
||
}
|
||
|
||
async function saveThresholds(silent = false) {
|
||
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,
|
||
},
|
||
})
|
||
if (!silent) showToast({ kind: 'success', text: 'Strictness saved.' })
|
||
} catch (e: any) {
|
||
showToast({ kind: 'error', text: useErrMessage(e, 'Could not save') })
|
||
} finally {
|
||
saving.value = false
|
||
}
|
||
}
|
||
|
||
// --- trusted networks ---
|
||
|
||
// "Use my current network" — pulls the host's apparent IP from the API,
|
||
// widens IPv4 to /24 (typical residential block) and lets the user
|
||
// confirm before saving. /24 is a reasonable default: covers your whole
|
||
// home network even with ISP-shuffled addresses, doesn't open up the
|
||
// entire internet.
|
||
async function detectCurrentNetwork() {
|
||
detectingIP.value = true
|
||
try {
|
||
const res = await useApi<{ ip: string }>('/me/public-ip')
|
||
const ip = res.ip
|
||
if (!ip) {
|
||
showToast({ kind: 'error', text: 'Could not detect your IP.' })
|
||
return
|
||
}
|
||
if (ip.includes(':')) {
|
||
// IPv6 — too risky to auto-widen at /64; default to single-host.
|
||
newNetworkIP.value = ip
|
||
} else {
|
||
const parts = ip.split('.')
|
||
if (parts.length === 4) {
|
||
newNetworkIP.value = `${parts[0]}.${parts[1]}.${parts[2]}.0/24`
|
||
} else {
|
||
newNetworkIP.value = ip
|
||
}
|
||
}
|
||
if (!newNetworkLabel.value) newNetworkLabel.value = 'My network'
|
||
showAddNetwork.value = true
|
||
} catch (e: any) {
|
||
showToast({ kind: 'error', text: useErrMessage(e, 'Could not detect your IP') })
|
||
} finally {
|
||
detectingIP.value = false
|
||
}
|
||
}
|
||
|
||
async function addNetwork() {
|
||
if (!newNetworkIP.value.trim()) return
|
||
addingNetwork.value = true
|
||
try {
|
||
await useApi(`/events/${props.eventId}/security/allowlist`, {
|
||
method: 'POST',
|
||
body: { cidr: newNetworkIP.value.trim(), label: newNetworkLabel.value.trim() || 'My network' },
|
||
})
|
||
newNetworkIP.value = ''
|
||
newNetworkLabel.value = ''
|
||
showAddNetwork.value = false
|
||
showToast({ kind: 'success', text: 'Trusted network added.' })
|
||
await refresh()
|
||
} catch (e: any) {
|
||
showToast({ kind: 'error', text: useErrMessage(e, 'Could not add network') })
|
||
} finally {
|
||
addingNetwork.value = false
|
||
}
|
||
}
|
||
|
||
async function removeNetwork(entry: AllowlistEntry) {
|
||
if (!confirm(`Stop trusting ${entry.label || entry.cidr}?`)) return
|
||
try {
|
||
await useApi(
|
||
`/events/${props.eventId}/security/allowlist?cidr=${encodeURIComponent(entry.cidr)}`,
|
||
{ method: 'DELETE' },
|
||
)
|
||
showToast({ kind: 'success', text: 'Trusted network removed.' })
|
||
await refresh()
|
||
} catch (e: any) {
|
||
showToast({ kind: 'error', text: useErrMessage(e, 'Could not remove') })
|
||
}
|
||
}
|
||
|
||
function fmtDate(iso?: string | null) {
|
||
if (!iso) return ''
|
||
try { return new Date(iso).toLocaleDateString() } catch { return iso }
|
||
}
|
||
|
||
// Friendly relabelling for verdict history.
|
||
function verdictLabel(v: string) {
|
||
return v === 'legitimate' ? 'Cleared by host' : 'Flagged by host'
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="card">
|
||
<header class="mb-3 flex items-center justify-between">
|
||
<div>
|
||
<h2 class="text-lg font-semibold">Gate</h2>
|
||
<p class="text-xs text-zinc-500">Keeps your guest list yours.</p>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Value-prop paragraph. This is the *point* of the feature in plain
|
||
words. The user named the actual pain ("preventing multiple sharing
|
||
of events to uninvited guests") — that phrase lives here verbatim. -->
|
||
<div class="mb-4 rounded-lg border border-brand-700/40 bg-brand-500/[0.04] p-4 text-sm leading-relaxed">
|
||
<p class="text-zinc-200">
|
||
Every guest gets their own personal invitation link — only meant for them.
|
||
The <strong class="text-brand-300">Gate</strong> watches each link in the
|
||
background and stops <strong>forwarded or shared invitations</strong>
|
||
from being used by people who weren't on your list.
|
||
</p>
|
||
<p class="mt-2 text-xs text-zinc-400">
|
||
Real invited guests don't notice it. You don't need to set anything up
|
||
for it to work — the Gate is on by default with sensible settings.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- "How does this work?" — collapsed by default so the page stays
|
||
scannable. The expander walks through the actual mechanism in
|
||
plain language so curious / sceptical hosts can see what we're
|
||
doing without reading docs. -->
|
||
<details class="group mb-6 rounded-lg border border-zinc-800 bg-zinc-950">
|
||
<summary class="flex cursor-pointer items-center justify-between p-3 text-sm font-medium text-zinc-200">
|
||
<span class="flex items-center gap-2">
|
||
<svg class="h-4 w-4 text-zinc-500" 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 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" />
|
||
</svg>
|
||
How does the Gate work?
|
||
</span>
|
||
<svg class="h-4 w-4 text-zinc-500 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||
</svg>
|
||
</summary>
|
||
<div class="space-y-3 border-t border-zinc-900 p-4 text-sm text-zinc-300">
|
||
<ol class="space-y-3">
|
||
<li class="flex gap-3">
|
||
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-500/15 text-xs font-semibold text-brand-300">1</span>
|
||
<p>
|
||
When you send Aunty Patience her invitation, she gets her own personal link.
|
||
That link only belongs to her.
|
||
</p>
|
||
</li>
|
||
<li class="flex gap-3">
|
||
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-500/15 text-xs font-semibold text-brand-300">2</span>
|
||
<p>
|
||
The first time Aunty opens her link, the Gate quietly remembers a few details:
|
||
her phone or browser, the general area she connected from, and the network shape.
|
||
That becomes her "I'm me" signature.
|
||
</p>
|
||
</li>
|
||
<li class="flex gap-3">
|
||
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-500/15 text-xs font-semibold text-brand-300">3</span>
|
||
<p>
|
||
Every time someone clicks Aunty's link after that — including Aunty herself —
|
||
the Gate compares them to her signature. Same phone, similar location?
|
||
They sail through. No signature yet? They become Aunty's signature on the first visit.
|
||
</p>
|
||
</li>
|
||
<li class="flex gap-3">
|
||
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-500/15 text-xs font-semibold text-brand-300">4</span>
|
||
<p>
|
||
If someone with a totally different phone on a totally different network tries to
|
||
use Aunty's link — like a friend Aunty forwarded it to — the Gate notices. Depending
|
||
on your strictness setting it'll either flag them for your review, or refuse them
|
||
outright.
|
||
</p>
|
||
</li>
|
||
</ol>
|
||
<p class="rounded-md border border-zinc-800 bg-zinc-900/60 p-3 text-xs text-zinc-400">
|
||
<strong class="text-zinc-300">Worth knowing:</strong> guests can switch from mobile data
|
||
to Wi-Fi or change rooms without being flagged — the Gate only cares about
|
||
<em>meaningful</em> differences from the original visit, not normal day-to-day variation.
|
||
If a real guest does ever get flagged (it happens), you can clear them with one click
|
||
in <em>Recent reviews</em> below.
|
||
</p>
|
||
</div>
|
||
</details>
|
||
|
||
<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 gate…</p>
|
||
|
||
<div v-else class="space-y-8">
|
||
<!-- Strictness presets -->
|
||
<div>
|
||
<h3 class="mb-1 text-sm font-semibold text-zinc-100">How strict should the Gate be?</h3>
|
||
<p class="mb-3 text-xs text-zinc-500">
|
||
Pick the option that fits the kind of event you're hosting. You can change it any time.
|
||
</p>
|
||
|
||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||
<button
|
||
v-for="p in PRESETS"
|
||
:key="p.id"
|
||
type="button"
|
||
:disabled="!canEdit || saving"
|
||
:class="[
|
||
'rounded-lg border p-3 text-left transition disabled:cursor-not-allowed disabled:opacity-60',
|
||
currentPreset === p.id
|
||
? 'border-brand-700/60 bg-brand-500/10 ring-1 ring-brand-500/30'
|
||
: 'border-zinc-800 bg-zinc-950 hover:border-zinc-700 hover:bg-zinc-900',
|
||
]"
|
||
@click="selectPreset(p)"
|
||
>
|
||
<div class="flex items-center justify-between">
|
||
<span :class="['text-sm font-medium', currentPreset === p.id ? 'text-brand-200' : 'text-zinc-100']">
|
||
{{ p.label }}
|
||
</span>
|
||
<span
|
||
v-if="currentPreset === p.id"
|
||
class="text-xs font-medium uppercase tracking-wider text-brand-400"
|
||
>Active</span>
|
||
</div>
|
||
<p class="mt-1 text-xs text-zinc-500">{{ p.description }}</p>
|
||
</button>
|
||
</div>
|
||
|
||
<p v-if="currentPreset === 'custom'" class="mt-3 rounded-md border border-amber-900/40 bg-amber-950/10 px-3 py-2 text-xs text-amber-300">
|
||
You're running with custom strictness settings (set under Advanced).
|
||
</p>
|
||
|
||
<!-- Advanced — sliders for power users who want to dial individual bands. -->
|
||
<details class="group mt-4 rounded-lg border border-zinc-800 bg-zinc-950">
|
||
<summary class="flex cursor-pointer items-center justify-between p-3 text-sm text-zinc-300">
|
||
<span>Advanced strictness controls</span>
|
||
<svg class="h-4 w-4 text-zinc-500 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||
</svg>
|
||
</summary>
|
||
<div class="space-y-4 border-t border-zinc-900 p-4">
|
||
<p class="text-xs text-zinc-500">
|
||
These directly drive the band thresholds (0–100). The presets above just write
|
||
sensible triples for you.
|
||
</p>
|
||
<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>Watch from</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"
|
||
@change="saveThresholds()"
|
||
@input="clampOrder('medium')" />
|
||
</label>
|
||
<label class="block text-sm">
|
||
<span class="mb-1 flex items-center justify-between text-xs text-zinc-400">
|
||
<span>Flag from</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"
|
||
@change="saveThresholds()"
|
||
@input="clampOrder('high')" />
|
||
</label>
|
||
<label class="block text-sm">
|
||
<span class="mb-1 flex items-center justify-between text-xs text-zinc-400">
|
||
<span>Refuse from</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"
|
||
@change="saveThresholds()"
|
||
@input="clampOrder('block')" />
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<!-- Trusted networks -->
|
||
<div>
|
||
<div class="mb-2 flex items-center gap-2">
|
||
<h3 class="text-sm font-semibold text-zinc-100">Trusted networks</h3>
|
||
<span class="rounded-full border border-zinc-700 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-zinc-500">
|
||
Optional · most hosts don't need this
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Direct address to the misconception the user raised. "Does that
|
||
mean everyone outside is treated as fraud?" — explicit "no".
|
||
This sits *above* the inputs so a host can't miss it. -->
|
||
<div class="mb-3 rounded-md border border-zinc-800 bg-zinc-950 p-3 text-xs text-zinc-400">
|
||
<p class="mb-1 text-zinc-300">
|
||
<strong>What this is and isn't:</strong>
|
||
</p>
|
||
<p class="mb-2">
|
||
Adding a network here tells the Gate "always wave through clicks coming from
|
||
this Wi-Fi — they're already with me." It's useful when you're hosting at home
|
||
or the office and your guests will connect through your network.
|
||
</p>
|
||
<p>
|
||
<strong class="text-zinc-300">It doesn't change how anyone else is treated.</strong>
|
||
Guests connecting from their own homes, mobile data, or anywhere else still get
|
||
the regular check — they're not suspected of anything by default. The Gate works
|
||
perfectly well with this list empty.
|
||
</p>
|
||
</div>
|
||
|
||
<div v-if="canEdit" class="mb-3 flex flex-wrap items-center gap-2">
|
||
<button
|
||
type="button"
|
||
class="btn-ghost text-sm"
|
||
:disabled="detectingIP"
|
||
@click="detectCurrentNetwork"
|
||
>
|
||
<svg class="mr-1 inline-block h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12zm0-3a3 3 0 100-6 3 3 0 000 6z" />
|
||
</svg>
|
||
{{ detectingIP ? 'Detecting…' : 'Trust the network I’m on right now' }}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="text-sm text-zinc-400 hover:text-zinc-200"
|
||
@click="showAddNetwork = !showAddNetwork"
|
||
>or add one manually</button>
|
||
</div>
|
||
|
||
<!-- Manual add form — only shown when the host opens it. Inputs
|
||
are labelled in plain language; the placeholder hints at the
|
||
shape but the user can paste an IP, an IP/24, etc., and the
|
||
backend canonicalises. -->
|
||
<div v-if="canEdit && showAddNetwork" class="mb-3 rounded-md border border-zinc-800 bg-zinc-950 p-3">
|
||
<div class="grid grid-cols-1 gap-3 md:grid-cols-[2fr_2fr_auto]">
|
||
<div>
|
||
<label class="label">Network</label>
|
||
<input
|
||
v-model="newNetworkIP"
|
||
type="text"
|
||
class="input font-mono text-sm"
|
||
placeholder="e.g. 203.0.113.0/24 or 203.0.113.5"
|
||
/>
|
||
<p class="mt-1 text-xs text-zinc-500">
|
||
Single IP or a range. <code class="text-zinc-400">/24</code> covers a typical home or office.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<label class="label">Name</label>
|
||
<input
|
||
v-model="newNetworkLabel"
|
||
type="text"
|
||
class="input text-sm"
|
||
placeholder="Office Wi-Fi"
|
||
/>
|
||
</div>
|
||
<div class="flex items-end">
|
||
<button
|
||
type="button"
|
||
class="btn-primary text-sm"
|
||
:disabled="addingNetwork || !newNetworkIP.trim()"
|
||
@click="addNetwork"
|
||
>{{ addingNetwork ? 'Adding…' : 'Add' }}</button>
|
||
</div>
|
||
</div>
|
||
</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="text-sm font-medium text-zinc-100">{{ entry.label || 'Trusted network' }}</p>
|
||
<p class="font-mono text-xs text-zinc-500">{{ entry.cidr }} · added {{ fmtDate(entry.created_at) }}</p>
|
||
</div>
|
||
<button
|
||
v-if="canEdit"
|
||
type="button"
|
||
class="text-xs text-zinc-400 hover:text-red-300"
|
||
@click="removeNetwork(entry)"
|
||
>Remove</button>
|
||
</li>
|
||
</ul>
|
||
<p v-else class="text-sm text-zinc-500">
|
||
No trusted networks — and that's fine. The Gate is doing its job.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Recent gate decisions -->
|
||
<div>
|
||
<h3 class="mb-1 text-sm font-semibold text-zinc-100">Recent gate decisions</h3>
|
||
<p class="mb-3 text-xs text-zinc-500">
|
||
Reviews you've made on flagged guests. Helps the gate learn what's normal for your event.
|
||
</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">
|
||
<strong :class="f.verdict === 'legitimate' ? 'text-brand-300' : 'text-red-300'">
|
||
{{ verdictLabel(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 decisions to review yet — the gate hasn't flagged anyone.</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>
|