Joakim Mörling
6f23368749
Update AppHeader to reflect authentication state. When not authenticated, show Logga in and Registrera links. When authenticated, show the user's email address and a Logga ut button. Uses v-if/v-else with template blocks for clean conditional rendering without wrapper elements. Changes: - authStore: add email computed that extracts sub claim from JWT payload - AppHeader: conditional nav with v-if/v-else (guest vs authenticated) - AppHeader: add email display and logout button with styles - App.spec.ts: add Pinia to test setup (required by AppHeader now) - AppHeader.spec.ts: rewrite with tests for both auth states - authStore.spec.ts: add tests for email extraction and clearing - header-auth.spec.ts: 5 Playwright E2E tests for header auth state |
||
|---|---|---|
| .. | ||
| e2e | ||
| public | ||
| src | ||
| .gitignore | ||
| .prettierrc | ||
| eslint.config.ts | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| playwright.config.ts | ||
| README.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.