feat(auth): enhance login page accessibility and form error reset
All checks were successful
Deploy Flowstate to VPS / deploy (push) Successful in 46s

This commit is contained in:
Chneemann 2026-10-12 10:24:18 +02:00
parent c1e2dd4407
commit 3be5077178
No known key found for this signature in database

View file

@ -1,6 +1,6 @@
/** /**
* @file app/(auth)/login/page.tsx * @file app/(auth)/login/page.tsx
* @description Client component providing a user login interface utilizing the auth service. * @description Client component providing a user login interface utilizing the auth service and ActionButton.
*/ */
"use client"; "use client";
@ -25,6 +25,15 @@ export default function LoginPage() {
"credentials" | "guest" | null "credentials" | "guest" | null
>(null); >(null);
/**
* Clears active error state when user modifies input fields.
*/
const handleInputChange = () => {
if (error) {
setError(null);
}
};
/** /**
* Performs user authentication via email and password using the auth service. * Performs user authentication via email and password using the auth service.
* Redirects to the summary page upon success or sets an error message on failure. * Redirects to the summary page upon success or sets an error message on failure.
@ -125,7 +134,11 @@ export default function LoginPage() {
</div> </div>
)} )}
<form onSubmit={handleSubmit} className="space-y-4"> <form
onSubmit={handleSubmit}
onChange={handleInputChange}
className="space-y-4"
>
<div className="space-y-1.5"> <div className="space-y-1.5">
<label <label
htmlFor="email" htmlFor="email"
@ -139,6 +152,7 @@ export default function LoginPage() {
type="email" type="email"
placeholder="name@example.com" placeholder="name@example.com"
maxLength={255} maxLength={255}
autoComplete="email"
required required
className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors" className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
/> />
@ -157,6 +171,7 @@ export default function LoginPage() {
type="password" type="password"
placeholder="••••••••••••" placeholder="••••••••••••"
maxLength={72} maxLength={72}
autoComplete="current-password"
required required
className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors" className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
/> />