Files
guestguard/frontend/pages/login.vue
T
Kwaku Danso e5b187c575 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>
2026-05-18 12:04:09 +01:00

75 lines
2.6 KiB
Vue

<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 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)
await navigateTo(resolveRedirect())
} catch (e: any) {
error.value = useErrMessage(e, 'Login failed')
} finally {
submitting.value = false
}
}
</script>
<template>
<section class="mx-auto max-w-md py-12">
<h1 class="mb-2 text-2xl font-semibold">Sign in</h1>
<p class="mb-6 text-sm text-zinc-400">Welcome back. Sign in to manage your events.</p>
<form class="card space-y-4" @submit.prevent="submit">
<div>
<label class="label">Email</label>
<input v-model="email" type="email" class="input" autocomplete="email" required />
</div>
<div>
<label class="label">Password</label>
<input v-model="password" type="password" class="input" autocomplete="current-password" required />
<div class="mt-1 text-right text-xs">
<NuxtLink to="/forgot-password" class="text-zinc-400 hover:text-zinc-200">Forgot password?</NuxtLink>
</div>
</div>
<button class="btn-primary w-full" :disabled="submitting || !email || !password">
{{ submitting ? 'Signing in…' : 'Sign in' }}
</button>
<p v-if="error" class="text-sm text-red-400">{{ error }}</p>
</form>
<p class="mt-6 text-center text-sm text-zinc-400">
Don't have an account?
<NuxtLink to="/signup" class="text-brand-400 hover:text-brand-300">Sign up</NuxtLink>
</p>
</section>
</template>