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
2026-05-18 12:04:09 +01:00
parent 9842bd4f45
commit e5b187c575
30 changed files with 2310 additions and 199 deletions
+73
View File
@@ -0,0 +1,73 @@
package domain
import (
"errors"
"regexp"
"time"
"github.com/google/uuid"
)
// Branding is one event's visual customisation. All fields are optional —
// a brand-new event renders with the GuestGuard defaults until the host
// fills any of these in. Tier 2 Block D.
type Branding struct {
EventID uuid.UUID `json:"event_id"`
PrimaryColor *string `json:"primary_color,omitempty"`
AccentColor *string `json:"accent_color,omitempty"`
LogoURL *string `json:"logo_url,omitempty"`
CoverImageURL *string `json:"cover_image_url,omitempty"`
FontFamily *string `json:"font_family,omitempty"`
GreetingMessage *string `json:"greeting_message,omitempty"`
UpdatedAt time.Time `json:"updated_at"`
}
// AllowedFonts is the curated picker list the host can choose from. Locking
// it down keeps render times sane (no hot-loading arbitrary @font-face
// files) and avoids smuggling untrusted CSS into our emails.
var AllowedFonts = []string{
"Inter",
"Playfair Display",
"Cormorant Garamond",
"Lora",
"DM Sans",
"Manrope",
}
// IsAllowedFont reports whether `f` is in the curated set. Empty string is
// fine — the RSVP page falls back to its default.
func IsAllowedFont(f string) bool {
if f == "" {
return true
}
for _, a := range AllowedFonts {
if f == a {
return true
}
}
return false
}
// hexColorRe matches #abc, #abcd, #aabbcc, #aabbccdd (alpha optional).
// Lowercase + uppercase OK. Length checked because Go regexp + Postgres
// don't agree on Unicode digits and we want plain ASCII here.
var hexColorRe = regexp.MustCompile(`^#([0-9A-Fa-f]{3,8})$`)
// IsValidHexColor accepts the three common hex shorthand forms. Empty is OK
// (clears the column).
func IsValidHexColor(c string) bool {
if c == "" {
return true
}
if !hexColorRe.MatchString(c) {
return false
}
n := len(c) - 1
return n == 3 || n == 4 || n == 6 || n == 8
}
var (
ErrBrandingNotFound = errors.New("branding not found")
ErrInvalidColor = errors.New("color must be a hex value (e.g. #22c55e)")
ErrUnknownFont = errors.New("font is not in the allowlist")
)
+38
View File
@@ -0,0 +1,38 @@
package domain
import "testing"
func TestIsValidHexColor(t *testing.T) {
cases := map[string]bool{
"": true, // clears the field
"#22c55e": true,
"#22C55E": true,
"#abc": true,
"#abcd": true,
"#aabbccdd": true,
"22c55e": false, // missing #
"#": false,
"#xyz": false,
"#aabbccddee": false, // too long
"#ab": false, // too short
"rgb(0,0,0)": false,
}
for in, want := range cases {
if got := IsValidHexColor(in); got != want {
t.Errorf("IsValidHexColor(%q) = %v, want %v", in, got, want)
}
}
}
func TestIsAllowedFont(t *testing.T) {
for _, ok := range []string{"", "Inter", "Playfair Display"} {
if !IsAllowedFont(ok) {
t.Errorf("expected %q to be allowed", ok)
}
}
for _, bad := range []string{"Comic Sans", "Arial", "javascript:alert(1)"} {
if IsAllowedFont(bad) {
t.Errorf("expected %q to be rejected", bad)
}
}
}