feat(login): method-state login panel with quiet inline errors (#1469)

* 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>

lib/auth/__tests__/login-method.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import {
+  LOGIN_METHOD_COOKIE,
+  isLoginMethod,
+  persistLoginMethodHint,
+} from '@/lib/auth/login-method'
+
+describe('isLoginMethod', () => {
+  it('accepts the two supported methods', () => {
+    expect(isLoginMethod('bankid')).toBe(true)
+    expect(isLoginMethod('email')).toBe(true)
+  })
+
+  it('rejects anything else', () => {
+    expect(isLoginMethod('google')).toBe(false)
+    expect(isLoginMethod('password')).toBe(false)
+    expect(isLoginMethod('')).toBe(false)
+    expect(isLoginMethod(undefined)).toBe(false)
+    expect(isLoginMethod(null)).toBe(false)
+  })
+})
+
+describe('persistLoginMethodHint', () => {
+  it('is a no-op outside the browser', () => {
+    expect(() => persistLoginMethodHint('email')).not.toThrow()
+  })
+})
+
+describe('LOGIN_METHOD_COOKIE', () => {
+  // New wire identifiers use the accounted name; only pre-rebrand ones keep
+  // the gnubok prefix. Locks the name so a rename cannot silently strand the
+  // stored hints of every returning user.
+  it('stays on the accounted name', () => {
+    expect(LOGIN_METHOD_COOKIE).toBe('accounted-login-method')
+  })
+})

lib/auth/login-method.ts

@@ -0,0 +1,23 @@
+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}`
+}