cortena-ui 1.4.2 → 1.6.0

package/src/components/login-screen.tsx

@@ -0,0 +1,479 @@
+"use client";
+
+import * as React from "react";
+import { Alert, AlertDescription, AlertIcon, AlertTitle } from "@/components/alert";
+import { BrandMark } from "@/components/app-shell";
+import { Button } from "@/components/button";
+import { Input } from "@/components/input";
+import { Label } from "@/components/label";
+import { Spinner } from "@/components/spinner";
+import { cn } from "@/lib/cn";
+
+/**
+ * LoginScreen — the one sign-in composition for Cortena
+ * (how-to-create-a-cortena-extension §7.4, audit rule P-08, decision DESIGN-D1).
+ *
+ * Every surface that asks a user to sign in — cortenaweb, cortena-auth's hosted
+ * page, every extension, and the MCP consent page through `ConsentScreen` —
+ * renders this. The failure it removes is a fleet of near-identical login pages
+ * that differ in wording, spacing and which methods they offer, so a user
+ * cannot tell whether the page in front of them is Cortena's.
+ *
+ * It is props-only and fetches nothing. The org's `auth-info` call, the
+ * Firebase REST sign-in and the popup all stay in the app: this package cannot
+ * take a dependency on firebase, and a component that fetches cannot be
+ * rendered in the guide, in a test, or in a story. The caller passes
+ * `methods` and handles `onPassword` / `onProvider`.
+ *
+ * Two rules it encodes, because both were shipped wrong:
+ *
+ *   Offer what the org advertises, and nothing else. An extension once shipped
+ *   with email/password only; every Google-registered user in the org was
+ *   locked out and the screen said nothing about why. `methods` is the gate,
+ *   and it defaults to `["password"]` rather than to an empty screen.
+ *
+ *   A session that ends lands here, not on a broken screen (§9.4, P-37). Pass
+ *   `signedOut` for "You were signed out" and `returnTo` for where the user
+ *   was, so signing in again is a return rather than a restart.
+ */
+
+/* ── the frame ───────────────────────────────────────────────────────────── */
+
+export interface AuthScreenBrand {
+  /** Registered mark id — what the extension puts in `x-cortena.icon`. */
+  id?: string;
+  /** Display name, beside the mark. */
+  name: string;
+  /**
+   * An arbitrary image, for a brand with no registered mark (an MCP client).
+   * **https only** — see `httpsLogoUrl`. Anything else falls back to the mark.
+   */
+  logoUrl?: string;
+}
+
+/**
+ * The logo URL to render, or `undefined`.
+ *
+ * A logo on a sign-in or consent screen is the one image on the page that
+ * comes from outside Cortena: an MCP client registers it, and the screen it
+ * appears on is where a user decides whether to hand that client their
+ * credentials. So the scheme is checked rather than trusted.
+ *
+ * Only `https:` passes. `data:` and `blob:` let a registration inline
+ * arbitrary bytes — an SVG among them, which the browser will render with its
+ * own scripts if it is ever loaded as a document — and `http:` is a mixed
+ * -content image that any network can replace with the attacker's logo of
+ * choice. A relative URL resolves against the current page and so passes only
+ * on an https origin, which is where sign-in belongs.
+ *
+ * `javascript:` never reaches an `<img src>` as code, but it has no business
+ * being one either; it falls out of the same rule rather than needing its own.
+ */
+export function httpsLogoUrl(logoUrl: string | undefined): string | undefined {
+  if (!logoUrl) {
+    return undefined;
+  }
+  try {
+    // Relative URLs are resolved, not rejected: the check is about the scheme
+    // the browser will actually fetch, and `new URL` is what decides that.
+    const base = typeof location === "undefined" ? undefined : location.href;
+    const url = base === undefined ? new URL(logoUrl) : new URL(logoUrl, base);
+    return url.protocol === "https:" ? logoUrl : undefined;
+  } catch {
+    // Not a URL at all. A broken image is a worse answer than the mark.
+    return undefined;
+  }
+}
+
+export interface AuthScreenProps extends Omit<React.ComponentProps<"div">, "title"> {
+  brand: AuthScreenBrand;
+  /** The `<h1>`. */
+  title: React.ReactNode;
+  /** One line under the title. */
+  subtitle?: React.ReactNode;
+  /** Rendered above the title, for the signed-out notice and the error. */
+  notices?: React.ReactNode;
+  /** Rendered under the card, for `returnTo` and small print. */
+  footer?: React.ReactNode;
+}
+
+/**
+ * The chrome both screens wear: one centred card on the canvas.
+ *
+ * Centring is explicit (`place-items-center`, and `mx-auto` on the column)
+ * because a max-width alone leaves the card against the left edge on a wide
+ * monitor — which shipped once already. The column is `w-full` under a
+ * `max-w-sm`, so it fits a 360px viewport with the page padding intact.
+ */
+function AuthScreen({
+  className,
+  brand,
+  title,
+  subtitle,
+  notices,
+  footer,
+  children,
+  ...props
+}: AuthScreenProps) {
+  const logoUrl = httpsLogoUrl(brand.logoUrl);
+  return (
+    <div
+      data-slot="auth-screen"
+      className={cn(
+        "flex min-h-screen w-full flex-col items-center justify-center gap-6 px-4 py-10",
+        "bg-[var(--ds-background)] text-[color:var(--ds-foreground)]",
+        className,
+      )}
+      {...props}
+    >
+      <div
+        data-slot="auth-screen-column"
+        className="mx-auto flex w-full max-w-sm flex-col items-stretch gap-4"
+      >
+        <div data-slot="auth-screen-brand" className="flex items-center justify-center gap-2.5">
+          <span
+            data-slot="auth-screen-brand-square"
+            className={cn(
+              "flex size-8 shrink-0 items-center justify-center overflow-hidden",
+              "rounded-[var(--ds-radius-md)] bg-[var(--ds-primary-soft)]",
+              "text-[color:var(--ds-primary)]",
+            )}
+          >
+            {logoUrl ? (
+              <img
+                src={logoUrl}
+                alt=""
+                // The URL is the client's, so the request must not tell it
+                // which Cortena screen the user is standing on.
+                referrerPolicy="no-referrer"
+                className="size-5 object-contain"
+              />
+            ) : (
+              <BrandMark id={brand.id ?? ""} name={brand.name} size={20} decorative />
+            )}
+          </span>
+          <span
+            data-slot="auth-screen-brand-name"
+            className={cn(
+              "truncate font-display text-[length:var(--ds-text-body-md)] font-bold",
+              "leading-[var(--ds-text-body-md--line-height)]",
+            )}
+          >
+            {brand.name}
+          </span>
+        </div>
+
+        {notices ? (
+          <div data-slot="auth-screen-notices" className="flex flex-col gap-3">
+            {notices}
+          </div>
+        ) : null}
+
+        <div
+          data-slot="auth-screen-card"
+          className={cn(
+            "flex flex-col gap-5 rounded-[var(--ds-radius-lg)] border border-[var(--ds-border-subtle)]",
+            "bg-[var(--ds-card)] p-6 shadow-[var(--ds-shadow-md)]",
+          )}
+        >
+          <div data-slot="auth-screen-heading" className="flex flex-col gap-1.5">
+            <h1
+              data-slot="auth-screen-title"
+              className={cn(
+                "font-display text-[length:var(--ds-text-h3)] font-bold",
+                "leading-[var(--ds-text-h3--line-height)] text-[color:var(--ds-foreground)]",
+              )}
+            >
+              {title}
+            </h1>
+            {subtitle ? (
+              <p
+                data-slot="auth-screen-subtitle"
+                className={cn(
+                  "text-[length:var(--ds-text-caption-lg)]",
+                  "leading-[var(--ds-text-caption-lg--line-height)]",
+                  "text-[color:var(--ds-muted-foreground)]",
+                )}
+              >
+                {subtitle}
+              </p>
+            ) : null}
+          </div>
+          {children}
+        </div>
+
+        {footer ? (
+          <div
+            data-slot="auth-screen-footer"
+            className={cn(
+              "text-center text-[length:var(--ds-text-caption)]",
+              "leading-[var(--ds-text-caption--line-height)]",
+              "text-[color:var(--ds-muted-foreground)]",
+            )}
+          >
+            {footer}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/* ── provider marks ──────────────────────────────────────────────────────── */
+
+/**
+ * The identity providers' own marks. These are the one justified colour waiver
+ * in the whole design system (§7.4): a provider's brand mark is prescribed by
+ * that provider and may not be recoloured, so it cannot come from a token. The
+ * waiver lives here so no consumer of cortena-ui ever needs one — which is the
+ * point of moving these buttons into the package.
+ */
+function GoogleMark() {
+  return (
+    <svg viewBox="0 0 18 18" aria-hidden focusable="false" className="size-4">
+      {/* cortena-design-lint-disable-next-line -- Google brand blue; a provider mark may not be recoloured (§7.4) */}
+      <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62Z" />
+      {/* cortena-design-lint-disable-next-line -- Google brand green; a provider mark may not be recoloured (§7.4) */}
+      <path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18Z" />
+      {/* cortena-design-lint-disable-next-line -- Google brand yellow; a provider mark may not be recoloured (§7.4) */}
+      <path fill="#FBBC05" d="M3.97 10.72a5.41 5.41 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.01-2.33Z" />
+      {/* cortena-design-lint-disable-next-line -- Google brand red; a provider mark may not be recoloured (§7.4) */}
+      <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.59C13.46.89 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58Z" />
+    </svg>
+  );
+}
+
+function MicrosoftMark() {
+  return (
+    <svg viewBox="0 0 18 18" aria-hidden focusable="false" className="size-4">
+      {/* cortena-design-lint-disable-next-line -- Microsoft brand orange; a provider mark may not be recoloured (§7.4) */}
+      <path fill="#F25022" d="M0 0h8.5v8.5H0z" />
+      {/* cortena-design-lint-disable-next-line -- Microsoft brand green; a provider mark may not be recoloured (§7.4) */}
+      <path fill="#7FBA00" d="M9.5 0H18v8.5H9.5z" />
+      {/* cortena-design-lint-disable-next-line -- Microsoft brand blue; a provider mark may not be recoloured (§7.4) */}
+      <path fill="#00A4EF" d="M0 9.5h8.5V18H0z" />
+      {/* cortena-design-lint-disable-next-line -- Microsoft brand yellow; a provider mark may not be recoloured (§7.4) */}
+      <path fill="#FFB900" d="M9.5 9.5H18V18H9.5z" />
+    </svg>
+  );
+}
+
+/* ── the login screen ────────────────────────────────────────────────────── */
+
+/** The sign-in methods an org can advertise through `/api/orgs/:orgId/auth-info`. */
+export type LoginMethod = "password" | "google" | "microsoft";
+
+export interface LoginExtension {
+  /** Registered mark id, from `x-cortena.icon` in the OpenAPI document (§9.1). */
+  id: string;
+  /** Display name. "Sign in to <name>". */
+  name: string;
+}
+
+export interface PasswordCredentials {
+  email: string;
+  password: string;
+}
+
+const PROVIDERS: Record<
+  Exclude<LoginMethod, "password">,
+  { label: string; Mark: () => React.ReactElement }
+> = {
+  google: { label: "Continue with Google", Mark: GoogleMark },
+  microsoft: { label: "Continue with Microsoft", Mark: MicrosoftMark },
+};
+
+/** The order providers appear in, so two orgs never show them in different orders. */
+const PROVIDER_ORDER = ["google", "microsoft"] as const;
+
+export interface LoginScreenProps extends Omit<React.ComponentProps<"div">, "onSubmit"> {
+  /** The extension (or product) being signed into. Supplies the mark and the name. */
+  extension: LoginExtension;
+  /**
+   * What the org advertises. An empty or omitted list means password — never an
+   * empty screen, which is what a failed `auth-info` call would otherwise draw.
+   */
+  methods?: readonly LoginMethod[];
+  onPassword?: (credentials: PasswordCredentials) => void;
+  onProvider?: (provider: Exclude<LoginMethod, "password">) => void;
+  /** Shown above the card. A failed sign-in, in the user's words, not the API's. */
+  error?: string;
+  /** Disables every control and marks the submit button busy. */
+  loading?: boolean;
+  /**
+   * Where the user was when the session ended (§9.4). Shown, so the promise is
+   * visible before signing in; honouring it after sign-in is the caller's job.
+   */
+  returnTo?: string;
+  /** The signed-out state a failed refresh or an idle timeout lands on (P-37). */
+  signedOut?: boolean;
+}
+
+function LoginScreen({
+  className,
+  extension,
+  methods,
+  onPassword,
+  onProvider,
+  error,
+  loading,
+  returnTo,
+  signedOut,
+  ...props
+}: LoginScreenProps) {
+  const fieldId = React.useId();
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+
+  // An org that advertises nothing still has password: an empty methods list is
+  // a missing or failed auth-info call, and a screen with no way in is worse
+  // than one that offers the method every org has.
+  const active = methods && methods.length > 0 ? methods : (["password"] as const);
+  const showPassword = active.includes("password");
+  const providers = PROVIDER_ORDER.filter((p) => active.includes(p));
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (loading) {
+      return;
+    }
+    onPassword?.({ email, password });
+  };
+
+  return (
+    <AuthScreen
+      data-slot="login-screen"
+      data-loading={loading ? "" : undefined}
+      className={className}
+      brand={{ id: extension.id, name: extension.name }}
+      title={`Sign in to ${extension.name}`}
+      subtitle={signedOut ? undefined : "Use your Cortena account."}
+      notices={
+        <>
+          {signedOut ? (
+            <Alert variant="warn" data-slot="login-screen-signed-out">
+              <AlertIcon>
+                <SignedOutGlyph />
+              </AlertIcon>
+              <div>
+                <AlertTitle>You were signed out</AlertTitle>
+                <AlertDescription>
+                  Sign in again to pick up where you left off.
+                </AlertDescription>
+              </div>
+            </Alert>
+          ) : null}
+          {error ? (
+            <Alert variant="destructive" data-slot="login-screen-error">
+              <AlertDescription className="text-[color:var(--ds-foreground)]">
+                {error}
+              </AlertDescription>
+            </Alert>
+          ) : null}
+        </>
+      }
+      footer={
+        returnTo ? (
+          <span data-slot="login-screen-return-to">
+            You will return to <span className="font-mono">{returnTo}</span>
+          </span>
+        ) : null
+      }
+      {...props}
+    >
+      {showPassword ? (
+        <form
+          data-slot="login-screen-form"
+          className="flex flex-col gap-4"
+          onSubmit={submit}
+          noValidate
+        >
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor={`${fieldId}-email`}>Email</Label>
+            <Input
+              id={`${fieldId}-email`}
+              name="email"
+              type="email"
+              autoComplete="username"
+              autoFocus
+              required
+              disabled={loading}
+              aria-invalid={error ? true : undefined}
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor={`${fieldId}-password`}>Password</Label>
+            <Input
+              id={`${fieldId}-password`}
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              required
+              disabled={loading}
+              aria-invalid={error ? true : undefined}
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+            />
+          </div>
+          {/* A real submit button, so Enter in either field signs in. */}
+          <Button type="submit" size="lg" disabled={loading} data-slot="login-screen-submit">
+            {loading ? <Spinner tone="inverse" /> : null}
+            {loading ? "Signing in…" : "Sign in"}
+          </Button>
+        </form>
+      ) : null}
+
+      {showPassword && providers.length > 0 ? (
+        <div data-slot="login-screen-divider" className="flex items-center gap-3" aria-hidden>
+          <span className="h-px flex-1 bg-[var(--ds-border)]" />
+          <span
+            className={cn(
+              "text-[length:var(--ds-text-caption)]",
+              "text-[color:var(--ds-muted-foreground)]",
+            )}
+          >
+            or
+          </span>
+          <span className="h-px flex-1 bg-[var(--ds-border)]" />
+        </div>
+      ) : null}
+
+      {providers.length > 0 ? (
+        <div data-slot="login-screen-providers" className="flex flex-col gap-2.5">
+          {providers.map((provider) => {
+            const { label, Mark } = PROVIDERS[provider];
+            return (
+              <Button
+                key={provider}
+                type="button"
+                variant="secondary"
+                size="lg"
+                disabled={loading}
+                data-provider={provider}
+                onClick={() => onProvider?.(provider)}
+              >
+                <Mark />
+                {label}
+              </Button>
+            );
+          })}
+        </div>
+      ) : null}
+    </AuthScreen>
+  );
+}
+
+/** The signed-out notice's glyph. Inline rather than a lucide import: one icon. */
+function SignedOutGlyph() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 8v5" strokeLinecap="round" />
+      <path d="M12 16h.01" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export { AuthScreen, GoogleMark, LoginScreen, MicrosoftMark };