openhands
c6e5e0b1a9
CI / check (push) Successful in 35s
CI / tests-imaging-browsers (push) Successful in 1m34s
CI / tests-integration (push) Successful in 2m1s
CI / tests-unit (push) Successful in 2m11s
CI / tests-quality (push) Successful in 52s
CI / tests-ui (push) Successful in 5m7s
CI / preflight (push) Skipped
CI / deploy (push) Successful in 4m11s
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.
39 lines
1023 B
TypeScript
39 lines
1023 B
TypeScript
"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>
|
|
);
|
|
}
|