refactor(auth): share the auth landing and extract AuthField

The login and register pages were near-identical after the previous cleanup,
and both forms repeated the same labelled, icon-prefixed input seven times.
Move the data loading and page shell into auth-landing.tsx (loadAuthLanding +
AuthLandingView) and the input markup into a single AuthField, so the pages
become thin compositions and every field shares one focus, icon and aria
implementation. The numbered section headers collapse into AuthSectionHeader.

No behaviour change.

src/components/auth/login-form.tsx

@@ -6,6 +6,7 @@ import { useTranslations } from "next-intl";
 import { type FormEvent, useEffect, useId, useRef, useState } from "react";
 import { precheckLogin } from "@/actions/auth-precheck";
 import { AuthAlert } from "@/components/auth/auth-alert";
+import { AuthField } from "@/components/auth/auth-field";
 import {
 	type CaptchaPublicConfig,
 	CaptchaWidget,
@@ -145,98 +146,69 @@ export function LoginForm({
 				aria-label={t("signIn")}
 				className={`relative flex flex-col ${compact ? "gap-3" : "gap-4"}`}
 			>
-				<div className={`space-y-1.5 ${lockCredentials}`}>
-					<label htmlFor={`${fieldId}-username`} className="auth-label">
-						{t("username")}
-					</label>
-					<div className="relative">
-						<UserRound
-							aria-hidden="true"
-							className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
-							style={{ color: "var(--color-text-muted)" }}
-						/>
-						<input
-							id={`${fieldId}-username`}
-							name="username"
-							type="text"
-							value={username}
-							onChange={(e) => setUsername(e.target.value)}
-							placeholder={t("usernamePlaceholder")}
-							autoComplete="username"
-							disabled={needs2fa || pending}
-							required
-							aria-invalid={error ? true : undefined}
-							aria-describedby={error ? `${fieldId}-error` : undefined}
-							className="auth-input has-icon"
-						/>
-					</div>
-				</div>
+				<AuthField
+					id={`${fieldId}-username`}
+					name="username"
+					label={t("username")}
+					icon={UserRound}
+					value={username}
+					onChange={setUsername}
+					placeholder={t("usernamePlaceholder")}
+					autoComplete="username"
+					disabled={needs2fa || pending}
+					required
+					invalid={!!error}
+					describedBy={error ? `${fieldId}-error` : undefined}
+					className={lockCredentials}
+				/>
 
-				<div className={`space-y-1.5 ${lockCredentials}`}>
-					<label htmlFor={`${fieldId}-password`} className="auth-label">
-						{t("password")}
-					</label>
-					<div className="relative">
-						<Lock
-							aria-hidden="true"
-							className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
-							style={{ color: "var(--color-text-muted)" }}
-						/>
-						<input
-							id={`${fieldId}-password`}
-							name="password"
-							type={showPassword ? "text" : "password"}
-							value={password}
-							onChange={(e) => setPassword(e.target.value)}
-							placeholder={t("passwordPlaceholder")}
-							autoComplete="current-password"
-							disabled={needs2fa || pending}
-							required
-							aria-invalid={error ? true : undefined}
-							aria-describedby={error ? `${fieldId}-error` : undefined}
-							className="auth-input has-icon has-action"
-						/>
+				<AuthField
+					id={`${fieldId}-password`}
+					name="password"
+					label={t("password")}
+					icon={Lock}
+					type={showPassword ? "text" : "password"}
+					value={password}
+					onChange={setPassword}
+					placeholder={t("passwordPlaceholder")}
+					autoComplete="current-password"
+					disabled={needs2fa || pending}
+					required
+					invalid={!!error}
+					describedBy={error ? `${fieldId}-error` : undefined}
+					className={lockCredentials}
+					trailing={
 						<PasswordToggle
 							show={showPassword}
 							onToggle={() => setShowPassword((v) => !v)}
 							labelShow={t("showPassword")}
 							labelHide={t("hidePassword")}
 						/>
-					</div>
-				</div>
+					}
+				/>
 
 				{needs2fa ? (
-					<div className="animate-scale-in space-y-1.5">
-						<label htmlFor={`${fieldId}-2fa`} className="auth-label">
-							{t("codePlaceholder")}
-						</label>
-						<div className="relative">
-							<KeyRound
-								aria-hidden="true"
-								className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
-								style={{ color: "var(--color-primary)" }}
-							/>
-							<input
-								ref={codeRef}
-								id={`${fieldId}-2fa`}
-								name="code"
-								type="text"
-								value={code}
-								onChange={(e) => setCode(e.target.value)}
-								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:
-										"color-mix(in srgb, var(--color-primary) 45%, transparent)",
-								}}
-							/>
-						</div>
-					</div>
+					<AuthField
+						id={`${fieldId}-2fa`}
+						name="code"
+						label={t("codePlaceholder")}
+						icon={KeyRound}
+						iconColor="var(--color-primary)"
+						value={code}
+						onChange={setCode}
+						placeholder={t("codePlaceholder")}
+						inputMode="numeric"
+						autoComplete="one-time-code"
+						disabled={pending}
+						invalid={!!error}
+						describedBy={error ? `${fieldId}-error` : undefined}
+						className="animate-scale-in"
+						inputRef={codeRef}
+						inputStyle={{
+							borderColor:
+								"color-mix(in srgb, var(--color-primary) 45%, transparent)",
+						}}
+					/>
 				) : (
 					<CaptchaWidget captcha={captcha} nonce={nonce} />
 				)}