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
+127
-7
@@ -6,7 +6,46 @@ const route = useRoute()
|
||||
// page. Inside the app it just clutters the chrome.
|
||||
const showGithub = computed(() => route.path === '/')
|
||||
|
||||
// Profile dropdown state. Closed by default; opens on click, closes on
|
||||
// outside click / Escape / route change. Industry-standard pattern: the
|
||||
// account-scoped actions (Account, Billing, Sign out) tuck under an avatar
|
||||
// affordance instead of crowding the top-level nav.
|
||||
const profileOpen = ref(false)
|
||||
const profileRef = ref<HTMLElement | null>(null)
|
||||
|
||||
function initials(name?: string | null) {
|
||||
if (!name) return '·'
|
||||
return name
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.slice(0, 2)
|
||||
.map((p) => p[0]?.toUpperCase() || '')
|
||||
.join('') || '·'
|
||||
}
|
||||
|
||||
function onDocClick(e: MouseEvent) {
|
||||
if (!profileOpen.value) return
|
||||
const root = profileRef.value
|
||||
if (root && !root.contains(e.target as Node)) profileOpen.value = false
|
||||
}
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') profileOpen.value = false
|
||||
}
|
||||
|
||||
if (import.meta.client) {
|
||||
onMounted(() => {
|
||||
window.addEventListener('click', onDocClick)
|
||||
window.addEventListener('keydown', onKeydown)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('click', onDocClick)
|
||||
window.removeEventListener('keydown', onKeydown)
|
||||
})
|
||||
}
|
||||
watch(() => route.fullPath, () => { profileOpen.value = false })
|
||||
|
||||
async function signOut() {
|
||||
profileOpen.value = false
|
||||
await auth.logout()
|
||||
navigateTo('/')
|
||||
}
|
||||
@@ -16,17 +55,22 @@ async function signOut() {
|
||||
<div class="min-h-screen bg-zinc-950 text-zinc-100 antialiased">
|
||||
<header class="border-b border-zinc-900">
|
||||
<div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
|
||||
<NuxtLink to="/" class="flex items-center gap-2 text-lg font-semibold">
|
||||
<!-- Logo doubles as the "home" affordance. Signed-in users land
|
||||
on their events list; visitors get the marketing landing. -->
|
||||
<NuxtLink
|
||||
:to="auth.isAuthenticated.value ? '/dashboard' : '/'"
|
||||
class="flex items-center gap-2 text-lg font-semibold"
|
||||
>
|
||||
<span class="inline-block h-2.5 w-2.5 rounded-full bg-brand-500"></span>
|
||||
GuestGuard
|
||||
</NuxtLink>
|
||||
<nav class="flex items-center gap-4 text-sm text-zinc-400">
|
||||
<nav class="flex items-center gap-2 text-sm text-zinc-400">
|
||||
<a
|
||||
v-if="showGithub"
|
||||
href="https://github.com/alchemistkay/guestguard"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="transition hover:text-zinc-100"
|
||||
class="rounded-md p-2 transition hover:bg-zinc-900 hover:text-zinc-100"
|
||||
title="View on GitHub"
|
||||
aria-label="View on GitHub"
|
||||
>
|
||||
@@ -34,14 +78,90 @@ async function signOut() {
|
||||
<path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<ClientOnly>
|
||||
<template v-if="auth.isAuthenticated.value">
|
||||
<NuxtLink to="/dashboard" class="transition hover:text-zinc-100">Dashboard</NuxtLink>
|
||||
<NuxtLink to="/dashboard/billing" class="transition hover:text-zinc-100">Billing</NuxtLink>
|
||||
<button class="transition hover:text-zinc-100" @click="signOut">Sign out</button>
|
||||
<!-- Logo is the "home → events" affordance; the only top-level
|
||||
nav element for signed-in users is the profile dropdown. -->
|
||||
|
||||
<!-- Profile dropdown — Account / Billing / Sign out -->
|
||||
<div ref="profileRef" class="relative">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-2 rounded-md px-2 py-1.5 transition hover:bg-zinc-900 hover:text-zinc-100"
|
||||
:aria-expanded="profileOpen"
|
||||
aria-haspopup="menu"
|
||||
aria-label="Account menu"
|
||||
@click="profileOpen = !profileOpen"
|
||||
>
|
||||
<span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand-500/15 text-xs font-semibold text-brand-300">
|
||||
{{ initials(auth.user.value?.name) }}
|
||||
</span>
|
||||
<svg
|
||||
class="h-3 w-3 text-zinc-500 transition-transform"
|
||||
:class="profileOpen ? '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>
|
||||
</button>
|
||||
|
||||
<Transition
|
||||
enter-active-class="transition duration-150 ease-out"
|
||||
enter-from-class="-translate-y-1 opacity-0"
|
||||
enter-to-class="translate-y-0 opacity-100"
|
||||
leave-active-class="transition duration-100 ease-in"
|
||||
leave-from-class="translate-y-0 opacity-100"
|
||||
leave-to-class="-translate-y-1 opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="profileOpen"
|
||||
role="menu"
|
||||
class="absolute right-0 top-full z-30 mt-2 w-60 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950 shadow-2xl"
|
||||
>
|
||||
<div class="border-b border-zinc-900 px-3 py-3">
|
||||
<p class="truncate text-sm font-medium text-zinc-100">
|
||||
{{ auth.user.value?.name || 'Account' }}
|
||||
</p>
|
||||
<p class="truncate text-xs text-zinc-500">{{ auth.user.value?.email }}</p>
|
||||
</div>
|
||||
<NuxtLink
|
||||
to="/dashboard/account"
|
||||
role="menuitem"
|
||||
class="flex items-center gap-2 px-3 py-2 text-sm text-zinc-200 transition hover:bg-zinc-900"
|
||||
>
|
||||
<svg class="h-4 w-4 text-zinc-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Account
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/dashboard/billing"
|
||||
role="menuitem"
|
||||
class="flex items-center gap-2 px-3 py-2 text-sm text-zinc-200 transition hover:bg-zinc-900"
|
||||
>
|
||||
<svg class="h-4 w-4 text-zinc-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4zM18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" />
|
||||
</svg>
|
||||
Billing & plan
|
||||
</NuxtLink>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
class="flex w-full items-center gap-2 border-t border-zinc-900 px-3 py-2 text-left text-sm text-zinc-200 transition hover:bg-zinc-900"
|
||||
@click="signOut"
|
||||
>
|
||||
<svg class="h-4 w-4 text-zinc-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M3 3a1 1 0 011-1h6a1 1 0 110 2H5v12h5a1 1 0 110 2H4a1 1 0 01-1-1V3zm12.293 4.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L16.586 12H9a1 1 0 110-2h7.586l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NuxtLink to="/login" class="transition hover:text-zinc-100">Sign in</NuxtLink>
|
||||
<NuxtLink to="/login" class="px-3 py-1.5 transition hover:text-zinc-100">Sign in</NuxtLink>
|
||||
<NuxtLink to="/signup" class="btn-primary !px-3 !py-1.5 text-xs">Get started</NuxtLink>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
|
||||
@@ -5,14 +5,27 @@
|
||||
// Apple Calendar has no web-deeplink — it imports .ics files directly from the
|
||||
// device. So Apple and "Other" both point at the .ics download URL; the only
|
||||
// difference is the label so a desktop guest knows which to click.
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
links: {
|
||||
google: string
|
||||
outlook: string
|
||||
yahoo: string
|
||||
ics: string
|
||||
}
|
||||
token: string
|
||||
}>()
|
||||
|
||||
// The backend embeds a fully-qualified ics URL built from GG_PUBLIC_BASE_URL,
|
||||
// which in production points at the same origin as the API (ingress). In
|
||||
// dev the public base is the Nuxt frontend (port 3000) — that origin has no
|
||||
// /access/.../calendar.ics route, so clicking would 404. We always
|
||||
// reconstruct against runtimeConfig.apiBase, which is the host that
|
||||
// actually serves the .ics endpoint regardless of deployment topology.
|
||||
const config = useRuntimeConfig()
|
||||
const icsHref = computed(() => {
|
||||
const base = (config.public.apiBase as string) || ''
|
||||
return `${base}/access/${props.token}/calendar.ics`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -50,7 +63,7 @@ defineProps<{
|
||||
<!-- Apple Calendar imports .ics from the file system; pointing at the
|
||||
download triggers the OS handler on macOS/iOS. -->
|
||||
<a
|
||||
:href="links.ics"
|
||||
:href="icsHref"
|
||||
class="flex items-center justify-center gap-1.5 rounded-md border border-zinc-700 bg-zinc-950 px-3 py-2 text-xs font-medium text-zinc-200 transition hover:border-brand-600 hover:bg-brand-500/10 hover:text-brand-200"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
@@ -61,7 +74,7 @@ defineProps<{
|
||||
|
||||
<!-- Catch-all .ics for everything that isn't a hosted web calendar. -->
|
||||
<a
|
||||
:href="links.ics"
|
||||
:href="icsHref"
|
||||
class="flex items-center justify-center gap-1.5 rounded-md border border-zinc-700 bg-zinc-950 px-3 py-2 text-xs font-medium text-zinc-200 transition hover:border-brand-600 hover:bg-brand-500/10 hover:text-brand-200"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
|
||||
@@ -0,0 +1,321 @@
|
||||
<script setup lang="ts">
|
||||
// Tier 2 Block D — per-event branding editor. Editor+ only; we hide the
|
||||
// inputs for viewers (the server enforces the role too).
|
||||
//
|
||||
// Live preview happens client-side: we don't PUT until the host hits Save,
|
||||
// but the colours/logo/cover update the preview pane on every change so
|
||||
// they see what their guests will see before committing.
|
||||
|
||||
interface Branding {
|
||||
event_id: string
|
||||
primary_color?: string | null
|
||||
accent_color?: string | null
|
||||
logo_url?: string | null
|
||||
cover_image_url?: string | null
|
||||
font_family?: string | null
|
||||
greeting_message?: string | null
|
||||
updated_at?: string
|
||||
}
|
||||
|
||||
interface BrandingResponse {
|
||||
event_id: string
|
||||
primary_color?: string | null
|
||||
accent_color?: string | null
|
||||
logo_url?: string | null
|
||||
cover_image_url?: string | null
|
||||
font_family?: string | null
|
||||
greeting_message?: string | null
|
||||
allowed_fonts: string[]
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
eventId: string
|
||||
yourRole?: 'owner' | 'editor' | 'viewer' | null
|
||||
// Event name + date are echoed in the preview so the host sees the
|
||||
// composed page, not just the colour swatches.
|
||||
eventName?: string
|
||||
eventVenue?: string
|
||||
eventDate?: string
|
||||
}>()
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const auth = useAuth()
|
||||
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const allowedFonts = ref<string[]>([])
|
||||
|
||||
// Form state — strings so empty maps cleanly to "clear this field".
|
||||
const primary = ref('')
|
||||
const accent = ref('')
|
||||
const logoURL = ref('')
|
||||
const coverURL = ref('')
|
||||
const font = ref('')
|
||||
const greeting = ref('')
|
||||
|
||||
const canEdit = computed(() => props.yourRole === 'owner' || props.yourRole === 'editor')
|
||||
|
||||
async function refresh() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await useApi<BrandingResponse>(`/events/${props.eventId}/branding`)
|
||||
allowedFonts.value = data.allowed_fonts || []
|
||||
primary.value = data.primary_color ?? ''
|
||||
accent.value = data.accent_color ?? ''
|
||||
logoURL.value = data.logo_url ?? ''
|
||||
coverURL.value = data.cover_image_url ?? ''
|
||||
font.value = data.font_family ?? ''
|
||||
greeting.value = data.greeting_message ?? ''
|
||||
} catch (e: any) {
|
||||
error.value = useErrMessage(e, 'Could not load branding')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
onMounted(refresh)
|
||||
|
||||
// --- uploads ---
|
||||
const uploadingLogo = ref(false)
|
||||
const uploadingCover = ref(false)
|
||||
|
||||
async function upload(file: File): Promise<string> {
|
||||
const apiBase = config.public.apiBase as string
|
||||
const token = auth.liveAccessToken()
|
||||
const form = new FormData()
|
||||
form.append('file', file)
|
||||
const res = await fetch(`${apiBase}/uploads/image`, {
|
||||
method: 'POST',
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : {},
|
||||
credentials: 'include',
|
||||
body: form,
|
||||
})
|
||||
if (!res.ok) {
|
||||
let msg = `HTTP ${res.status}`
|
||||
try { msg = (await res.json()).error || msg } catch { /* no body */ }
|
||||
throw new Error(msg)
|
||||
}
|
||||
const json = await res.json()
|
||||
return json.url as string
|
||||
}
|
||||
|
||||
async function onLogoSelect(e: Event) {
|
||||
const file = (e.target as HTMLInputElement).files?.[0]
|
||||
if (!file) return
|
||||
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 }
|
||||
}
|
||||
|
||||
async function onCoverSelect(e: Event) {
|
||||
const file = (e.target as HTMLInputElement).files?.[0]
|
||||
if (!file) return
|
||||
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 }
|
||||
}
|
||||
|
||||
async function save() {
|
||||
saving.value = true
|
||||
error.value = null
|
||||
try {
|
||||
await useApi(`/events/${props.eventId}/branding`, {
|
||||
method: 'PUT',
|
||||
body: {
|
||||
primary_color: primary.value,
|
||||
accent_color: accent.value,
|
||||
logo_url: logoURL.value,
|
||||
cover_image_url: coverURL.value,
|
||||
font_family: font.value,
|
||||
greeting_message: greeting.value,
|
||||
},
|
||||
})
|
||||
} catch (e: any) {
|
||||
error.value = useErrMessage(e, 'Could not save branding')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Preview style — drives both the colour swatches and the mini RSVP
|
||||
// card preview underneath. Reactive on every input so the host sees
|
||||
// changes immediately, even before clicking Save.
|
||||
const previewStyle = computed(() => ({
|
||||
'--brand-primary': primary.value || '#22c55e',
|
||||
'--brand-accent': accent.value || '#15803d',
|
||||
fontFamily: font.value || 'inherit',
|
||||
}))
|
||||
|
||||
function fmtDate(iso?: string) {
|
||||
if (!iso) return ''
|
||||
try { return new Date(iso).toLocaleString() } catch { return iso }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="card">
|
||||
<header class="mb-3 flex items-center justify-between">
|
||||
<h2 class="text-lg font-semibold">Branding</h2>
|
||||
<button
|
||||
v-if="canEdit"
|
||||
type="button"
|
||||
class="btn-primary text-sm"
|
||||
:disabled="saving"
|
||||
@click="save"
|
||||
>{{ saving ? 'Saving…' : 'Save branding' }}</button>
|
||||
</header>
|
||||
<p class="mb-4 text-xs text-zinc-500">
|
||||
Customise how your invitation page looks. Colours, font, logo, and cover image apply to
|
||||
every guest's RSVP page.
|
||||
</p>
|
||||
|
||||
<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 branding…</p>
|
||||
|
||||
<div v-else class="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<!-- Editor -->
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="label">Primary colour</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
v-model="primary"
|
||||
type="color"
|
||||
class="h-10 w-12 cursor-pointer rounded border border-zinc-700 bg-zinc-900 disabled:opacity-50"
|
||||
:disabled="!canEdit"
|
||||
/>
|
||||
<input
|
||||
v-model="primary"
|
||||
type="text"
|
||||
placeholder="#22c55e"
|
||||
class="input flex-1 font-mono text-xs"
|
||||
:disabled="!canEdit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="label">Accent colour</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
v-model="accent"
|
||||
type="color"
|
||||
class="h-10 w-12 cursor-pointer rounded border border-zinc-700 bg-zinc-900 disabled:opacity-50"
|
||||
:disabled="!canEdit"
|
||||
/>
|
||||
<input
|
||||
v-model="accent"
|
||||
type="text"
|
||||
placeholder="#15803d"
|
||||
class="input flex-1 font-mono text-xs"
|
||||
:disabled="!canEdit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label">Font family</label>
|
||||
<select v-model="font" class="input" :disabled="!canEdit">
|
||||
<option value="">Default (Inter)</option>
|
||||
<option v-for="f in allowedFonts" :key="f" :value="f">{{ f }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label">Greeting message (shown above the form)</label>
|
||||
<textarea
|
||||
v-model="greeting"
|
||||
class="input min-h-[72px]"
|
||||
placeholder="Looking forward to celebrating with you!"
|
||||
:disabled="!canEdit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="label">Logo</label>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/png,image/jpeg"
|
||||
class="block w-full text-xs text-zinc-400 file:mr-2 file:rounded file:border-0 file:bg-zinc-800 file:px-2 file:py-1 file:text-zinc-200 file:cursor-pointer"
|
||||
: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" />
|
||||
<button
|
||||
v-if="canEdit"
|
||||
type="button"
|
||||
class="text-xs text-zinc-500 hover:text-red-300"
|
||||
@click="logoURL = ''"
|
||||
>Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="label">Cover image</label>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/png,image/jpeg"
|
||||
class="block w-full text-xs text-zinc-400 file:mr-2 file:rounded file:border-0 file:bg-zinc-800 file:px-2 file:py-1 file:text-zinc-200 file:cursor-pointer"
|
||||
: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" />
|
||||
<button
|
||||
v-if="canEdit"
|
||||
type="button"
|
||||
class="text-xs text-zinc-500 hover:text-red-300"
|
||||
@click="coverURL = ''"
|
||||
>Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-zinc-500">
|
||||
Images: PNG or JPEG, up to 2 MB. They're re-encoded server-side so EXIF data is stripped.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Live preview -->
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">Preview</p>
|
||||
<div
|
||||
class="overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950"
|
||||
:style="previewStyle"
|
||||
>
|
||||
<div
|
||||
v-if="coverURL"
|
||||
class="h-28 w-full bg-cover bg-center"
|
||||
:style="{ backgroundImage: `url(${coverURL})` }"
|
||||
></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" />
|
||||
<div>
|
||||
<p class="text-xs uppercase tracking-widest" :style="{ color: 'var(--brand-primary)' }">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>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full rounded-md px-3 py-2 text-sm font-medium text-zinc-950"
|
||||
:style="{ background: 'var(--brand-primary)' }"
|
||||
disabled
|
||||
>Submit RSVP</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -1,19 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
// Sign-in page. Honors `?email=` (pre-fill) and `?redirect=` (post-login
|
||||
// landing). When sessionStorage carries a parked redirect from an earlier
|
||||
// signup → verify-email round-trip, prefer that so the collaborator-invite
|
||||
// flow resumes naturally.
|
||||
const auth = useAuth()
|
||||
const route = useRoute()
|
||||
|
||||
const email = ref('')
|
||||
const queryEmail = typeof route.query.email === 'string' ? route.query.email : ''
|
||||
const email = ref(queryEmail)
|
||||
const password = ref('')
|
||||
const submitting = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// Resolve the post-login destination once. Order of precedence:
|
||||
// 1. ?redirect= on the URL (explicit caller intent)
|
||||
// 2. gg.postAuthRedirect in sessionStorage (parked by signup.vue)
|
||||
// 3. /dashboard fallback
|
||||
function resolveRedirect(): string {
|
||||
const queryRedirect = typeof route.query.redirect === 'string' ? route.query.redirect : ''
|
||||
if (queryRedirect) return queryRedirect
|
||||
if (import.meta.client) {
|
||||
const parked = sessionStorage.getItem('gg.postAuthRedirect')
|
||||
if (parked) {
|
||||
sessionStorage.removeItem('gg.postAuthRedirect')
|
||||
return parked
|
||||
}
|
||||
}
|
||||
return '/dashboard'
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
error.value = null
|
||||
submitting.value = true
|
||||
try {
|
||||
await auth.login(email.value, password.value)
|
||||
const redirect = (route.query.redirect as string) || '/dashboard'
|
||||
await navigateTo(redirect)
|
||||
await navigateTo(resolveRedirect())
|
||||
} catch (e: any) {
|
||||
error.value = useErrMessage(e, 'Login failed')
|
||||
} finally {
|
||||
|
||||
@@ -15,6 +15,15 @@ interface CalendarLinks {
|
||||
ics: string
|
||||
}
|
||||
|
||||
interface BrandingPayload {
|
||||
primary_color?: string | null
|
||||
accent_color?: string | null
|
||||
logo_url?: string | null
|
||||
cover_image_url?: string | null
|
||||
font_family?: string | null
|
||||
greeting_message?: string | null
|
||||
}
|
||||
|
||||
interface AccessResponse {
|
||||
guest: { id: string; name: string; email?: string | null; plus_ones: number }
|
||||
event: { id: string; name: string; venue: string; event_date: string }
|
||||
@@ -22,6 +31,7 @@ interface AccessResponse {
|
||||
access_log_id: string
|
||||
rsvp?: ExistingRSVP | null
|
||||
calendar?: CalendarLinks
|
||||
branding?: BrandingPayload | null
|
||||
}
|
||||
|
||||
interface RSVPSubmitResponse {
|
||||
@@ -143,6 +153,20 @@ function fmtDate(iso?: string) {
|
||||
// as /access loads — the guest can grab them before submitting.
|
||||
const calendar = computed<CalendarLinks | null>(() => access.value?.calendar ?? null)
|
||||
|
||||
// Branding (Tier 2 Block D). Null = use defaults. Each field is optional;
|
||||
// missing pieces fall back to the GuestGuard look.
|
||||
const branding = computed<BrandingPayload | null>(() => access.value?.branding ?? null)
|
||||
const brandingStyle = computed(() => {
|
||||
const b = branding.value
|
||||
if (!b) return {}
|
||||
const style: Record<string, string> = {}
|
||||
if (b.primary_color) style['--brand-primary'] = b.primary_color
|
||||
if (b.accent_color) style['--brand-accent'] = b.accent_color
|
||||
if (b.font_family) style.fontFamily = b.font_family
|
||||
return style
|
||||
})
|
||||
const greetingMessage = computed(() => branding.value?.greeting_message || '')
|
||||
|
||||
// showForm = no prior submission, or the guest has clicked "Change my response"
|
||||
const showForm = computed(() => editing.value || !existing.value)
|
||||
const submitLabel = computed(() => {
|
||||
@@ -152,7 +176,10 @@ const submitLabel = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="mx-auto max-w-xl py-8">
|
||||
<!-- Branding (Tier 2 Block D) lives at the section root so every card
|
||||
below inherits the CSS vars + font. brandingStyle is empty when the
|
||||
host hasn't customised, so defaults apply naturally. -->
|
||||
<section class="mx-auto max-w-xl py-8" :style="brandingStyle">
|
||||
<div v-if="loading" class="text-sm text-zinc-500">Looking up your invitation…</div>
|
||||
|
||||
<div v-else-if="loadError" class="card border-red-900/60 bg-red-950/30">
|
||||
@@ -186,6 +213,7 @@ const submitLabel = computed(() => {
|
||||
<AddToCalendar
|
||||
v-if="calendar && result.rsvp.response === 'attending'"
|
||||
:links="calendar"
|
||||
:token="token"
|
||||
class="mt-5 border-t border-zinc-800 pt-4"
|
||||
/>
|
||||
|
||||
@@ -217,6 +245,7 @@ const submitLabel = computed(() => {
|
||||
<AddToCalendar
|
||||
v-if="calendar && existing.response === 'attending'"
|
||||
:links="calendar"
|
||||
:token="token"
|
||||
class="mb-4 border-t border-zinc-800 pt-4"
|
||||
/>
|
||||
|
||||
@@ -231,21 +260,48 @@ const submitLabel = computed(() => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="access && showForm" class="card">
|
||||
<p class="text-xs uppercase tracking-widest text-brand-500">
|
||||
{{ existing ? 'Update your response' : 'Invitation' }}
|
||||
</p>
|
||||
<h1 class="mb-1 text-2xl font-semibold">{{ access.event.name }}</h1>
|
||||
<p class="mb-6 text-sm text-zinc-400">
|
||||
{{ access.event.venue }} · {{ fmtDate(access.event.event_date) }}
|
||||
</p>
|
||||
<div v-else-if="access && showForm" class="card overflow-hidden p-0">
|
||||
<!-- Cover image — only renders when the host uploaded one. -->
|
||||
<div
|
||||
v-if="branding?.cover_image_url"
|
||||
class="h-32 w-full bg-cover bg-center"
|
||||
:style="{ backgroundImage: `url(${branding.cover_image_url})` }"
|
||||
></div>
|
||||
|
||||
<p class="mb-6 text-sm">
|
||||
Hi <span class="font-medium text-zinc-100">{{ access.guest.name }}</span> —
|
||||
<template v-if="existing">change your response below — {{ editsRemaining }}
|
||||
{{ editsRemaining === 1 ? 'edit' : 'edits' }} remaining.</template>
|
||||
<template v-else>please confirm your response below.</template>
|
||||
</p>
|
||||
<div class="p-6">
|
||||
<div class="mb-3 flex items-center gap-3">
|
||||
<img
|
||||
v-if="branding?.logo_url"
|
||||
:src="branding.logo_url"
|
||||
alt=""
|
||||
class="h-10 w-10 rounded object-contain bg-zinc-900"
|
||||
/>
|
||||
<div>
|
||||
<p
|
||||
class="text-xs uppercase tracking-widest"
|
||||
:style="branding?.primary_color ? { color: 'var(--brand-primary)' } : undefined"
|
||||
:class="branding?.primary_color ? '' : 'text-brand-500'"
|
||||
>
|
||||
{{ existing ? 'Update your response' : 'Invitation' }}
|
||||
</p>
|
||||
<h1 class="text-2xl font-semibold">{{ access.event.name }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mb-4 text-sm text-zinc-400">
|
||||
{{ access.event.venue }} · {{ fmtDate(access.event.event_date) }}
|
||||
</p>
|
||||
|
||||
<p
|
||||
v-if="greetingMessage"
|
||||
class="mb-4 rounded-md border border-brand-900/40 bg-brand-500/[0.04] p-3 text-sm text-zinc-300"
|
||||
>{{ greetingMessage }}</p>
|
||||
|
||||
<p class="mb-6 text-sm">
|
||||
Hi <span class="font-medium text-zinc-100">{{ access.guest.name }}</span> —
|
||||
<template v-if="existing">change your response below — {{ editsRemaining }}
|
||||
{{ editsRemaining === 1 ? 'edit' : 'edits' }} remaining.</template>
|
||||
<template v-else>please confirm your response below.</template>
|
||||
</p>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="label">Response</label>
|
||||
@@ -294,7 +350,12 @@ const submitLabel = computed(() => {
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="btn-primary flex-1" :disabled="submitting" @click="submit">
|
||||
<button
|
||||
class="btn-primary flex-1"
|
||||
:style="branding?.primary_color ? { background: 'var(--brand-primary)' } : undefined"
|
||||
:disabled="submitting"
|
||||
@click="submit"
|
||||
>
|
||||
{{ submitLabel }}
|
||||
</button>
|
||||
<button v-if="existing" type="button" class="btn-ghost" :disabled="submitting" @click="cancelEditing">
|
||||
@@ -302,7 +363,8 @@ const submitLabel = computed(() => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p v-if="submitError" class="mt-3 text-sm text-red-400">{{ submitError }}</p>
|
||||
<p v-if="submitError" class="mt-3 text-sm text-red-400">{{ submitError }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
// Sign-up page. Honors `?email=` (pre-fill) and `?redirect=` query params
|
||||
// so the collaborator-invite flow can hand a user from /invites/<token>
|
||||
// through signup → verify-email → login → back to /invites/<token>.
|
||||
// The redirect target survives across the verify-email round-trip via
|
||||
// sessionStorage (the verify link is server-generated and can't carry it
|
||||
// without a schema change).
|
||||
const auth = useAuth()
|
||||
const route = useRoute()
|
||||
|
||||
const email = ref('')
|
||||
const email = ref(typeof route.query.email === 'string' ? route.query.email : '')
|
||||
const redirect = computed(() =>
|
||||
typeof route.query.redirect === 'string' ? route.query.redirect : ''
|
||||
)
|
||||
const name = ref('')
|
||||
const password = ref('')
|
||||
const acceptTerms = ref(false)
|
||||
@@ -14,6 +24,11 @@ async function submit() {
|
||||
submitting.value = true
|
||||
try {
|
||||
await auth.signup(email.value, name.value, password.value, acceptTerms.value)
|
||||
// Park the desired post-verify destination so verify-email.vue can
|
||||
// resume the flow once the inbox round-trip completes.
|
||||
if (redirect.value && import.meta.client) {
|
||||
sessionStorage.setItem('gg.postAuthRedirect', redirect.value)
|
||||
}
|
||||
sent.value = true
|
||||
} catch (e: any) {
|
||||
error.value = useErrMessage(e, 'Sign-up failed')
|
||||
@@ -21,6 +36,16 @@ async function submit() {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Login link target. If we have a redirect carry it through; pre-fill the
|
||||
// email field too so the user doesn't retype it.
|
||||
const loginHref = computed(() => {
|
||||
const q = new URLSearchParams()
|
||||
if (email.value) q.set('email', email.value)
|
||||
if (redirect.value) q.set('redirect', redirect.value)
|
||||
const qs = q.toString()
|
||||
return qs ? `/login?${qs}` : '/login'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -34,7 +59,7 @@ async function submit() {
|
||||
If <span class="text-zinc-200">{{ email }}</span> is reachable, we've sent a verification link.
|
||||
Click it to finish setting up your account.
|
||||
</p>
|
||||
<NuxtLink to="/login" class="btn-ghost mt-4 w-full">Back to sign in</NuxtLink>
|
||||
<NuxtLink :to="loginHref" class="btn-ghost mt-4 w-full">I've verified — sign in</NuxtLink>
|
||||
</div>
|
||||
|
||||
<form v-else class="card space-y-4" @submit.prevent="submit">
|
||||
@@ -84,7 +109,7 @@ async function submit() {
|
||||
|
||||
<p class="mt-6 text-center text-sm text-zinc-400">
|
||||
Already have an account?
|
||||
<NuxtLink to="/login" class="text-brand-400 hover:text-brand-300">Sign in</NuxtLink>
|
||||
<NuxtLink :to="loginHref" class="text-brand-400 hover:text-brand-300">Sign in</NuxtLink>
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
// Email verification landing. The verification link is server-generated
|
||||
// and can't carry the original post-verify redirect (e.g. an invite path)
|
||||
// in its URL — signup.vue parks that target in sessionStorage and we read
|
||||
// it back here to compose a follow-on "Sign in" link that resumes the
|
||||
// flow.
|
||||
const auth = useAuth()
|
||||
const route = useRoute()
|
||||
|
||||
@@ -6,7 +11,17 @@ type Status = 'pending' | 'success' | 'error'
|
||||
const status = ref<Status>('pending')
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// Computed lazily so the first render (SSR) doesn't touch sessionStorage.
|
||||
const loginHref = ref('/login')
|
||||
|
||||
onMounted(async () => {
|
||||
if (import.meta.client) {
|
||||
const parked = sessionStorage.getItem('gg.postAuthRedirect')
|
||||
if (parked) {
|
||||
loginHref.value = `/login?redirect=${encodeURIComponent(parked)}`
|
||||
}
|
||||
}
|
||||
|
||||
const token = route.query.token
|
||||
if (typeof token !== 'string' || !token) {
|
||||
status.value = 'error'
|
||||
@@ -32,12 +47,12 @@ onMounted(async () => {
|
||||
<template v-else-if="status === 'success'">
|
||||
<p class="mb-3 font-medium text-brand-300">Email verified.</p>
|
||||
<p class="mb-4 text-zinc-400">You can now sign in to your account.</p>
|
||||
<NuxtLink to="/login" class="btn-primary w-full">Sign in</NuxtLink>
|
||||
<NuxtLink :to="loginHref" class="btn-primary w-full">Sign in</NuxtLink>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p class="mb-3 font-medium text-red-400">We couldn't verify that link.</p>
|
||||
<p class="mb-4 text-zinc-400">{{ error }}</p>
|
||||
<NuxtLink to="/login" class="btn-ghost w-full">Back to sign in</NuxtLink>
|
||||
<NuxtLink :to="loginHref" class="btn-ghost w-full">Back to sign in</NuxtLink>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user