project-manager/web

Project Manager — web

Vue 3 + TypeScript + Vite PWA. Talks to the REST API in the parent directory.

Develop on the host

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).

Develop in Docker

From the parent directory:

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

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/projects.ts  Pinia store: the user's projects (fetch + create)
src/stores/cards.ts     Pinia store: one project's cards (CRUD + drag reorder)
src/lib/api.ts          fetch wrapper, bearer token, typed ApiError
src/components/CardRow.vue  checkbox + editable text + delete, one card
src/views/              HomeView, ProjectView, LoginView, RegisterView,
                        ProfileView, VerifyEmailView

Project detail

/projects/:id shows one project. The title and description are inline-editable (saved on blur via PATCH /api/projects/:id; the description shows an "Add a description" placeholder when empty). A Manage menu (top right) has a Delete project action that opens a confirmation modal; confirming calls DELETE /api/projects/:id and returns to the all-projects view.

Each card 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/projects/:id/cards/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 projects.
• /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.