# 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 register / login / opening a magic link 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`.
- `LoginView` defaults to **magic link**: an email field and a "Log in with
  email" button that calls `POST /api/auth/magic-link`. A "Log in with password"
  link reveals the password field and switches the button to a plain "Log in"
  (`POST /api/auth/login`); the link then reads "Get a magic link" to switch
  back.

## Email verification & profile

- `/verify-email?token=…` is the target for every magic link (verification,
  passwordless login, email change). `VerifyEmailView` POSTs the token to the
  API, which returns a session — so opening any 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.