Add stage 2: Vue/TypeScript PWA shell with auth-gated routing

Backend: new migration adds users.email_verified_at (null = unverified);
registration leaves it null, and the register/login/me payloads now expose
email_verified and email_verified_at.

Frontend (web/): Vite + Vue 3 + TypeScript PWA (vite-plugin-pwa). Pinia auth
store keeps the token in localStorage and validates it via GET /api/me on
load. vue-router guards redirect unauthenticated visitors to /login,
preserving the intended path; /register creates an account and signs in
immediately (with the email unverified). Placeholder home page, minimal
styling, generated icons. Dev server proxies /api to the API.

docker-compose.yml gains an optional "web" service (profile: frontend) so
`docker compose --profile frontend up -d` runs the dev server alongside the
API; `docker compose up -d` still starts the API alone.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-03 18:12:31 +01:00
co-authored by Claude Sonnet 5
parent e91fc89e23
commit 5e3b8dbd7e
35 changed files with 7454 additions and 10 deletions
+65
View File
@@ -0,0 +1,65 @@
import type { ApiErrorBody } from '../types'
const BASE_URL = import.meta.env.VITE_API_BASE_URL ?? '/api'
let authToken: string | null = null
/** Set (or clear) the bearer token sent with subsequent requests. */
export function setAuthToken(token: string | null): void {
authToken = token
}
export class ApiError extends Error {
readonly status: number
readonly details: Record<string, string[]>
constructor(message: string, status: number, details: Record<string, string[]> = {}) {
super(message)
this.name = 'ApiError'
this.status = status
this.details = details
}
/** First validation message for a field, if any. */
fieldError(field: string): string | undefined {
return this.details[field]?.[0]
}
}
interface RequestOptions {
method?: string
body?: unknown
auth?: boolean
}
export async function apiRequest<T>(path: string, options: RequestOptions = {}): Promise<T> {
const { method = 'GET', body, auth = false } = options
const headers: Record<string, string> = { Accept: 'application/json' }
if (body !== undefined) headers['Content-Type'] = 'application/json'
if (auth && authToken) headers['Authorization'] = `Bearer ${authToken}`
let response: Response
try {
response = await fetch(`${BASE_URL}${path}`, {
method,
headers,
body: body === undefined ? undefined : JSON.stringify(body),
})
} catch {
throw new ApiError('Could not reach the server.', 0)
}
const payload = await response.json().catch(() => null)
if (!response.ok) {
const err = (payload as ApiErrorBody | null)?.error
throw new ApiError(
err?.message ?? `Request failed (${response.status}).`,
response.status,
err?.details ?? {},
)
}
return payload as T
}