@cosmicdrift/kumiko-bundled-features 0.243.0 → 0.243.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.243.0",
+  "version": "0.243.1",
   "description": "Built-in features — tenant, user, auth, delivery. The stuff you'd rewrite anyway, already typed.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -130,12 +130,12 @@
     "./workflow-runner": "./src/workflow-runner/index.ts"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.243.0",
-    "@cosmicdrift/kumiko-framework": "0.243.0",
-    "@cosmicdrift/kumiko-headless": "0.243.0",
-    "@cosmicdrift/kumiko-renderer": "0.243.0",
-    "@cosmicdrift/kumiko-renderer-web": "0.243.0",
-    "@cosmicdrift/kumiko-types": "0.243.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.243.1",
+    "@cosmicdrift/kumiko-framework": "0.243.1",
+    "@cosmicdrift/kumiko-headless": "0.243.1",
+    "@cosmicdrift/kumiko-renderer": "0.243.1",
+    "@cosmicdrift/kumiko-renderer-web": "0.243.1",
+    "@cosmicdrift/kumiko-types": "0.243.1",
     "@mollie/api-client": "^4.5.0",
     "@node-rs/argon2": "^2.0.2",
     "@types/mailparser": "^3.4.6",
@@ -164,7 +164,7 @@
   "devDependencies": {
     "@testing-library/user-event": "^14.6.1",
     "@types/qrcode": "^1.5.5",
-    "@cosmicdrift/kumiko-locale-de": "0.243.0",
-    "@cosmicdrift/kumiko-locale-es": "0.243.0"
+    "@cosmicdrift/kumiko-locale-de": "0.243.1",
+    "@cosmicdrift/kumiko-locale-es": "0.243.1"
   }
 }

package/src/user-profile/__tests__/profile-screen.test.tsx

@@ -105,15 +105,62 @@ async function waitForMount(view: ReturnType<typeof render>, testId: string): Pr
   });
 }
 
+// Reproduces the real host: RenderEdit renders exactly one <form
+// testId="render-edit-form"> around every singleton projectionDetail screen
+// (render-edit.tsx), and both sections mount as children of that form via
+// ExtensionSectionMount. A section that renders its own <form> nests invalid
+// DOM inside it — the security bug this guards against: the submit button
+// falls back to a native GET navigation, putting the password(s) in the URL
+// query instead of dispatching a write.
+function renderInsideHostForm(node: ReactNode) {
+  const writes: Array<{ type: string; payload: unknown }> = [];
+  const view = render(<form data-testid="render-edit-form">{node}</form>, {
+    wrapper: withProviders(writes),
+  });
+  return { view, writes };
+}
+
 describe("ChangeEmailSection", () => {
-  test("renders on a real <form> (Enter-to-submit, password-manager boundary), shows the current email, no raw i18n keys", async () => {
+  test("renders no <form> of its own (would nest inside the host RenderEdit <form>), shows the current email, no raw i18n keys", async () => {
     const { view } = renderChangeEmailSection("marc@example.com");
     await waitForMount(view, "change-email-root");
-    expect(view.getByTestId("profile-email").tagName).toBe("FORM");
+    expect(view.container.querySelector("form")).toBeNull();
     expect(view.getByTestId("profile-email-current").textContent).toContain("marc@example.com");
     expect(view.container.textContent).not.toContain("profile.");
   });
 
+  // Security regression guard: mounted inside the real host <form> (as
+  // RenderEdit does in production), a click on the submit button must still
+  // reach the write dispatcher — not fall back to the host form's native
+  // GET submission, which would put currentPassword/newEmail in the URL.
+  test("mounted inside the host RenderEdit <form>, a click on the submit button dispatches change-email (no nested <form>, no native submit fallback)", async () => {
+    const { view, writes } = renderInsideHostForm(
+      <ChangeEmailSection
+        entityName="user"
+        entityId={null}
+        values={{ email: "old@example.com" }}
+        patch={() => {}}
+      />,
+    );
+    await waitForMount(view, "profile-email");
+    expect(view.container.querySelectorAll("form")).toHaveLength(1);
+
+    const emailInput = view.container.querySelector<HTMLInputElement>("#profile-new-email");
+    const pwInput = view.container.querySelector<HTMLInputElement>("#profile-email-password");
+    if (!emailInput || !pwInput) throw new Error("email form inputs not found");
+    fireEvent.change(emailInput, { target: { value: "new@example.com" } });
+    fireEvent.change(pwInput, { target: { value: "current-pw" } });
+    fireEvent.click(view.getByTestId("profile-email-submit"));
+
+    await waitFor(() => {
+      if (writes.length === 0) throw new Error("no write dispatched yet");
+    });
+    expect(writes[0]).toEqual({
+      type: "user-profile:write:change-email",
+      payload: { currentPassword: "current-pw", newEmail: "new@example.com" },
+    });
+  });
+
   test("submits change-email with currentPassword + newEmail, patches the host's email on success", async () => {
     const { view, writes, patchCalls } = renderChangeEmailSection("old@example.com");
     await waitForMount(view, "profile-email");
@@ -212,13 +259,40 @@ describe("ChangeEmailSection", () => {
 });
 
 describe("ChangePasswordSection", () => {
-  test("renders on a real <form>, no raw i18n keys", async () => {
+  test("renders no <form> of its own (would nest inside the host RenderEdit <form>), no raw i18n keys", async () => {
     const { view } = renderChangePasswordSection();
     await waitForMount(view, "change-password-root");
-    expect(view.getByTestId("profile-password").tagName).toBe("FORM");
+    expect(view.container.querySelector("form")).toBeNull();
     expect(view.container.textContent).not.toContain("profile.");
   });
 
+  // Security regression guard: mounted inside the real host <form> (as
+  // RenderEdit does in production), a click on the submit button must still
+  // reach the write dispatcher — not fall back to the host form's native
+  // GET submission, which would put old+new passwords in the URL.
+  test("mounted inside the host RenderEdit <form>, a click on the submit button dispatches change-password (no nested <form>, no native submit fallback)", async () => {
+    const { view, writes } = renderInsideHostForm(<ChangePasswordSection />);
+    await waitForMount(view, "profile-password");
+    expect(view.container.querySelectorAll("form")).toHaveLength(1);
+
+    const oldPw = view.container.querySelector<HTMLInputElement>("#profile-old-password");
+    const newPw = view.container.querySelector<HTMLInputElement>("#profile-new-password");
+    const confirmPw = view.container.querySelector<HTMLInputElement>("#profile-confirm-password");
+    if (!oldPw || !newPw || !confirmPw) throw new Error("password form inputs not found");
+    fireEvent.change(oldPw, { target: { value: "current-pw" } });
+    fireEvent.change(newPw, { target: { value: "new-pw-1" } });
+    fireEvent.change(confirmPw, { target: { value: "new-pw-1" } });
+    fireEvent.click(view.getByTestId("profile-password-submit"));
+
+    await waitFor(() => {
+      if (writes.length === 0) throw new Error("no write dispatched yet");
+    });
+    expect(writes[0]).toEqual({
+      type: "auth-email-password:write:change-password",
+      payload: { oldPassword: "current-pw", newPassword: "new-pw-1" },
+    });
+  });
+
   test("mismatched confirm password blocks the submit (no write dispatched)", async () => {
     const { view, writes } = renderChangePasswordSection();
     await waitForMount(view, "profile-password");

package/src/user-profile/changes.json

@@ -1,4 +1,10 @@
 [
+  {
+    "version": "0.243.1",
+    "type": "fix",
+    "title": "Security fix: ChangePasswordSection/ChangeEmailSection no longer nest a <form> inside the host RenderEdit form.",
+    "detail": "Since `profile` became a declarative `projectionDetail` screen (fw#2312), RenderEdit wraps the whole singleton screen in its own host `<form>`. `ChangePasswordSection` and `ChangeEmailSection` were each rendering their own `<Form>` inside that host, creating invalid nested `<form>` DOM. The submit button silently fell back to a native GET submission of the outer form instead of dispatching a write, putting the entered password(s) in the URL query string (browser history, `Referer` header, proxy/server access logs — `ChangePasswordSection` leaked both the old and the new password). Both sections now follow the same no-nested-form pattern `write-form-section.tsx` uses: a plain container with a `type=\"button\"` that calls the write dispatcher directly. testIds are unchanged; Enter-to-submit inside these two sections is an accepted, deliberate trade-off (same one `write-form-section.tsx` already makes)."
+  },
   {
     "version": "0.241.0",
     "type": "breaking",

package/src/user-profile/web/profile-screen.tsx

@@ -13,7 +13,6 @@ import {
   usePrimitives,
   useTranslation,
 } from "@cosmicdrift/kumiko-renderer";
-import { BareFormProvider } from "@cosmicdrift/kumiko-renderer-web";
 import { type ReactNode, useState } from "react";
 import { AuthHandlers } from "../../auth-email-password/constants";
 import { requestEmailVerification } from "../../auth-email-password/web";
@@ -46,12 +45,15 @@ function StatusBanner({ status }: { readonly status: SectionStatus }): ReactNode
 
 // Mounted by the renderer's ExtensionSectionMount (already wrapped in
 // <Section title={...} testId="section-extension-...">) — takes no props of
-// its own. BareFormProvider keeps <Form> from rendering a second card/title
-// inside that Section (same pattern as AuthCard, see
-// auth-email-password/web/auth-form-primitives.tsx).
+// its own. Deliberately NOT a <Form>: RenderEdit already renders a host
+// <form> around the whole singleton screen (render-edit.tsx), so a second
+// nested <form> here is invalid DOM and silently degrades the submit button
+// into a native GET navigation instead of a write dispatch (same failure
+// mode write-form-section.tsx documents and avoids the same way — a plain
+// button click, not a second <form>).
 export function ChangePasswordSection(): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button } = usePrimitives();
+  const { Field, Input, Button } = usePrimitives();
   const dispatcher = useDispatcher();
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
@@ -82,55 +84,55 @@ export function ChangePasswordSection(): ReactNode {
 
   const submitting = status.kind === "submitting";
   return (
-    <BareFormProvider>
-      <Form
-        testId="profile-password"
-        onSubmit={onSubmit}
-        actions={
-          <Button type="submit" disabled={submitting} testId="profile-password-submit">
-            {t("profile.password.submit")}
-          </Button>
-        }
-      >
-        <Field id="profile-old-password" label={t("profile.password.old")} required>
-          <Input
-            kind="password"
-            id="profile-old-password"
-            name="profile-old-password"
-            value={oldPassword}
-            onChange={setOldPassword}
-            disabled={submitting}
-            required
-            autoComplete="current-password"
-          />
-        </Field>
-        <Field id="profile-new-password" label={t("profile.password.new")} required>
-          <Input
-            kind="password"
-            id="profile-new-password"
-            name="profile-new-password"
-            value={newPassword}
-            onChange={setNewPassword}
-            disabled={submitting}
-            required
-            autoComplete="new-password"
-          />
-        </Field>
-        <Field id="profile-confirm-password" label={t("profile.password.confirm")} required>
-          <Input
-            kind="password"
-            id="profile-confirm-password"
-            name="profile-confirm-password"
-            value={confirm}
-            onChange={setConfirm}
-            disabled={submitting}
-            required
-            autoComplete="new-password"
-          />
-        </Field>
-        <StatusBanner status={status} />
-      </Form>
-    </BareFormProvider>
+    <div data-testid="profile-password" className="flex flex-col gap-4">
+      <Field id="profile-old-password" label={t("profile.password.old")} required>
+        <Input
+          kind="password"
+          id="profile-old-password"
+          name="profile-old-password"
+          value={oldPassword}
+          onChange={setOldPassword}
+          disabled={submitting}
+          required
+          autoComplete="current-password"
+        />
+      </Field>
+      <Field id="profile-new-password" label={t("profile.password.new")} required>
+        <Input
+          kind="password"
+          id="profile-new-password"
+          name="profile-new-password"
+          value={newPassword}
+          onChange={setNewPassword}
+          disabled={submitting}
+          required
+          autoComplete="new-password"
+        />
+      </Field>
+      <Field id="profile-confirm-password" label={t("profile.password.confirm")} required>
+        <Input
+          kind="password"
+          id="profile-confirm-password"
+          name="profile-confirm-password"
+          value={confirm}
+          onChange={setConfirm}
+          disabled={submitting}
+          required
+          autoComplete="new-password"
+        />
+      </Field>
+      <StatusBanner status={status} />
+      <div className="flex items-center justify-end gap-2">
+        <Button
+          type="button"
+          disabled={submitting}
+          onClick={() => onSubmit()}
+          testId="profile-password-submit"
+        >
+          {t("profile.password.submit")}
+        </Button>
+      </div>
+    </div>
   );
 }
 
@@ -142,7 +144,7 @@ export function ChangePasswordSection(): ReactNode {
 // relying on a full-screen refetch to un-stale the "current email" line.
 export function ChangeEmailSection({ values, patch }: ExtensionSectionProps): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Text } = usePrimitives();
+  const { Field, Input, Button, Text } = usePrimitives();
   const dispatcher = useDispatcher();
   const [newEmail, setNewEmail] = useState("");
   const [currentPassword, setCurrentPassword] = useState("");
@@ -188,45 +190,45 @@ export function ChangeEmailSection({ values, patch }: ExtensionSectionProps): Re
 
   const submitting = status.kind === "submitting";
   return (
-    <BareFormProvider>
-      <Form
-        testId="profile-email"
-        onSubmit={onSubmit}
-        actions={
-          <Button type="submit" disabled={submitting} testId="profile-email-submit">
-            {t("profile.email.submit")}
-          </Button>
-        }
-      >
-        <Text variant="muted" testId="profile-email-current">
-          {t("profile.email.current")}: {currentEmail}
-        </Text>
-        <Field id="profile-new-email" label={t("profile.email.new")} required>
-          <Input
-            kind="email"
-            id="profile-new-email"
-            name="profile-new-email"
-            value={newEmail}
-            onChange={setNewEmail}
-            disabled={submitting}
-            required
-            autoComplete="email"
-          />
-        </Field>
-        <Field id="profile-email-password" label={t("profile.email.currentPassword")} required>
-          <Input
-            kind="password"
-            id="profile-email-password"
-            name="profile-email-password"
-            value={currentPassword}
-            onChange={setCurrentPassword}
-            disabled={submitting}
-            required
-            autoComplete="current-password"
-          />
-        </Field>
-        <StatusBanner status={status} />
-      </Form>
-    </BareFormProvider>
+    <div data-testid="profile-email" className="flex flex-col gap-4">
+      <Text variant="muted" testId="profile-email-current">
+        {t("profile.email.current")}: {currentEmail}
+      </Text>
+      <Field id="profile-new-email" label={t("profile.email.new")} required>
+        <Input
+          kind="email"
+          id="profile-new-email"
+          name="profile-new-email"
+          value={newEmail}
+          onChange={setNewEmail}
+          disabled={submitting}
+          required
+          autoComplete="email"
+        />
+      </Field>
+      <Field id="profile-email-password" label={t("profile.email.currentPassword")} required>
+        <Input
+          kind="password"
+          id="profile-email-password"
+          name="profile-email-password"
+          value={currentPassword}
+          onChange={setCurrentPassword}
+          disabled={submitting}
+          required
+          autoComplete="current-password"
+        />
+      </Field>
+      <StatusBanner status={status} />
+      <div className="flex items-center justify-end gap-2">
+        <Button
+          type="button"
+          disabled={submitting}
+          onClick={() => onSubmit()}
+          testId="profile-email-submit"
+        >
+          {t("profile.email.submit")}
+        </Button>
+      </div>
+    </div>
   );
 }