Jakob Wennberg
645ed0a53e
* feat(login): method-state login panel with quiet inline errors The login panel now shows one method at a time (the pattern Swedish users know from banks, Kivra and Fortnox): BankID as the hero state, the email form as a peer state, and the remaining methods as two quiet half-width chips under a single divider. The last successful method is remembered in an accounted-login-method cookie, read server-side so a returning password user gets the form on the first paint with no flash. Error display drops the boxed banner everywhere: credential failures render as one destructive sentence directly under the password field (fields keep aria-invalid), and the reset-password action surfaces from the second consecutive failure. BankID/Google failures, callback errors and the session-timeout notice are single quiet lines at the top of the panel (AttnLine for the informational one). Also: password visibility toggle, webkit autofill repaint to the theme surface, auth pages move from the gradient background to the app frame tone, register/MFA/reset get the same backdrop for cross-page coherence, and Skapa konto moves out of the panel into a footer line. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat(register): mirror the method-state panel on signup Same treatment as the login page: BankID signup as the hero state, the email form as a peer state (live password checklist kept), alternatives as half-width chips under one divider, quiet-line notices instead of the blue box, subtitle dropped, footer harmonized. Successful signup persists the method hint so the user's first login opens correctly. The BankID-verified email-collection step keeps its panel takeover. 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>
36 lines
1.0 KiB
TypeScript
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>
|
|
)
|
|
}
|