feat(tier2): event branding + UX polish — Block D
Backend
- Migration 0010 adds event_branding (one row per event; all fields
nullable so a brand-new event renders with defaults)
- BrandingRepo with COALESCE/NULLIF upsert semantics: nil pointer
preserves the existing value, "" clears the field to NULL
- internal/uploads package: ImageStore interface + LocalFSStore (dev),
pure-stdlib decode + re-encode that strips EXIF and rejects anything
that isn't valid JPEG/PNG. Size cap 2 MB, random 16-byte filenames
- GET /events/{id}/branding (viewer+) returns the row plus the
AllowedFonts list so the frontend picker stays in sync
- PUT /events/{id}/branding (editor+) validates hex colours, font
allowlist, and refuses image URLs whose path doesn't start with
/uploads/ (blocks arbitrary-origin <img> smuggling on guest pages)
- POST /uploads/image (authed) → fresh CDN URL; GET /uploads/{file}
serves with year-long cache (immutable random names)
- GET /access/{token} now embeds the host's branding so the RSVP page
can render in their colours/font with their logo + cover
- docker-compose mounts a named volume for uploads
- Custom-domain sub-block deferred to Tier 3 per the plan
Frontend
- BrandingCard.vue: colour pickers, font dropdown, logo + cover upload
with progressive disclosure, live preview pane that re-renders on
every keystroke
- RSVP page applies branding via CSS vars at the section root, so
primary colour theme + font cascade through every child card. Cover
image renders as a banner above the form; logo lands in the header
- Submit button background switches to var(--brand-primary) when set
- Mounted on the event detail page below the guests block
Plus the small UX fixes from the e2e walkthrough:
- Nav: dropped the top-level "Events" link; the logo doubles as the
home affordance (→ /dashboard when signed in, → / otherwise). Account
+ Billing + Sign out live under a profile dropdown (avatar with
initials, opens on click, closes on outside-click / Esc / route nav)
- Renamed "Back to dashboard" → "Back to events" across event detail,
billing, account, and new-event pages
Tests
- TestBrandingGetReturnsDefaults / TestBrandingPutPersists /
TestBrandingPutRejectsBadInputs / TestUploadAndServeImage /
TestUploadRejectsNonImage — all pass
- Domain tests for IsValidHexColor + IsAllowedFont
- Full integration suite green (176s)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Kwaku Danso
@@ -0,0 +1,203 @@
|
||||
<script setup lang="ts">
|
||||
// Account page — owns the data-export + account-deletion controls that
|
||||
// used to sit on the billing tab. Privacy concerns ≠ billing concerns;
|
||||
// hosts shouldn't have to scroll past pricing to find "delete my account".
|
||||
definePageMeta({ middleware: ['auth'] })
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuth()
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
const exporting = ref(false)
|
||||
const deleteConfirmOpen = ref(false)
|
||||
const deleteConfirmation = ref('')
|
||||
const deleting = ref(false)
|
||||
const deleteError = ref<string | null>(null)
|
||||
const toast = ref<string | null>(null)
|
||||
let toastTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function showToast(text: string) {
|
||||
toast.value = text
|
||||
if (toastTimer) clearTimeout(toastTimer)
|
||||
toastTimer = setTimeout(() => { toast.value = null }, 5000)
|
||||
}
|
||||
|
||||
async function exportData() {
|
||||
exporting.value = true
|
||||
try {
|
||||
const apiBase = config.public.apiBase as string
|
||||
const token = auth.liveAccessToken()
|
||||
// Plain fetch (not useApi) so the response is treated as a download.
|
||||
const res = await fetch(`${apiBase}/me/data-export`, {
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : {},
|
||||
credentials: 'include',
|
||||
})
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
||||
const blob = await res.blob()
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = 'guestguard-data-export.json'
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
showToast('Export downloaded.')
|
||||
} catch (e: any) {
|
||||
showToast(useErrMessage(e, 'Export failed'))
|
||||
} finally {
|
||||
exporting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDelete() {
|
||||
deleting.value = true
|
||||
deleteError.value = null
|
||||
try {
|
||||
await useApi('/me', { method: 'DELETE' })
|
||||
// Soft-delete revoked our refresh token; clear local session and
|
||||
// bounce to the marketing landing.
|
||||
auth.clearSession()
|
||||
await router.push('/')
|
||||
} catch (e: any) {
|
||||
deleteError.value = useErrMessage(e, 'Could not delete account')
|
||||
} finally {
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="space-y-6">
|
||||
<div>
|
||||
<NuxtLink to="/dashboard" class="mb-2 inline-block text-sm text-zinc-400 hover:text-zinc-200">
|
||||
← Back to events
|
||||
</NuxtLink>
|
||||
<h1 class="text-2xl font-semibold">Account</h1>
|
||||
<p class="mt-1 text-sm text-zinc-400">
|
||||
Manage your profile and personal data.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ClientOnly>
|
||||
<!-- Profile summary -->
|
||||
<div class="card">
|
||||
<h2 class="mb-3 text-lg font-semibold">Profile</h2>
|
||||
<dl class="grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
|
||||
<div>
|
||||
<dt class="text-xs uppercase tracking-wider text-zinc-500">Name</dt>
|
||||
<dd class="mt-1 text-zinc-100">{{ auth.user.value?.name || '—' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-xs uppercase tracking-wider text-zinc-500">Email</dt>
|
||||
<dd class="mt-1 break-all text-zinc-100">{{ auth.user.value?.email || '—' }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<!-- Your data -->
|
||||
<div class="card">
|
||||
<h2 class="mb-1 text-lg font-semibold">Your data</h2>
|
||||
<p class="mb-4 text-xs text-zinc-500">
|
||||
Export a copy of everything we hold about you, or delete your account.
|
||||
</p>
|
||||
<div class="space-y-3">
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center justify-between rounded-md border border-zinc-700 bg-zinc-950 px-3 py-3 text-left transition hover:border-zinc-500 hover:bg-zinc-900 disabled:opacity-50"
|
||||
:disabled="exporting"
|
||||
@click="exportData"
|
||||
>
|
||||
<span>
|
||||
<span class="block text-sm font-medium text-zinc-100">Export my data</span>
|
||||
<span class="block text-xs text-zinc-500">
|
||||
Download a JSON file with your events, guests, RSVPs, and account info.
|
||||
</span>
|
||||
</span>
|
||||
<span class="text-xs text-zinc-400">{{ exporting ? '…' : '↓' }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center justify-between rounded-md border border-red-800/40 bg-red-950/10 px-3 py-3 text-left transition hover:border-red-700 hover:bg-red-950/20"
|
||||
@click="deleteConfirmOpen = true"
|
||||
>
|
||||
<span>
|
||||
<span class="block text-sm font-medium text-red-300">Delete my account</span>
|
||||
<span class="block text-xs text-red-400/70">
|
||||
Soft-deleted immediately, permanently erased after 30 days. You'll be signed out everywhere.
|
||||
</span>
|
||||
</span>
|
||||
<span class="text-xs text-red-400">→</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #fallback>
|
||||
<div class="card text-sm text-zinc-500">Loading…</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
|
||||
<!-- Delete-account confirmation -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="deleteConfirmOpen"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
|
||||
@click.self="deleteConfirmOpen = false"
|
||||
>
|
||||
<div
|
||||
role="alertdialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="del-acct-title"
|
||||
class="w-full max-w-md rounded-lg border border-zinc-800 bg-zinc-900 p-5 shadow-2xl"
|
||||
>
|
||||
<h3 id="del-acct-title" class="mb-1 text-base font-semibold">Delete account?</h3>
|
||||
<p class="mb-3 text-sm text-zinc-400">
|
||||
Your account will be soft-deleted now and permanently erased
|
||||
after 30 days. All your events, guests, and RSVP history go
|
||||
with it. You'll be signed out from every device.
|
||||
</p>
|
||||
<p class="mb-3 text-xs text-zinc-500">
|
||||
Type <code class="rounded bg-zinc-800 px-1 py-0.5 font-mono text-zinc-300">delete</code>
|
||||
to confirm.
|
||||
</p>
|
||||
<input
|
||||
v-model="deleteConfirmation"
|
||||
type="text"
|
||||
placeholder="delete"
|
||||
class="input mb-3 font-mono"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="text-sm text-zinc-400 hover:text-zinc-200" :disabled="deleting" @click="deleteConfirmOpen = false">Cancel</button>
|
||||
<button
|
||||
class="rounded-md bg-red-500/90 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-red-500 disabled:opacity-40"
|
||||
:disabled="deleting || deleteConfirmation.trim().toLowerCase() !== 'delete'"
|
||||
@click="confirmDelete"
|
||||
>
|
||||
{{ deleting ? 'Deleting…' : 'Delete forever' }}
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="deleteError" class="mt-3 text-sm text-red-400">{{ deleteError }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<!-- Toast -->
|
||||
<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 max-w-sm rounded-lg border border-brand-700/60 bg-brand-950/90 px-4 py-3 text-left text-sm text-brand-100 shadow-lg backdrop-blur"
|
||||
@click="toast = null"
|
||||
>
|
||||
<span aria-hidden="true" class="mr-2">✓</span>{{ toast }}
|
||||
</button>
|
||||
</Transition>
|
||||
</section>
|
||||
</template>
|
||||
@@ -2,65 +2,13 @@
|
||||
definePageMeta({ middleware: ['auth'] })
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const billing = useBilling()
|
||||
const auth = useAuth()
|
||||
const config = useRuntimeConfig()
|
||||
const switching = ref<'pro' | 'business' | null>(null)
|
||||
const portalLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const toast = ref<string | null>(null)
|
||||
let toastTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
// Your data
|
||||
const exporting = ref(false)
|
||||
const deleteConfirmOpen = ref(false)
|
||||
const deleteConfirmation = ref('')
|
||||
const deleting = ref(false)
|
||||
const deleteError = ref<string | null>(null)
|
||||
|
||||
async function exportData() {
|
||||
exporting.value = true
|
||||
try {
|
||||
const apiBase = config.public.apiBase as string
|
||||
const token = auth.liveAccessToken()
|
||||
// Plain fetch (not useApi) so the response is treated as a download.
|
||||
const res = await fetch(`${apiBase}/me/data-export`, {
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : {},
|
||||
credentials: 'include',
|
||||
})
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
||||
const blob = await res.blob()
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = 'guestguard-data-export.json'
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
showToast('Export downloaded.')
|
||||
} catch (e: any) {
|
||||
showToast(useErrMessage(e, 'Export failed'))
|
||||
} finally {
|
||||
exporting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDelete() {
|
||||
deleting.value = true
|
||||
deleteError.value = null
|
||||
try {
|
||||
await useApi('/me', { method: 'DELETE' })
|
||||
// Soft-delete revoked our refresh token; clear local session and
|
||||
// bounce to the marketing landing.
|
||||
auth.clearSession()
|
||||
await router.push('/')
|
||||
} catch (e: any) {
|
||||
deleteError.value = useErrMessage(e, 'Could not delete account')
|
||||
} finally {
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function showToast(text: string) {
|
||||
toast.value = text
|
||||
if (toastTimer) clearTimeout(toastTimer)
|
||||
@@ -147,7 +95,7 @@ function periodEndLabel(iso?: string): string {
|
||||
<section class="space-y-6">
|
||||
<div>
|
||||
<NuxtLink to="/dashboard" class="mb-2 inline-block text-sm text-zinc-400 hover:text-zinc-200">
|
||||
← Back to dashboard
|
||||
← Back to events
|
||||
</NuxtLink>
|
||||
<h1 class="text-2xl font-semibold">Billing & plan</h1>
|
||||
<p class="mt-1 text-sm text-zinc-400">
|
||||
@@ -281,96 +229,14 @@ function periodEndLabel(iso?: string): string {
|
||||
<p class="text-xs text-zinc-500">
|
||||
Receipts and invoices are emailed automatically by Stripe.
|
||||
Need to cancel? Use <a href="#" class="text-brand-400 hover:text-brand-300" @click.prevent="manageSubscription">Manage subscription</a> above.
|
||||
Data export and account deletion now live on the <NuxtLink to="/dashboard/account" class="text-brand-400 hover:text-brand-300">Account</NuxtLink> page.
|
||||
</p>
|
||||
|
||||
<!-- ===== Your data ===== -->
|
||||
<div class="card mt-2">
|
||||
<h2 class="mb-1 text-lg font-semibold">Your data</h2>
|
||||
<p class="mb-4 text-xs text-zinc-500">
|
||||
Export a copy of everything we hold about you, or delete your account.
|
||||
</p>
|
||||
<div class="space-y-3">
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center justify-between rounded-md border border-zinc-700 bg-zinc-950 px-3 py-3 text-left transition hover:border-zinc-500 hover:bg-zinc-900 disabled:opacity-50"
|
||||
:disabled="exporting"
|
||||
@click="exportData"
|
||||
>
|
||||
<span>
|
||||
<span class="block text-sm font-medium text-zinc-100">Export my data</span>
|
||||
<span class="block text-xs text-zinc-500">
|
||||
Download a JSON file with your events, guests, RSVPs, and account info.
|
||||
</span>
|
||||
</span>
|
||||
<span class="text-xs text-zinc-400">{{ exporting ? '…' : '↓' }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center justify-between rounded-md border border-red-800/40 bg-red-950/10 px-3 py-3 text-left transition hover:border-red-700 hover:bg-red-950/20"
|
||||
@click="deleteConfirmOpen = true"
|
||||
>
|
||||
<span>
|
||||
<span class="block text-sm font-medium text-red-300">Delete my account</span>
|
||||
<span class="block text-xs text-red-400/70">
|
||||
Soft-deleted immediately, permanently erased after 30 days. You'll be signed out everywhere.
|
||||
</span>
|
||||
</span>
|
||||
<span class="text-xs text-red-400">→</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #fallback>
|
||||
<div class="card text-sm text-zinc-500">Loading…</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
|
||||
<!-- Delete-account confirmation -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="deleteConfirmOpen"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
|
||||
@click.self="deleteConfirmOpen = false"
|
||||
>
|
||||
<div
|
||||
role="alertdialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="del-acct-title"
|
||||
class="w-full max-w-md rounded-lg border border-zinc-800 bg-zinc-900 p-5 shadow-2xl"
|
||||
>
|
||||
<h3 id="del-acct-title" class="mb-1 text-base font-semibold">Delete account?</h3>
|
||||
<p class="mb-3 text-sm text-zinc-400">
|
||||
Your account will be soft-deleted now and permanently erased
|
||||
after 30 days. All your events, guests, and RSVP history go
|
||||
with it. You'll be signed out from every device.
|
||||
</p>
|
||||
<p class="mb-3 text-xs text-zinc-500">
|
||||
Type <code class="rounded bg-zinc-800 px-1 py-0.5 font-mono text-zinc-300">delete</code>
|
||||
to confirm.
|
||||
</p>
|
||||
<input
|
||||
v-model="deleteConfirmation"
|
||||
type="text"
|
||||
placeholder="delete"
|
||||
class="input mb-3 font-mono"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="text-sm text-zinc-400 hover:text-zinc-200" :disabled="deleting" @click="deleteConfirmOpen = false">Cancel</button>
|
||||
<button
|
||||
class="rounded-md bg-red-500/90 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-red-500 disabled:opacity-40"
|
||||
:disabled="deleting || deleteConfirmation.trim().toLowerCase() !== 'delete'"
|
||||
@click="confirmDelete"
|
||||
>
|
||||
{{ deleting ? 'Deleting…' : 'Delete forever' }}
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="deleteError" class="mt-3 text-sm text-red-400">{{ deleteError }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<!-- Toast for return-from-Stripe -->
|
||||
<Transition
|
||||
enter-active-class="transition duration-200 ease-out"
|
||||
|
||||
@@ -728,7 +728,7 @@ function checkLabel(band?: string): string {
|
||||
<section v-else class="space-y-8">
|
||||
<div>
|
||||
<NuxtLink to="/dashboard" class="mb-2 inline-block text-sm text-zinc-400 hover:text-zinc-200">
|
||||
← Back to dashboard
|
||||
← Back to events
|
||||
</NuxtLink>
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-2xl font-semibold">{{ event.name }}</h1>
|
||||
@@ -1120,6 +1120,18 @@ function checkLabel(band?: string): string {
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- Branding (Tier 2 Block D). Editor+ can change colours/logo/cover;
|
||||
viewers see read-only. -->
|
||||
<div v-if="event" class="mt-6">
|
||||
<BrandingCard
|
||||
:event-id="eventId"
|
||||
:your-role="event.your_role"
|
||||
:event-name="event.name"
|
||||
:event-venue="event.venue"
|
||||
:event-date="event.event_date"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Analytics (Tier 2 Block E). Read-only summary; viewer+ can see it. -->
|
||||
<div v-if="event" class="mt-6">
|
||||
<AnalyticsCard :event-id="eventId" />
|
||||
|
||||
@@ -129,7 +129,7 @@ const sampleCapacity = computed(() => maxCapacity.value || 50)
|
||||
<template>
|
||||
<section>
|
||||
<NuxtLink to="/dashboard" class="mb-6 inline-block text-sm text-zinc-400 hover:text-zinc-200">
|
||||
← Back to dashboard
|
||||
← Back to events
|
||||
</NuxtLink>
|
||||
|
||||
<div class="grid gap-12 lg:grid-cols-2 lg:items-start">
|
||||
@@ -139,7 +139,7 @@ const sampleCapacity = computed(() => maxCapacity.value || 50)
|
||||
|
||||
<div v-if="!host" class="card text-sm text-zinc-400">
|
||||
Please sign in first.
|
||||
<NuxtLink to="/dashboard" class="text-brand-400">Go to dashboard</NuxtLink>
|
||||
<NuxtLink to="/dashboard" class="text-brand-400">Go to events</NuxtLink>
|
||||
</div>
|
||||
|
||||
<form v-else class="card space-y-4" @submit.prevent="submit">
|
||||
|
||||
@@ -1,32 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({ middleware: ['auth'] })
|
||||
|
||||
// Tier 2 Block C — once a user can be invited as editor/viewer onto other
|
||||
// hosts' events, the dashboard has to surface that distinction. We split
|
||||
// the list into "Your events" (the ones the signed-in user created) and
|
||||
// "Shared with you" (every event they're a collaborator on but didn't
|
||||
// create). The split is driven by host_id; the role pill on each card
|
||||
// tells the collaborator what they can actually do.
|
||||
interface EventSummary {
|
||||
id: string
|
||||
host_id: string
|
||||
name: string
|
||||
slug: string
|
||||
event_date: string
|
||||
status: string
|
||||
venue: string
|
||||
max_capacity: number
|
||||
your_role?: 'owner' | 'editor' | 'viewer'
|
||||
}
|
||||
|
||||
interface EventsResponse {
|
||||
events: EventSummary[]
|
||||
}
|
||||
|
||||
interface PendingInvite {
|
||||
event_id: string
|
||||
event_name: string
|
||||
role: 'owner' | 'editor' | 'viewer'
|
||||
inviter_name: string
|
||||
expires_at: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
const auth = useAuth()
|
||||
|
||||
const events = ref<EventSummary[]>([])
|
||||
const loadingEvents = ref(false)
|
||||
const loadError = ref<string | null>(null)
|
||||
|
||||
// Pending invites for the signed-in user's email. Shown as a banner above
|
||||
// the event list so a user who just verified their email + signed in can
|
||||
// accept without re-clicking the invitation email link (which would have
|
||||
// opened in a different tab and lost the original signup context).
|
||||
const pendingInvites = ref<PendingInvite[]>([])
|
||||
const acceptingInvite = ref<string | null>(null)
|
||||
const inviteError = ref<string | null>(null)
|
||||
|
||||
async function loadEvents() {
|
||||
if (!auth.user.value) return
|
||||
loadingEvents.value = true
|
||||
loadError.value = null
|
||||
try {
|
||||
// host is derived server-side from the session — no query param needed.
|
||||
const res = await useApi<EventsResponse>('/events')
|
||||
events.value = res.events
|
||||
} catch (e: any) {
|
||||
@@ -36,11 +60,63 @@ async function loadEvents() {
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => auth.user.value, loadEvents, { immediate: true })
|
||||
async function loadPendingInvites() {
|
||||
if (!auth.user.value) return
|
||||
try {
|
||||
const res = await useApi<{ invites: PendingInvite[] }>('/me/invites')
|
||||
pendingInvites.value = res.invites || []
|
||||
} catch {
|
||||
// Non-fatal: the dashboard works fine without the banner.
|
||||
pendingInvites.value = []
|
||||
}
|
||||
}
|
||||
|
||||
async function acceptInvite(eventID: string) {
|
||||
acceptingInvite.value = eventID
|
||||
inviteError.value = null
|
||||
try {
|
||||
await useApi(`/me/invites/${eventID}/accept`, { method: 'POST' })
|
||||
// Reload both lists — the new event should appear in "Shared with you".
|
||||
await Promise.all([loadEvents(), loadPendingInvites()])
|
||||
} catch (e: any) {
|
||||
inviteError.value = useErrMessage(e, 'Could not accept invitation')
|
||||
} finally {
|
||||
acceptingInvite.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function dismissInvite(eventID: string) {
|
||||
// Local-only dismissal — the invite stays valid on the server so the
|
||||
// user can still revisit it from the inviter's resend, or after
|
||||
// refreshing the page. Keeps the dashboard tidy if they aren't ready
|
||||
// to accept right now.
|
||||
pendingInvites.value = pendingInvites.value.filter((i) => i.event_id !== eventID)
|
||||
}
|
||||
|
||||
watch(() => auth.user.value, () => {
|
||||
loadEvents()
|
||||
loadPendingInvites()
|
||||
}, { immediate: true })
|
||||
|
||||
const myEvents = computed(() =>
|
||||
events.value.filter((e) => auth.user.value && e.host_id === auth.user.value.id),
|
||||
)
|
||||
const sharedEvents = computed(() =>
|
||||
events.value.filter((e) => !auth.user.value || e.host_id !== auth.user.value.id),
|
||||
)
|
||||
|
||||
function fmtDate(iso: string) {
|
||||
try { return new Date(iso).toLocaleString() } catch { return iso }
|
||||
}
|
||||
|
||||
function roleBadgeClass(role?: string) {
|
||||
switch (role) {
|
||||
case 'owner': return 'bg-brand-900/40 text-brand-300'
|
||||
case 'editor': return 'bg-amber-900/30 text-amber-300'
|
||||
case 'viewer': return 'bg-zinc-800 text-zinc-300'
|
||||
default: return 'bg-zinc-800 text-zinc-400'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -53,31 +129,110 @@ function fmtDate(iso: string) {
|
||||
<div v-else>
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold">Your events</h1>
|
||||
<p class="text-sm text-zinc-400">Signed in as {{ auth.user.value.name }} ({{ auth.user.value.email }})</p>
|
||||
<h1 class="text-2xl font-semibold">Events</h1>
|
||||
<p class="text-sm text-zinc-400">
|
||||
Welcome back, {{ auth.user.value.name }}.
|
||||
</p>
|
||||
</div>
|
||||
<NuxtLink to="/dashboard/events/new" class="btn-primary">New event</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Pending invites banner — the safety net for users who lost
|
||||
the original invite tab during the verify-email round-trip. -->
|
||||
<div v-if="pendingInvites.length > 0" class="mb-6 space-y-3">
|
||||
<p v-if="inviteError" class="text-sm text-red-400">{{ inviteError }}</p>
|
||||
<div
|
||||
v-for="invite in pendingInvites"
|
||||
:key="invite.event_id"
|
||||
class="flex items-center justify-between gap-3 rounded-lg border border-brand-700/60 bg-brand-500/[0.06] p-4"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-xs font-medium uppercase tracking-wider text-brand-400">Team invitation</p>
|
||||
<p class="mt-1 text-sm text-zinc-100">
|
||||
<strong>{{ invite.inviter_name || 'A teammate' }}</strong>
|
||||
invited you to
|
||||
<strong>{{ invite.event_name }}</strong>
|
||||
as <span class="capitalize text-brand-300">{{ invite.role }}</span>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-zinc-400 hover:text-zinc-200"
|
||||
@click="dismissInvite(invite.event_id)"
|
||||
>Later</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-primary text-sm"
|
||||
:disabled="acceptingInvite === invite.event_id"
|
||||
@click="acceptInvite(invite.event_id)"
|
||||
>
|
||||
{{ acceptingInvite === invite.event_id ? 'Accepting…' : 'Accept' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loadingEvents" class="text-sm text-zinc-500">Loading…</div>
|
||||
<div v-else-if="loadError" class="card text-sm text-red-400">{{ loadError }}</div>
|
||||
<div v-else-if="events.length === 0" class="card text-sm text-zinc-400">
|
||||
No events yet. Create one to get started.
|
||||
<div v-else-if="events.length === 0 && pendingInvites.length === 0" class="card text-sm text-zinc-400">
|
||||
No events yet. Create one to get started, or wait for a teammate to invite you.
|
||||
</div>
|
||||
<div v-else class="grid gap-4 md:grid-cols-2">
|
||||
<NuxtLink
|
||||
v-for="ev in events"
|
||||
:key="ev.id"
|
||||
:to="`/dashboard/events/${ev.id}`"
|
||||
class="card transition hover:border-brand-700 hover:bg-zinc-900/80"
|
||||
>
|
||||
<div class="mb-1 flex items-center justify-between">
|
||||
<h2 class="font-semibold text-zinc-50">{{ ev.name }}</h2>
|
||||
<span class="text-xs uppercase tracking-wide text-zinc-500">{{ ev.status }}</span>
|
||||
<div v-else class="space-y-8">
|
||||
<!-- Events the signed-in user created. -->
|
||||
<div>
|
||||
<header class="mb-3 flex items-baseline justify-between">
|
||||
<h2 class="text-sm font-medium uppercase tracking-wider text-zinc-400">
|
||||
Yours · {{ myEvents.length }}
|
||||
</h2>
|
||||
</header>
|
||||
<div v-if="myEvents.length === 0" class="card text-sm text-zinc-500">
|
||||
You haven't created an event yet.
|
||||
<NuxtLink to="/dashboard/events/new" class="ml-1 text-brand-400 hover:text-brand-300">Start one</NuxtLink>.
|
||||
</div>
|
||||
<p class="text-sm text-zinc-400">{{ ev.venue || '—' }}</p>
|
||||
<p class="mt-2 text-xs text-zinc-500">{{ fmtDate(ev.event_date) }}</p>
|
||||
</NuxtLink>
|
||||
<div v-else class="grid gap-4 md:grid-cols-2">
|
||||
<NuxtLink
|
||||
v-for="ev in myEvents"
|
||||
:key="ev.id"
|
||||
:to="`/dashboard/events/${ev.id}`"
|
||||
class="card transition hover:border-brand-700 hover:bg-zinc-900/80"
|
||||
>
|
||||
<div class="mb-1 flex items-center justify-between">
|
||||
<h3 class="font-semibold text-zinc-50">{{ ev.name }}</h3>
|
||||
<span class="text-xs uppercase tracking-wide text-zinc-500">{{ ev.status }}</span>
|
||||
</div>
|
||||
<p class="text-sm text-zinc-400">{{ ev.venue || '—' }}</p>
|
||||
<p class="mt-2 text-xs text-zinc-500">{{ fmtDate(ev.event_date) }}</p>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Events the user was invited to. -->
|
||||
<div v-if="sharedEvents.length > 0">
|
||||
<header class="mb-3 flex items-baseline justify-between">
|
||||
<h2 class="text-sm font-medium uppercase tracking-wider text-zinc-400">
|
||||
Shared with you · {{ sharedEvents.length }}
|
||||
</h2>
|
||||
</header>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<NuxtLink
|
||||
v-for="ev in sharedEvents"
|
||||
:key="ev.id"
|
||||
:to="`/dashboard/events/${ev.id}`"
|
||||
class="card transition hover:border-brand-700 hover:bg-zinc-900/80"
|
||||
>
|
||||
<div class="mb-1 flex items-center justify-between gap-2">
|
||||
<h3 class="truncate font-semibold text-zinc-50">{{ ev.name }}</h3>
|
||||
<span
|
||||
class="rounded-full px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide"
|
||||
:class="roleBadgeClass(ev.your_role)"
|
||||
>{{ ev.your_role || 'member' }}</span>
|
||||
</div>
|
||||
<p class="text-sm text-zinc-400">{{ ev.venue || '—' }}</p>
|
||||
<p class="mt-2 text-xs text-zinc-500">{{ fmtDate(ev.event_date) }}</p>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user