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