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:
Claude Sonnet 5
@@ -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>
|
||||
@@ -0,0 +1,65 @@
|
||||
import type { ApiErrorBody } from '../types'
|
||||
|
||||
const BASE_URL = import.meta.env.VITE_API_BASE_URL ?? '/api'
|
||||
|
||||
let authToken: string | null = null
|
||||
|
||||
/** Set (or clear) the bearer token sent with subsequent requests. */
|
||||
export function setAuthToken(token: string | null): void {
|
||||
authToken = token
|
||||
}
|
||||
|
||||
export class ApiError extends Error {
|
||||
readonly status: number
|
||||
readonly details: Record<string, string[]>
|
||||
|
||||
constructor(message: string, status: number, details: Record<string, string[]> = {}) {
|
||||
super(message)
|
||||
this.name = 'ApiError'
|
||||
this.status = status
|
||||
this.details = details
|
||||
}
|
||||
|
||||
/** First validation message for a field, if any. */
|
||||
fieldError(field: string): string | undefined {
|
||||
return this.details[field]?.[0]
|
||||
}
|
||||
}
|
||||
|
||||
interface RequestOptions {
|
||||
method?: string
|
||||
body?: unknown
|
||||
auth?: boolean
|
||||
}
|
||||
|
||||
export async function apiRequest<T>(path: string, options: RequestOptions = {}): Promise<T> {
|
||||
const { method = 'GET', body, auth = false } = options
|
||||
|
||||
const headers: Record<string, string> = { Accept: 'application/json' }
|
||||
if (body !== undefined) headers['Content-Type'] = 'application/json'
|
||||
if (auth && authToken) headers['Authorization'] = `Bearer ${authToken}`
|
||||
|
||||
let response: Response
|
||||
try {
|
||||
response = await fetch(`${BASE_URL}${path}`, {
|
||||
method,
|
||||
headers,
|
||||
body: body === undefined ? undefined : JSON.stringify(body),
|
||||
})
|
||||
} catch {
|
||||
throw new ApiError('Could not reach the server.', 0)
|
||||
}
|
||||
|
||||
const payload = await response.json().catch(() => null)
|
||||
|
||||
if (!response.ok) {
|
||||
const err = (payload as ApiErrorBody | null)?.error
|
||||
throw new ApiError(
|
||||
err?.message ?? `Request failed (${response.status}).`,
|
||||
response.status,
|
||||
err?.details ?? {},
|
||||
)
|
||||
}
|
||||
|
||||
return payload as T
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import { useAuthStore } from './stores/auth'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(createPinia())
|
||||
|
||||
// Resolve the stored session before the first navigation so route guards see a
|
||||
// settled auth state.
|
||||
await useAuthStore().fetchMe()
|
||||
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,44 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('../views/HomeView.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('../views/LoginView.vue'),
|
||||
meta: { guestOnly: true },
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'register',
|
||||
component: () => import('../views/RegisterView.vue'),
|
||||
meta: { guestOnly: true },
|
||||
},
|
||||
{ path: '/:pathMatch(.*)*', redirect: { name: 'home' } },
|
||||
],
|
||||
})
|
||||
|
||||
router.beforeEach((to) => {
|
||||
const auth = useAuthStore()
|
||||
|
||||
if (to.meta.requiresAuth && !auth.isAuthenticated) {
|
||||
return {
|
||||
name: 'login',
|
||||
query: to.fullPath === '/' ? {} : { redirect: to.fullPath },
|
||||
}
|
||||
}
|
||||
|
||||
if (to.meta.guestOnly && auth.isAuthenticated) {
|
||||
return { name: 'home' }
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,92 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { computed, ref } from 'vue'
|
||||
import { apiRequest, setAuthToken } from '../lib/api'
|
||||
import type { AuthResponse, User } from '../types'
|
||||
|
||||
const TOKEN_KEY = 'todo.token'
|
||||
|
||||
function readStoredToken(): string | null {
|
||||
try {
|
||||
return localStorage.getItem(TOKEN_KEY)
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const token = ref<string | null>(readStoredToken())
|
||||
const user = ref<User | null>(null)
|
||||
/** True until the initial `fetchMe()` on app start has settled. */
|
||||
const loading = ref(false)
|
||||
|
||||
setAuthToken(token.value)
|
||||
|
||||
const isAuthenticated = computed(() => token.value !== null && user.value !== null)
|
||||
const emailVerified = computed(() => user.value?.email_verified ?? false)
|
||||
|
||||
function setToken(value: string | null): void {
|
||||
token.value = value
|
||||
setAuthToken(value)
|
||||
try {
|
||||
if (value) localStorage.setItem(TOKEN_KEY, value)
|
||||
else localStorage.removeItem(TOKEN_KEY)
|
||||
} catch {
|
||||
/* storage unavailable — session stays in memory only */
|
||||
}
|
||||
}
|
||||
|
||||
function adopt(response: AuthResponse): void {
|
||||
setToken(response.token)
|
||||
user.value = response.user
|
||||
}
|
||||
|
||||
async function register(email: string, password: string): Promise<void> {
|
||||
adopt(
|
||||
await apiRequest<AuthResponse>('/auth/register', {
|
||||
method: 'POST',
|
||||
body: { email, password },
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
async function login(email: string, password: string): Promise<void> {
|
||||
adopt(
|
||||
await apiRequest<AuthResponse>('/auth/login', {
|
||||
method: 'POST',
|
||||
body: { email, password },
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
function logout(): void {
|
||||
setToken(null)
|
||||
user.value = null
|
||||
}
|
||||
|
||||
/** Resolve the current user from a stored token; clears it if invalid. */
|
||||
async function fetchMe(): Promise<void> {
|
||||
if (!token.value) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const { user: me } = await apiRequest<{ user: User }>('/me', { auth: true })
|
||||
user.value = me
|
||||
} catch {
|
||||
logout()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
token,
|
||||
user,
|
||||
loading,
|
||||
isAuthenticated,
|
||||
emailVerified,
|
||||
register,
|
||||
login,
|
||||
logout,
|
||||
fetchMe,
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,188 @@
|
||||
/* Placeholder styling only — just enough to be legible. */
|
||||
|
||||
:root {
|
||||
--bg: #f7f7f8;
|
||||
--surface: #ffffff;
|
||||
--border: #e2e2e5;
|
||||
--text: #1c1c1f;
|
||||
--muted: #6b6b73;
|
||||
--accent: #4f46e5;
|
||||
--accent-text: #ffffff;
|
||||
--warn-bg: #fff4e5;
|
||||
--warn-border: #f0c48a;
|
||||
--error: #b3261e;
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #16161a;
|
||||
--surface: #1f1f24;
|
||||
--border: #33333a;
|
||||
--text: #ececf1;
|
||||
--muted: #9a9aa6;
|
||||
--warn-bg: #2e2415;
|
||||
--warn-border: #6b5220;
|
||||
--error: #f2b8b5;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.app__bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.app__brand {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.app__account {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.app__email {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.app__main {
|
||||
max-width: 32rem;
|
||||
margin: 2.5rem auto;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.75rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.notice {
|
||||
margin: 1rem 0;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--warn-bg);
|
||||
border: 1px solid var(--warn-border);
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0.1rem 0.45rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75rem;
|
||||
border: 1px solid var(--warn-border);
|
||||
background: var(--warn-bg);
|
||||
}
|
||||
|
||||
.facts {
|
||||
margin: 1.25rem 0 0;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.facts div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 0.6rem;
|
||||
}
|
||||
|
||||
.facts dt {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.facts dd {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
|
||||
.form label {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form input {
|
||||
padding: 0.55rem 0.7rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
padding: 0.6rem 1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: var(--accent);
|
||||
color: var(--accent-text);
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[type="submit"]:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.link {
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.field-error,
|
||||
.form-error {
|
||||
color: var(--error);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
export interface User {
|
||||
id: number
|
||||
email: string
|
||||
email_verified: boolean
|
||||
email_verified_at: string | null
|
||||
created_at: string | null
|
||||
}
|
||||
|
||||
export interface AuthResponse {
|
||||
user: User
|
||||
token: string
|
||||
expires_at: string
|
||||
}
|
||||
|
||||
/** Shape of every error body returned by the API. */
|
||||
export interface ApiErrorBody {
|
||||
error: {
|
||||
message: string
|
||||
details?: Record<string, string[]>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="card">
|
||||
<h1>Your todo list</h1>
|
||||
<p class="muted">
|
||||
Placeholder page. The list and its items arrive in the next stage — for now
|
||||
this screen just proves you are authenticated against the REST API.
|
||||
</p>
|
||||
|
||||
<div v-if="!auth.emailVerified" class="notice">
|
||||
Your email address <strong>{{ auth.user?.email }}</strong> has not been
|
||||
verified yet. Verification will be added in a later stage.
|
||||
</div>
|
||||
|
||||
<dl class="facts">
|
||||
<div>
|
||||
<dt>Signed in as</dt>
|
||||
<dd>{{ auth.user?.email }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Account created</dt>
|
||||
<dd>{{ auth.user?.created_at ?? '—' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Email verified</dt>
|
||||
<dd>{{ auth.emailVerified ? 'yes' : 'no' }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ApiError } from '../lib/api'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const error = ref<ApiError | null>(null)
|
||||
const submitting = ref(false)
|
||||
|
||||
async function onSubmit() {
|
||||
submitting.value = true
|
||||
error.value = null
|
||||
try {
|
||||
await auth.login(email.value, password.value)
|
||||
const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/'
|
||||
await router.push(redirect)
|
||||
} catch (e) {
|
||||
error.value = e instanceof ApiError ? e : new ApiError('Something went wrong.', 0)
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="card">
|
||||
<h1>Log in</h1>
|
||||
|
||||
<form class="form" @submit.prevent="onSubmit">
|
||||
<label>
|
||||
<span>Email</span>
|
||||
<input v-model="email" type="email" autocomplete="email" required />
|
||||
<small v-if="error?.fieldError('email')" class="field-error">
|
||||
{{ error.fieldError('email') }}
|
||||
</small>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<span>Password</span>
|
||||
<input v-model="password" type="password" autocomplete="current-password" required />
|
||||
<small v-if="error?.fieldError('password')" class="field-error">
|
||||
{{ error.fieldError('password') }}
|
||||
</small>
|
||||
</label>
|
||||
|
||||
<p v-if="error && Object.keys(error.details).length === 0" class="form-error">
|
||||
{{ error.message }}
|
||||
</p>
|
||||
|
||||
<button type="submit" :disabled="submitting">
|
||||
{{ submitting ? 'Logging in…' : 'Log in' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="muted">
|
||||
No account? <RouterLink to="/register">Create one</RouterLink>.
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,75 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ApiError } from '../lib/api'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const error = ref<ApiError | null>(null)
|
||||
const submitting = ref(false)
|
||||
|
||||
async function onSubmit() {
|
||||
submitting.value = true
|
||||
error.value = null
|
||||
try {
|
||||
await auth.register(email.value, password.value)
|
||||
// Registration signs the user straight in (with an unverified email).
|
||||
await router.push('/')
|
||||
} catch (e) {
|
||||
error.value = e instanceof ApiError ? e : new ApiError('Something went wrong.', 0)
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="card">
|
||||
<h1>Create an account</h1>
|
||||
<p class="muted">
|
||||
You will be signed in immediately. Your email address starts out
|
||||
unverified.
|
||||
</p>
|
||||
|
||||
<form class="form" @submit.prevent="onSubmit">
|
||||
<label>
|
||||
<span>Email</span>
|
||||
<input v-model="email" type="email" autocomplete="email" required />
|
||||
<small v-if="error?.fieldError('email')" class="field-error">
|
||||
{{ error.fieldError('email') }}
|
||||
</small>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<span>Password</span>
|
||||
<input
|
||||
v-model="password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
minlength="8"
|
||||
required
|
||||
/>
|
||||
<small v-if="error?.fieldError('password')" class="field-error">
|
||||
{{ error.fieldError('password') }}
|
||||
</small>
|
||||
<small v-else class="hint">At least 8 characters.</small>
|
||||
</label>
|
||||
|
||||
<p v-if="error && Object.keys(error.details).length === 0" class="form-error">
|
||||
{{ error.message }}
|
||||
</p>
|
||||
|
||||
<button type="submit" :disabled="submitting">
|
||||
{{ submitting ? 'Creating…' : 'Create account' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="muted">
|
||||
Already registered? <RouterLink to="/login">Log in</RouterLink>.
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-plugin-pwa/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
/** Base URL for REST API calls. Defaults to `/api` (proxied by the dev server). */
|
||||
readonly VITE_API_BASE_URL?: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
Reference in New Issue
Block a user