Files
project-manager/web/README.md
T
aneurinandClaude Sonnet 5 f9b65cc4a7 Add stage 7: email verification magic links and a profile page
Backend
- New Mail namespace: a Mailer interface with SMTP (phpmailer), PHP mail()
  (the default fallback), and log-to-file transports, selected by
  MAIL_TRANSPORT. EmailVerifier issues a hashed, 15-minute magic-link token
  and sends the link (APP_URL/verify-email?token=...).
- Migration 005: email_verifications table + users.verification_email_sent_at.
- Registration now emails a verification link (best effort — a send failure
  doesn't fail registration).
- POST /api/auth/verify-email consumes a token and returns a session, so
  opening the link verifies the address (or applies a pending email change)
  and logs the user in. Single-use; distinct 400s for invalid/used/expired.
- POST /api/email/verification resends; POST /api/email/change requests a
  deferred change (current password required; link goes to the new address;
  users.email only updates when that link is opened). Both throttled to once
  per 60s, returning 429 + retry_after.
- GET /api/me and every session payload now include pending_email. Shared
  SessionPayload builds the user/session JSON for all entry points.

Frontend
- /verify-email view: posts the token, adopts the returned session, redirects.
- /profile view: shows address + status, a resend button with a live cooldown
  (driven by retry_after / 429), and a change-email form (new address +
  current password) that surfaces the pending change.
- Header shows a "verify email" badge linking to the profile.

Tests: 9 new (EmailVerificationTest) covering the link lifecycle, throttle,
and deferred change; AuthTest folded into ApiTestCase, which now routes mail
to a per-test log. Suite: 32 passing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-03 20:04:49 +01:00

87 lines
3.4 KiB
Markdown

# 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/stores/lists.ts Pinia store: the user's lists (fetch + create)
src/stores/items.ts Pinia store: one list's items (CRUD + drag reorder)
src/lib/api.ts fetch wrapper, bearer token, typed ApiError
src/components/TodoItemRow.vue checkbox + editable text + delete, one item
src/views/ HomeView, ListView, LoginView, RegisterView,
ProfileView, VerifyEmailView
```
## List detail
`/lists/:id` shows one list. The title and description are inline-editable
(saved on blur via `PATCH /api/lists/:id`; the description shows an "Add a
description" placeholder when empty). A **Manage** menu (top right) has a
**Delete list** action that opens a confirmation modal; confirming calls
`DELETE /api/lists/:id` and returns to the all-lists view.
Each item row is a checkbox, an inline-editable text field (saved on blur), a
delete button, and a drag handle. Reordering uses `vuedraggable`; on drop the
whole new order is persisted via `PUT /api/lists/:id/items/order`, and the
server response replaces local state.
## 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`). The header shows a "verify
email" badge linking to `/profile`.
## Email verification & profile
- The registration email links to `/verify-email?token=…`. `VerifyEmailView`
POSTs the token to the API, which returns a session — so opening the link both
verifies the address and signs the user in — then redirects to the lists.
- `/profile` (`ProfileView`) shows the address and verification status. When
unverified it offers a **Resend** button; the API throttles to once a minute,
and the button shows a live countdown (driven by `retry_after`, and by `429`
responses).
- The **Change email** form takes the new address and the current password.
On success the API has emailed a confirmation link to the *new* address and
set `user.pending_email`; the change only lands when that link is opened. The
resend and change actions share the one-minute cooldown.