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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user