feat(auth): enhance login page accessibility and form error reset
All checks were successful
Deploy Flowstate to VPS / deploy (push) Successful in 46s
All checks were successful
Deploy Flowstate to VPS / deploy (push) Successful in 46s
This commit is contained in:
parent
c1e2dd4407
commit
3be5077178
1 changed files with 17 additions and 2 deletions
|
|
@ -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"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue