@cosmicdrift/kumiko-samples 0.340.0 → 0.342.0

package/packages/bundled-features/src/auth-email-password/web/verify-email-screen.tsx

@@ -50,12 +50,10 @@ export function VerifyEmailScreen({
   if (status === "missing-token") {
     return (
       <AuthCard title={title ?? t("auth.verifyEmail.errorTitle")}>
-        <div className="p-6 pt-0 flex flex-col gap-4">
-          <p className="text-sm text-muted-foreground">{t("auth.verifyEmail.missingToken")}</p>
-          <Link href={loginHref} variant="muted">
-            {t("auth.verifyEmail.goToLogin")}
-          </Link>
-        </div>
+        <p className="text-sm text-muted-foreground">{t("auth.verifyEmail.missingToken")}</p>
+        <Link href={loginHref} variant="muted">
+          {t("auth.verifyEmail.goToLogin")}
+        </Link>
       </AuthCard>
     );
   }
@@ -75,12 +73,10 @@ export function VerifyEmailScreen({
   if (status === "success") {
     return (
       <AuthCard title={title ?? t("auth.verifyEmail.successTitle")}>
-        <div className="p-6 pt-0 flex flex-col gap-4">
-          <p className="text-sm text-muted-foreground">{t("auth.verifyEmail.successBody")}</p>
-          <Link href={loginHref} variant="button">
-            {t("auth.verifyEmail.goToLogin")}
-          </Link>
-        </div>
+        <p className="text-sm text-muted-foreground">{t("auth.verifyEmail.successBody")}</p>
+        <Link href={loginHref} variant="button">
+          {t("auth.verifyEmail.goToLogin")}
+        </Link>
       </AuthCard>
     );
   }
@@ -88,12 +84,10 @@ export function VerifyEmailScreen({
   // status === "error"
   return (
     <AuthCard title={title ?? t("auth.verifyEmail.errorTitle")}>
-      <div className="p-6 pt-0 flex flex-col gap-4">
-        <p className="text-sm text-muted-foreground">{t("auth.verifyEmail.errorBody")}</p>
-        <Link href={loginHref} variant="muted">
-          {t("auth.verifyEmail.goToLogin")}
-        </Link>
-      </div>
+      <p className="text-sm text-muted-foreground">{t("auth.verifyEmail.errorBody")}</p>
+      <Link href={loginHref} variant="muted">
+        {t("auth.verifyEmail.goToLogin")}
+      </Link>
     </AuthCard>
   );
 }

package/packages/bundled-features/src/auth-mfa/changes.json

@@ -1,4 +1,10 @@
 [
+  {
+    "version": "0.341.0",
+    "type": "breaking",
+    "title": "MFA required policy is writable by the system only",
+    "migration": "Tenant admins can no longer write auth-mfa:config:required (write access is now system-only). Set the app-wide default with createAuthMfaFeature({ requiredPolicy }) / the mfa options and per-tenant overrides with runBootstrap tenants[].config or a system write (createSystemUser). Code that wrote the key as TenantAdmin/Admin/SystemAdmin over HTTP must switch to one of these."
+  },
   {
     "version": "0.335.0",
     "type": "fix",

package/packages/bundled-features/src/auth-mfa/config.ts

@@ -8,7 +8,11 @@
 // UI). Flipping this away from "optional" before PR3 locks out every
 // unenrolled matching user with no recovery path. Fine for a tenant that
 // enrolls its admins out-of-band first; a footgun otherwise.
-import { type ConfigKeyHandle, createTenantConfig } from "@cosmicdrift/kumiko-framework/engine";
+import {
+  access,
+  type ConfigKeyHandle,
+  createTenantConfig,
+} from "@cosmicdrift/kumiko-framework/engine";
 
 export const MFA_REQUIRED_POLICIES = ["optional", "admins", "all"] as const;
 export type MfaRequiredPolicy = (typeof MFA_REQUIRED_POLICIES)[number];
@@ -18,9 +22,14 @@ export const mfaRequiredConfigHandle: ConfigKeyHandle<"select"> = {
   type: "select",
 };
 
-export function mfaRequiredConfigKey() {
+// Write access is machine-only: a TenantAdmin must not be able to relax the
+// policy back to "optional". The app-wide default comes from
+// `createAuthMfaFeature({ requiredPolicy })`, per-tenant overrides are set by
+// system writes (runBootstrap `tenants[].config`, jobs, SystemAdmin tooling).
+export function mfaRequiredConfigKey(defaultPolicy: MfaRequiredPolicy = "optional") {
   return createTenantConfig("select", {
-    default: "optional" satisfies MfaRequiredPolicy,
+    default: defaultPolicy,
     options: [...MFA_REQUIRED_POLICIES],
+    write: access.system,
   });
 }

package/packages/bundled-features/src/auth-mfa/feature.ts

@@ -1,6 +1,6 @@
 import type { DbConnection } from "@cosmicdrift/kumiko-framework/db";
 import { defineFeature, type FeatureDefinition } from "@cosmicdrift/kumiko-framework/engine";
-import { mfaRequiredConfigKey } from "./config.js";
+import { type MfaRequiredPolicy, mfaRequiredConfigKey } from "./config.js";
 import { createDisableHandler } from "./handlers/disable.write.js";
 import { createEnableConfirmHandler } from "./handlers/enable-confirm.write.js";
 import { createEnableConfirmPreauthHandler } from "./handlers/enable-confirm-preauth.write.js";
@@ -33,6 +33,10 @@ export type AuthMfaFeatureOptions = {
   // secret from setupTokenSecret — a compromised setup-token secret must
   // not also forge login challenges.
   readonly challengeTokenSecret: string;
+  // App-wide MFA enforcement default when no tenant row overrides it.
+  // Tenant admins cannot change the policy (system-only write), so this plus
+  // system writes is the only way to set it. Defaults to "optional".
+  readonly requiredPolicy?: MfaRequiredPolicy;
 };
 
 export type BindMfaRevokeAllOtherSessions = (
@@ -127,7 +131,7 @@ export function createAuthMfaFeature(opts: AuthMfaFeatureOptions): FeatureDefini
     // the app boots clean and the first MFA login dies at runtime on an
     // unknown handler instead of failing at mount time.
     r.requires("tenant");
-    r.config("required", mfaRequiredConfigKey());
+    r.config("required", mfaRequiredConfigKey(opts.requiredPolicy));
 
     // Declarative secretMint screen — mint (no input) -> reveal QR/secret/
     // recovery-codes -> confirm with a code. App places it via r.nav in its
@@ -225,6 +229,7 @@ export function createAuthMfaFeature(opts: AuthMfaFeatureOptions): FeatureDefini
     // at app-boot time.
     const checkMfaStatus = createMfaStatusChecker({
       challengeTokenSecret: opts.challengeTokenSecret,
+      ...(opts.requiredPolicy && { requiredPolicy: opts.requiredPolicy }),
     });
 
     // No late-bind needed — same reasoning as checkMfaStatus: only needs the

package/packages/bundled-features/src/auth-mfa/mfa-status-checker.ts

@@ -40,6 +40,7 @@ export type MfaStatusChecker = (
 
 export function createMfaStatusChecker(opts: {
   readonly challengeTokenSecret: string;
+  readonly requiredPolicy?: MfaRequiredPolicy;
 }): MfaStatusChecker {
   return async (ctx, userId, tenantId, roles) => {
     declareEscapeHatch({
@@ -70,7 +71,7 @@ export function createMfaStatusChecker(opts: {
     // against the declared `options` at write-time by the config feature.
     const policy = ((await ctx.configResolver?.get(
       mfaRequiredConfigHandle.name,
-      mfaRequiredConfigKey(),
+      mfaRequiredConfigKey(opts.requiredPolicy),
       tenantId,
       userId,
       scopedDb,

package/packages/bundled-features/src/auth-mfa/web/mfa-setup-preauth-screen.tsx

@@ -164,106 +164,104 @@ export function MfaSetupPreauthScreen({
       title={title ?? t("auth.mfa.setup.title")}
       subtitle={subtitle ?? t("auth.mfa.setup.subtitle")}
     >
-      <div className="p-6 pt-0 flex flex-col gap-4">
-        {error !== null ? (
-          <Banner variant="error">
-            {error === "too_many_attempts" && retryAfterSeconds !== null
-              ? t("auth.mfa.errors.tooManyAttemptsWithSeconds", { seconds: retryAfterSeconds })
-              : t(reasonToKey(error))}
-          </Banner>
-        ) : null}
+      {error !== null ? (
+        <Banner variant="error">
+          {error === "too_many_attempts" && retryAfterSeconds !== null
+            ? t("auth.mfa.errors.tooManyAttemptsWithSeconds", { seconds: retryAfterSeconds })
+            : t(reasonToKey(error))}
+        </Banner>
+      ) : null}
 
-        {!setup && (
+      {!setup && (
+        <Section
+          testId="mfa-setup-preauth-intro"
+          actions={
+            <Button
+              variant="primary"
+              onClick={() => void startSetup()}
+              loading={busy}
+              disabled={busy}
+            >
+              {t("auth.mfa.setup.start")}
+            </Button>
+          }
+        >
+          <span className="text-sm text-muted-foreground">{t("auth.mfa.setup.intro")}</span>
+        </Section>
+      )}
+
+      {setup && (
+        <Form onSubmit={onSubmit}>
           <Section
-            testId="mfa-setup-preauth-intro"
+            testId="mfa-setup-preauth-setup"
             actions={
               <Button
+                type="submit"
                 variant="primary"
-                onClick={() => void startSetup()}
                 loading={busy}
-                disabled={busy}
+                disabled={busy || !acknowledged || code.length !== 6}
               >
-                {t("auth.mfa.setup.start")}
+                {t("auth.mfa.setup.confirm")}
               </Button>
             }
           >
-            <span className="text-sm text-muted-foreground">{t("auth.mfa.setup.intro")}</span>
-          </Section>
-        )}
+            <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>
 
-        {setup && (
-          <Form onSubmit={onSubmit}>
-            <Section
-              testId="mfa-setup-preauth-setup"
-              actions={
-                <Button
-                  type="submit"
-                  variant="primary"
-                  loading={busy}
-                  disabled={busy || !acknowledged || code.length !== 6}
-                >
-                  {t("auth.mfa.setup.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-setup-preauth-ack" label={t("auth.mfa.enable.acknowledge")}>
-                  <Input
-                    kind="boolean"
-                    id="mfa-setup-preauth-ack"
-                    name="mfa-setup-preauth-ack"
-                    value={acknowledged}
-                    onChange={setAcknowledged}
-                  />
-                </Field>
-              </div>
-
-              <Field id="mfa-setup-preauth-code" label={t("auth.mfa.enable.code")} required>
+            <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-setup-preauth-ack" label={t("auth.mfa.enable.acknowledge")}>
                 <Input
-                  kind="text"
-                  id="mfa-setup-preauth-code"
-                  name="mfa-setup-preauth-code"
-                  value={code}
-                  onChange={setCode}
-                  disabled={busy || !acknowledged}
-                  autoComplete="one-time-code"
+                  kind="boolean"
+                  id="mfa-setup-preauth-ack"
+                  name="mfa-setup-preauth-ack"
+                  value={acknowledged}
+                  onChange={setAcknowledged}
                 />
               </Field>
-            </Section>
-          </Form>
-        )}
+            </div>
 
-        {onCancel ? (
-          <div className="flex justify-center">
-            <Button type="button" variant="secondary" onClick={onCancel} disabled={busy}>
-              {t("auth.mfa.verify.backToLogin")}
-            </Button>
-          </div>
-        ) : null}
-      </div>
+            <Field id="mfa-setup-preauth-code" label={t("auth.mfa.enable.code")} required>
+              <Input
+                kind="text"
+                id="mfa-setup-preauth-code"
+                name="mfa-setup-preauth-code"
+                value={code}
+                onChange={setCode}
+                disabled={busy || !acknowledged}
+                autoComplete="one-time-code"
+              />
+            </Field>
+          </Section>
+        </Form>
+      )}
+
+      {onCancel ? (
+        <div className="flex justify-center">
+          <Button type="button" variant="secondary" onClick={onCancel} disabled={busy}>
+            {t("auth.mfa.verify.backToLogin")}
+          </Button>
+        </div>
+      ) : null}
     </AuthCard>
   );
 }

package/packages/bundled-features/src/auth-mfa/web/mfa-verify-screen.tsx

@@ -85,33 +85,31 @@ export function MfaVerifyScreen({
       title={title ?? t("auth.mfa.verify.title")}
       subtitle={subtitle ?? t("auth.mfa.verify.subtitle")}
     >
-      <div className="p-6 pt-0 flex flex-col gap-4">
-        <Form onSubmit={onSubmit}>
-          <Field id="mfa-verify-code" label={t("auth.mfa.verify.code")} required>
-            <Input
-              kind="text"
-              id="mfa-verify-code"
-              name="mfa-verify-code"
-              value={code}
-              onChange={setCode}
-              disabled={submitting}
-              required
-              autoComplete="one-time-code"
-            />
-          </Field>
-          {error !== null ? <Banner variant="error">{t(reasonToKey(error))}</Banner> : null}
-          <Button type="submit" loading={submitting} disabled={submitting}>
-            {submitting
-              ? t("auth.mfa.verify.submitting")
-              : (submitLabel ?? t("auth.mfa.verify.submit"))}
+      <Form onSubmit={onSubmit}>
+        <Field id="mfa-verify-code" label={t("auth.mfa.verify.code")} required>
+          <Input
+            kind="text"
+            id="mfa-verify-code"
+            name="mfa-verify-code"
+            value={code}
+            onChange={setCode}
+            disabled={submitting}
+            required
+            autoComplete="one-time-code"
+          />
+        </Field>
+        {error !== null ? <Banner variant="error">{t(reasonToKey(error))}</Banner> : null}
+        <Button type="submit" loading={submitting} disabled={submitting}>
+          {submitting
+            ? t("auth.mfa.verify.submitting")
+            : (submitLabel ?? t("auth.mfa.verify.submit"))}
+        </Button>
+        {onCancel ? (
+          <Button type="button" variant="secondary" onClick={onCancel} disabled={submitting}>
+            {t("auth.mfa.verify.backToLogin")}
           </Button>
-          {onCancel ? (
-            <Button type="button" variant="secondary" onClick={onCancel} disabled={submitting}>
-              {t("auth.mfa.verify.backToLogin")}
-            </Button>
-          ) : null}
-        </Form>
-      </div>
+        ) : null}
+      </Form>
     </AuthCard>
   );
 }

package/packages/bundled-features/src/billing-foundation/changes.json

@@ -1,4 +1,10 @@
 [
+  {
+    "version": "0.341.0",
+    "type": "improvement",
+    "title": "App layout around termination pages, trailing-slash redirects, receipt greeting",
+    "detail": "`createContractTerminationRoutes` accepts a `wrapLayout`, the same function `createLegalPagesFeature` takes. It wraps every termination page (form, review, result, 429, error); the security headers stay with the framework. The layout also receives `alternates`, a map from locale to the path of the same page, so it can render a language switch from plain links. `page-render` exports the shared type `PublicPageWrapLayout`; `LegalPagesWrapLayout` is now an alias of it. The page body sits in `<div data-kumiko-page=\"contract-termination\">` with `data-kumiko-*` hooks on the form, field groups, buttons and review table. The page CSP keeps `script-src 'none'`, so a layout must not rely on JavaScript.\nThe default `wrapInLayout` stylesheet gains base rules for input, select, textarea and button, so unstyled forms stay readable.\nThe termination pages and every legal page now answer the other trailing-slash form of their path (`/legal/kuendigen/`, `/legal/impressum/`) with a 301 to the configured path for GET and HEAD, query string kept. POST has no alias.\nThe termination receipt mail text changed: it now starts with a greeting line (\"Hallo,\" / \"Hello,\") and the English sentence starts capitalized (\"We confirm receipt ...\"). The receipt content still depends only on the declarant's input."
+  },
   {
     "version": "0.340.0",
     "type": "improvement",

package/packages/bundled-features/src/billing-foundation/consumer-protection/issue-confirmation.ts

@@ -188,6 +188,7 @@ export function createIssueContractConfirmationHandler(
       await ctx.notify(CONTRACT_CONFIRMATION_NOTIFICATION_TYPE, {
         route: { email: recipient.data.email },
         data: content,
+        locale,
         priority: "critical",
       });
 

package/packages/bundled-features/src/billing-foundation/consumer-protection/termination-mail.ts

@@ -87,6 +87,7 @@ export function renderTerminationReceipt(
     subject,
     header: subject,
     sections: [
+      { text: texts.receiptGreeting },
       { text: texts.receiptIntro },
       { text: `${texts.receivedAt}: ${formatReceivedAt(args.receivedAtIso, args.locale)}` },
       { text: `${texts.requestId}: ${args.requestId}` },

package/packages/bundled-features/src/billing-foundation/consumer-protection/termination-notify.ts

@@ -39,6 +39,7 @@ export async function notifyOperator(
       ...plan,
       operatorEmail: consumerProtection.operatorEmail,
     }),
+    locale: plan.locale,
     priority: "critical",
   });
 }