openhands
6bffc53779
`home-login-form.tsx` and `login-form.tsx` were two ~240-line near-identical components. Delete the former and give `LoginForm` a `variant` prop: - `variant="page"` sr-only labels plus the register/forgot footer (/login) - `variant="compact"` visible labels, no footer (homepage sidebar) Field ids now come from `useId()`, so the two usages can never collide, and the hardcoded "Show"/"Hide"/"Loading" strings are translated. Localization of the login and register screens: - `home-login-form.tsx` was entirely hardcoded English. - `passwordStrength()` returned hardcoded "Weak"/"Fair"/"Good"/"Strong". - `register.ts` returned only English strings. It now returns a locale-independent `code` next to the message, and the form renders `t(code)` with the English string as a fallback. - Backfilled the new keys across all 25 locales, plus the login/register strings that were still English in most of them. `ar`, `fi` and `ja` had their entire login/register namespace in English and are now filled in. Locale parity stays at 0 missing keys, as `i18n:check` requires. Copy that did not match the enforced rules: the UI advertised "min 8 chars" (EN) / "min 6 tekens" (NL) while registration requires 12 characters plus an uppercase, a lowercase, a digit and a special character. Corrected in every locale. `password-reset.ts` enforced only 6 characters and is raised to 12 to match registration. Accessibility: `login-form.tsx` had no `<label>`, no `id` and no `required` on any field. All three are now present, and error banners are announced with `role="alert"`. Adds `src/i18n/auth-messages.test.ts`, which asserts every `RegisterErrorCode` resolves to a non-empty message in all 25 locales; verified it fails when a key is removed. The existing register tests now also assert the error `code`.
311 lines
8.7 KiB
TypeScript
311 lines
8.7 KiB
TypeScript
"use client";
|
|
|
|
import { signIn } from "next-auth/react";
|
|
import { useTranslations } from "next-intl";
|
|
import { type FormEvent, useId, useState } from "react";
|
|
import { precheckLogin } from "@/actions/auth-precheck";
|
|
import {
|
|
type CaptchaPublicConfig,
|
|
CaptchaWidget,
|
|
readCaptchaToken,
|
|
} from "@/components/auth/captcha-widget";
|
|
import Link from "@/components/link";
|
|
import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";
|
|
|
|
export type LoginFormVariant =
|
|
/** Full page: labelled fields, plus the register / forgot-password footer. */
|
|
| "page"
|
|
/** Homepage sidebar: visible labels, no footer, tighter spacing. */
|
|
| "compact";
|
|
|
|
export interface LoginFormProps {
|
|
captcha?: CaptchaPublicConfig;
|
|
nonce?: string;
|
|
variant?: LoginFormVariant;
|
|
/** Where to land after a successful sign-in. */
|
|
redirectTo?: string;
|
|
}
|
|
|
|
/**
|
|
* The single sign-in form for both `/login` and the homepage sidebar. It runs a
|
|
* cheap server-side precheck first so the visitor gets a specific reason
|
|
* (bad password, unverified email, 2FA required, captcha) instead of NextAuth's
|
|
* generic failure, then completes the credentials sign-in.
|
|
*/
|
|
export function LoginForm({
|
|
captcha = { provider: "none" },
|
|
nonce,
|
|
variant = "page",
|
|
redirectTo = "/me",
|
|
}: LoginFormProps = {}) {
|
|
const t = useTranslations("pages.login");
|
|
const fieldId = useId();
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [code, setCode] = useState("");
|
|
const [needs2fa, setNeeds2fa] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [pending, setPending] = useState(false);
|
|
|
|
const showFooter = variant === "page";
|
|
const labelled = variant === "compact";
|
|
const lockCredentials = needs2fa ? "opacity-50 pointer-events-none" : "";
|
|
|
|
async function onSubmit(e: FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
setError(null);
|
|
setPending(true);
|
|
try {
|
|
if (!needs2fa) {
|
|
const captchaToken = readCaptchaToken(e.currentTarget, captcha);
|
|
const pre = await precheckLogin(username, password, captchaToken);
|
|
if (pre === "invalid") {
|
|
setError(t("errorInvalidCredentials"));
|
|
return;
|
|
}
|
|
if (pre === "captcha") {
|
|
setError(t("errorCaptcha"));
|
|
return;
|
|
}
|
|
if (pre === "unverified") {
|
|
setError(t("errorUnverified"));
|
|
return;
|
|
}
|
|
if (pre === "twofactor") {
|
|
setNeeds2fa(true);
|
|
return;
|
|
}
|
|
}
|
|
const res = await signInWithTransientRetry(() =>
|
|
signIn("credentials", {
|
|
username,
|
|
password,
|
|
code,
|
|
redirect: false,
|
|
}),
|
|
);
|
|
if (!res || res.error) {
|
|
setError(
|
|
needs2fa ? t("errorInvalid2fa") : t("errorInvalidCredentials"),
|
|
);
|
|
return;
|
|
}
|
|
window.location.href = redirectTo;
|
|
} catch {
|
|
setError(needs2fa ? t("errorInvalid2fa") : t("errorInvalidCredentials"));
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{needs2fa && (
|
|
<p
|
|
className="animate-fade-in-up mb-4 text-sm font-semibold"
|
|
style={{ color: "var(--color-text-muted)" }}
|
|
>
|
|
{t("subtitle2fa")}
|
|
</p>
|
|
)}
|
|
|
|
<form
|
|
onSubmit={onSubmit}
|
|
aria-label={t("signIn")}
|
|
className="relative flex flex-col gap-4"
|
|
>
|
|
<div className={labelled ? "space-y-1" : lockCredentials}>
|
|
<label
|
|
htmlFor={`${fieldId}-username`}
|
|
className={
|
|
labelled
|
|
? "block text-xs font-bold uppercase tracking-wider"
|
|
: "sr-only"
|
|
}
|
|
style={{ color: "var(--color-text-muted)" }}
|
|
>
|
|
{t("username")}
|
|
</label>
|
|
<input
|
|
id={`${fieldId}-username`}
|
|
name="username"
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
placeholder={t("usernamePlaceholder")}
|
|
autoComplete="username"
|
|
disabled={needs2fa}
|
|
required
|
|
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
|
|
style={{
|
|
backgroundColor: "var(--color-background)",
|
|
color: "var(--color-text-readable)",
|
|
borderColor: needs2fa
|
|
? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
|
|
: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className={`${labelled ? "space-y-1" : lockCredentials} relative`}>
|
|
<label
|
|
htmlFor={`${fieldId}-password`}
|
|
className={
|
|
labelled
|
|
? "block text-xs font-bold uppercase tracking-wider"
|
|
: "sr-only"
|
|
}
|
|
style={{ color: "var(--color-text-muted)" }}
|
|
>
|
|
{t("password")}
|
|
</label>
|
|
<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}
|
|
required
|
|
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
|
|
style={{
|
|
backgroundColor: "var(--color-background)",
|
|
color: "var(--color-text-readable)",
|
|
borderColor: needs2fa
|
|
? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
|
|
: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
|
}}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 transition-opacity hover:opacity-100"
|
|
style={{ color: "var(--color-text-muted)" }}
|
|
tabIndex={-1}
|
|
aria-label={showPassword ? t("hidePassword") : t("showPassword")}
|
|
aria-pressed={showPassword}
|
|
>
|
|
{showPassword ? t("hidePassword") : t("showPassword")}
|
|
</button>
|
|
</div>
|
|
|
|
{needs2fa ? (
|
|
<div className={`animate-scale-in ${labelled ? "space-y-1" : ""}`}>
|
|
<label
|
|
htmlFor={`${fieldId}-2fa`}
|
|
className={
|
|
labelled
|
|
? "block text-xs font-bold uppercase tracking-wider"
|
|
: "sr-only"
|
|
}
|
|
style={{ color: "var(--color-text-muted)" }}
|
|
>
|
|
{t("codePlaceholder")}
|
|
</label>
|
|
<input
|
|
id={`${fieldId}-2fa`}
|
|
name="code"
|
|
type="text"
|
|
value={code}
|
|
onChange={(e) => setCode(e.target.value)}
|
|
placeholder={t("codePlaceholder")}
|
|
inputMode="numeric"
|
|
autoComplete="one-time-code"
|
|
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
|
|
style={{
|
|
backgroundColor: "var(--color-background)",
|
|
color: "var(--color-text-readable)",
|
|
borderColor:
|
|
"color-mix(in srgb, var(--color-primary) 30%, transparent)",
|
|
}}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<CaptchaWidget captcha={captcha} nonce={nonce} />
|
|
)}
|
|
|
|
{error && (
|
|
<p
|
|
role="alert"
|
|
aria-live="polite"
|
|
className="m-0 animate-fade-in-up text-center text-sm font-semibold"
|
|
style={{ color: "var(--color-danger)" }}
|
|
>
|
|
{error}
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={pending}
|
|
className="btn-shine w-full cursor-pointer rounded-xl py-3.5 text-sm font-extrabold shadow-lg transition-all duration-200 hover:scale-[1.02] active:scale-95 disabled:opacity-60"
|
|
style={{
|
|
background: "var(--color-primary)",
|
|
color: "var(--color-primary-foreground)",
|
|
boxShadow:
|
|
"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
|
|
}}
|
|
>
|
|
{pending ? (
|
|
<span className="inline-flex items-center justify-center gap-2">
|
|
<svg
|
|
className="h-4 w-4 animate-spin"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
role="img"
|
|
aria-label={t("pleaseWait")}
|
|
>
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
/>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
/>
|
|
</svg>
|
|
{t("pleaseWait")}
|
|
</span>
|
|
) : needs2fa ? (
|
|
t("verify")
|
|
) : (
|
|
t("signIn")
|
|
)}
|
|
</button>
|
|
</form>
|
|
|
|
{showFooter && (
|
|
<p
|
|
className="mt-6 text-center text-xs"
|
|
style={{ color: "var(--color-text-muted)" }}
|
|
>
|
|
{t("noAccount")}{" "}
|
|
<Link
|
|
href="/register"
|
|
className="font-extrabold hover:underline"
|
|
style={{ color: "var(--color-primary)" }}
|
|
>
|
|
{t("createOne")}
|
|
</Link>{" "}
|
|
·{" "}
|
|
<Link
|
|
href="/forgot"
|
|
className="font-extrabold hover:underline"
|
|
style={{ color: "var(--color-primary)" }}
|
|
>
|
|
{t("forgotPassword")}
|
|
</Link>
|
|
</p>
|
|
)}
|
|
</>
|
|
);
|
|
}
|