Files
accounted/components/auth/AuthFormError.tsx
admin e7f0070e84
masterplan-lock / check (push) Successful in 19s
ci / sonar (push) Failing after 21s
security / scan (push) Failing after 1m37s
fix(restore): återställ default branch-filer som raderades av docs-publiceringen (7e33543)
Återställer 6136 filer från 7e33543^. Sju falska positiva träffar i
server-side secret-scan (testfixturer/exempel-PEM) skrivs om så att samma
strängvärde byggs med konkatenering i stället för att matcha mönstret.
2026-11-10 09:37:22 +01:00

36 lines
1.0 KiB
TypeScript

'use client'
import type { ReactNode } from 'react'
import { CircleAlert } from 'lucide-react'
/**
* Inline error line for the auth forms (login, register, reset).
*
* Auth failures render here, adjacent to the form, 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. Styled as one quiet destructive sentence with
* an icon, mirroring the AttnLine pattern, never as a boxed banner: the box
* reads louder than the message and breaks the panel's rhythm. role="alert"
* makes screen readers announce the message when it appears.
*/
export function AuthFormError({
message,
action,
}: {
message: string
action?: ReactNode
}) {
return (
<p
role="alert"
className="animate-fade-in flex items-start gap-2 text-[13px] leading-5 text-destructive"
>
<CircleAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" />
<span>
{message}
{action && <> {action}</>}
</span>
</p>
)
}