@scalio-cloud/ui 0.6.2 → 0.8.0

package/react/license.js

@@ -0,0 +1,287 @@
+"use strict";
+// License panel for Einstellungen -> System -> Lizenz: status and usage side by side, then add-ons, then the key.
+// licenseApi(api) maps the routes of the scalio-license backend (Citadel, Foundry, Rosetta); mapScalioLicense turns its
+// answer into the view model the panel shows. An app with another backend passes its own `client` and `map`.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { labelsFor } = require("./labels");
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+function fill(text, values) {
+  return String(text || "").replace(/\{(\w+)\}/g, (m, k) => (values && values[k] !== undefined ? values[k] : m));
+}
+
+function errorText(err) {
+  const d = err && err.response && err.response.data && err.response.data.detail;
+  if (typeof d === "string") return d;
+  if (Array.isArray(d)) return d.map((x) => (x && x.msg) || String(x)).join(" ");
+  if (d && typeof d.message === "string") return d.message;
+  return (err && err.message) || String(err);
+}
+
+// api: axios instance with the app's base URL (/api). Every method resolves to the license as the backend sends it.
+function licenseApi(api) {
+  const data = (p) => p.then((r) => r.data);
+  return {
+    get: () => data(api.get("/license")),
+    activate: (key) => data(api.put("/license", { key })),
+    removeKey: () => data(api.delete("/license")),
+    addAddon: (key) => data(api.post("/license/addons", { key })),
+    removeAddon: (addon) => data(api.delete(`/license/addons/${encodeURIComponent(addon.id)}`)),
+  };
+}
+
+// View model:
+// { edition, licensed, customer, managed, messages[], rows[{label, value, tone, mono, copy, testId}],
+//   features[{key, label}] | null, usage[{key, label, used, max}], addons[{id, name, detail, included}], addonErrors[{key, error}], keyPresent }
+function mapScalioLicense(lic, opts) {
+  const o = opts || {};
+  const L = o.L || labelsFor(o.lang).license;
+  const kind = o.kindLabel || ((k) => k);
+  const feature = o.featureLabel || ((f) => f);
+  const managed = !!lic.saas;
+  const licensed = lic.edition !== "community" && !lic.error;
+  const rows = [
+    { label: L.status, value: licensed ? L.active : L.limited, tone: licensed ? "ok" : "warn", testId: "license-status" },
+    { label: lic.trial ? L.trialEnds : L.maintenanceUntil, value: lic.exp || L.never },
+  ];
+  if (!managed && lic.installation_id) rows.push({ label: L.installationId, value: lic.installation_id, copy: true, testId: "license-installation-id" });
+  if ((lic.domains || []).length) rows.push({ label: L.domains, value: lic.domains.join(", "), mono: true });
+  if (licensed && !lic.trial) {
+    rows.push({
+      label: L.coverage,
+      value: lic.build_blocked ? L.notCovered : lic.build_grace ? fill(L.grace, { date: lic.build_grace_until }) : L.covered,
+      tone: lic.build_blocked ? "error" : lic.build_grace ? "warn" : "ok",
+      testId: "license-build-coverage",
+    });
+  }
+  if (lic.build_date) rows.push({ label: L.buildDate, value: lic.build_date, mono: true });
+  return {
+    edition: lic.edition_name || lic.edition,
+    licensed,
+    customer: lic.customer,
+    managed,
+    messages: [lic.error, lic.restricted_reason].concat(lic.warnings || []).filter(Boolean),
+    rows,
+    features: (lic.features || []).map((f) => ({ key: f, label: feature(f) })),
+    usage: Object.keys(lic.limits || {}).map((k) => ({ key: k, label: kind(k), used: (lic.usage || {})[k], max: lic.limits[k] })),
+    addons: (lic.addons || []).map((a) => ({
+      id: a.guid,
+      name: a.name,
+      seats: a.seats || 0,
+      exp: a.exp,
+    })),
+    addonErrors: lic.addon_errors || [],
+    keyPresent: !!lic.key_present,
+  };
+}
+
+function UsageBar({ item }) {
+  const unlimited = item.max === null || item.max === undefined;
+  const used = item.used === undefined || item.used === null ? null : item.used;
+  const full = !unlimited && used !== null && used >= item.max;
+  const pct = unlimited ? 100 : Math.min(100, Math.round(((used || 0) / Math.max(1, item.max)) * 100));
+  return h(
+    "div",
+    { "data-testid": `license-limit-${item.key}` },
+    h(
+      "div",
+      { className: "scalio-license-bar-head" },
+      h("span", { className: "scalio-license-bar-label" }, item.label),
+      h("span", { className: cx("scalio-license-bar-value", full && "is-error") }, used === null ? "-" : used, " / ", unlimited ? "∞" : item.max)
+    ),
+    h("div", { className: "scalio-license-bar" }, h("div", { className: cx(full && "is-full", unlimited && "is-unlimited"), style: { width: `${pct}%` } }))
+  );
+}
+
+// Props: client (licenseApi or the same shape), map(license, {L, lang, kindLabel, featureLabel}) -> view model,
+// lang, labels, product ("Citadel", for the remove question), kindLabel(k), featureLabel(f), noFeatures (text when
+// the license has no features), notify(message, tone), confirm({title, action, danger}), onChange(license), children
+// (extra parts at the end, e.g. a policy form), formatError(err) -> text, className.
+function LicensePanel(props) {
+  const { client, lang, notify, confirm, onChange } = props;
+  const L = labelsFor(lang, props.labels).license;
+  const fmtErr = props.formatError || errorText;
+  const [lic, setLic] = React.useState(null);
+  const [loadError, setLoadError] = React.useState("");
+  const [key, setKey] = React.useState("");
+  const [addon, setAddon] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [note, setNote] = React.useState(null); // {text, tone} when no notify is given
+
+  React.useEffect(() => {
+    let alive = true;
+    client.get().then((d) => alive && setLic(d)).catch((err) => alive && setLoadError(fmtErr(err)));
+    return () => { alive = false; };
+  }, [client]);
+
+  const say = (text, tone) => {
+    if (notify) notify(text, tone || "success");
+    else setNote({ text, tone: tone || "success" });
+  };
+  if (!lic) return loadError ? h("div", { className: "scalio-notice is-error", role: "alert" }, loadError) : null;
+
+  const map = props.map || mapScalioLicense;
+  const m = map(lic, { L, lang, kindLabel: props.kindLabel, featureLabel: props.featureLabel });
+
+  const run = async (fn, ok) => {
+    setBusy(true);
+    setNote(null);
+    try {
+      const d = await fn();
+      setLic(d);
+      if (onChange) onChange(d);
+      say(ok);
+      return true;
+    } catch (err) {
+      say(fmtErr(err), "error");
+      return false;
+    } finally {
+      setBusy(false);
+    }
+  };
+  const activate = async () => {
+    if (await run(() => client.activate(key.trim()), L.activated)) setKey("");
+  };
+  const remove = async () => {
+    const title = fill(L.removeConfirm, { product: props.product || "Scalio" });
+    const yes = confirm ? await confirm({ title, action: L.remove, danger: true }) : window.confirm(title);
+    if (yes) run(() => client.removeKey(), L.removed);
+  };
+  const addAddon = async () => {
+    if (await run(() => client.addAddon(addon.trim()), L.addonActivated)) setAddon("");
+  };
+  const copy = async (value) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      say(L.idCopied);
+    } catch (e) {
+      say(L.copyFailed, "error");
+    }
+  };
+
+  const row = (r, i) =>
+    h(
+      "div",
+      { key: r.label + i },
+      h("dt", null, r.label),
+      r.copy
+        ? h("dd", null, h("button", { type: "button", className: "scalio-license-copy", title: L.copy, onClick: () => copy(r.value), "data-testid": r.testId },
+            r.value, h(Icons.Copy, { className: "scalio-icon", width: 12, height: 12 })))
+        : h("dd", { className: cx(r.mono && "is-mono"), "data-testid": r.testId }, r.tone ? h("span", { className: `is-${r.tone}` }, r.value) : r.value)
+    );
+
+  return h(
+    "section",
+    { className: cx("scalio-license", props.className), "data-testid": props.testId || "license-panel" },
+    h(
+      "div",
+      { className: "scalio-license-part" },
+      h("div", { className: "scalio-license-title" }, h(Icons.ShieldCheck, { className: "scalio-icon" }), L.title),
+      h("p", { className: "scalio-license-hint" }, m.managed ? L.managed : L.hint)
+    ),
+    note ? h("div", { className: cx("scalio-notice", note.tone === "error" ? "is-error" : "is-ok"), style: { margin: "1.25rem 1.25rem 0" }, role: "status" }, note.text) : null,
+    m.messages.length
+      ? h("div", { className: "scalio-notice is-warn scalio-license-messages", "data-testid": "license-messages" },
+          m.messages.map((t) => h("div", { key: t }, h(Icons.Alert, { className: "scalio-icon" }), h("span", null, t))))
+      : null,
+    h(
+      "div",
+      { className: "scalio-license-part scalio-license-grid" },
+      h(
+        "div",
+        { className: "scalio-license-status" },
+        h(
+          "div",
+          { className: "scalio-license-edition" },
+          h("span", { className: cx("scalio-badge", m.licensed ? "is-ok" : "is-warn"), "data-testid": "license-edition" }, m.edition),
+          m.customer ? h("span", { className: "scalio-license-customer" }, m.customer) : null
+        ),
+        h("dl", { className: "scalio-license-rows" }, m.rows.map(row)),
+        m.features
+          ? h(
+              "div",
+              null,
+              h("div", { className: "scalio-license-hint", style: { marginBottom: "0.25rem" } }, L.features),
+              m.features.length
+                ? h("ul", { className: "scalio-license-features", "data-testid": "license-features" },
+                    m.features.map((f) => h("li", { key: f.key }, h(Icons.Check, { className: "scalio-icon" }), f.label)))
+                : h("p", { className: "scalio-license-hint" }, props.noFeatures || L.noFeatures)
+            )
+          : null,
+        props.statusExtra || null
+      ),
+      m.usage.length
+        ? h("div", { className: "scalio-license-usage" }, h("div", { className: "scalio-license-sub" }, L.usage), m.usage.map((u) => h(UsageBar, { key: u.key, item: u })))
+        : null
+    ),
+    h(
+      "div",
+      { className: "scalio-license-part", "data-testid": "license-addons" },
+      h("div", { className: "scalio-license-sub" }, h(Icons.Puzzle, { className: "scalio-icon", width: 14, height: 14 }), L.addons),
+      m.addons.length
+        ? h(
+            "div",
+            { className: "scalio-license-addons" },
+            m.addons.map((a) =>
+              h(
+                "div",
+                { key: a.id, className: "scalio-license-addon", "data-testid": `addon-card-${a.id}` },
+                h(
+                  "div",
+                  { style: { minWidth: 0 } },
+                  h("div", { className: "scalio-license-addon-name" }, a.name),
+                  h("p", { className: "scalio-license-addon-detail" },
+                    a.seats ? `+${a.seats}` : h("span", { className: "is-ok" }, L.included),
+                    a.exp ? ` · ${L.maintenanceUntil} ${a.exp}` : "")
+                ),
+                m.managed
+                  ? null
+                  : h("button", { type: "button", className: "scalio-btn is-ghost is-danger", disabled: busy, title: L.remove, "aria-label": L.remove,
+                      "data-testid": `addon-remove-${a.id}`, onClick: () => run(() => client.removeAddon(a), L.addonRemoved) },
+                      h(Icons.Trash, { className: "scalio-icon" }))
+              )
+            )
+          )
+        : h("p", { className: "scalio-license-empty" }, L.noAddons),
+      m.addonErrors.map((e) => h("div", { key: e.key, className: "scalio-license-addon-error" }, e.error)),
+      m.managed
+        ? null
+        : h(
+            "div",
+            { className: "scalio-license-form" },
+            h("textarea", { className: "scalio-input scalio-textarea", rows: 2, value: addon, placeholder: L.addonPlaceholder, disabled: busy,
+              "aria-label": L.addonPlaceholder, "data-testid": "license-addon-input", onChange: (e) => setAddon(e.target.value) }),
+            h("div", { className: "scalio-license-actions" },
+              h("button", { type: "button", className: "scalio-btn is-primary", disabled: busy || !addon.trim(), onClick: addAddon, "data-testid": "license-addon-add" },
+                h(Icons.Plus, { className: "scalio-icon" }), L.add))
+          )
+    ),
+    m.managed
+      ? null
+      : h(
+          "div",
+          { className: "scalio-license-part scalio-license-form" },
+          h("div", { className: "scalio-license-sub" }, h(Icons.KeyRound, { className: "scalio-icon", width: 14, height: 14 }), L.key),
+          h("textarea", { className: "scalio-input scalio-textarea", rows: 3, value: key, placeholder: L.keyPlaceholder, disabled: busy,
+            "aria-label": L.keyPlaceholder, "data-testid": "license-key-input", onChange: (e) => setKey(e.target.value) }),
+          h(
+            "div",
+            { className: "scalio-license-actions" },
+            h("button", { type: "button", className: "scalio-btn is-primary", disabled: busy || !key.trim(), onClick: activate, "data-testid": "license-activate" },
+              h(Icons.ShieldCheck, { className: "scalio-icon" }), L.activate),
+            m.keyPresent
+              ? h("button", { type: "button", className: "scalio-btn is-danger", disabled: busy, onClick: remove, "data-testid": "license-remove" },
+                  h(Icons.Trash, { className: "scalio-icon" }), L.remove)
+              : null
+          )
+        ),
+    props.children ? h("div", { className: "scalio-license-part" }, props.children) : null
+  );
+}
+
+module.exports = { LicensePanel, licenseApi, mapScalioLicense };

package/react/nav.js

@@ -411,9 +411,11 @@ function resetScalioApps() {
 }
 
 // --- Support drawer ---------------------------------------------------------------------------
-// onSubmit({ subject, description }) sends the request (and shows the app's toast); a thrown error is
-// shown in the drawer. context: rows like [["URL", "/drifts"], ["Tenant", "Contoso"]].
-function SupportDrawer({ open, onClose, onSubmit, context, lang, labels }) {
+// With client (supportApi(api), see support.js): tabs "Neue Anfrage" and "Meine Tickets"; tickets go to the
+// central support desk (ADR 0022), page is the current path. Without client: one form, onSubmit({ subject,
+// description }) sends it (and shows the app's toast); a thrown error is shown in the drawer.
+// context: rows like [["URL", "/drifts"], ["Tenant", "Contoso"]].
+function SupportDrawer({ open, onClose, onSubmit, client, page, context, lang, labels }) {
   const L = labelsFor(lang, labels);
   const [subject, setSubject] = React.useState("");
   const [description, setDescription] = React.useState("");
@@ -467,7 +469,9 @@ function SupportDrawer({ open, onClose, onSubmit, context, lang, labels }) {
             context.map((row, i) => h("div", { key: i }, `${row[0]}: ${row[1] == null || row[1] === "" ? "—" : row[1]}`))
           )
         : null,
-      h(
+      client
+        ? h(require("./support").SupportDesk, { client, page, lang, labels })
+        : h(
         "form",
         { className: "scalio-support-form", onSubmit: submit },
         h("label", { className: "scalio-field-label", htmlFor: "support-subject" }, L.subject),

package/react/security.js

@@ -0,0 +1,327 @@
+"use strict";
+// Two-factor card for the profile page: authenticator app (TOTP), backup codes and passkeys.
+// Same backend routes in every app (/auth/security, /auth/mfa/*, /auth/passkeys/*); securityApi(api, webauthn)
+// maps them for an axios-like client and accepts snake_case (Citadel, Foundry, Rosetta) and camelCase (Nexus)
+// answers. Every change asks for the current password inline. No runtime dependencies: the app passes the QR
+// code renderer (`qr`) and the WebAuthn helpers from @simplewebauthn/browser.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { labelsFor } = require("./labels");
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+function pick(obj, a, b) {
+  if (!obj) return undefined;
+  return obj[a] !== undefined ? obj[a] : obj[b];
+}
+
+function fill(text, values) {
+  return String(text || "").replace(/\{(\w+)\}/g, (m, k) => (values && values[k] !== undefined ? values[k] : m));
+}
+
+function errorText(err) {
+  const d = err && err.response && err.response.data && err.response.data.detail;
+  if (typeof d === "string") return d;
+  if (Array.isArray(d)) return d.map((x) => (x && x.msg) || String(x)).join(" ");
+  if (d && typeof d.message === "string") return d.message;
+  return (err && err.message) || String(err);
+}
+
+function fmtDate(value, lang) {
+  if (!value) return "";
+  const d = new Date(value);
+  if (isNaN(d.getTime())) return String(value);
+  return d.toLocaleString(lang === "en" ? "en-GB" : "de-CH", { dateStyle: "medium", timeStyle: "short" });
+}
+
+// The browser's own messages when the person closes the passkey dialog are not helpful.
+function passkeyCancelled(err) {
+  return !!err && (err.name === "NotAllowedError" || err.name === "AbortError");
+}
+
+function normalizeSecurity(d) {
+  return {
+    hasPassword: !!pick(d, "has_password", "hasPassword"),
+    mfaEnabled: !!pick(d, "mfa_enabled", "mfaEnabled"),
+    backupCodesLeft: pick(d, "backup_codes_left", "backupCodesLeft") || 0,
+    passkeys: ((d && d.passkeys) || []).map((p) => ({
+      id: p.id,
+      name: p.name,
+      lastUsedAt: pick(p, "last_used_at", "lastUsedAt"),
+      createdAt: pick(p, "created_at", "createdAt"),
+    })),
+  };
+}
+
+// api: axios instance with the app's base URL (/api).
+// webauthn: { startRegistration, browserSupportsWebAuthn } from @simplewebauthn/browser (optional: no passkeys without it).
+function securityApi(api, webauthn) {
+  const w = webauthn || {};
+  const codes = (r) => pick(r.data, "backup_codes", "backupCodes") || [];
+  return {
+    security: () => api.get("/auth/security").then((r) => normalizeSecurity(r.data)),
+    setup: (password) => api.post("/auth/mfa/setup", { password }).then((r) => ({ secret: r.data.secret, uri: r.data.uri })),
+    enable: (code) => api.post("/auth/mfa/enable", { code: String(code).trim() }).then(codes),
+    backupCodes: (password) => api.post("/auth/mfa/backup-codes", { password }).then(codes),
+    disable: (password) => api.post("/auth/mfa/disable", { password }).then(() => true),
+    removePasskey: (id) => api.delete(`/auth/passkeys/${encodeURIComponent(id)}`).then(() => true),
+    passkeysSupported: () => !!(w.startRegistration && w.browserSupportsWebAuthn && w.browserSupportsWebAuthn()),
+    addPasskey: async (password, name) => {
+      const { data } = await api.post("/auth/passkeys/register/options", { password });
+      const response = await w.startRegistration({ optionsJSON: data.options });
+      // The apps name the challenge id differently; send it back under the name it came with.
+      const idKey = data.challengeId !== undefined ? "challengeId" : "challenge_id";
+      const body = { response, name };
+      body[idKey] = data[idKey];
+      return (await api.post("/auth/passkeys/register/verify", body)).data;
+    },
+  };
+}
+
+async function ask(confirm, title, action) {
+  if (confirm) return !!(await confirm({ title, action, danger: true }));
+  return typeof window !== "undefined" && window.confirm ? window.confirm(title) : true;
+}
+
+function Field({ id, label, children }) {
+  return h("div", { className: "scalio-security-field" }, h("label", { className: "scalio-field-label", htmlFor: id }, label), children);
+}
+
+// Props: client (securityApi), lang, labels, qr(uri) -> element, notify(message, tone), confirm({title, action, danger}),
+// product ("Scalio Citadel", for the backup code file), email, onMfaChange(on), formatError(err) -> text, className.
+function SecurityFactors(props) {
+  const { client, lang, qr, notify, confirm, product, email, onMfaChange } = props;
+  const L = labelsFor(lang, props.labels).mfa;
+  const fmtErr = props.formatError || errorText;
+  const [sec, setSec] = React.useState(null);
+  const [prompt, setPrompt] = React.useState(null); // {action, title}
+  const [password, setPassword] = React.useState("");
+  const [keyName, setKeyName] = React.useState("");
+  const [setup, setSetup] = React.useState(null); // {secret, uri}
+  const [code, setCode] = React.useState("");
+  const [codes, setCodes] = React.useState(null);
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const [note, setNote] = React.useState("");
+
+  const say = (msg, tone) => {
+    if (notify) notify(msg, tone || "success");
+    else setNote(msg);
+  };
+  const load = React.useCallback(() => client.security().then(setSec).catch(() => setSec(false)), [client]);
+  React.useEffect(() => { load(); }, [load]);
+  if (!sec || !sec.hasPassword) return null;
+
+  const close = () => { setPrompt(null); setPassword(""); setError(""); };
+  const open = (action, title) => () => { setError(""); setNote(""); setPassword(""); setPrompt({ action, title }); };
+
+  const run = async (e) => {
+    e.preventDefault();
+    setError("");
+    setBusy(true);
+    try {
+      if (prompt.action === "setup") setSetup(await client.setup(password));
+      if (prompt.action === "codes") setCodes(await client.backupCodes(password));
+      if (prompt.action === "disable") {
+        await client.disable(password);
+        if (onMfaChange) onMfaChange(false);
+        say(L.turnedOff);
+      }
+      if (prompt.action === "passkey") {
+        await client.addPasskey(password, keyName.trim());
+        setKeyName("");
+        say(L.passkeyAdded);
+      }
+      close();
+      load();
+    } catch (err) {
+      if (!passkeyCancelled(err)) setError(fmtErr(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const enable = async (e) => {
+    e.preventDefault();
+    setError("");
+    setBusy(true);
+    try {
+      setCodes(await client.enable(code));
+      setSetup(null);
+      setCode("");
+      if (onMfaChange) onMfaChange(true);
+      load();
+    } catch (err) {
+      setError(fmtErr(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const removeKey = async (p) => {
+    if (!(await ask(confirm, fill(L.removePasskey, { name: p.name }), L.remove))) return;
+    try {
+      await client.removePasskey(p.id);
+      load();
+    } catch (err) {
+      say(fmtErr(err), "error");
+    }
+  };
+
+  const copyCodes = () => {
+    const c = typeof navigator !== "undefined" && navigator.clipboard;
+    if (c) c.writeText(codes.join("\n")).then(() => say(L.copied), () => null);
+  };
+  const download = () => {
+    const name = product || "Scalio";
+    const text = `${name}${email ? ` · ${email}` : ""}\n\n${codes.join("\n")}\n`;
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(new Blob([text], { type: "text/plain" }));
+    a.download = `${name.toLowerCase().replace(/[^a-z0-9]+/g, "-")}-backup-codes.txt`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+  };
+
+  const btn = (label, onClick, opts) =>
+    h("button", Object.assign({ type: "button", className: cx("scalio-btn", opts && opts.primary && "is-primary"), onClick }, opts && opts.attrs), label);
+  const errorBox = (id) => (error ? h("p", { className: "scalio-notice is-error", role: "alert", "data-testid": id }, error) : null);
+
+  const passkeys = sec.passkeys;
+  return h(
+    "div",
+    { className: cx("scalio-security", props.className), "data-testid": props.testId || "security-factors" },
+    note ? h("div", { className: "scalio-notice is-ok", role: "status" }, note) : null,
+    codes
+      ? h(
+          "div",
+          { className: "scalio-security-codes", "data-testid": "backup-codes-panel" },
+          h("div", { className: "scalio-security-title" }, L.backupTitle),
+          h("p", { className: "scalio-security-hint" }, L.backupHint),
+          h("div", { className: "scalio-security-code-list", "data-testid": "backup-codes" }, codes.map((c) => h("span", { key: c }, c))),
+          h(
+            "div",
+            { className: "scalio-security-actions" },
+            btn(L.copy, copyCodes),
+            btn(L.download, download),
+            btn(L.saved, () => setCodes(null), { primary: true, attrs: { "data-testid": "backup-codes-done-btn" } })
+          )
+        )
+      : null,
+    h(
+      "div",
+      { className: "scalio-security-block", "data-testid": "totp-block" },
+      h(
+        "div",
+        { className: "scalio-security-head" },
+        h(Icons.Smartphone, { className: "scalio-icon" }),
+        h(
+          "div",
+          null,
+          h("div", { className: "scalio-security-title" }, L.app),
+          h("p", { className: "scalio-security-hint", "data-testid": "totp-status" }, sec.mfaEnabled ? fill(L.on, { n: sec.backupCodesLeft }) : L.off)
+        )
+      ),
+      !setup && !prompt
+        ? h(
+            "div",
+            { className: "scalio-security-actions is-indented" },
+            sec.mfaEnabled
+              ? [
+                  h(React.Fragment, { key: "c" }, btn(L.newCodes, open("codes", L.newCodes), { attrs: { "data-testid": "backup-codes-btn" } })),
+                  h(React.Fragment, { key: "d" }, btn(L.turnOff, open("disable", L.turnOffTitle), { attrs: { "data-testid": "totp-disable-btn" } })),
+                ]
+              : btn(
+                  h(React.Fragment, null, h(Icons.ShieldCheck, { className: "scalio-icon" }), " ", L.setUp),
+                  open("setup", L.setUpTitle),
+                  { primary: true, attrs: { "data-testid": "totp-setup-btn" } }
+                )
+          )
+        : null,
+      setup
+        ? h(
+            "form",
+            { onSubmit: enable, className: "scalio-security-form is-indented", "data-testid": "totp-enable-form" },
+            h("p", { className: "scalio-security-hint" }, L.scan),
+            qr ? h("div", { className: "scalio-security-qr", "data-testid": "totp-qr" }, qr(setup.uri)) : null,
+            h("div", { className: "scalio-security-hint" }, L.key, " ", h("span", { className: "scalio-security-secret", "data-testid": "totp-secret" }, setup.secret)),
+            h(
+              Field,
+              { id: "totp-code", label: L.code },
+              h("input", {
+                id: "totp-code", className: "scalio-input scalio-security-code", value: code, required: true, inputMode: "numeric",
+                autoComplete: "one-time-code", maxLength: 8, "data-testid": "totp-code-input", onChange: (e) => setCode(e.target.value),
+              })
+            ),
+            errorBox("totp-error"),
+            h(
+              "div",
+              { className: "scalio-security-actions" },
+              h("button", { type: "submit", className: "scalio-btn is-primary", disabled: busy || !code.trim(), "data-testid": "totp-enable-btn" }, L.activate),
+              btn(L.cancel, () => { setSetup(null); setCode(""); setError(""); }, { attrs: { className: "scalio-btn is-ghost" } })
+            )
+          )
+        : null
+    ),
+    h(
+      "div",
+      { className: "scalio-security-block", "data-testid": "passkeys-block" },
+      h(
+        "div",
+        { className: "scalio-security-head" },
+        h(Icons.KeyRound, { className: "scalio-icon" }),
+        h("div", null, h("div", { className: "scalio-security-title" }, L.passkeys), h("p", { className: "scalio-security-hint" }, L.passkeysHint))
+      ),
+      passkeys.length
+        ? h(
+            "ul",
+            { className: "scalio-security-keys is-indented", "data-testid": "passkeys-list" },
+            passkeys.map((p) =>
+              h(
+                "li",
+                { key: p.id },
+                h("span", { className: "scalio-security-key-name" }, p.name),
+                h("span", { className: "scalio-security-key-date" },
+                  p.lastUsedAt ? fill(L.used, { date: fmtDate(p.lastUsedAt, lang) }) : fill(L.added, { date: fmtDate(p.createdAt, lang) })),
+                h(
+                  "button",
+                  { type: "button", className: "scalio-btn is-ghost is-danger", onClick: () => removeKey(p), "aria-label": L.remove, title: L.remove,
+                    "data-testid": `passkey-remove-${p.name}` },
+                  h(Icons.Trash, { className: "scalio-icon" })
+                )
+              )
+            )
+          )
+        : null,
+      !prompt && client.passkeysSupported()
+        ? h("div", { className: "scalio-security-actions is-indented" }, btn(L.addPasskey, open("passkey", L.addPasskey), { attrs: { "data-testid": "passkey-add-btn" } }))
+        : null
+    ),
+    prompt
+      ? h(
+          "form",
+          { onSubmit: run, className: "scalio-security-confirm", "data-testid": "password-confirm-form" },
+          h("div", { className: "scalio-security-title" }, prompt.title),
+          prompt.action === "passkey"
+            ? h(Field, { id: "passkey-name", label: L.device },
+                h("input", { id: "passkey-name", className: "scalio-input", value: keyName, maxLength: 60, placeholder: L.deviceExample,
+                  "data-testid": "passkey-name-input", onChange: (e) => setKeyName(e.target.value) }))
+            : null,
+          h(Field, { id: "confirm-password", label: L.currentPassword },
+            h("input", { id: "confirm-password", type: "password", className: "scalio-input", value: password, required: true, autoFocus: true,
+              autoComplete: "current-password", "data-testid": "confirm-password-input", onChange: (e) => setPassword(e.target.value) })),
+          errorBox("security-error"),
+          h(
+            "div",
+            { className: "scalio-security-actions" },
+            h("button", { type: "submit", className: "scalio-btn is-primary", disabled: busy, "data-testid": "password-confirm-btn" }, busy ? L.verifying : L.continue),
+            btn(L.cancel, close, { attrs: { className: "scalio-btn is-ghost" } })
+          )
+        )
+      : null
+  );
+}
+
+module.exports = { SecurityFactors, securityApi, passkeyCancelled };