Madhura68
3a90fa9d13
Voltooit de desktop-zijde van de QR-pairing-flow. Gebruiker klikt "Inloggen
via mobiel" naast het wachtwoord-formulier → krijgt een QR-code → telefoon
scant en bevestigt → desktop wordt automatisch ingelogd zonder dat er ooit
een wachtwoord is getypt op het publieke apparaat.
app/(auth)/login/qr-login-button.tsx (Client Component):
- Phase-state: idle | starting | showing | expired | claiming
- klik → POST /api/auth/pair/start (credentials:'same-origin' voor s4m_pair)
- QRCodeSVG met fragment-URL als value (level=M, 200px); aria-label
- EventSource('/api/auth/pair/stream/<id>', { withCredentials: true })
vereist voor cookie-auth — standaard verstuurt EventSource geen credentials
- bij data.status === 'approved': es.close → POST /pair/claim → router.push('/dashboard')
- aftellende timer (mm:ss); bij 0s → 'expired' state met Vernieuwen-knop
- cleanup bij unmount: removeEventListener + close
- A11y: <details> sectie toont fragment-URL als kopieerbare tekst voor screenreaders en gebruikers zonder camera
app/(auth)/login/page.tsx: QrLoginButton onder het bestaande wachtwoord-form
met "of"-divider, achter de bestaande surface-container-low styling.
Dependency: qrcode.react ^4.2.0 (client-side SVG; geen extra round-trip;
mobileSecret blijft op desktop in JS-geheugen).
Quality gates: lint 0 errors, tsc clean, vitest 139/139, next build slaagt
(login-route static, m/pair en pair/* dynamic).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
77 lines
2.1 KiB
JSON
77 lines
2.1 KiB
JSON
{
|
|
"name": "scrum4me",
|
|
"version": "0.4.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"predev": "npx --yes kill-port 3000 || exit 0",
|
|
"dev": "next dev -p 3000",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "eslint",
|
|
"test": "vitest run",
|
|
"test:watch": "vitest",
|
|
"prepare": "husky",
|
|
"postinstall": "prisma generate --generator client",
|
|
"db:erd": "prisma generate",
|
|
"db:erd:watch": "chokidar \"prisma/schema.prisma\" -c \"npm run db:erd\"",
|
|
"db:insert-milestone": "tsx scripts/insert-milestone.ts",
|
|
"seed": "prisma db seed"
|
|
},
|
|
"dependencies": {
|
|
"@base-ui/react": "^1.4.1",
|
|
"@dnd-kit/core": "^6.3.1",
|
|
"@dnd-kit/sortable": "^8.0.0",
|
|
"@dnd-kit/utilities": "^3.2.2",
|
|
"@prisma/adapter-pg": "^7.8.0",
|
|
"@prisma/client": "^7.8.0",
|
|
"@tanstack/react-table": "^8.21.3",
|
|
"@vercel/analytics": "^2.0.1",
|
|
"bcryptjs": "^2.4.3",
|
|
"class-variance-authority": "^0.7.1",
|
|
"clsx": "^2.1.1",
|
|
"dotenv": "^17.4.2",
|
|
"iron-session": "^8.0.4",
|
|
"lucide-react": "^1.8.0",
|
|
"next": "16.2.4",
|
|
"next-themes": "^0.4.6",
|
|
"pg": "^8.20.0",
|
|
"prisma": "^7.8.0",
|
|
"qrcode.react": "^4.2.0",
|
|
"react": "19.2.4",
|
|
"react-dom": "19.2.4",
|
|
"shadcn": "^4.4.0",
|
|
"sharp": "^0.34.5",
|
|
"sonner": "^1.7.4",
|
|
"tailwind-merge": "^3.5.0",
|
|
"tw-animate-css": "^1.4.0",
|
|
"zod": "^3.25.76",
|
|
"zustand": "^5.0.12"
|
|
},
|
|
"prisma": {
|
|
"seed": "tsx prisma/seed.ts"
|
|
},
|
|
"lint-staged": {
|
|
"*.{ts,tsx,mjs}": "eslint --fix"
|
|
},
|
|
"devDependencies": {
|
|
"@mermaid-js/mermaid-cli": "^11.12.0",
|
|
"@tailwindcss/postcss": "^4",
|
|
"@types/bcryptjs": "^2.4.6",
|
|
"@types/node": "^20",
|
|
"@types/pg": "^8.20.0",
|
|
"@types/react": "^19",
|
|
"@types/react-dom": "^19",
|
|
"@vitest/coverage-v8": "^4.1.5",
|
|
"chokidar-cli": "^3.0.0",
|
|
"concurrently": "^9.2.1",
|
|
"eslint": "^9",
|
|
"eslint-config-next": "16.2.4",
|
|
"husky": "^9.1.7",
|
|
"lint-staged": "^16.4.0",
|
|
"prisma-erd-generator": "^2.4.2",
|
|
"tailwindcss": "^4",
|
|
"tsx": "^4.21.0",
|
|
"typescript": "^5",
|
|
"vitest": "^4.1.5"
|
|
}
|
|
}
|