@scalio-cloud/ui 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.8.1
+- `SupportConnection` fills in the portal address of the instance's stage (`default_portal` from scalio-connect
+  0.5.0: dev -> portaldev, test -> portaltest, others -> portal.scaliocloud.com). **Visible change:** the address
+  field is no longer empty on the settings card. No change with older backends.
+
+## 0.8.0
+- New `SecurityFactors` (profile: authenticator app, backup codes, passkeys) with `securityApi(api, webauthn)`, and
+  `LicensePanel` (status, usage, add-ons, key) with `licenseApi(api)` and `mapScalioLicense`. They replace the copies
+  in Citadel, Foundry, Rosetta and Nexus. `LABELS` get `mfa` and `license` texts, `Icons` get Smartphone, KeyRound,
+  Trash, Copy, Puzzle, Plus, Alert, and `.scalio-btn` gets the variants `is-primary`, `is-ghost`, `is-danger`.
+  **No visible change** until an app uses the new blocks; then they look the same in every app.
+
 ## 0.7.0
 - `SupportDrawer` takes `client` (from the new `supportApi(api)`) and `page`: tabs "Neue Anfrage" (category,
   subject, description, technical details) and "Meine Tickets" (list, answers from support, reply, rating) for the

package/README.md

@@ -189,6 +189,33 @@ import { AuthLayout, AuthHeader, MicrosoftButton, AuthDivider, AuthMessage, Prof
 
 Form fields and buttons stay the app's own (shadcn), so they match the rest of the app.
 
+## Two-factor card and license panel (React)
+
+The same backend routes in every app, so the apps pass only their axios instance and a few helpers.
+
+```jsx
+import { SecurityFactors, securityApi, LicensePanel, licenseApi } from "@scalio-cloud/ui/react";
+import { QRCodeSVG } from "qrcode.react";
+import { startRegistration, browserSupportsWebAuthn } from "@simplewebauthn/browser";
+
+const security = securityApi(api, { startRegistration, browserSupportsWebAuthn });   // once, outside the component
+const license = licenseApi(api);
+
+// Profile -> Sicherheit: authenticator app, backup codes, passkeys. Hidden for accounts without a password.
+<SecurityFactors client={security} lang={lang} product="Scalio Citadel" email={user.email}
+  qr={(uri) => <QRCodeSVG value={uri} size={160} />} notify={(text, tone) => toast[tone](text)}
+  confirm={confirm} onMfaChange={(on) => setUser({ ...user, mfa_enabled: on })} />
+
+// Einstellungen -> System -> Lizenz (scalio-license backend: /license, /license/addons)
+<LicensePanel client={license} lang={lang} product="Citadel" kindLabel={licenseKindLabel}
+  featureLabel={licenseFeatureLabel} noFeatures="Nur Drift-Erkennung" notify={...} confirm={confirm} />
+```
+
+`securityApi` reads snake_case and camelCase answers. `notify(text, tone)` gets `"success"` or `"error"`; without it
+the blocks show the message themselves. `confirm` is the app's dialog (`{title, action, danger}` -> Promise<boolean>),
+`window.confirm` otherwise. `formatError(err)` lets the app phrase API errors (for example license limit codes). A license backend with other routes passes its own `client` and a `map(license, {L})`
+that returns the view model described in `react/license.js`.
+
 ## Installing
 
 Public on npmjs.com, no token needed: `yarn add @scalio-cloud/ui` (pin the exact version).

package/nav.css

@@ -270,3 +270,95 @@
 .scalio-settings-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
 .scalio-settings-body { display: flex; flex-direction: column; }
 .scalio-settings-section-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.25rem; }
+
+/* Button variants for page blocks (base: .scalio-btn in shell.css) */
+.scalio-btn.is-primary { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
+.scalio-btn.is-primary:hover { background: hsl(var(--primary) / 0.9); }
+.scalio-btn.is-ghost { border-color: transparent; background: transparent; color: hsl(var(--muted-foreground)); }
+.scalio-btn.is-ghost:hover { color: hsl(var(--foreground)); background: transparent; }
+.scalio-btn.is-danger { color: hsl(var(--destructive)); }
+.scalio-btn.is-ghost.is-danger { color: hsl(var(--muted-foreground)); }
+.scalio-btn.is-ghost.is-danger:hover { color: hsl(var(--destructive)); }
+.scalio-btn:disabled { opacity: 0.6; cursor: default; }
+
+/* Two-factor card (SecurityFactors) */
+.scalio-security { display: flex; flex-direction: column; gap: 1.5rem; font-size: 0.875rem; }
+.scalio-security-block { display: flex; flex-direction: column; gap: 0.75rem; }
+.scalio-security-head { display: flex; align-items: flex-start; gap: 0.75rem; }
+.scalio-security-head > .scalio-icon { margin-top: 0.125rem; flex-shrink: 0; color: hsl(var(--muted-foreground)); }
+.scalio-security-title { font-weight: 600; font-size: 0.875rem; }
+.scalio-security-hint { margin: 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-security-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.scalio-security .is-indented { padding-left: 1.75rem; }
+.scalio-security-form, .scalio-security-confirm { display: flex; flex-direction: column; gap: 0.75rem; }
+.scalio-security-confirm, .scalio-security-codes {
+  max-width: 28rem; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card));
+  display: flex; flex-direction: column; gap: 0.75rem;
+}
+.scalio-security-field { display: flex; flex-direction: column; gap: 0.25rem; max-width: 20rem; }
+.scalio-security-field .scalio-field-label { margin-top: 0; }
+.scalio-security-confirm .scalio-security-field { max-width: none; }
+.scalio-security-code { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.2em; }
+.scalio-security-qr { display: inline-block; align-self: flex-start; padding: 0.75rem; border-radius: 2px; background: #fff; }
+.scalio-security-secret { font-family: 'JetBrains Mono', monospace; overflow-wrap: anywhere; color: hsl(var(--foreground)); }
+.scalio-security-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1.5rem; font-family: 'JetBrains Mono', monospace; }
+.scalio-security-keys { margin: 0; list-style: none; border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
+.scalio-security-keys li { display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0; }
+.scalio-security-keys li + li { border-top: 1px solid hsl(var(--border)); }
+.scalio-security-key-name { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
+.scalio-security-key-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: hsl(var(--muted-foreground)); }
+.scalio-security-keys .scalio-btn { width: 2rem; height: 2rem; padding: 0; }
+
+/* License panel (LicensePanel) */
+.scalio-license { border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); color: hsl(var(--card-foreground)); font-size: 0.875rem; }
+.scalio-license-part { padding: 1.25rem; }
+.scalio-license-part + .scalio-license-part { border-top: 1px solid hsl(var(--border)); }
+.scalio-license-title { display: flex; align-items: center; gap: 0.5rem; font-family: 'Chivo', sans-serif; font-weight: 700; }
+.scalio-license-title .scalio-icon { color: hsl(var(--primary)); }
+.scalio-license-hint { margin: 0.25rem 0 0; color: hsl(var(--muted-foreground)); }
+.scalio-license-messages { display: flex; flex-direction: column; gap: 0.25rem; margin: 1.25rem 1.25rem 0; }
+.scalio-license-messages div { display: flex; gap: 0.5rem; }
+.scalio-license-messages .scalio-icon { flex-shrink: 0; margin-top: 0.125rem; }
+.scalio-license-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
+@media (min-width: 768px) { .scalio-license-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.scalio-license-status { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
+.scalio-license-edition { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.scalio-license-customer { font-weight: 600; }
+.scalio-license-rows { display: flex; flex-direction: column; gap: 0.375rem; margin: 0; }
+.scalio-license-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+.scalio-license-rows dt { color: hsl(var(--muted-foreground)); white-space: nowrap; }
+.scalio-license-rows dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
+.scalio-license-rows dd.is-mono, .scalio-license-copy { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 400; }
+.scalio-license-copy { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0; border: 0; background: none; color: hsl(var(--muted-foreground)); cursor: pointer; text-align: right; }
+.scalio-license-copy:hover { color: hsl(var(--primary)); }
+.scalio-license .is-ok { color: #15803d; }
+.scalio-license .is-warn { color: #b45309; }
+.scalio-license .is-error { color: hsl(var(--destructive)); }
+.dark .scalio-license .is-ok { color: #4ade80; }
+.dark .scalio-license .is-warn { color: #fbbf24; }
+.scalio-license-sub { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--muted-foreground)); }
+.scalio-license-features { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.125rem; }
+.scalio-license-features li { display: flex; align-items: center; gap: 0.375rem; }
+.scalio-license-features .scalio-icon { width: 14px; height: 14px; color: #16a34a; }
+.scalio-license-usage { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--muted) / 0.4); }
+.scalio-license-usage .scalio-license-sub { margin-bottom: 0; }
+.scalio-license-bar-head { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.75rem; }
+.scalio-license-bar-label { font-weight: 600; color: hsl(var(--muted-foreground)); }
+.scalio-license-bar-label::first-letter { text-transform: uppercase; }
+.scalio-license-bar-value { font-family: 'JetBrains Mono', monospace; color: hsl(var(--muted-foreground)); }
+.scalio-license-bar-value.is-error { color: hsl(var(--destructive)); }
+.scalio-license-bar { height: 6px; overflow: hidden; border-radius: 999px; background: hsl(var(--muted)); }
+.scalio-license-bar > div { height: 100%; background: hsl(var(--primary)); }
+.scalio-license-bar > div.is-unlimited { background: #10b981; }
+.scalio-license-bar > div.is-full { background: hsl(var(--destructive)); }
+.scalio-license-addons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
+@media (min-width: 640px) { .scalio-license-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.scalio-license-addon { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px; }
+.scalio-license-addon-name { font-weight: 600; }
+.scalio-license-addon-detail { margin: 0.125rem 0 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-license-addon .scalio-btn { width: 2rem; height: 2rem; padding: 0; flex-shrink: 0; }
+.scalio-license-empty { margin: 0 0 1rem; color: hsl(var(--muted-foreground)); }
+.scalio-license-form { display: flex; flex-direction: column; gap: 0.5rem; }
+.scalio-license-form textarea { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; }
+.scalio-license-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.scalio-license-addon-error { margin-bottom: 0.5rem; font-size: 0.75rem; color: hsl(var(--destructive)); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header, sign-in layout, sidebar and page blocks",
   "license": "SEE LICENSE IN README.md",
   "private": false,

package/react/icons.js

@@ -70,4 +70,29 @@ const Activity = icon([
   ["path", { d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" }],
 ]);
 
-module.exports = { Sun, Moon, Monitor, LifeBuoy, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity };
+const Smartphone = icon([["rect", { x: 5, y: 2, width: 14, height: 20, rx: 2, ry: 2 }], ["path", { d: "M12 18h.01" }]]);
+const KeyRound = icon([
+  ["path", { d: "M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" }],
+  ["circle", { cx: 16.5, cy: 7.5, r: 0.5, fill: "currentColor" }],
+]);
+const Trash = icon([
+  ["path", { d: "M3 6h18" }],
+  ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }],
+  ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }],
+  ["path", { d: "M10 11v6M14 11v6" }],
+]);
+const Copy = icon([
+  ["rect", { width: 14, height: 14, x: 8, y: 8, rx: 2, ry: 2 }],
+  ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }],
+]);
+const Puzzle = icon([
+  ["path", { d: "M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z" }],
+]);
+const Plus = icon([["path", { d: "M5 12h14M12 5v14" }]]);
+const Alert = icon([
+  ["path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }],
+  ["path", { d: "M12 9v4M12 17h.01" }],
+]);
+
+module.exports = { Sun, Moon, Monitor, LifeBuoy, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity,
+  Smartphone, KeyRound, Trash, Copy, Puzzle, Plus, Alert };

package/react/index.js

@@ -333,6 +333,6 @@ module.exports = {
   TEST_IDS,
   initials,
 };
-Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"));
+Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./security"), require("./license"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/labels.js

@@ -96,6 +96,80 @@ const LABELS = {
     supportRemove: "Trennen",
     supportRemoveConfirm: "Verbindung zum Support trennen? Neue Tickets warten dann, bis wieder verbunden ist.",
     supportRemoved: "Verbindung getrennt.",
+    // Two-factor card (SecurityFactors) and license panel (LicensePanel)
+    mfa: {
+      backupTitle: "Ihre Backup-Codes",
+      backupHint: "Jeder Code funktioniert einmal, falls Sie Ihr Telefon nicht zur Hand haben. Bewahren Sie die Codes sicher auf, zum Beispiel im Passwort-Manager. Sie werden nur jetzt angezeigt.",
+      copy: "Kopieren",
+      copied: "Kopiert",
+      download: "Herunterladen",
+      saved: "Ich habe die Codes gespeichert",
+      app: "Authenticator-App",
+      on: "Aktiv. Die Anmeldung fragt nach einem Code. Noch {n} Backup-Codes.",
+      off: "Aus. Mit einer App wie Microsoft Authenticator fragt die Anmeldung zusätzlich nach einem 6-stelligen Code.",
+      newCodes: "Neue Backup-Codes",
+      turnOff: "Ausschalten",
+      turnOffTitle: "Authenticator-App ausschalten",
+      turnedOff: "Authenticator-App ausgeschaltet",
+      setUp: "Einrichten",
+      setUpTitle: "Authenticator-App einrichten",
+      scan: "Scannen Sie den QR-Code mit Ihrer Authenticator-App und geben Sie dann den angezeigten Code ein.",
+      key: "Oder geben Sie diesen Schlüssel ein:",
+      code: "Code",
+      activate: "Aktivieren",
+      passkeys: "Passkeys",
+      passkeysHint: "Anmelden mit Face ID, Touch ID, Windows Hello oder einem Sicherheitsschlüssel, ohne Passwort.",
+      addPasskey: "Passkey hinzufügen",
+      passkeyAdded: "Passkey hinzugefügt",
+      device: "Name des Geräts",
+      deviceExample: "z. B. MacBook",
+      used: "genutzt {date}",
+      added: "hinzugefügt {date}",
+      remove: "Entfernen",
+      removePasskey: "Passkey {name} entfernen?",
+      currentPassword: "Aktuelles Passwort",
+      verifying: "Wird geprüft …",
+      continue: "Weiter",
+      cancel: "Abbrechen",
+    },
+    license: {
+      title: "Lizenz",
+      hint: "Lizenzen kaufen und verlängern Sie in Scalio Compass. Der Schlüssel gilt nur für die Installations-ID unten.",
+      managed: "Die Lizenz dieser Instanz wird von Ihrem Anbieter verwaltet.",
+      status: "Status",
+      active: "Aktiv",
+      limited: "Eingeschränkt",
+      trialEnds: "Test endet",
+      maintenanceUntil: "Wartung bis",
+      never: "nie",
+      installationId: "Installations-ID",
+      idCopied: "Installations-ID kopiert",
+      copy: "Kopieren",
+      copyFailed: "Kopieren fehlgeschlagen",
+      domains: "Domains",
+      coverage: "Abdeckung dieser Version",
+      covered: "Abgedeckt",
+      grace: "Kulanzfrist bis {date}",
+      notCovered: "Nicht abgedeckt (schreibgeschützt)",
+      buildDate: "Build-Datum",
+      features: "Funktionen",
+      noFeatures: "Nur die Grundfunktionen",
+      usage: "Nutzung",
+      addons: "Add-ons",
+      included: "Enthalten",
+      noAddons: "Keine Add-ons.",
+      addonPlaceholder: "Add-on-Schlüssel einfügen",
+      add: "Hinzufügen",
+      addonActivated: "Add-on aktiviert",
+      addonRemoved: "Add-on entfernt",
+      key: "Lizenzschlüssel",
+      keyPlaceholder: "Lizenzschlüssel einfügen",
+      activate: "Aktivieren",
+      activated: "Lizenz aktiviert",
+      remove: "Entfernen",
+      removed: "Lizenzschlüssel entfernt",
+      removeConfirm: "Lizenzschlüssel entfernen? {product} läuft danach als Community-Edition.",
+    },
     // States
     loading: "Wird geladen …",
     empty: "Noch keine Einträge.",
@@ -204,6 +278,79 @@ const LABELS = {
     supportRemove: "Disconnect",
     supportRemoveConfirm: "Disconnect from support? New tickets then wait until the instance is connected again.",
     supportRemoved: "Disconnected.",
+    mfa: {
+      backupTitle: "Your backup codes",
+      backupHint: "Each code works once, if you do not have your phone. Keep them in a safe place, for example your password manager. They are shown only now.",
+      copy: "Copy",
+      copied: "Copied",
+      download: "Download",
+      saved: "I have saved the codes",
+      app: "Authenticator app",
+      on: "On. Sign-in asks for a code. {n} backup codes left.",
+      off: "Off. With an app such as Microsoft Authenticator, sign-in also asks for a 6-digit code.",
+      newCodes: "New backup codes",
+      turnOff: "Turn off",
+      turnOffTitle: "Turn off authenticator app",
+      turnedOff: "Authenticator app turned off",
+      setUp: "Set up",
+      setUpTitle: "Set up authenticator app",
+      scan: "Scan the QR code with your authenticator app, then enter the code it shows.",
+      key: "Or enter this key:",
+      code: "Code",
+      activate: "Activate",
+      passkeys: "Passkeys",
+      passkeysHint: "Sign in with Face ID, Touch ID, Windows Hello or a security key, without a password.",
+      addPasskey: "Add passkey",
+      passkeyAdded: "Passkey added",
+      device: "Name of the device",
+      deviceExample: "e.g. MacBook",
+      used: "used {date}",
+      added: "added {date}",
+      remove: "Remove",
+      removePasskey: "Remove passkey {name}?",
+      currentPassword: "Current password",
+      verifying: "Verifying …",
+      continue: "Continue",
+      cancel: "Cancel",
+    },
+    license: {
+      title: "License",
+      hint: "Buy or extend a license in Scalio Compass. The key is bound to the installation ID below.",
+      managed: "The license of this instance is managed by your provider.",
+      status: "Status",
+      active: "Active",
+      limited: "Limited",
+      trialEnds: "Trial ends",
+      maintenanceUntil: "Maintenance until",
+      never: "never",
+      installationId: "Installation ID",
+      idCopied: "Installation ID copied",
+      copy: "Copy",
+      copyFailed: "Copy failed",
+      domains: "Domains",
+      coverage: "Build coverage",
+      covered: "Covered",
+      grace: "Grace period until {date}",
+      notCovered: "Not covered (read-only)",
+      buildDate: "Build date",
+      features: "Features",
+      noFeatures: "Basic features only",
+      usage: "Usage",
+      addons: "Add-ons",
+      included: "Included",
+      noAddons: "No add-ons.",
+      addonPlaceholder: "Paste an add-on key",
+      add: "Add",
+      addonActivated: "Add-on activated",
+      addonRemoved: "Add-on removed",
+      key: "License key",
+      keyPlaceholder: "Paste the license key",
+      activate: "Activate",
+      activated: "License activated",
+      remove: "Remove",
+      removed: "License key removed",
+      removeConfirm: "Remove the license key? {product} then runs as Community edition.",
+    },
     loading: "Loading …",
     empty: "No entries yet.",
     sections: {
@@ -230,6 +377,8 @@ function labelsFor(lang, overrides) {
     sections: Object.assign({}, base.sections, o.sections),
     sectionHints: Object.assign({}, base.sectionHints, o.sectionHints),
     settingsGroups: Object.assign({}, base.settingsGroups, o.settingsGroups),
+    mfa: Object.assign({}, base.mfa, o.mfa),
+    license: Object.assign({}, base.license, o.license),
   });
 }
 

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/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 };

package/react/support.js

@@ -257,7 +257,11 @@ function SupportConnection({ client, lang, labels, onChange }) {
   const [note, setNote] = React.useState("");
   React.useEffect(() => {
     let alive = true;
-    client.connection().then((d) => alive && setSt(d)).catch((err) => alive && (setError(errorText(err)), setSt(false)));
+    client.connection().then((d) => {
+      if (!alive) return;
+      setSt(d);
+      if (d && d.default_portal) setPortal((p) => p || d.default_portal); // the portal of this instance's stage
+    }).catch((err) => alive && (setError(errorText(err)), setSt(false)));
     return () => { alive = false; };
   }, [client]);
   const run = async (fn, ok) => {