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>

components/auth/AuthFormError.tsx

@@ -1,14 +1,17 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { CircleAlert } from 'lucide-react'
 
 /**
- * Inline error alert for the auth forms (login, register, reset).
+ * Inline error line for the auth forms (login, register, reset).
  *
- * Auth failures render here, adjacent to the fields, instead of in a toast:
+ * 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. role="alert" makes screen readers announce
- * the message when it appears.
+ * 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,
@@ -18,14 +21,15 @@ export function AuthFormError({
   action?: ReactNode
 }) {
   return (
-    <div
+    <p
       role="alert"
-      className="animate-fade-in rounded-lg border border-destructive/30 bg-destructive/5 p-4"
+      className="animate-fade-in flex items-start gap-2 text-[13px] leading-5 text-destructive"
     >
-      <p className="text-sm text-destructive">
+      <CircleAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+      <span>
         {message}
         {action && <> {action}</>}
-      </p>
-    </div>
+      </span>
+    </p>
   )
 }

components/auth/AuthPageSkeleton.tsx

@@ -2,16 +2,13 @@ import { Skeleton } from '@/components/ui/skeleton'
 
 export function AuthPageSkeleton() {
   return (
-    <main className="flex min-h-screen items-center justify-center bg-background p-4" aria-busy="true">
-      <div className="w-full max-w-sm space-y-6 rounded-lg border bg-card p-6">
-        <div className="space-y-2">
-          <Skeleton className="mx-auto h-8 w-40" />
-          <Skeleton className="mx-auto h-4 w-56" />
-        </div>
-        <div className="space-y-4">
-          <Skeleton className="h-11 w-full" />
+    <main className="flex min-h-screen items-center justify-center bg-frame p-4" aria-busy="true">
+      <div className="w-full max-w-sm">
+        <Skeleton className="mx-auto mb-8 h-12 w-48" />
+        <div className="space-y-4 rounded-xl border border-border bg-background p-6">
           <Skeleton className="h-11 w-full" />
           <Skeleton className="h-11 w-full" />
+          <Skeleton className="h-10 w-full" />
         </div>
       </div>
     </main>

components/auth/BankIdAuth.tsx

@@ -41,6 +41,12 @@ export interface BankIdResult {
 interface BankIdAuthProps {
   mode: 'login' | 'signup' | 'link'
   onComplete: (result: BankIdResult) => void
+  /**
+   * Render the idle button as the panel's primary action (filled pill) instead
+   * of the default outline. Used by the login page, where BankID owns the
+   * primary zone; register and settings keep the quieter outline.
+   */
+  hero?: boolean
 }
 
 const API_BASE = '/api/extensions/ext/tic/bankid'
@@ -127,7 +133,7 @@ function launchBankIdApp(autoStartToken: string): void {
  * Handles QR code display (desktop) or app deep link (mobile),
  * polling, and result handling.
  */
-export function BankIdAuth({ mode, onComplete }: BankIdAuthProps) {
+export function BankIdAuth({ mode, onComplete, hero = false }: BankIdAuthProps) {
   const [status, setStatus] = useState<BankIdStatus>('idle')
   const [session, setSession] = useState<BankIdSession | null>(null)
   const [hintMessage, setHintMessage] = useState<string>('')
@@ -446,10 +452,12 @@ export function BankIdAuth({ mode, onComplete }: BankIdAuthProps) {
     return (
       <Button
         onClick={startSession}
-        variant="outline"
-        className="w-full gap-2 border-[1.5px] py-6 text-base"
+        variant={hero ? 'default' : 'outline'}
+        className={hero ? 'h-11 w-full gap-2' : 'w-full gap-2 border-[1.5px] py-6 text-base'}
       >
-        <BankIdIcon />
+        {/* On the filled pill the logo must counter-invert: primary is dark in
+            light mode (white logo) and light in dark mode (black logo). */}
+        <BankIdIcon className={hero ? 'invert dark:invert-0' : undefined} />
         {label}
       </Button>
     )
@@ -546,14 +554,15 @@ export function BankIdAuth({ mode, onComplete }: BankIdAuthProps) {
   )
 }
 
-function BankIdIcon() {
+function BankIdIcon({ className }: { className?: string }) {
   return (
     <Image
       src="/logos/bankid-seeklogo.svg"
       alt="BankID"
       width={20}
       height={20}
-      className="dark:invert"
+      loading="eager"
+      className={className ?? 'dark:invert'}
     />
   )
 }

components/auth/GoogleAuthButton.tsx

@@ -40,7 +40,18 @@ function GoogleMark() {
  * The flow=oauth marker lets the callback tag failures so the login page
  * shows Google-specific copy instead of the email-confirmation framing.
  */
-export function GoogleAuthButton({ onError }: { onError: (message: string) => void }) {
+export function GoogleAuthButton({
+  onError,
+  compact = false,
+}: {
+  onError: (message: string) => void
+  /**
+   * Half-width alternative-method chip on the login panel: shows just the
+   * mark and "Google" (a brand name, never translated), with the full label
+   * kept as the accessible name.
+   */
+  compact?: boolean
+}) {
   const [isRedirecting, setIsRedirecting] = useState(false)
   const supabase = createClient()
   const tAuth = useTranslations('auth')
@@ -70,16 +81,19 @@ export function GoogleAuthButton({ onError }: { onError: (message: string) => vo
     <Button
       type="button"
       variant="outline"
-      className="w-full h-11"
+      className={compact ? 'h-10 w-full gap-2' : 'w-full h-11'}
       onClick={handleClick}
       disabled={isRedirecting}
+      aria-label={tAuth('continue_with_google')}
     >
       {isRedirecting ? (
-        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+        <Loader2 className={compact ? 'h-4 w-4 animate-spin' : 'mr-2 h-4 w-4 animate-spin'} />
       ) : (
-        <span className="mr-2 flex items-center"><GoogleMark /></span>
+        <span className={compact ? 'flex items-center' : 'mr-2 flex items-center'}>
+          <GoogleMark />
+        </span>
       )}
-      {tAuth('continue_with_google')}
+      {compact ? 'Google' : tAuth('continue_with_google')}
     </Button>
   )
 }