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