Madhura68
31ff70b71a
Statische audit op happy-path-code; 4 categorieën gefixt vóór de Lighthouse-
verificatie die de gebruiker handmatig draait:
1. <main>-landmark op /login en /register (waren <div>); auth-pages krijgen
nu een correcte landmark zodat screen-readers ze kunnen overslaan/nav
2. solo-task-card.tsx: agent-status-pill had role="button" + aria-label maar
GEEN tabIndex en GEEN onKeyDown — keyboard-onbereikbaar. Nu compleet:
tabIndex={0} + Enter/Space-handler
3. Form-label-associaties via htmlFor + id-pairs:
- story-dialog (5): code, title, description, acceptance + priority via labelledby
- task-dialog (3): title, description, implementation_plan
- todo-list PromotePbi/PromoteStory dialogs (6): title, product, pbi, priority
Lighthouse a11y "form-field-multiple-labels" en "label" rules worden
hierdoor groen.
Niet aangeraakt:
- pbi-dialog: htmlFor was al goed gewired
- auth-form: htmlFor was al goed gewired
- Color-contrast: gebruikt MD3-tokens; theoretisch correct (verifieer in
Lighthouse run)
- Heading-hierarchy: nog niet gescand — kan in vervolgronde
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
import Link from 'next/link'
|
|
import { loginAction } from '@/actions/auth'
|
|
import { AuthForm } from '@/components/auth/auth-form'
|
|
import { QrLoginButton } from './qr-login-button'
|
|
|
|
export default function LoginPage() {
|
|
return (
|
|
<main className="min-h-screen bg-background flex items-center justify-center p-4">
|
|
<div className="w-full max-w-sm space-y-6">
|
|
|
|
{/* Logo / titel */}
|
|
<div className="text-center space-y-1">
|
|
<h1 className="text-2xl font-medium text-foreground">Scrum4Me</h1>
|
|
<p className="text-sm text-muted-foreground">Inloggen bij je account</p>
|
|
</div>
|
|
|
|
{/* Formulier */}
|
|
<div className="bg-surface-container-low rounded-xl p-6 space-y-4 border border-border">
|
|
<AuthForm action={loginAction} submitLabel="Inloggen" />
|
|
|
|
{/* M10 — Inloggen via mobiel zonder wachtwoord */}
|
|
<div className="flex items-center gap-2 py-1">
|
|
<div className="border-border h-px flex-1 border-t" />
|
|
<span className="text-muted-foreground text-xs">of</span>
|
|
<div className="border-border h-px flex-1 border-t" />
|
|
</div>
|
|
<QrLoginButton />
|
|
|
|
<div className="text-center text-sm text-muted-foreground">
|
|
Nog geen account?{' '}
|
|
<Link href="/register" className="text-primary hover:underline font-medium">
|
|
Registreer hier
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Demo credentials */}
|
|
<div className="bg-info-container text-info-container-foreground rounded-xl p-4 text-sm space-y-1 border border-border">
|
|
<p className="font-medium">Demo-account (alleen lezen)</p>
|
|
<p>Gebruikersnaam: <span className="font-mono font-medium">demo</span></p>
|
|
<p>Wachtwoord: <span className="font-mono font-medium">demo1234</span></p>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|