@scalio-cloud/ui 0.31.1 → 0.33.0

package/README.md

@@ -151,6 +151,33 @@ Only actions that start something or lead away go there (Neu …, Import, Scanne
 Labels without "Neu"/"New": the + icon says it ("+ Kontakt", not "+ Neuer Kontakt").
 Filters, search, tabs and Speichern stay on the page. Apps with their own sidebar place `<ActionSlot />` themselves.
 
+## Page templates (React, from 0.33.0)
+
+UISPEC section 2 «Page templates» (`nav/N10` B): every page is an overview, a list, a detail or the settings
+(`SettingsLayout`, below). The templates draw the header, put `actions` into `<PageActions>` (sidebar slot from
+768px), and show `Loading` or `EmptyState` where the content would be.
+
+```jsx
+<OverviewPage title="Übersicht" kpis={[{ label: "Tenants", value: 3 }, { label: "Abweichungen", value: 2, tone: "error" }]}>
+  <Panel title="Letzte Scans" showAll={<Link to="/scans">Alle anzeigen</Link>}>…</Panel>
+</OverviewPage>
+<ListPage title="Kontakte" actions={<Button><Plus /> Kontakt</Button>} loading={loading} empty={!rows.length}
+  emptyText="Noch keine Kontakte." emptyAction={<Button>Ersten Kontakt erfassen</Button>}
+  toolbar={<Toolbar search={q} onSearch={setQ} filters={[{ id: "open", label: "Offen", active, count: 4 }]} onFilter={toggle} menu={<ExportMenu />} />}>
+  <Table>…</Table>
+</ListPage>
+<DetailPage title={t.name} status={{ tone: "ok", label: "Verbunden" }} back={<Link to="/tenants">Zurück</Link>}
+  pageActions={<Button><Upload /> Hochladen</Button>} actions={<Button>Freigeben</Button>}
+  tabs={[{ id: "info", label: "Info" }, { id: "log", label: "Protokoll" }]} tab={tab} onTab={setTab}
+  facts={[{ label: "Tenant-ID", value: t.id }]}>…</DetailPage>
+```
+
+On a detail page `back` and `pageActions` (start something, lead away) go to the sidebar slot; `actions` are the
+record's own actions (Freigeben, Stornieren) and stay in the header. `badge` takes an app's own status badge.
+
+Panels sit in a grid with one column, two from 1024px and three from 1536px; key facts of a detail page move to
+a right column from 1024px and leave no gap when there are none.
+
 ## Settings page (React)
 
 Every area of the settings has its own address (`/settings/<area>`); the app's router picks the area, the
@@ -319,9 +346,13 @@ sorts the group `system` that way). The reset block talks to scalio-platform `fa
 import { FactoryReset, factoryResetApi, SettingsField, SettingsRow } from "@scalio-cloud/ui/react";
 
 const reset = factoryResetApi(api);   // once, outside the component
-<FactoryReset client={reset} lang={lang} tokenKey="citadel_token" backupTo="/settings/backup" link={Link} />
+<FactoryReset client={reset} lang={lang} tokenKey="citadel_token" backupTo="/settings/backup" accountTo="/profile" link={Link} />
 ```
 
+Since 0.32.0 (N21, security review 2026-10-27) the reset needs the code of the signed-in admin's authenticator app
+or a backup code (`code` in the request, scalio-platform 0.11.0). Without a second factor the block says so and links
+to `accountTo` (the profile page) instead of allowing the reset.
+
 `SettingsField` (label, field, help) and `SettingsRow` (title and help left, a switch or button right; `tone="danger"`)
 keep the fields inside a `SettingsSection` the same in every app.
 

package/nav.css

@@ -777,3 +777,39 @@
 .scalio-mail-preview-subject { padding: 0.5rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); font-size: 0.875rem; }
 .scalio-mail-preview-subject span { font-weight: 600; }
 .scalio-mail-preview iframe { flex: 1; width: 100%; min-height: 16rem; border: 0; background: #fff; }
+/* Page templates (pages.js, 0.33.0): Overview, List, Detail. Full width (ADR 0024), grids add columns. */
+.scalio-template { display: flex; flex-direction: column; gap: 1.5rem; }
+.scalio-template > .scalio-page-header { margin-bottom: 0; }
+.scalio-kpi-row { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+@media (min-width: 768px) { .scalio-kpi-row { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } }
+.scalio-panels { display: grid; gap: 1rem; grid-template-columns: 1fr; }
+@media (min-width: 1024px) { .scalio-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (min-width: 1536px) { .scalio-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+.scalio-panel { display: flex; flex-direction: column; min-width: 0; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); color: hsl(var(--card-foreground)); }
+.scalio-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
+.scalio-panel-title { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(var(--muted-foreground)); }
+.scalio-panel-more, .scalio-panel-more a, .scalio-panel-more button { border: 0; background: none; padding: 0; font: inherit; font-size: 0.8125rem; font-weight: 600; color: hsl(var(--primary)); text-decoration: none; cursor: pointer; }
+.scalio-panel-more:hover, .scalio-panel-more a:hover, .scalio-panel-more button:hover { text-decoration: underline; }
+.scalio-panel-body { padding: 1rem 1.25rem; min-width: 0; }
+.scalio-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
+.scalio-toolbar-search { width: 100%; max-width: 20rem; margin: 0; }
+.scalio-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
+.scalio-chip {
+  display: inline-flex; align-items: center; gap: 0.375rem; height: 1.875rem; padding: 0 0.75rem; border: 1px solid hsl(var(--border));
+  border-radius: 999px; background: hsl(var(--background)); color: hsl(var(--muted-foreground)); font: inherit; font-size: 0.8125rem; cursor: pointer;
+}
+.scalio-chip:hover { color: hsl(var(--foreground)); border-color: hsl(var(--foreground) / 0.4); }
+.scalio-chip.is-active { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.12); color: hsl(var(--foreground)); font-weight: 600; }
+.scalio-chip:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
+.scalio-chip-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
+.scalio-toolbar-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.scalio-toolbar-menu { margin-left: auto; }
+.scalio-list-body { min-width: 0; overflow-x: auto; }
+.scalio-detail-body { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 1024px) { .scalio-detail-body.has-facts { grid-template-columns: minmax(0, 1fr) 18rem; } }
+.scalio-detail-main { min-width: 0; }
+.scalio-facts { align-self: start; padding: 1rem 1.25rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); }
+.scalio-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0.75rem 0 0; font-size: 0.875rem; }
+.scalio-facts dt { color: hsl(var(--muted-foreground)); }
+.scalio-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.scalio-page-title .scalio-badge { vertical-align: middle; margin-left: 0.25rem; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.31.1",
+  "version": "0.33.0",
   "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/index.js

@@ -378,6 +378,6 @@ module.exports = {
   TEST_IDS,
   initials,
 };
-Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"), require("./maintenance"), require("./audit"), require("./mail"), require("./saas_updates"));
+Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"), require("./maintenance"), require("./audit"), require("./mail"), require("./saas_updates"), require("./pages"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/labels.js

@@ -336,6 +336,9 @@ const LABELS = {
       removeLicense: "Lizenz ebenfalls entfernen",
       removeLicenseHint: "Danach läuft die Instanz als freie Edition, bis wieder ein Lizenzschlüssel eingetragen ist. Die Installations-ID bleibt.",
       password: "Ihr Passwort",
+      code: "Code aus der Authenticator-App oder Backup-Code",
+      noFactor: "Zum Zurücksetzen braucht Ihr Konto eine Authenticator-App; richten Sie sie zuerst im Profil ein. Ein Konto, das sich nur mit Microsoft anmeldet, kann nicht zurücksetzen: Das macht ein lokaler Admin mit Authenticator-App.",
+      setUpFactor: "Zum Profil",
       run: "Auf Werkseinstellungen zurücksetzen",
     },
     license: {
@@ -382,6 +385,7 @@ const LABELS = {
     // States
     loading: "Wird geladen …",
     empty: "Noch keine Einträge.",
+    pages: { showAll: "Alle anzeigen", filter: "Filter", sections: "Bereiche" },
     sections: {
       account: "Konto",
       appearance: "Darstellung",
@@ -744,6 +748,9 @@ const LABELS = {
       removeLicense: "Remove the license as well",
       removeLicenseHint: "Afterwards the instance runs as the free edition until a license key is entered again. The installation ID stays.",
       password: "Your password",
+      code: "Code from the authenticator app or a backup code",
+      noFactor: "To reset, your account needs an authenticator app; set it up in your profile first. An account that signs in only with Microsoft cannot reset: a local admin with an authenticator app does it.",
+      setUpFactor: "Go to profile",
       run: "Reset to factory settings",
     },
     license: {
@@ -789,6 +796,7 @@ const LABELS = {
     },
     loading: "Loading …",
     empty: "No entries yet.",
+    pages: { showAll: "Show all", filter: "Filter", sections: "Sections" },
     sections: {
       account: "Account",
       appearance: "Appearance",

package/react/maintenance.js

@@ -32,6 +32,7 @@ function FactoryReset(props) {
   const [info, setInfo] = React.useState(null);
   const [confirm, setConfirm] = React.useState("");
   const [password, setPassword] = React.useState("");
+  const [code, setCode] = React.useState("");
   const [removeLicense, setRemoveLicense] = React.useState(false);
   const [busy, setBusy] = React.useState(false);
   const [error, setError] = React.useState("");
@@ -42,14 +43,17 @@ function FactoryReset(props) {
     return () => { alive = false; };
   }, [client]);
 
-  const ready = confirm.trim() === "RESET" && (!info || !info.password || !!password);
+  // N21: the backend says second_factor true (code needed) or false (set one up first); an older backend says nothing.
+  const factor = info ? info.second_factor : undefined;
+  const ready = confirm.trim() === "RESET" && (!info || !info.password || !!password)
+    && factor !== false && (factor !== true || !!code.trim());
   const run = async (e) => {
     e.preventDefault();
     if (!ready) return;
     setBusy(true);
     setError("");
     try {
-      await client.run({ confirm, password, remove_license: removeLicense });
+      await client.run({ confirm, password, code, remove_license: removeLicense });
       try { if (props.tokenKey) window.localStorage.removeItem(props.tokenKey); } catch (x) { /* private mode */ }
       if (props.onDone) props.onDone();
       else window.location.href = "/login";
@@ -94,6 +98,19 @@ function FactoryReset(props) {
                 h("input", { id: "factory-reset-password", type: "password", className: "scalio-input", value: password, disabled: busy,
                   autoComplete: "current-password", "data-testid": "factory-reset-password", onChange: (e) => setPassword(e.target.value) }))
             : null,
+          factor === true
+            ? h(Field, { id: "factory-reset-code", label: L.code },
+                h("input", { id: "factory-reset-code", className: "scalio-input", value: code, disabled: busy, inputMode: "numeric",
+                  autoComplete: "one-time-code", "data-testid": "factory-reset-code", onChange: (e) => setCode(e.target.value) }))
+            : null,
+          factor === false
+            ? h("div", { className: "scalio-notice is-warn", "data-testid": "factory-reset-no-factor" },
+                h("span", null, L.noFactor),
+                props.accountTo && info.password
+                  ? h(props.link || "a", Object.assign({ className: "scalio-btn" },
+                      props.link ? { to: props.accountTo } : { href: props.accountTo }), L.setUpFactor)
+                  : null)
+            : null,
           error ? h("div", { className: "scalio-notice is-error", role: "alert", "data-testid": "factory-reset-error" }, error) : null,
           h("div", { className: "scalio-settings-section-footer" },
             h("button", { type: "submit", className: "scalio-btn is-danger is-solid", disabled: busy || !ready, "data-testid": "factory-reset-run" },

package/react/pages.js

@@ -0,0 +1,191 @@
+"use strict";
+// Page templates (UISPEC section 2 «Page templates», nav/N10 B, from 0.33.0): Overview, List and Detail. The
+// Settings template is SettingsLayout (settings.js). A page passes its data; header, page actions in the sidebar
+// slot, grids, toolbar, loading and empty state look the same in every app.
+const React = require("react");
+const h = React.createElement;
+const { labelsFor } = require("./labels");
+const { KpiTile, EmptyState, Loading, StatusBadge } = require("./blocks");
+const { PageActions } = require("./actions");
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+// Same layout as PageHeader in index.js (not required from there: index.js requires this module).
+function Header({ title, subtitle, eyebrow, back, actions, extra }) {
+  const right = actions || extra ? h(React.Fragment, null, extra || null, actions ? h(PageActions, null, actions) : null) : null;
+  return h(
+    "div",
+    { className: "scalio-page-header", "data-testid": "page-header" },
+    h(
+      "div",
+      { className: "scalio-page-header-text" },
+      back ? h("div", { className: "scalio-page-back" }, back) : null,
+      eyebrow ? h("div", { className: "scalio-eyebrow" }, eyebrow) : null,
+      h("h1", { className: "scalio-page-title" }, title),
+      subtitle ? h("p", { className: "scalio-page-subtitle" }, subtitle) : null
+    ),
+    right ? h("div", { className: "scalio-page-actions" }, right) : null
+  );
+}
+
+// Box on an overview page: title, optional «Alle anzeigen» (link element or onShowAll), content or empty text.
+function Panel({ title, showAll, onShowAll, empty, emptyText, children, lang, labels, testId, className }) {
+  const L = labelsFor(lang, labels);
+  let more = null;
+  if (showAll) more = h("span", { className: "scalio-panel-more" }, showAll);
+  else if (onShowAll) more = h("button", { type: "button", className: "scalio-panel-more", onClick: onShowAll }, L.pages.showAll);
+  return h(
+    "section",
+    { className: cx("scalio-panel", className), "data-testid": testId },
+    title || more
+      ? h("div", { className: "scalio-panel-head" }, title ? h("h2", { className: "scalio-panel-title" }, title) : h("span"), more)
+      : null,
+    h("div", { className: "scalio-panel-body" }, empty ? h(EmptyState, { text: emptyText, lang, labels }) : children)
+  );
+}
+
+// Overview: header, row of KPI tiles (tone "error" = needs attention), panels in a grid that adds columns.
+function OverviewPage({ title, subtitle, actions, kpis, loading, children, lang, labels, testId }) {
+  const tiles = (kpis || []).filter(Boolean);
+  return h(
+    "div",
+    { className: "scalio-template is-overview", "data-testid": testId || "overview-page" },
+    h(Header, { title, subtitle, actions }),
+    loading ? h(Loading, { lang, labels }) : null,
+    tiles.length
+      ? h("div", { className: "scalio-kpi-row", "data-testid": "kpi-row" }, tiles.map((k, i) => h(KpiTile, Object.assign({ key: k.key || k.testId || i }, k))))
+      : null,
+    children ? h("div", { className: "scalio-panels" }, children) : null
+  );
+}
+
+// Toolbar of a list: search, filter chips, extra controls and a menu (import/export) on the right.
+function Toolbar({ search, onSearch, searchLabel, filters, onFilter, menu, children, lang, labels, testId }) {
+  const L = labelsFor(lang, labels);
+  const chips = (filters || []).filter(Boolean);
+  return h(
+    "div",
+    { className: "scalio-toolbar", "data-testid": testId || "list-toolbar" },
+    onSearch
+      ? h("input", {
+          type: "search",
+          className: "scalio-input scalio-toolbar-search",
+          value: search || "",
+          placeholder: searchLabel || L.search,
+          "aria-label": searchLabel || L.search,
+          onChange: (e) => onSearch(e.target.value),
+          "data-testid": "list-search",
+        })
+      : null,
+    chips.length
+      ? h(
+          "div",
+          { className: "scalio-chips", role: "group", "aria-label": L.pages.filter },
+          chips.map((f) =>
+            h(
+              "button",
+              {
+                key: f.id,
+                type: "button",
+                className: cx("scalio-chip", f.active && "is-active"),
+                "aria-pressed": f.active ? "true" : "false",
+                onClick: () => onFilter && onFilter(f.id),
+                "data-testid": `filter-${f.id}`,
+              },
+              f.label,
+              f.count != null ? h("span", { className: "scalio-chip-count" }, f.count) : null
+            )
+          )
+        )
+      : null,
+    children ? h("div", { className: "scalio-toolbar-extra" }, children) : null,
+    menu ? h("div", { className: "scalio-toolbar-menu" }, menu) : null
+  );
+}
+
+// List: header with the main action (sidebar slot from 768px), toolbar, then the table or the empty state with
+// the next step. `empty` true shows the empty state instead of children.
+function ListPage({ title, subtitle, actions, toolbar, loading, empty, emptyText, emptyAction, children, lang, labels, testId }) {
+  let body = children;
+  if (loading) body = h(Loading, { lang, labels });
+  else if (empty) body = h(EmptyState, { text: emptyText, lang, labels }, emptyAction || null);
+  return h(
+    "div",
+    { className: "scalio-template is-list", "data-testid": testId || "list-page" },
+    h(Header, { title, subtitle, actions }),
+    toolbar || null,
+    h("div", { className: "scalio-list-body" }, body)
+  );
+}
+
+// Key facts on the right of a detail page: [{label, value}] as a definition list.
+function KeyFacts({ items, title, testId }) {
+  const rows = (items || []).filter((i) => i && i.value != null && i.value !== "");
+  if (!rows.length) return null;
+  return h(
+    "aside",
+    { className: "scalio-facts", "data-testid": testId || "key-facts" },
+    title ? h("h2", { className: "scalio-panel-title" }, title) : null,
+    h(
+      "dl",
+      null,
+      rows.map((r, i) =>
+        h(React.Fragment, { key: r.key || i }, h("dt", null, r.label), h("dd", null, r.value))
+      )
+    )
+  );
+}
+
+// Detail: back link and actions that lead away (`pageActions`) in the sidebar slot from 768px, header with status
+// badge and the record's own actions (`actions`: Freigeben, Stornieren; they stay on the page), tabs, key facts on
+// the right. tabs: [{id, label}] with tab/onTab, or leave them out for one section. status: {tone, label}, or
+// `badge` for an app's own badge element.
+function DetailPage({ title, subtitle, back, pageActions, status, badge: ownBadge, actions, tabs, tab, onTab, facts, factsTitle, loading, children, lang, labels, testId }) {
+  const L = labelsFor(lang, labels);
+  const list = (tabs || []).filter(Boolean);
+  const badge = ownBadge || (status && status.label ? h(StatusBadge, { tone: status.tone, testId: "detail-status" }, status.label) : null);
+  const slot = back || pageActions
+    ? h(React.Fragment, null, back ? h("span", { className: "scalio-detail-back", "data-testid": "detail-back" }, back) : null, pageActions || null)
+    : null;
+  return h(
+    "div",
+    { className: "scalio-template is-detail", "data-testid": testId || "detail-page" },
+    h(Header, {
+      title: badge ? h(React.Fragment, null, title, " ", badge) : title,
+      subtitle,
+      actions: slot,
+      extra: actions || null,
+    }),
+    list.length
+      ? h(
+          "div",
+          { className: "scalio-tabs", role: "tablist", "aria-label": L.pages.sections },
+          list.map((t) =>
+            h(
+              "button",
+              {
+                key: t.id,
+                type: "button",
+                role: "tab",
+                className: cx("scalio-tab", t.id === tab && "is-active"),
+                "aria-selected": t.id === tab ? "true" : "false",
+                onClick: () => onTab && onTab(t.id),
+                "data-testid": t.testId || `tab-${t.id}`,
+              },
+              t.label
+            )
+          )
+        )
+      : null,
+    h(
+      "div",
+      { className: cx("scalio-detail-body", facts && facts.length && "has-facts") },
+      h("div", { className: "scalio-detail-main" }, loading ? h(Loading, { lang, labels }) : children),
+      h(KeyFacts, { items: facts, title: factsTitle })
+    )
+  );
+}
+
+module.exports = { OverviewPage, Panel, ListPage, Toolbar, DetailPage, KeyFacts };