Jakob Wennberg
0bb0b89353
* feat(auth): inline, specific error states on login and signup Auth failures now render inline next to the form instead of as a top-right toast: a persistent alert with role=alert, aria-invalid field highlighting, and focus returned to the offending field. Login maps GoTrue error codes (invalid_credentials, email_not_confirmed, rate limits, user_banned) to specific Swedish/English messages, with a reset-password link embedded in the credentials error. The credentials message stays 'wrong email or password' by design: GoTrue returns one code for both cases to prevent account enumeration. Signup gets a live password-requirements checklist, field-level errors for weak/mismatched passwords, and inline handling of email-exists, invalid-email and rate-limit responses with a sign-in link where that is the recovery path. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(auth): treat email_provider_disabled as signup-disabled with specific copy Review follow-up: GoTrue signals disabled email/password signups with email_provider_disabled as well as signup_disabled; classify both (plus the message-string fallback for older GoTrue) and give the register form a specific inline message instead of the generic fallback. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
32 lines
766 B
TypeScript
32 lines
766 B
TypeScript
'use client'
|
|
|
|
import type { ReactNode } from 'react'
|
|
|
|
/**
|
|
* Inline error alert for the auth forms (login, register, reset).
|
|
*
|
|
* Auth failures render here, adjacent to the fields, instead of in a toast:
|
|
* a toast in the corner auto-dismisses, sits far from the locus of attention,
|
|
* and is easy to miss entirely. role="alert" makes screen readers announce
|
|
* the message when it appears.
|
|
*/
|
|
export function AuthFormError({
|
|
message,
|
|
action,
|
|
}: {
|
|
message: string
|
|
action?: ReactNode
|
|
}) {
|
|
return (
|
|
<div
|
|
role="alert"
|
|
className="animate-fade-in rounded-lg border border-destructive/30 bg-destructive/5 p-4"
|
|
>
|
|
<p className="text-sm text-destructive">
|
|
{message}
|
|
{action && <> {action}</>}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|