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,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.
|
||||
Reference in New Issue
Block a user