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>

README.md

@@ -1,15 +1,19 @@
 # PHP Todo List
 
 A small todo-list application: a REST API written in PHP (Slim 4) backed by an
-SQLite file, plus a single-page frontend (added in a later stage).
+SQLite file, plus a Vue 3 + TypeScript PWA frontend in [web/](web/).
 
 ## Status
 
 | Stage | Scope | State |
 |-------|-------|-------|
 | 1 | Auth API — register, login, `GET /me` | ✅ done |
-| 2 | Todo CRUD API | planned |
+| 2 | Frontend shell — Vite PWA, auth-gated routing, register/login pages | ✅ done |
-| 3 | Single-page frontend | planned |
+| 3 | Todo CRUD (API + UI) | planned |
+
+Registration signs the user in immediately, with the account's email marked
+unverified (`user.email_verified` is `false` until a future stage adds a
+verification endpoint).
 
 ## Run with Docker
 
@@ -62,6 +66,26 @@ composer serve            # http://localhost:8080  (php -S localhost:8080 -t pub
 Any web server can serve the app as long as the document root is `public/` and
 unknown paths fall through to `public/index.php`.
 
+## Frontend
+
+The Vue/TypeScript PWA lives in [web/](web/) and talks to this API. With the API
+running (`docker compose up -d`):
+
+```bash
+cd web
+npm install
+npm run dev        # http://localhost:5173, proxies /api to localhost:8080
+```
+
+Or run it inside Compose alongside the API:
+
+```bash
+docker compose --profile frontend up -d
+```
+
+Unauthenticated visitors are redirected to `/login`; `/register` creates an
+account and signs in immediately. See [web/README.md](web/README.md).
+
 ## Configuration
 
 All settings are optional environment variables (read from `.env` or the real
@@ -97,12 +121,20 @@ Request:
 
 ```json
 {
-  "user": { "id": 1, "email": "ada@example.com", "created_at": "2026-09-03T12:00:00Z" },
+  "user": {
+    "id": 1,
+    "email": "ada@example.com",
+    "email_verified": false,
+    "email_verified_at": null,
+    "created_at": "2026-09-03T12:00:00Z"
+  },
   "token": "<jwt>",
   "expires_at": "2026-09-04T12:00:00+00:00"
 }
 ```
 
+New accounts are created with an unverified email (`email_verified: false`).
+
 Errors: `422` invalid input, `409` email already registered.
 
 Validation: `email` must be a valid address (≤ 255 chars); `password` must be
@@ -126,7 +158,15 @@ Requires `Authorization: Bearer <jwt>`.
 `200 OK`:
 
 ```json
-{ "user": { "id": 1, "email": "ada@example.com", "created_at": "2026-09-03T12:00:00Z" } }
+{
+  "user": {
+    "id": 1,
+    "email": "ada@example.com",
+    "email_verified": false,
+    "email_verified_at": null,
+    "created_at": "2026-09-03T12:00:00Z"
+  }
+}
 ```
 
 `401` if the header is missing, malformed, or the token is invalid/expired.
@@ -178,8 +218,9 @@ src/Http/Controllers/        Request handlers
 src/Repository/              Database access
 migrations/*.sql             Schema, applied by bin/migrate.php
 Dockerfile                   PHP 8.3 + Apache image
-docker-compose.yml           One-command local stack
+docker-compose.yml           One-command local stack (API; web via --profile frontend)
 docker/                      Apache vhost + container entrypoint
+web/                         Vue 3 + TypeScript + Vite PWA frontend
 ```
 
 ## Provenance

docker-compose.yml

@@ -19,5 +19,25 @@ services:
       - storage:/var/www/storage
     restart: unless-stopped
 
+  # Optional Vite dev server. Start it with:  docker compose --profile frontend up -d
+  # Without the profile, `docker compose up -d` runs the API alone.
+  web:
+    build: ./web
+    image: php-todo-web
+    profiles: ["frontend"]
+    ports:
+      - "5173:5173"
+    environment:
+      # /api is proxied to the API container on the compose network.
+      VITE_PROXY_TARGET: "http://app:80"
+    volumes:
+      - ./web:/app
+      # Keep the image's platform-specific node_modules; don't let the host's shadow them.
+      - web_node_modules:/app/node_modules
+    depends_on:
+      - app
+    restart: unless-stopped
+
 volumes:
   storage:
+  web_node_modules:

migrations/002_add_email_verification_to_users.sql

@@ -0,0 +1,3 @@
+-- Null means the email address has not been verified yet. New accounts start
+-- unverified; a later stage will add the endpoint that sets this timestamp.
+ALTER TABLE users ADD COLUMN email_verified_at TEXT NULL;

src/Http/Controllers/AuthController.php

@@ -64,7 +64,7 @@ final class AuthController extends Controller
      */
     public function me(Request $request, Response $response): Response
     {
-        /** @var array{id: int, email: string, created_at: string} $user */
+        /** @var array{id: int, email: string, email_verified_at: string|null, created_at: string} $user */
         $user = $request->getAttribute('user');
 
         return $this->json($response, ['user' => $this->presentUser($user)]);
@@ -110,7 +110,7 @@ final class AuthController extends Controller
     /**
      * Build the standard authentication payload returned by register and login.
      *
-     * @param array{id: int, email: string, created_at: string} $user
+     * @param array{id: int, email: string, email_verified_at: string|null, created_at: string} $user
      * @return array<string, mixed>
      */
     private function session(array $user): array
@@ -125,14 +125,18 @@ final class AuthController extends Controller
     }
 
     /**
-     * @param array{id: int, email: string, created_at?: string} $user
+     * @param array{id: int, email: string, email_verified_at?: string|null, created_at?: string} $user
      * @return array<string, mixed>
      */
     private function presentUser(array $user): array
     {
+        $verifiedAt = $user['email_verified_at'] ?? null;
+
         return [
             'id' => (int) $user['id'],
             'email' => $user['email'],
+            'email_verified' => $verifiedAt !== null,
+            'email_verified_at' => $verifiedAt,
             'created_at' => $user['created_at'] ?? null,
         ];
     }

src/Repository/UserRepository.php

@@ -9,7 +9,7 @@ use PDO;
 /**
  * Data access for the `users` table. Rows are returned as associative arrays.
  *
- * @phpstan-type UserRow array{id: int, email: string, password_hash: string, created_at: string, updated_at: string}
+ * @phpstan-type UserRow array{id: int, email: string, password_hash: string, email_verified_at: string|null, created_at: string, updated_at: string}
  */
 final class UserRepository
 {

tests/AuthTest.php

@@ -47,6 +47,8 @@ final class AuthTest extends TestCase
 
         $body = $this->decode($response);
         self::assertSame('ada@example.com', $body['user']['email']);
+        self::assertFalse($body['user']['email_verified']);
+        self::assertNull($body['user']['email_verified_at']);
         self::assertArrayNotHasKey('password_hash', $body['user']);
         self::assertNotEmpty($body['token']);
     }

web/.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+dist-ssr
+.env
+.env.local
+*.local
+.vscode

web/.env.example

@@ -0,0 +1,10 @@
+# Copy to .env.local to override. Both values have working defaults.
+
+# Base URL the SPA uses for REST API calls.
+# Default: /api  (relative — served through the dev-server proxy below)
+VITE_API_BASE_URL=/api
+
+# Where the Vite dev server forwards /api requests.
+# Default: http://localhost:8080  (the Dockerised API published on the host)
+# The compose "frontend" profile sets this to http://app:80 instead.
+VITE_PROXY_TARGET=http://localhost:8080

web/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# vite-plugin-pwa dev output
+dev-dist

web/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

web/Dockerfile

@@ -0,0 +1,15 @@
+# Development image: runs the Vite dev server. A production build image is a
+# later concern.
+FROM node:24-alpine
+
+WORKDIR /app
+
+# Install dependencies against this image's platform (musl), kept in a volume
+# by docker-compose so the host's node_modules never shadow them.
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+
+EXPOSE 5173
+CMD ["npm", "run", "dev"]

web/README.md

@@ -0,0 +1,55 @@
+# Todo List — web
+
+Vue 3 + TypeScript + Vite PWA. Talks to the REST API in the parent directory.
+
+## Develop on the host
+
+```bash
+npm install
+npm run dev            # http://localhost:5173
+```
+
+The dev server proxies `/api` to `http://localhost:8080` (the Dockerised API —
+run `docker compose up -d` in the parent directory first). Override the target
+with `VITE_PROXY_TARGET`, or point the app at a different API entirely with
+`VITE_API_BASE_URL` (see [.env.example](.env.example)).
+
+## Develop in Docker
+
+From the parent directory:
+
+```bash
+docker compose --profile frontend up -d
+```
+
+Runs this dev server alongside the API. `/api` is proxied to the `app` container.
+After changing `package.json`, rebuild: `docker compose build web`.
+
+## Build
+
+```bash
+npm run build         # type-checks, then emits dist/
+npm run preview
+```
+
+## Layout
+
+```
+src/main.ts            App bootstrap; resolves the stored session before mount
+src/router/index.ts    Routes + guard (redirects to /login when unauthenticated)
+src/stores/auth.ts     Pinia store: token in localStorage, register/login/fetchMe
+src/lib/api.ts         fetch wrapper, bearer token, typed ApiError
+src/views/             HomeView (placeholder), LoginView, RegisterView
+```
+
+## Auth flow
+
+- The token from `POST /api/auth/register` or `/login` is kept in `localStorage`
+  and sent as `Authorization: Bearer …`.
+- On load, `fetchMe()` validates the stored token via `GET /api/me`; a failure
+  clears it.
+- Routes with `meta.requiresAuth` redirect to `/login` (preserving the intended
+  path) when there is no authenticated user.
+- Registration signs the user in immediately; the new account's email is
+  unverified (`user.email_verified === false`), surfaced in the header and on the
+  home page.

web/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#4f46e5" />
+    <meta name="description" content="A simple todo list." />
+    <title>Todo List</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

web/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pinia": "^4.0.3",
+    "vue": "^3.5.41",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2",
+    "vite-plugin-pwa": "^1.3.0",
+    "vue-tsc": "^3.3.11"
+  }
+}

web/public/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Todo List">
+  <rect width="512" height="512" rx="96" fill="#4f46e5"/>
+  <path d="M138 266 l74 74 l162 -170"
+        fill="none" stroke="#ffffff" stroke-width="46"
+        stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

web/src/App.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { RouterView, useRouter } from 'vue-router'
+import { useAuthStore } from './stores/auth'
+
+const auth = useAuthStore()
+const router = useRouter()
+
+async function onLogout() {
+  auth.logout()
+  await router.push({ name: 'login' })
+}
+</script>
+
+<template>
+  <div class="app">
+    <header class="app__bar">
+      <span class="app__brand">Todo List</span>
+
+      <div v-if="auth.isAuthenticated" class="app__account">
+        <span class="app__email">{{ auth.user?.email }}</span>
+        <span v-if="!auth.emailVerified" class="badge badge--warn">email unverified</span>
+        <button type="button" class="link" @click="onLogout">Log out</button>
+      </div>
+    </header>
+
+    <main class="app__main">
+      <RouterView />
+    </main>
+  </div>
+</template>

web/src/lib/api.ts

@@ -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
+}

web/src/main.ts

@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import './style.css'
+import App from './App.vue'
+import router from './router'
+import { useAuthStore } from './stores/auth'
+
+const app = createApp(App)
+
+app.use(createPinia())
+
+// Resolve the stored session before the first navigation so route guards see a
+// settled auth state.
+await useAuthStore().fetchMe()
+
+app.use(router)
+app.mount('#app')

web/src/router/index.ts

@@ -0,0 +1,44 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: () => import('../views/HomeView.vue'),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('../views/LoginView.vue'),
+      meta: { guestOnly: true },
+    },
+    {
+      path: '/register',
+      name: 'register',
+      component: () => import('../views/RegisterView.vue'),
+      meta: { guestOnly: true },
+    },
+    { path: '/:pathMatch(.*)*', redirect: { name: 'home' } },
+  ],
+})
+
+router.beforeEach((to) => {
+  const auth = useAuthStore()
+
+  if (to.meta.requiresAuth && !auth.isAuthenticated) {
+    return {
+      name: 'login',
+      query: to.fullPath === '/' ? {} : { redirect: to.fullPath },
+    }
+  }
+
+  if (to.meta.guestOnly && auth.isAuthenticated) {
+    return { name: 'home' }
+  }
+})
+
+export default router

web/src/stores/auth.ts

@@ -0,0 +1,92 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { apiRequest, setAuthToken } from '../lib/api'
+import type { AuthResponse, User } from '../types'
+
+const TOKEN_KEY = 'todo.token'
+
+function readStoredToken(): string | null {
+  try {
+    return localStorage.getItem(TOKEN_KEY)
+  } catch {
+    return null
+  }
+}
+
+export const useAuthStore = defineStore('auth', () => {
+  const token = ref<string | null>(readStoredToken())
+  const user = ref<User | null>(null)
+  /** True until the initial `fetchMe()` on app start has settled. */
+  const loading = ref(false)
+
+  setAuthToken(token.value)
+
+  const isAuthenticated = computed(() => token.value !== null && user.value !== null)
+  const emailVerified = computed(() => user.value?.email_verified ?? false)
+
+  function setToken(value: string | null): void {
+    token.value = value
+    setAuthToken(value)
+    try {
+      if (value) localStorage.setItem(TOKEN_KEY, value)
+      else localStorage.removeItem(TOKEN_KEY)
+    } catch {
+      /* storage unavailable — session stays in memory only */
+    }
+  }
+
+  function adopt(response: AuthResponse): void {
+    setToken(response.token)
+    user.value = response.user
+  }
+
+  async function register(email: string, password: string): Promise<void> {
+    adopt(
+      await apiRequest<AuthResponse>('/auth/register', {
+        method: 'POST',
+        body: { email, password },
+      }),
+    )
+  }
+
+  async function login(email: string, password: string): Promise<void> {
+    adopt(
+      await apiRequest<AuthResponse>('/auth/login', {
+        method: 'POST',
+        body: { email, password },
+      }),
+    )
+  }
+
+  function logout(): void {
+    setToken(null)
+    user.value = null
+  }
+
+  /** Resolve the current user from a stored token; clears it if invalid. */
+  async function fetchMe(): Promise<void> {
+    if (!token.value) return
+
+    loading.value = true
+    try {
+      const { user: me } = await apiRequest<{ user: User }>('/me', { auth: true })
+      user.value = me
+    } catch {
+      logout()
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    token,
+    user,
+    loading,
+    isAuthenticated,
+    emailVerified,
+    register,
+    login,
+    logout,
+    fetchMe,
+  }
+})

web/src/style.css

@@ -0,0 +1,188 @@
+/* Placeholder styling only — just enough to be legible. */
+
+:root {
+  --bg: #f7f7f8;
+  --surface: #ffffff;
+  --border: #e2e2e5;
+  --text: #1c1c1f;
+  --muted: #6b6b73;
+  --accent: #4f46e5;
+  --accent-text: #ffffff;
+  --warn-bg: #fff4e5;
+  --warn-border: #f0c48a;
+  --error: #b3261e;
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #16161a;
+    --surface: #1f1f24;
+    --border: #33333a;
+    --text: #ececf1;
+    --muted: #9a9aa6;
+    --warn-bg: #2e2415;
+    --warn-border: #6b5220;
+    --error: #f2b8b5;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.app__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1.25rem;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.app__brand {
+  font-weight: 600;
+}
+
+.app__account {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.9rem;
+}
+
+.app__email {
+  color: var(--muted);
+}
+
+.app__main {
+  max-width: 32rem;
+  margin: 2.5rem auto;
+  padding: 0 1.25rem;
+}
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 1.75rem;
+}
+
+h1 {
+  margin: 0 0 0.75rem;
+  font-size: 1.4rem;
+}
+
+.muted {
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.notice {
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  background: var(--warn-bg);
+  border: 1px solid var(--warn-border);
+  border-radius: 8px;
+  font-size: 0.9rem;
+}
+
+.badge {
+  padding: 0.1rem 0.45rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  border: 1px solid var(--warn-border);
+  background: var(--warn-bg);
+}
+
+.facts {
+  margin: 1.25rem 0 0;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.facts div {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  border-top: 1px solid var(--border);
+  padding-top: 0.6rem;
+}
+
+.facts dt {
+  color: var(--muted);
+}
+
+.facts dd {
+  margin: 0;
+  text-align: right;
+  word-break: break-all;
+}
+
+.form {
+  display: grid;
+  gap: 1rem;
+  margin: 1.25rem 0;
+}
+
+.form label {
+  display: grid;
+  gap: 0.3rem;
+  font-size: 0.9rem;
+}
+
+.form input {
+  padding: 0.55rem 0.7rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 1rem;
+}
+
+button[type="submit"] {
+  padding: 0.6rem 1rem;
+  border: none;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--accent-text);
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+button[type="submit"]:disabled {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+.link {
+  border: none;
+  background: none;
+  color: var(--accent);
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+
+a {
+  color: var(--accent);
+}
+
+.hint {
+  color: var(--muted);
+}
+
+.field-error,
+.form-error {
+  color: var(--error);
+  font-size: 0.85rem;
+}

web/src/types.ts

@@ -0,0 +1,21 @@
+export interface User {
+  id: number
+  email: string
+  email_verified: boolean
+  email_verified_at: string | null
+  created_at: string | null
+}
+
+export interface AuthResponse {
+  user: User
+  token: string
+  expires_at: string
+}
+
+/** Shape of every error body returned by the API. */
+export interface ApiErrorBody {
+  error: {
+    message: string
+    details?: Record<string, string[]>
+  }
+}

web/src/views/HomeView.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useAuthStore } from '../stores/auth'
+
+const auth = useAuthStore()
+</script>
+
+<template>
+  <section class="card">
+    <h1>Your todo list</h1>
+    <p class="muted">
+      Placeholder page. The list and its items arrive in the next stage — for now
+      this screen just proves you are authenticated against the REST API.
+    </p>
+
+    <div v-if="!auth.emailVerified" class="notice">
+      Your email address <strong>{{ auth.user?.email }}</strong> has not been
+      verified yet. Verification will be added in a later stage.
+    </div>
+
+    <dl class="facts">
+      <div>
+        <dt>Signed in as</dt>
+        <dd>{{ auth.user?.email }}</dd>
+      </div>
+      <div>
+        <dt>Account created</dt>
+        <dd>{{ auth.user?.created_at ?? '—' }}</dd>
+      </div>
+      <div>
+        <dt>Email verified</dt>
+        <dd>{{ auth.emailVerified ? 'yes' : 'no' }}</dd>
+      </div>
+    </dl>
+  </section>
+</template>

web/src/views/LoginView.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ApiError } from '../lib/api'
+import { useAuthStore } from '../stores/auth'
+
+const auth = useAuthStore()
+const router = useRouter()
+const route = useRoute()
+
+const email = ref('')
+const password = ref('')
+const error = ref<ApiError | null>(null)
+const submitting = ref(false)
+
+async function onSubmit() {
+  submitting.value = true
+  error.value = null
+  try {
+    await auth.login(email.value, password.value)
+    const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/'
+    await router.push(redirect)
+  } catch (e) {
+    error.value = e instanceof ApiError ? e : new ApiError('Something went wrong.', 0)
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="card">
+    <h1>Log in</h1>
+
+    <form class="form" @submit.prevent="onSubmit">
+      <label>
+        <span>Email</span>
+        <input v-model="email" type="email" autocomplete="email" required />
+        <small v-if="error?.fieldError('email')" class="field-error">
+          {{ error.fieldError('email') }}
+        </small>
+      </label>
+
+      <label>
+        <span>Password</span>
+        <input v-model="password" type="password" autocomplete="current-password" required />
+        <small v-if="error?.fieldError('password')" class="field-error">
+          {{ error.fieldError('password') }}
+        </small>
+      </label>
+
+      <p v-if="error && Object.keys(error.details).length === 0" class="form-error">
+        {{ error.message }}
+      </p>
+
+      <button type="submit" :disabled="submitting">
+        {{ submitting ? 'Logging in…' : 'Log in' }}
+      </button>
+    </form>
+
+    <p class="muted">
+      No account? <RouterLink to="/register">Create one</RouterLink>.
+    </p>
+  </section>
+</template>

web/src/views/RegisterView.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ApiError } from '../lib/api'
+import { useAuthStore } from '../stores/auth'
+
+const auth = useAuthStore()
+const router = useRouter()
+
+const email = ref('')
+const password = ref('')
+const error = ref<ApiError | null>(null)
+const submitting = ref(false)
+
+async function onSubmit() {
+  submitting.value = true
+  error.value = null
+  try {
+    await auth.register(email.value, password.value)
+    // Registration signs the user straight in (with an unverified email).
+    await router.push('/')
+  } catch (e) {
+    error.value = e instanceof ApiError ? e : new ApiError('Something went wrong.', 0)
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="card">
+    <h1>Create an account</h1>
+    <p class="muted">
+      You will be signed in immediately. Your email address starts out
+      unverified.
+    </p>
+
+    <form class="form" @submit.prevent="onSubmit">
+      <label>
+        <span>Email</span>
+        <input v-model="email" type="email" autocomplete="email" required />
+        <small v-if="error?.fieldError('email')" class="field-error">
+          {{ error.fieldError('email') }}
+        </small>
+      </label>
+
+      <label>
+        <span>Password</span>
+        <input
+          v-model="password"
+          type="password"
+          autocomplete="new-password"
+          minlength="8"
+          required
+        />
+        <small v-if="error?.fieldError('password')" class="field-error">
+          {{ error.fieldError('password') }}
+        </small>
+        <small v-else class="hint">At least 8 characters.</small>
+      </label>
+
+      <p v-if="error && Object.keys(error.details).length === 0" class="form-error">
+        {{ error.message }}
+      </p>
+
+      <button type="submit" :disabled="submitting">
+        {{ submitting ? 'Creating…' : 'Create account' }}
+      </button>
+    </form>
+
+    <p class="muted">
+      Already registered? <RouterLink to="/login">Log in</RouterLink>.
+    </p>
+  </section>
+</template>

web/src/vite-env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
+
+interface ImportMetaEnv {
+  /** Base URL for REST API calls. Defaults to `/api` (proxied by the dev server). */
+  readonly VITE_API_BASE_URL?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

web/tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

web/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

web/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

web/vite.config.ts

@@ -0,0 +1,52 @@
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+import { VitePWA } from 'vite-plugin-pwa'
+
+// The API the dev server proxies `/api` to. Defaults to the Dockerised API on
+// the host; the compose `web` service overrides it to the internal address.
+const proxyTarget = process.env.VITE_PROXY_TARGET ?? 'http://localhost:8080'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.svg', 'apple-touch-icon.png'],
+      manifest: {
+        name: 'Todo List',
+        short_name: 'Todo',
+        description: 'A simple todo list.',
+        theme_color: '#4f46e5',
+        background_color: '#ffffff',
+        display: 'standalone',
+        start_url: '/',
+        icons: [
+          { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
+          { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
+          {
+            src: 'pwa-maskable-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+        ],
+      },
+      devOptions: {
+        // Let the service worker run under `npm run dev` too.
+        enabled: true,
+      },
+    }),
+  ],
+  server: {
+    host: true,
+    port: 5173,
+    strictPort: true,
+    proxy: {
+      '/api': {
+        target: proxyTarget,
+        changeOrigin: true,
+      },
+    },
+  },
+})