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>
24 lines
977 B
TypeScript
24 lines
977 B
TypeScript
export const LOGIN_METHOD_COOKIE = 'accounted-login-method'
|
|
|
|
/**
|
|
* Which login method the panel opens in. 'email' covers password login;
|
|
* Google is a one-click redirect and never owns the panel state.
|
|
*/
|
|
export type LoginMethod = 'bankid' | 'email'
|
|
|
|
export function isLoginMethod(value: unknown): value is LoginMethod {
|
|
return value === 'bankid' || value === 'email'
|
|
}
|
|
|
|
/**
|
|
* Remember the method that just succeeded so the next visit opens the login
|
|
* panel directly in that state. Read server-side by app/(auth)/login/page.tsx,
|
|
* which is why this is a cookie and not localStorage: the server can render
|
|
* the right state on the first paint, with no client-side flash.
|
|
*/
|
|
export function persistLoginMethodHint(method: LoginMethod): void {
|
|
if (typeof document === 'undefined') return
|
|
const secure = window.location.protocol === 'https:' ? '; Secure' : ''
|
|
document.cookie = `${LOGIN_METHOD_COOKIE}=${method}; Path=/; Max-Age=31536000; SameSite=Lax${secure}`
|
|
}
|