@cosmicdrift/kumiko-bundled-features 0.256.0 → 0.258.0

package/src/auth-mfa/web/__tests__/mfa-enable-screen.test.tsx

@@ -1,182 +0,0 @@
-import { afterAll, beforeEach, describe, expect, mock, test } from "bun:test";
-import {
-  createStaticLocaleResolver,
-  LocaleProvider,
-  PrimitivesProvider,
-} from "@cosmicdrift/kumiko-renderer";
-import { defaultPrimitives } from "@cosmicdrift/kumiko-renderer-web";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import type { ReactNode } from "react";
-import { makeSessionApi } from "../../../auth-email-password/web/__tests__/test-utils";
-import { SessionContext } from "../../../auth-email-password/web/session";
-import { defaultTranslations } from "../i18n";
-
-type WriteResult =
-  | { readonly isSuccess: true; readonly data: unknown }
-  | { readonly isSuccess: false; readonly error: { readonly i18nKey: string } };
-
-const dispatchSpy = mock<() => Promise<WriteResult>>(async () => ({
-  isSuccess: true,
-  data: {
-    setupToken: "setup-token-1",
-    otpauthUri: "otpauth://totp/App:user@example.com?secret=ABCD1234&issuer=App",
-    recoveryCodes: ["code-1", "code-2"],
-  },
-}));
-
-const actual_renderer = await import("@cosmicdrift/kumiko-renderer");
-mock.module("@cosmicdrift/kumiko-renderer", () => ({
-  ...actual_renderer,
-  useDispatcher: mock(() => ({ write: dispatchSpy, query: mock(), batch: mock() })),
-}));
-
-mock.module("qrcode/lib/browser", () => ({
-  default: { toString: mock(async () => "<svg></svg>") },
-}));
-
-// bun's mock.module is process-global and outlives this file — without
-// restoring it, any later suite in the same test run that needs the real
-// useDispatcher from @cosmicdrift/kumiko-renderer silently gets this mock
-// instead (green-by-accident or a confusing foreign-suite failure,
-// depending on test order).
-afterAll(() => {
-  mock.module("@cosmicdrift/kumiko-renderer", () => actual_renderer);
-});
-
-const { MfaEnableScreen } = await import("../mfa-enable-screen");
-
-const session = makeSessionApi();
-
-function Wrapper({ children }: { readonly children: ReactNode }): ReactNode {
-  return (
-    <PrimitivesProvider value={defaultPrimitives}>
-      <LocaleProvider
-        resolver={createStaticLocaleResolver({ locale: "en" })}
-        fallbackBundles={[defaultTranslations]}
-      >
-        <SessionContext.Provider value={session}>{children}</SessionContext.Provider>
-      </LocaleProvider>
-    </PrimitivesProvider>
-  );
-}
-
-beforeEach(() => {
-  dispatchSpy.mockClear();
-});
-
-describe("MfaEnableScreen", () => {
-  test("rendert Intro + Start-Button, kein Setup-Bereich vor dem Start", () => {
-    render(
-      <Wrapper>
-        <MfaEnableScreen />
-      </Wrapper>,
-    );
-    expect(screen.getByText("Two-factor authentication")).toBeTruthy();
-    expect(screen.getByRole("button", { name: "Start setup" })).toBeTruthy();
-    expect(screen.queryByLabelText("Code aus der Authenticator-App")).toBeNull();
-  });
-
-  test("Start-Klick → dispatcher.write ruft enable-start, danach Setup-Bereich mit Secret + Recovery-Codes", async () => {
-    render(
-      <Wrapper>
-        <MfaEnableScreen />
-      </Wrapper>,
-    );
-
-    fireEvent.click(screen.getByRole("button", { name: "Start setup" }));
-
-    await waitFor(() => {
-      expect(dispatchSpy).toHaveBeenCalledWith(
-        "auth-mfa:write:enable-start",
-        expect.objectContaining({ accountLabel: "user@example.com" }),
-      );
-    });
-    await waitFor(() => {
-      expect(screen.getByText("ABCD1234")).toBeTruthy();
-    });
-    expect(screen.getByText(/code-1/)).toBeTruthy();
-    expect(screen.getByText(/code-2/)).toBeTruthy();
-  });
-
-  test("Bestätigen-Button bleibt disabled bis Recovery-Codes bestätigt + 6-stelliger Code eingegeben", async () => {
-    render(
-      <Wrapper>
-        <MfaEnableScreen />
-      </Wrapper>,
-    );
-    fireEvent.click(screen.getByRole("button", { name: "Start setup" }));
-    await waitFor(() => {
-      expect(screen.getByText("ABCD1234")).toBeTruthy();
-    });
-
-    const confirm = screen.getByRole("button", { name: "Enable" }) as HTMLButtonElement;
-    expect(confirm.disabled).toBe(true);
-
-    fireEvent.click(screen.getByLabelText("I've saved my recovery codes."));
-    expect(confirm.disabled).toBe(true);
-
-    fireEvent.change(screen.getByLabelText(/^Code from your authenticator app/), {
-      target: { value: "123456" },
-    });
-    expect(confirm.disabled).toBe(false);
-  });
-
-  test("Bestätigen → dispatcher.write ruft enable-confirm, danach Success-Banner", async () => {
-    dispatchSpy
-      .mockImplementationOnce(async () => ({
-        isSuccess: true,
-        data: {
-          setupToken: "setup-token-1",
-          otpauthUri: "otpauth://totp/App:user@example.com?secret=ABCD1234&issuer=App",
-          recoveryCodes: ["code-1", "code-2"],
-        },
-      }))
-      .mockImplementationOnce(async () => ({ isSuccess: true, data: undefined }));
-    const onEnabled = mock(() => {});
-    render(
-      <Wrapper>
-        <MfaEnableScreen onEnabled={onEnabled} />
-      </Wrapper>,
-    );
-    fireEvent.click(screen.getByRole("button", { name: "Start setup" }));
-    await waitFor(() => {
-      expect(screen.getByText("ABCD1234")).toBeTruthy();
-    });
-    fireEvent.click(screen.getByLabelText("I've saved my recovery codes."));
-    fireEvent.change(screen.getByLabelText(/^Code from your authenticator app/), {
-      target: { value: "123456" },
-    });
-
-    fireEvent.click(screen.getByRole("button", { name: "Enable" }));
-
-    await waitFor(() => {
-      expect(dispatchSpy).toHaveBeenCalledWith(
-        "auth-mfa:write:enable-confirm",
-        expect.objectContaining({ setupToken: "setup-token-1", code: "123456" }),
-      );
-    });
-    await waitFor(() => {
-      expect(screen.getByText("Two-factor authentication is now enabled.")).toBeTruthy();
-      expect(onEnabled).toHaveBeenCalled();
-    });
-  });
-
-  test("enable-start schlägt fehl → übersetztes Fehler-Banner, kein Setup-Bereich", async () => {
-    dispatchSpy.mockImplementationOnce(async () => ({
-      isSuccess: false,
-      error: { i18nKey: "auth.mfa.errors.mfaAlreadyEnabled" },
-    }));
-    render(
-      <Wrapper>
-        <MfaEnableScreen />
-      </Wrapper>,
-    );
-
-    fireEvent.click(screen.getByRole("button", { name: "Start setup" }));
-
-    await waitFor(() => {
-      expect(screen.getByText("Two-factor authentication is already enabled.")).toBeTruthy();
-    });
-    expect(screen.queryByText("ABCD1234")).toBeNull();
-  });
-});

package/src/auth-mfa/web/mfa-enable-screen.tsx

@@ -1,224 +0,0 @@
-// @runtime client
-// MfaEnableScreen — logged-in self-service TOTP-Enrollment. Kein Dialog:
-// DefaultDialog schließt nach JEDEM onConfirm (siehe renderer-web/src/
-// primitives/dialog.tsx — onOpenChange(false) im finally-Block), das passt
-// nicht zu einem Mehrschritt-Flow (Secret zeigen → Recovery-Codes zeigen →
-// Code bestätigen). Folgt stattdessen pat-tokens-screen.tsx's embedded-
-// Screen-Konvention: Feature registriert das dormant via r.screen, App
-// platziert es via r.nav.
-
-import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { FormScreenShell } from "@cosmicdrift/kumiko-renderer-web";
-// qrcode's package.json#browser remap avoids Node-only deps (yargs/pngjs)
-// for bundlers that honor it — Metro doesn't, hence the explicit subpath.
-// @types/qrcode only covers the main "qrcode" entry, not this subpath, and
-// TypeScript can't auto-discover an ambient .d.ts sibling from inside a
-// node_modules package (consuming apps typecheck this raw .tsx source).
-// Apps mounting MfaEnableScreen need their own local ambient shim — see
-// qrcode-browser.d.ts in this directory for the declaration to copy.
-import QRCode from "qrcode/lib/browser";
-import { type ReactNode, useState } from "react";
-// kumiko-lint-ignore cross-feature-import client-only hook, the feature's server barrel has no web/ re-export
-import { useSession } from "../../auth-email-password/web";
-import { AuthMfaHandlers } from "../constants";
-
-type EnableStartResponse = {
-  readonly setupToken: string;
-  readonly otpauthUri: string;
-  readonly recoveryCodes: readonly string[];
-};
-
-type SetupState = {
-  readonly setupToken: string;
-  readonly secretParam: string;
-  readonly recoveryCodes: readonly string[];
-  readonly qrSvg: string;
-};
-
-// otpauth:// URIs put the secret in the query string — extract it for the
-// manual-entry fallback (authenticator apps without a camera / desktop use).
-function extractSecret(otpauthUri: string): string {
-  const query = otpauthUri.split("?")[1] ?? "";
-  return new URLSearchParams(query).get("secret") ?? "";
-}
-
-export type MfaEnableScreenProps = {
-  readonly embedded?: boolean;
-  // Fired once enable-confirm succeeds — MfaEnableScreen has no query of its
-  // own to invalidate, so a host screen composing it alongside other MFA
-  // state (e.g. a status query gating which section renders) needs this to
-  // know when to refetch/swap views instead of leaving the success banner
-  // as a dead end.
-  readonly onEnabled?: () => void;
-};
-
-export function MfaEnableScreen({
-  embedded = false,
-  onEnabled,
-}: MfaEnableScreenProps = {}): ReactNode {
-  const t = useTranslation();
-  const { Button, Banner, Field, Input, Section, Heading } = usePrimitives();
-  const dispatcher = useDispatcher();
-  const session = useSession();
-
-  const [setup, setSetup] = useState<SetupState | null>(null);
-  const [acknowledged, setAcknowledged] = useState(false);
-  const [code, setCode] = useState("");
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [enabled, setEnabled] = useState(false);
-
-  const startSetup = async (): Promise<void> => {
-    setBusy(true);
-    setError(null);
-    try {
-      const res = await dispatcher.write<EnableStartResponse>(AuthMfaHandlers.enableStart, {
-        accountLabel: session.user?.email ?? "",
-      });
-      if (!res.isSuccess) {
-        setError(res.error.i18nKey);
-        return;
-      }
-      // errorCorrectionLevel "H" (~30% redundancy) — more resilient to
-      // camera/lighting issues than the default, no downside for a code
-      // this short-lived.
-      const qrSvg = await QRCode.toString(res.data.otpauthUri, {
-        type: "svg",
-        errorCorrectionLevel: "H",
-      });
-      setSetup({
-        setupToken: res.data.setupToken,
-        secretParam: extractSecret(res.data.otpauthUri),
-        recoveryCodes: res.data.recoveryCodes,
-        qrSvg,
-      });
-      setAcknowledged(false);
-      setCode("");
-    } catch {
-      setError("auth.mfa.errors.setupFailed");
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  const confirmSetup = async (): Promise<void> => {
-    if (!setup) return;
-    setBusy(true);
-    setError(null);
-    try {
-      const res = await dispatcher.write(AuthMfaHandlers.enableConfirm, {
-        setupToken: setup.setupToken,
-        code,
-      });
-      if (!res.isSuccess) {
-        setError(res.error.i18nKey);
-        return;
-      }
-      setEnabled(true);
-      setSetup(null);
-      onEnabled?.();
-    } catch {
-      setError("auth.mfa.errors.setupFailed");
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  const content = (
-    <div className="flex flex-col gap-6">
-      <Heading>{t("auth.mfa.enable.title")}</Heading>
-
-      {enabled && <Banner variant="info">{t("auth.mfa.enable.success")}</Banner>}
-      {error !== null && <Banner variant="error">{t(error)}</Banner>}
-
-      {!setup && !enabled && (
-        <Section
-          testId="mfa-enable-intro"
-          actions={
-            <Button
-              variant="primary"
-              onClick={() => void startSetup()}
-              loading={busy}
-              disabled={busy}
-            >
-              {t("auth.mfa.enable.start")}
-            </Button>
-          }
-        >
-          <span className="text-sm text-muted-foreground">{t("auth.mfa.enable.intro")}</span>
-        </Section>
-      )}
-
-      {setup && (
-        <Section
-          testId="mfa-enable-setup"
-          actions={
-            <>
-              <Button variant="secondary" onClick={() => setSetup(null)} disabled={busy}>
-                {t("auth.mfa.enable.cancel")}
-              </Button>
-              <Button
-                variant="primary"
-                onClick={() => void confirmSetup()}
-                loading={busy}
-                disabled={busy || !acknowledged || code.length !== 6}
-              >
-                {t("auth.mfa.enable.confirm")}
-              </Button>
-            </>
-          }
-        >
-          <div className="flex flex-col items-center gap-2 text-center">
-            <span className="text-sm font-semibold">{t("auth.mfa.enable.scanTitle")}</span>
-            {/* qrcode's own SVG string output, not user input — safe to inline */}
-            <div
-              className="h-40 w-40"
-              // biome-ignore lint/security/noDangerouslySetInnerHtml: qrcode-generated SVG, no user input
-              dangerouslySetInnerHTML={{ __html: setup.qrSvg }}
-            />
-            <span className="text-xs text-muted-foreground">
-              {t("auth.mfa.enable.manualEntry")}
-            </span>
-            <code className="inline-block break-all rounded bg-muted px-3 py-2 font-mono text-sm">
-              {setup.secretParam}
-            </code>
-          </div>
-
-          <div className="flex flex-col gap-2">
-            <span className="text-sm font-semibold">{t("auth.mfa.enable.recoveryTitle")}</span>
-            <span className="text-xs text-muted-foreground">
-              {t("auth.mfa.enable.recoveryHint")}
-            </span>
-            <code className="block whitespace-pre-wrap break-all rounded bg-muted px-3 py-2 font-mono text-sm">
-              {setup.recoveryCodes.join("\n")}
-            </code>
-            <Field id="mfa-enable-ack" label={t("auth.mfa.enable.acknowledge")}>
-              <Input
-                kind="boolean"
-                id="mfa-enable-ack"
-                name="mfa-enable-ack"
-                value={acknowledged}
-                onChange={setAcknowledged}
-              />
-            </Field>
-          </div>
-
-          <Field id="mfa-enable-code" label={t("auth.mfa.enable.code")} required>
-            <Input
-              kind="text"
-              id="mfa-enable-code"
-              name="mfa-enable-code"
-              value={code}
-              onChange={setCode}
-              disabled={busy || !acknowledged}
-              autoComplete="one-time-code"
-            />
-          </Field>
-        </Section>
-      )}
-    </div>
-  );
-
-  if (embedded) return content;
-  return <FormScreenShell testId="mfa-enable-screen">{content}</FormScreenShell>;
-}

package/src/personal-access-tokens/web/client-plugin.tsx

@@ -1,29 +0,0 @@
-// @runtime client
-// Client-feature factory for personal-access-tokens. Ships the PatTokensScreen
-// (mapped to the "api-tokens" screen id) + default translations. Apps mount it
-// in createKumikoApp({ clientFeatures: [personalAccessTokensClient()] }); the
-// server registers the screen dormant (r.screen) and the app places it via
-// r.nav.
-
-import { mergeTranslations, type TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
-import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
-import { PAT_FEATURE, PAT_SCREEN_ID } from "../constants";
-import { defaultTranslations } from "./i18n";
-import { PatTokensScreen } from "./pat-tokens-screen";
-
-export type PersonalAccessTokensClientOptions = {
-  /** Key-wise overrides over the default bundles (de/en). */
-  readonly translations?: TranslationsByLocale;
-};
-
-export function personalAccessTokensClient(
-  options?: PersonalAccessTokensClientOptions,
-): ClientFeatureDefinition {
-  return {
-    name: PAT_FEATURE,
-    translations: mergeTranslations(defaultTranslations, options?.translations ?? {}),
-    components: {
-      [PAT_SCREEN_ID]: PatTokensScreen,
-    },
-  };
-}

package/src/personal-access-tokens/web/i18n.ts

@@ -1,40 +0,0 @@
-// @runtime client
-import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
-
-export const defaultTranslations: TranslationsByLocale = {
-  en: {
-    "pat.title": "Personal Access Tokens",
-    "pat.create.title": "Create a new token",
-    "pat.create.subtitle": "Pick permissions and an expiration. The token is shown only once.",
-    "pat.create.name": "Name",
-    "pat.create.namePlaceholder": "e.g. CLI automation",
-    "pat.create.scopes": "Per-API access",
-    "pat.level.none": "No access",
-    "pat.level.read": "Read",
-    "pat.level.write": "Read & write",
-    "pat.create.expiry": "Expiration",
-    "pat.create.submit": "Create token",
-    "pat.create.needName": "Please enter a name.",
-    "pat.create.needScope": "Please select at least one permission.",
-    "pat.create.needPassword": "Please enter your password to confirm.",
-    "pat.create.currentPassword": "Password (to confirm)",
-    "pat.create.mfaCode": "2FA code (if enabled)",
-    "pat.create.mfaCodePlaceholder": "6-digit code",
-    "pat.expiry.30d": "30 days",
-    "pat.expiry.90d": "90 days",
-    "pat.expiry.1y": "1 year",
-    "pat.expiry.never": "No expiration",
-    "pat.created.hint": "Copy this token now — for security it is shown only this once.",
-    "pat.created.copy": "Copy",
-    "pat.created.copied": "Copied ✓",
-    "pat.created.dismiss": "Done",
-    "pat.list.title": "Your tokens",
-    "pat.list.empty": "No tokens yet.",
-    "pat.list.revoke": "Revoke",
-    "pat.list.revoked": "Revoked",
-    "pat.list.validUntil": "Valid until {date}",
-    "pat.list.neverExpires": "Never expires",
-    "pat.list.created": "Created {date}",
-    "pat.error.generic": "Action failed.",
-  },
-};

package/src/personal-access-tokens/web/index.ts

@@ -1,7 +0,0 @@
-// @runtime client
-export {
-  type PersonalAccessTokensClientOptions,
-  personalAccessTokensClient,
-} from "./client-plugin";
-export { defaultTranslations } from "./i18n";
-export { PatTokensScreen } from "./pat-tokens-screen";