Joakim Mörling
8d07bb7ab1
Implement client-side route protection with role-based access control. The auth store now extracts the role claim from JWT tokens and exposes isAdmin. Router guards enforce three levels of access: guestOnly (redirect authenticated users), requiresAuth (redirect unauthenticated to login with redirect param), and requiresAdmin (redirect non-admin users to home). Changes: - utils/jwt.ts: JWT payload parser using base64url decode (new file) - authStore: add role ref, isAdmin computed, extractRole from JWT payload - router: add route metadata (requiresAuth, requiresAdmin, guestOnly) and beforeEach guard with getActivePinia() safety for test environments - OrdersPage.vue, AdminPage.vue: placeholder pages (new files) - LoginPage.vue, RegisterPage.vue: use route.query.redirect after auth - Router.spec.ts: 14 tests covering all guard scenarios - authStore.spec.ts: tests for role extraction, isAdmin, role persistence - LoginPage.spec.ts: test for redirect query param after login - auth-guards.spec.ts: 7 Playwright E2E tests for guard behavior - login.spec.ts: fix seed user credentials (test@bilhalsning.se)
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
test.describe('Login page', () => {
|
|
test('can navigate to login page', async ({ page }) => {
|
|
await page.goto('/logga-in')
|
|
await expect(page.getByRole('heading', { name: 'Logga in' })).toBeVisible()
|
|
})
|
|
|
|
test('shows error for invalid credentials', async ({ page }) => {
|
|
await page.goto('/logga-in')
|
|
await page.getByLabel('E-postadress').fill('user@example.com')
|
|
await page.getByLabel('Lösenord').fill('wrongpassword')
|
|
await page.getByRole('button', { name: 'Logga in' }).click()
|
|
|
|
await expect(page.getByText('Felaktig e-post eller lösenord')).toBeVisible()
|
|
})
|
|
|
|
test('redirects to home after successful login', async ({ page }) => {
|
|
await page.goto('/logga-in')
|
|
await page.getByLabel('E-postadress').fill('test@bilhalsning.se')
|
|
await page.getByLabel('Lösenord').fill('test1234')
|
|
await page.getByRole('button', { name: 'Logga in' }).click()
|
|
|
|
await expect(page).toHaveURL('/')
|
|
})
|
|
|
|
test('can navigate from login to register', async ({ page }) => {
|
|
await page.goto('/logga-in')
|
|
await page.getByRole('link', { name: 'Skapa konto' }).click()
|
|
|
|
await expect(page).toHaveURL('/registrera')
|
|
await expect(
|
|
page.getByRole('heading', { name: 'Skapa konto' }),
|
|
).toBeVisible()
|
|
})
|
|
|
|
test('login form has correct input types', async ({ page }) => {
|
|
await page.goto('/logga-in')
|
|
await expect(page.getByLabel('E-postadress')).toHaveAttribute(
|
|
'type',
|
|
'email',
|
|
)
|
|
await expect(page.getByLabel('Lösenord')).toHaveAttribute(
|
|
'type',
|
|
'password',
|
|
)
|
|
})
|
|
})
|