From c6e5e0b1a903e62ab3b043f4d3178817221134f0 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Sun, 18 Oct 2026 18:49:18 +0200
Subject: [PATCH] feat(auth): unify and polish login, register and homepage
 auth UI

Login and register each carried their own copy of the promo panel and the
error banner, so the two pages drifted apart and every caller had to wire
role="alert" by hand. Extract a shared AuthPromoCard and AuthAlert, use them
in both forms and for the login notices, and link errors to their fields via
aria-invalid / aria-describedby.

Focus now lands on the 2FA code field the moment it appears, the credential
fields lock while a request is in flight, and invalid inputs get a danger
tint. The homepage top bar was a byte-for-byte duplicate of AuthTopBar; it
now renders the shared component, and the compact homepage login uses the
tighter spacing its comment already promised.
---
 src/app/(site)/login/page.tsx           | 106 +++--------------------
 src/app/(site)/page.tsx                 |  89 +-------------------
 src/app/(site)/register/page.tsx        | 102 +++-------------------
 src/app/globals.css                     |  14 ++++
 src/components/auth/auth-alert.tsx      |  38 +++++++++
 src/components/auth/auth-promo-card.tsx | 107 ++++++++++++++++++++++++
 src/components/auth/login-form.tsx      |  44 ++++++----
 src/components/auth/register-form.tsx   |  11 +--
 8 files changed, 215 insertions(+), 296 deletions(-)
 create mode 100644 src/components/auth/auth-alert.tsx
 create mode 100644 src/components/auth/auth-promo-card.tsx

diff --git a/src/app/(site)/login/page.tsx b/src/app/(site)/login/page.tsx
index 95b61337..101f1952 100644
--- a/src/app/(site)/login/page.tsx
+++ b/src/app/(site)/login/page.tsx
@@ -1,15 +1,15 @@
 import { desc, eq } from "drizzle-orm";
 import type { Metadata } from "next";
 import { headers } from "next/headers";
-import Image from "next/image";
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
+import { AuthAlert } from "@/components/auth/auth-alert";
 import {
 	AuthPageFrame,
 	AuthUsersCards,
 } from "@/components/auth/auth-page-frame";
+import { AuthPromoCard } from "@/components/auth/auth-promo-card";
 import { LoginForm } from "@/components/auth/login-form";
-import { SurfaceCard } from "@/components/surface-card";
 import { auth } from "@/lib/auth";
 import { safeRedirectPath } from "@/lib/auth/safe-redirect";
 import { cached } from "@/lib/cache";
@@ -90,22 +90,16 @@ export default async function LoginPage({
 	// exists.
 	const notice =
 		sp.registered === "1" ? (
-			<p
-				role="status"
-				className="auth-alert auth-alert--success animate-fade-in-up m-0 mb-4"
-			>
+			<AuthAlert variant="success" className="mb-4">
 				{t("registeredSuccess")}
-			</p>
+			</AuthAlert>
 		) : sp.reset === "1" ? (
 			// `?reset=1` comes from a successful password reset; saying so matters
 			// because the visitor just changed their password and a silent form
 			// reads like the reset failed.
-			<p
-				role="status"
-				className="auth-alert auth-alert--success animate-fade-in-up m-0 mb-4"
-			>
+			<AuthAlert variant="success" className="mb-4">
 				{t("passwordChanged")}
-			</p>
+			</AuthAlert>
 		) : undefined;
 
 	return (
@@ -127,89 +121,11 @@ export default async function LoginPage({
 				/>
 			}
 		>
-			<SurfaceCard
-				className="card-glow relative overflow-hidden p-6 text-center"
-				style={{
-					borderColor:
-						"color-mix(in srgb, var(--color-primary) 20%, transparent)",
-				}}
-			>
-				<div
-					className="absolute inset-0"
-					style={{
-						background:
-							"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent))",
-					}}
-				/>
-				<div aria-hidden="true" className="absolute inset-0 overflow-hidden">
-					<div className="brand-halo left-1/2 top-0 h-64 w-[460px] max-w-full -translate-x-1/2 -translate-y-1/2" />
-					<div
-						className="aurora-blob -left-16 top-10 h-56 w-56"
-						style={{
-							background:
-								"color-mix(in srgb, var(--color-primary) 45%, transparent)",
-						}}
-					/>
-					<div
-						className="aurora-blob -right-16 bottom-0 h-56 w-56"
-						style={{
-							background:
-								"color-mix(in srgb, var(--color-accent) 40%, transparent)",
-							animationDelay: "-8s",
-						}}
-					/>
-				</div>
-				<div className="relative">
-					<div className="brand-halo left-1/2 top-8 h-52 w-52 -translate-x-1/2" />
-					<Image
-						src="/assets/images/FrankwithBag.gif"
-						alt="Frank"
-						width={130}
-						height={170}
-						className="relative object-contain mx-auto drop-shadow-xl animate-float"
-						unoptimized
-					/>
-					<div
-						className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border"
-						style={{
-							borderColor:
-								"color-mix(in srgb, var(--color-primary) 30%, transparent)",
-							background:
-								"color-mix(in srgb, var(--color-surface) 72%, transparent)",
-							color: "var(--color-primary-readable, var(--color-primary))",
-							boxShadow:
-								"0 8px 20px -12px color-mix(in srgb, var(--color-primary) 70%, transparent)",
-						}}
-					>
-						<span className="relative flex h-2 w-2">
-							<span
-								className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
-								style={{ background: "var(--color-primary)" }}
-							/>
-							<span
-								className="relative inline-flex rounded-full h-2 w-2"
-								style={{ background: "var(--color-primary)" }}
-							/>
-						</span>
-						{t("usersOnline", { count: online })}
-					</div>
-					<h1
-						className="text-xl font-black"
-						style={{
-							color: "var(--color-text-readable)",
-							fontFamily: "var(--font-nunito)",
-						}}
-					>
-						{t("welcomeBack")}
-					</h1>
-					<p
-						className="text-xs mt-1.5 mx-auto max-w-[220px] leading-relaxed"
-						style={{ color: "var(--color-text-muted)" }}
-					>
-						{t("welcomeBackSub", { hotelName })}
-					</p>
-				</div>
-			</SurfaceCard>
+			<AuthPromoCard
+				onlineLabel={t("usersOnline", { count: online })}
+				title={t("welcomeBack")}
+				subtitle={t("welcomeBackSub", { hotelName })}
+			/>
 
 			<AuthUsersCards
 				recentUsers={recentUsers}
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index 609e614e..95e37da9 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -7,16 +7,14 @@ import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import type { CSSProperties, ReactNode } from "react";
 import { AnimatedCounter } from "@/components/animated-counter";
+import { AuthTopBar } from "@/components/auth/auth-top-bar";
 import { LoginForm } from "@/components/auth/login-form";
-import { Clock } from "@/components/clock";
-import { LanguageSwitcher } from "@/components/language-switcher";
 import Link from "@/components/link";
 import { LiveOnlineCounter } from "@/components/live-online-counter";
 import { Reveal } from "@/components/motion-reveal";
 import { PublicLoadError } from "@/components/public/load-error";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { SpotlightCard } from "@/components/spotlight-card";
-import { ThemeSwitcher } from "@/components/theme-switcher";
 import { TypewriterText } from "@/components/typewriter-text";
 import { auth } from "@/lib/auth";
 import { cached } from "@/lib/cache";
@@ -41,7 +39,6 @@ import {
 	ICON_CAMERA,
 	ICON_CATALOG,
 	ICON_FRIENDS,
-	ICON_LIGHTHOUSE,
 	ICON_NAV_GOODY,
 	ICON_NAV_ME,
 } from "@/lib/site-icons";
@@ -406,87 +403,9 @@ async function Home() {
 	return (
 		<div className="flex w-full flex-col gap-14 pb-16 pt-2 md:gap-20 md:pb-24">
 			{/* ── Top bar ── */}
-			<Reveal className="mx-auto w-full max-w-7xl">
-				<div
-					className="flex items-center justify-between rounded-full border px-3 py-2.5 sm:px-5"
-					style={{
-						background:
-							"linear-gradient(90deg, color-mix(in srgb, var(--color-surface) 62%, transparent), color-mix(in srgb, var(--color-primary) 7%, transparent))",
-						backdropFilter: "blur(14px)",
-						WebkitBackdropFilter: "blur(14px)",
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-						boxShadow:
-							"0 1px 3px rgba(0,0,0,0.04), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
-					}}
-				>
-					<div className="flex items-center gap-2 sm:gap-3">
-						{logo ? (
-							<Image
-								src={logo}
-								alt={hotelName}
-								width={100}
-								height={28}
-								className="shrink-0 object-contain"
-								unoptimized
-								style={{ maxHeight: 26, width: "auto", height: "auto" }}
-							/>
-						) : (
-							<div
-								className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
-								style={{
-									background:
-										"linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 60%, var(--color-primary)))",
-									boxShadow:
-										"0 4px 16px -4px color-mix(in srgb, var(--color-primary) 60%, transparent)",
-								}}
-							>
-								<Image
-									src={ICON_LIGHTHOUSE}
-									alt=""
-									width={18}
-									height={18}
-									className="shrink-0"
-									unoptimized
-									style={{ filter: "brightness(0) invert(1)" }}
-								/>
-							</div>
-						)}
-						<span
-							className="hidden text-sm font-extrabold uppercase tracking-wide sm:inline"
-							style={{ color: "var(--color-text-readable)" }}
-						>
-							{hotelName}
-						</span>
-					</div>
-					<div
-						className="flex items-center gap-1 sm:gap-1.5 rounded-full px-1.5 py-1"
-						style={{
-							background:
-								"color-mix(in srgb, var(--color-text-muted) 5%, transparent)",
-						}}
-					>
-						<LanguageSwitcher />
-						<div
-							className="hidden w-px h-5 sm:block"
-							style={{
-								background:
-									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-							}}
-						/>
-						<Clock />
-						<div
-							className="w-px h-5"
-							style={{
-								background:
-									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-							}}
-						/>
-						<ThemeSwitcher />
-					</div>
-				</div>
-			</Reveal>
-
+			<div className="mx-auto w-full max-w-7xl">
+				<AuthTopBar hotelName={hotelName} logo={logo} />
+			</div>
 			{/* ── Cinematic hero ── */}
 			<Reveal className="-mx-3 sm:-mx-4 md:-mx-6">
 				<div className="relative overflow-hidden">
diff --git a/src/app/(site)/register/page.tsx b/src/app/(site)/register/page.tsx
index f23b753f..7da8a818 100644
--- a/src/app/(site)/register/page.tsx
+++ b/src/app/(site)/register/page.tsx
@@ -1,15 +1,14 @@
 import { desc, eq } from "drizzle-orm";
 import type { Metadata } from "next";
 import { headers } from "next/headers";
-import Image from "next/image";
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import {
 	AuthPageFrame,
 	AuthUsersCards,
 } from "@/components/auth/auth-page-frame";
+import { AuthPromoCard } from "@/components/auth/auth-promo-card";
 import { RegisterForm } from "@/components/auth/register-form";
-import { SurfaceCard } from "@/components/surface-card";
 import { auth } from "@/lib/auth";
 import { cached } from "@/lib/cache";
 
@@ -86,96 +85,15 @@ export default async function RegisterPage() {
 				/>
 			}
 		>
-			<SurfaceCard
-				className="card-glow relative overflow-hidden p-6"
-				style={{
-					borderColor:
-						"color-mix(in srgb, var(--color-primary) 20%, transparent)",
-				}}
-			>
-				<div
-					className="absolute inset-0"
-					style={{
-						background:
-							"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent))",
-					}}
-				/>
-				<div aria-hidden="true" className="absolute inset-0 overflow-hidden">
-					<div className="brand-halo left-1/2 top-0 h-64 w-[460px] max-w-full -translate-x-1/2 -translate-y-1/2" />
-					<div
-						className="aurora-blob -left-16 top-6 h-56 w-56"
-						style={{
-							background:
-								"color-mix(in srgb, var(--color-primary) 45%, transparent)",
-						}}
-					/>
-					<div
-						className="aurora-blob -right-16 bottom-0 h-56 w-56"
-						style={{
-							background:
-								"color-mix(in srgb, var(--color-accent) 40%, transparent)",
-							animationDelay: "-8s",
-						}}
-					/>
-				</div>
-				<div className="relative">
-					<div className="flex items-center gap-4">
-						<div className="shrink-0 animate-float">
-							<div className="brand-halo left-1/2 top-1/2 h-52 w-52 -translate-x-1/2 -translate-y-1/2" />
-							<Image
-								src="/assets/images/FrankwithBag.gif"
-								alt="Frank"
-								width={110}
-								height={145}
-								className="relative object-contain drop-shadow-xl"
-								unoptimized
-							/>
-						</div>
-						<div className="flex-1">
-							<div
-								className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider mb-2 border"
-								style={{
-									borderColor:
-										"color-mix(in srgb, var(--color-primary) 30%, transparent)",
-									background:
-										"color-mix(in srgb, var(--color-surface) 72%, transparent)",
-									color: "var(--color-primary-readable, var(--color-primary))",
-									boxShadow:
-										"0 8px 20px -12px color-mix(in srgb, var(--color-primary) 70%, transparent)",
-								}}
-							>
-								<span className="relative flex h-2 w-2">
-									<span
-										className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
-										style={{ background: "var(--color-primary)" }}
-									/>
-									<span
-										className="relative inline-flex rounded-full h-2 w-2"
-										style={{ background: "var(--color-primary)" }}
-									/>
-								</span>
-								{tpr("usersOnline", { count: online })}
-							</div>
-							<h1
-								className="text-lg font-black leading-tight"
-								style={{
-									color: "var(--color-text-readable)",
-									fontFamily: "var(--font-nunito)",
-								}}
-							>
-								{tpr("title")} —{" "}
-								<span className="gradient-text">{hotelName}</span>
-							</h1>
-							<p
-								className="text-xs mt-1.5 leading-relaxed"
-								style={{ color: "var(--color-text-muted)" }}
-							>
-								{tpr("subtitle")}
-							</p>
-						</div>
-					</div>
-				</div>
-			</SurfaceCard>
+			<AuthPromoCard
+				onlineLabel={tpr("usersOnline", { count: online })}
+				title={
+					<>
+						{tpr("title")} — <span className="gradient-text">{hotelName}</span>
+					</>
+				}
+				subtitle={tpr("subtitle")}
+			/>
 
 			<AuthUsersCards
 				recentUsers={recentUsers}
diff --git a/src/app/globals.css b/src/app/globals.css
index d1ea9970..34e35e7f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2893,6 +2893,20 @@ html {
 		0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent),
 		0 0 24px -8px color-mix(in srgb, var(--color-primary) 60%, transparent);
 }
+.auth-input[aria-invalid="true"]:not(:focus) {
+	border-color: color-mix(in srgb, var(--color-danger) 60%, transparent);
+	background: color-mix(
+		in srgb,
+		var(--color-danger) 6%,
+		color-mix(in srgb, var(--color-background) 88%, var(--color-surface))
+	);
+}
+.auth-input[aria-invalid="true"]:focus {
+	border-color: var(--color-danger);
+	box-shadow:
+		0 0 0 3px color-mix(in srgb, var(--color-danger) 18%, transparent),
+		0 0 24px -8px color-mix(in srgb, var(--color-danger) 55%, transparent);
+}
 .auth-input:disabled {
 	opacity: 0.55;
 	cursor: not-allowed;
diff --git a/src/components/auth/auth-alert.tsx b/src/components/auth/auth-alert.tsx
new file mode 100644
index 00000000..51219971
--- /dev/null
+++ b/src/components/auth/auth-alert.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+interface AuthAlertProps {
+	children: ReactNode;
+	/** Tint of the box: red for errors, green for confirmations. */
+	variant?: "error" | "success";
+	/** Extra classes, e.g. spacing (`mb-4`) or entrance animation. */
+	className?: string;
+	/** Optional id so inputs can point at the message via `aria-describedby`. */
+	id?: string;
+}
+
+/**
+ * The single status/error banner for the auth forms. Uses `role="alert"` for
+ * failures (screen readers announce them immediately) and `role="status"` for
+ * confirmations, so the two are wired correctly instead of every caller
+ * repeating the markup and risking an unannounced message.
+ */
+export function AuthAlert({
+	children,
+	variant = "error",
+	className = "",
+	id,
+}: AuthAlertProps) {
+	return (
+		<p
+			id={id}
+			role={variant === "error" ? "alert" : "status"}
+			className={`auth-alert animate-fade-in-up m-0 ${
+				variant === "success" ? "auth-alert--success" : ""
+			} ${className}`}
+		>
+			{children}
+		</p>
+	);
+}
diff --git a/src/components/auth/auth-promo-card.tsx b/src/components/auth/auth-promo-card.tsx
new file mode 100644
index 00000000..234b3faf
--- /dev/null
+++ b/src/components/auth/auth-promo-card.tsx
@@ -0,0 +1,107 @@
+import Image from "next/image";
+import type { ReactNode } from "react";
+import { SurfaceCard } from "@/components/surface-card";
+
+interface AuthPromoCardProps {
+	/** Fully formatted "N users online" label. */
+	onlineLabel: string;
+	title: ReactNode;
+	subtitle: ReactNode;
+}
+
+/**
+ * The single promo panel both `/login` and `/register` show above the form:
+ * Frank, the online badge and a short welcome. Keeping it in one place means
+ * the two auth pages can never drift apart visually again.
+ */
+export function AuthPromoCard({
+	onlineLabel,
+	title,
+	subtitle,
+}: AuthPromoCardProps) {
+	return (
+		<SurfaceCard
+			className="card-glow relative overflow-hidden p-6 text-center"
+			style={{
+				borderColor:
+					"color-mix(in srgb, var(--color-primary) 20%, transparent)",
+			}}
+		>
+			<div
+				className="absolute inset-0"
+				style={{
+					background:
+						"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent))",
+				}}
+			/>
+			<div aria-hidden="true" className="absolute inset-0 overflow-hidden">
+				<div className="brand-halo left-1/2 top-0 h-64 w-[460px] max-w-full -translate-x-1/2 -translate-y-1/2" />
+				<div
+					className="aurora-blob -left-16 top-10 h-56 w-56"
+					style={{
+						background:
+							"color-mix(in srgb, var(--color-primary) 45%, transparent)",
+					}}
+				/>
+				<div
+					className="aurora-blob -right-16 bottom-0 h-56 w-56"
+					style={{
+						background:
+							"color-mix(in srgb, var(--color-accent) 40%, transparent)",
+						animationDelay: "-8s",
+					}}
+				/>
+			</div>
+			<div className="relative">
+				<div className="brand-halo left-1/2 top-8 h-52 w-52 -translate-x-1/2" />
+				<Image
+					src="/assets/images/FrankwithBag.gif"
+					alt="Frank"
+					width={130}
+					height={170}
+					className="relative object-contain mx-auto drop-shadow-xl animate-float"
+					unoptimized
+				/>
+				<div
+					className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border"
+					style={{
+						borderColor:
+							"color-mix(in srgb, var(--color-primary) 30%, transparent)",
+						background:
+							"color-mix(in srgb, var(--color-surface) 72%, transparent)",
+						color: "var(--color-primary-readable, var(--color-primary))",
+						boxShadow:
+							"0 8px 20px -12px color-mix(in srgb, var(--color-primary) 70%, transparent)",
+					}}
+				>
+					<span className="relative flex h-2 w-2">
+						<span
+							className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
+							style={{ background: "var(--color-primary)" }}
+						/>
+						<span
+							className="relative inline-flex rounded-full h-2 w-2"
+							style={{ background: "var(--color-primary)" }}
+						/>
+					</span>
+					{onlineLabel}
+				</div>
+				<h1
+					className="text-xl font-black"
+					style={{
+						color: "var(--color-text-readable)",
+						fontFamily: "var(--font-nunito)",
+					}}
+				>
+					{title}
+				</h1>
+				<p
+					className="text-xs mt-1.5 mx-auto max-w-[240px] leading-relaxed"
+					style={{ color: "var(--color-text-muted)" }}
+				>
+					{subtitle}
+				</p>
+			</div>
+		</SurfaceCard>
+	);
+}
diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx
index ec0cefe7..a0c50d6a 100644
--- a/src/components/auth/login-form.tsx
+++ b/src/components/auth/login-form.tsx
@@ -3,8 +3,9 @@
 import { KeyRound, Lock, UserRound } from "lucide-react";
 import { signIn } from "next-auth/react";
 import { useTranslations } from "next-intl";
-import { type FormEvent, useId, useState } from "react";
+import { type FormEvent, useEffect, useId, useRef, useState } from "react";
 import { precheckLogin } from "@/actions/auth-precheck";
+import { AuthAlert } from "@/components/auth/auth-alert";
 import {
 	type CaptchaPublicConfig,
 	CaptchaWidget,
@@ -51,8 +52,17 @@ export function LoginForm({
 	const [unverified, setUnverified] = useState(false);
 	const [pending, setPending] = useState(false);
 	const [locked, setLocked] = useState(false);
+	const codeRef = useRef<HTMLInputElement>(null);
+
+	// The 2FA field only exists after the pre-check asks for a code; move focus
+	// there automatically so the visitor can keep typing without reaching for
+	// the mouse (the lint rule rules out a bare `autoFocus`).
+	useEffect(() => {
+		if (needs2fa) codeRef.current?.focus();
+	}, [needs2fa]);
 
 	const showFooter = variant === "page";
+	const compact = variant === "compact";
 	const lockCredentials =
 		needs2fa || locked ? "opacity-50 pointer-events-none" : "";
 
@@ -115,7 +125,9 @@ export function LoginForm({
 		<>
 			{needs2fa && (
 				<p
-					className="animate-fade-in-up mb-4 rounded-xl border px-3 py-2.5 text-sm font-semibold"
+					className={`animate-fade-in-up rounded-xl border px-3 py-2.5 text-sm font-semibold ${
+						compact ? "mb-3" : "mb-4"
+					}`}
 					style={{
 						color: "var(--color-text-readable)",
 						background:
@@ -131,7 +143,7 @@ export function LoginForm({
 			<form
 				onSubmit={onSubmit}
 				aria-label={t("signIn")}
-				className="relative flex flex-col gap-4"
+				className={`relative flex flex-col ${compact ? "gap-3" : "gap-4"}`}
 			>
 				<div className={`space-y-1.5 ${lockCredentials}`}>
 					<label htmlFor={`${fieldId}-username`} className="auth-label">
@@ -151,8 +163,10 @@ export function LoginForm({
 							onChange={(e) => setUsername(e.target.value)}
 							placeholder={t("usernamePlaceholder")}
 							autoComplete="username"
-							disabled={needs2fa}
+							disabled={needs2fa || pending}
 							required
+							aria-invalid={error ? true : undefined}
+							aria-describedby={error ? `${fieldId}-error` : undefined}
 							className="auth-input has-icon"
 						/>
 					</div>
@@ -176,8 +190,10 @@ export function LoginForm({
 							onChange={(e) => setPassword(e.target.value)}
 							placeholder={t("passwordPlaceholder")}
 							autoComplete="current-password"
-							disabled={needs2fa}
+							disabled={needs2fa || pending}
 							required
+							aria-invalid={error ? true : undefined}
+							aria-describedby={error ? `${fieldId}-error` : undefined}
 							className="auth-input has-icon has-action"
 						/>
 						<PasswordToggle
@@ -201,6 +217,7 @@ export function LoginForm({
 								style={{ color: "var(--color-primary)" }}
 							/>
 							<input
+								ref={codeRef}
 								id={`${fieldId}-2fa`}
 								name="code"
 								type="text"
@@ -209,6 +226,9 @@ export function LoginForm({
 								placeholder={t("codePlaceholder")}
 								inputMode="numeric"
 								autoComplete="one-time-code"
+								disabled={pending}
+								aria-invalid={error ? true : undefined}
+								aria-describedby={error ? `${fieldId}-error` : undefined}
 								className="auth-input has-icon"
 								style={{
 									borderColor:
@@ -221,15 +241,7 @@ export function LoginForm({
 					<CaptchaWidget captcha={captcha} nonce={nonce} />
 				)}
 
-				{error && (
-					<p
-						role="alert"
-						aria-live="polite"
-						className="auth-alert animate-fade-in-up m-0"
-					>
-						{error}
-					</p>
-				)}
+				{error && <AuthAlert id={`${fieldId}-error`}>{error}</AuthAlert>}
 
 				{unverified && (
 					<p
@@ -249,7 +261,9 @@ export function LoginForm({
 				<button
 					type="submit"
 					disabled={pending || locked}
-					className="btn-brand btn-shine w-full cursor-pointer py-3.5 text-sm font-extrabold uppercase tracking-wider disabled:opacity-60"
+					className={`btn-brand btn-shine w-full cursor-pointer text-sm font-extrabold uppercase tracking-wider disabled:opacity-60 ${
+						compact ? "py-3" : "py-3.5"
+					}`}
 				>
 					{pending ? (
 						<span className="inline-flex items-center justify-center gap-2">
diff --git a/src/components/auth/register-form.tsx b/src/components/auth/register-form.tsx
index 82fe35c7..d6f3aaab 100644
--- a/src/components/auth/register-form.tsx
+++ b/src/components/auth/register-form.tsx
@@ -18,6 +18,7 @@ import {
 	type RegisterState,
 	register,
 } from "@/actions/register";
+import { AuthAlert } from "@/components/auth/auth-alert";
 import { PasswordToggle } from "@/components/auth/password-toggle";
 import Link from "@/components/link";
 import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";
@@ -183,15 +184,7 @@ export function RegisterForm({
 				}}
 				className="flex flex-col gap-6"
 			>
-				{errorMessage && (
-					<p
-						role="alert"
-						aria-live="polite"
-						className="auth-alert animate-fade-in-up m-0"
-					>
-						{errorMessage}
-					</p>
-				)}
+				{errorMessage && <AuthAlert>{errorMessage}</AuthAlert>}
 
 				{referralCode && (
 					<div