Kwaku Danso
e5b187c575
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>
88 lines
4.1 KiB
Vue
88 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
// Renders the four add-to-calendar buttons (Google, Outlook, Apple/iCalendar,
|
|
// Other). Tier 2 Block B.
|
|
//
|
|
// 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.
|
|
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>
|
|
<section aria-label="Add this event to your calendar">
|
|
<p class="mb-3 text-xs font-medium uppercase tracking-widest text-brand-500">
|
|
Add to calendar
|
|
</p>
|
|
<div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
|
<!-- Google: opens the prefilled event in a new tab. -->
|
|
<a
|
|
:href="links.google"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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">
|
|
<path d="M5 4a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H8V3a1 1 0 00-2 0v1H5zm0 5a1 1 0 011-1h8a1 1 0 011 1v6a1 1 0 01-1 1H6a1 1 0 01-1-1V9z" />
|
|
</svg>
|
|
Google
|
|
</a>
|
|
|
|
<!-- Outlook web: same idea, different domain. -->
|
|
<a
|
|
:href="links.outlook"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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">
|
|
<path fill-rule="evenodd" d="M3 4a2 2 0 012-2h10a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V4zm3 5a1 1 0 011-1h6a1 1 0 010 2H7a1 1 0 01-1-1zm0 4a1 1 0 011-1h4a1 1 0 010 2H7a1 1 0 01-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
Outlook
|
|
</a>
|
|
|
|
<!-- Apple Calendar imports .ics from the file system; pointing at the
|
|
download triggers the OS handler on macOS/iOS. -->
|
|
<a
|
|
: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">
|
|
<path d="M10 2a4 4 0 00-3.464 6.001A6 6 0 002 14a2 2 0 002 2h12a2 2 0 002-2 6 6 0 00-4.536-5.999A4 4 0 0010 2z" />
|
|
</svg>
|
|
Apple
|
|
</a>
|
|
|
|
<!-- Catch-all .ics for everything that isn't a hosted web calendar. -->
|
|
<a
|
|
: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">
|
|
<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM6.293 6.707a1 1 0 010-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L7.707 6.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
Other (.ics)
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</template>
|