@scalio-cloud/ui 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.16.0
+Same profile page in every app, reference Scalio Nexus (Markus 2026-10-31, scalio-docs ADR 0042 Nachtrag).
+- New `react/profile.js`: `ProfileIdentity` (letters, name, email · role), `ThemeChoice` (Hell, Dunkel, System as
+  option cards), `LanguageChoice` (flags, `fixed` for an instance-wide language), `TimezoneChoice` (searchable
+  list, "Automatisch" = browser), `PasswordChange` (current, new, confirm; mismatch check, error from the API).
+- Helpers: `setUserTimezone`, `currentTz`, `browserTz`, `listTimezones`, `tzOffset` (apps format dates with
+  `currentTz()`), `applyTheme(mode)` / `resolveTheme` / `normalizeTheme` for light, dark and system.
+- Icons `Globe`, `Clock`; labels `profile_` (DE/EN). Default security hint now names authenticator app and passkeys.
+- **Visible change:** none until an app uses the new parts. No token changes.
+
 ## 0.15.0
 New app Scalio Beacon (service desk, scalio-docs ADR 0043).
 - Product switcher: entry "Beacon" (icon `RadioTower`) between Citadel and Pulse, available like the others.

package/README.md

@@ -188,7 +188,13 @@ import { AuthLayout, AuthHeader, MicrosoftButton, AuthDivider, AuthMessage, Prof
 <ProfileSection id="connections" lang={lang}>...</ProfileSection>  // Verknüpfungen
 ```
 
-Form fields and buttons stay the app's own (shadcn), so they match the rest of the app.
+Content of the sections (same in every app, reference Nexus): `ProfileIdentity` in Konto, `ThemeChoice` in
+Darstellung, `LanguageChoice` + `TimezoneChoice` in Sprache und Region, `PasswordChange` + `SecurityFactors` in
+Sicherheit. The app stores the time zone (`POST /auth/preferences {timezone}`), calls `setUserTimezone()` with
+the value from `/auth/me` and formats dates with `timeZone: currentTz()`. `applyTheme(mode)` sets the dark class
+for light, dark and system.
+
+Other form fields and buttons (e.g. the name field) stay the app's own (shadcn), so they match the rest of the app.
 
 ## Two-factor card and license panel (React)
 

package/auth.css

@@ -112,3 +112,70 @@
   min-width: 0; padding: 1.25rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card));
   color: hsl(var(--card-foreground)); display: flex; flex-direction: column; gap: 1rem;
 }
+
+/* Profile blocks (react/profile.js): identity, option cards, time zone list, password form. */
+.scalio-profile-identity-wrap { display: flex; flex-direction: column; gap: 1rem; }
+.scalio-profile-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
+.scalio-profile-avatar {
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3rem; height: 3rem;
+  background: hsl(var(--foreground)); color: hsl(var(--background)); font-size: 0.875rem; font-weight: 700;
+}
+.scalio-profile-who { min-width: 0; }
+.scalio-profile-name { font-size: 0.875rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.scalio-profile-mail {
+  font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: hsl(var(--muted-foreground));
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.scalio-profile-options { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
+@media (min-width: 640px) {
+  .scalio-profile-options.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .scalio-profile-options.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+.scalio-profile-option {
+  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; text-align: left;
+  border: 1px solid hsl(var(--input)); border-radius: 2px; background: hsl(var(--background)); color: hsl(var(--foreground));
+  font: inherit; cursor: pointer; transition: border-color 0.15s, background-color 0.15s;
+}
+.scalio-profile-option:hover { border-color: hsl(var(--muted-foreground)); }
+.scalio-profile-option.is-on { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.05); }
+.scalio-profile-option:disabled { opacity: 0.6; cursor: default; }
+.scalio-profile-option:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 0; }
+.scalio-profile-option-label { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; font-weight: 600; }
+.scalio-profile-option-label > .scalio-icon { width: 18px; height: 18px; color: hsl(var(--muted-foreground)); }
+.scalio-profile-option.is-on .scalio-profile-option-label > .scalio-icon,
+.scalio-profile-option-check { color: hsl(var(--primary)); width: 18px; height: 18px; }
+.scalio-profile-flag { font-size: 1.25rem; line-height: 1; }
+.scalio-profile-sublabel {
+  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
+  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--muted-foreground));
+}
+.scalio-profile-sublabel > .scalio-icon { width: 14px; height: 14px; }
+.scalio-profile-help { margin: 0.5rem 0 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-profile-error { margin: 0; font-size: 0.875rem; color: hsl(var(--destructive)); }
+.scalio-tz { position: relative; }
+.scalio-tz-button { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; text-align: left; cursor: pointer; }
+.scalio-tz-current { display: flex; align-items: center; gap: 0.5rem; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.scalio-tz-button .scalio-icon { flex-shrink: 0; color: hsl(var(--muted-foreground)); }
+.scalio-tz-panel {
+  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); min-width: 280px; padding: 0.5rem;
+  border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--popover, var(--card))); color: hsl(var(--popover-foreground, var(--card-foreground)));
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
+}
+.scalio-tz-list { margin: 0.5rem 0 0; padding: 0; list-style: none; max-height: 18rem; overflow-y: auto; }
+.scalio-tz-item {
+  display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.375rem 0.5rem; border: 0; background: none;
+  color: inherit; font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
+}
+.scalio-tz-item:hover, .scalio-tz-item:focus-visible { background: hsl(var(--muted)); outline: none; }
+.scalio-tz-check { visibility: hidden; flex-shrink: 0; }
+.scalio-tz-item.is-on .scalio-tz-check { visibility: visible; }
+.scalio-tz-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.scalio-tz-off { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-tz-empty { padding: 0.5rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
+.scalio-profile-pw { display: flex; flex-direction: column; gap: 1rem; }
+.scalio-profile-pw-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
+@media (min-width: 640px) { .scalio-profile-pw-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.scalio-profile-field { display: flex; flex-direction: column; gap: 0.375rem; }
+.scalio-profile-field .scalio-field-label { margin-top: 0; }
+.scalio-profile-pw .scalio-profile-help { margin-top: -0.5rem; }
+.scalio-profile-submit { align-self: flex-start; margin-top: 0; padding: 0 1rem; }

package/package.json

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

@@ -124,7 +124,13 @@ const RadioTower = icon([
   ["path", { d: "m8 22 4-11 4 11" }],
 ]);
 const Info = icon([["circle", { cx: 12, cy: 12, r: 10 }], ["path", { d: "M12 16v-4M12 8h.01" }]]);
+const Globe = icon([
+  ["circle", { cx: 12, cy: 12, r: 10 }],
+  ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }],
+  ["path", { d: "M2 12h20" }],
+]);
+const Clock = icon([["circle", { cx: 12, cy: 12, r: 10 }], ["path", { d: "M12 6v6l4 2" }]]);
 
 module.exports = { Sun, Moon, Monitor, LifeBuoy, BookOpen, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity,
   Smartphone, KeyRound, Trash, Copy, Puzzle, Plus, Alert, History, CornerDownLeft,
-  Users, Settings, ScrollText, Info, RadioTower };
+  Users, Settings, ScrollText, Info, RadioTower, Globe, Clock };

package/react/index.js

@@ -373,9 +373,10 @@ module.exports = {
   VersionTag,
   Icons,
   LABELS,
+  labelsFor,
   TEST_IDS,
   initials,
 };
-Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./security"), require("./license"), require("./palette"), require("./unify"));
+Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/labels.js

@@ -224,11 +224,29 @@ const LABELS = {
       security: "Sicherheit",
       connections: "Verknüpfungen",
     },
+    profile_: {
+      subtitle: "Persönliche Einstellungen für Ihr Konto",
+      language: "Anzeigesprache",
+      timezone: "Zeitzone",
+      timezoneAuto: "Automatisch (Browser: {tz})",
+      timezoneHelp: "Alle Daten und Uhrzeiten werden in dieser Zeitzone angezeigt.",
+      timezoneSearch: "Zeitzone suchen …",
+      timezoneNone: "Keine Zeitzone gefunden.",
+      pwCurrent: "Aktuelles Passwort",
+      pwNew: "Neues Passwort",
+      pwConfirm: "Neues bestätigen",
+      pwMin: "Mindestens {n} Zeichen.",
+      pwMismatch: "Die neuen Passwörter stimmen nicht überein.",
+      pwSubmit: "Passwort aktualisieren",
+      pwChanged: "Passwort geändert.",
+      saving: "Speichern …",
+      saved: "Einstellung gespeichert",
+    },
     sectionHints: {
       account: "Ihre Angaben. Die E-Mail-Adresse ist Ihr Anmeldename.",
       appearance: "Hell, dunkel oder wie Ihr System.",
       language: "Sprache der Oberfläche und Zeitzone für Zeitangaben.",
-      security: "Passwort und Zwei-Faktor-Anmeldung.",
+      security: "Passwort, Authenticator-App und Passkeys.",
       connections: "Verbundene Konten für die Anmeldung.",
     },
   },
@@ -448,11 +466,29 @@ const LABELS = {
       security: "Security",
       connections: "Connections",
     },
+    profile_: {
+      subtitle: "Personal settings for your account",
+      language: "Display language",
+      timezone: "Time zone",
+      timezoneAuto: "Automatic (browser: {tz})",
+      timezoneHelp: "All dates and times are shown in this time zone.",
+      timezoneSearch: "Search time zone …",
+      timezoneNone: "No time zone found.",
+      pwCurrent: "Current password",
+      pwNew: "New password",
+      pwConfirm: "Confirm new",
+      pwMin: "At least {n} characters.",
+      pwMismatch: "The new passwords do not match.",
+      pwSubmit: "Update password",
+      pwChanged: "Password changed.",
+      saving: "Saving …",
+      saved: "Preference saved",
+    },
     sectionHints: {
       account: "Your details. Your email address is your sign-in name.",
       appearance: "Light, dark or like your system.",
       language: "Language of the interface and time zone for times.",
-      security: "Password and two-factor sign-in.",
+      security: "Password, authenticator app and passkeys.",
       connections: "Linked accounts for signing in.",
     },
   },
@@ -470,6 +506,7 @@ function labelsFor(lang, overrides) {
     edition: Object.assign({}, base.edition, o.edition),
     accountTabs: Object.assign({}, base.accountTabs, o.accountTabs),
     passwordPolicy: Object.assign({}, base.passwordPolicy, o.passwordPolicy),
+    profile_: Object.assign({}, base.profile_, o.profile_),
   });
 }
 

package/react/profile.js

@@ -0,0 +1,327 @@
+"use strict";
+// Profile page blocks, the same in every app (reference: Scalio Nexus, ADR 0042 Nachtrag 2026-10-31).
+// Order on the page: ProfileSection account (ProfileIdentity), appearance (ThemeChoice), language
+// (LanguageChoice + TimezoneChoice), security (PasswordChange + SecurityFactors), connections (app specific).
+// Time zone helpers: an empty time zone means "automatic" (the browser's). Apps call setUserTimezone() with
+// the value from /auth/me and format dates with currentTz().
+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);
+}
+
+// --- time zone ---------------------------------------------------------------------------------------
+let userTz = "";
+function browserTz() {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  } catch (e) {
+    return "UTC";
+  }
+}
+function setUserTimezone(tz) {
+  userTz = tz || "";
+}
+function currentTz() {
+  return userTz || browserTz();
+}
+const FALLBACK_ZONES = ["UTC", "Europe/London", "Europe/Zurich", "Europe/Berlin", "Europe/Paris", "America/New_York",
+  "America/Chicago", "America/Denver", "America/Los_Angeles", "Asia/Dubai", "Asia/Kolkata", "Asia/Singapore", "Asia/Tokyo",
+  "Australia/Sydney"];
+function listTimezones() {
+  let list = FALLBACK_ZONES;
+  try {
+    if (Intl.supportedValuesOf) list = Intl.supportedValuesOf("timeZone");
+  } catch (e) {
+    // keep the short list
+  }
+  return list.includes("UTC") ? list : ["UTC"].concat(list);
+}
+function tzOffset(tz) {
+  try {
+    const p = new Intl.DateTimeFormat("en-US", { timeZone: tz, timeZoneName: "shortOffset" }).formatToParts(new Date());
+    const part = p.find((x) => x.type === "timeZoneName");
+    return ((part && part.value) || "").replace("GMT", "UTC");
+  } catch (e) {
+    return "";
+  }
+}
+
+// --- theme -------------------------------------------------------------------------------------------
+// mode: light | dark | system. Returns the mode actually shown.
+function resolveTheme(mode) {
+  if (mode === "dark" || mode === "light") return mode;
+  try {
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  } catch (e) {
+    return "light";
+  }
+}
+// Sets the "dark" class on <html> for the mode and follows the system while the mode is "system".
+// Returns a function that stops following.
+function applyTheme(mode) {
+  const set = () => document.documentElement.classList.toggle("dark", resolveTheme(mode) === "dark");
+  set();
+  if (mode !== "system" || typeof window === "undefined" || !window.matchMedia) return () => {};
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  if (mq.addEventListener) mq.addEventListener("change", set);
+  else if (mq.addListener) mq.addListener(set);
+  return () => {
+    if (mq.removeEventListener) mq.removeEventListener("change", set);
+    else if (mq.removeListener) mq.removeListener(set);
+  };
+}
+function normalizeTheme(value) {
+  return value === "dark" || value === "system" ? value : "light";
+}
+
+// --- blocks ------------------------------------------------------------------------------------------
+function initials(name) {
+  return String(name || "?").trim().slice(0, 2).toUpperCase() || "?";
+}
+
+// Letters, name, "email · role". children: extra content under it (e.g. a name field).
+function ProfileIdentity({ name, email, role, children, testId }) {
+  return h(
+    "div",
+    { className: "scalio-profile-identity-wrap" },
+    h(
+      "div",
+      { className: "scalio-profile-identity", "data-testid": testId || "profile-identity" },
+      h("div", { className: "scalio-profile-avatar", "aria-hidden": "true" }, initials(name || email)),
+      h(
+        "div",
+        { className: "scalio-profile-who" },
+        h("div", { className: "scalio-profile-name", "data-testid": "profile-name" }, name || email),
+        h("div", { className: "scalio-profile-mail", "data-testid": "profile-email" }, [email, role].filter(Boolean).join(" · "))
+      )
+    ),
+    children || null
+  );
+}
+
+function Option({ on, onClick, disabled, testId, icon, children }) {
+  return h(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": !!on,
+      disabled: !!disabled,
+      onClick,
+      className: cx("scalio-profile-option", on && "is-on"),
+      "data-testid": testId,
+    },
+    h("span", { className: "scalio-profile-option-label" }, icon || null, h("span", null, children)),
+    on ? h(Icons.Check, { className: "scalio-icon scalio-profile-option-check" }) : null
+  );
+}
+
+function SubLabel({ icon, children }) {
+  return h("div", { className: "scalio-profile-sublabel" }, icon || null, children);
+}
+
+const THEME_ICONS = { light: Icons.Sun, dark: Icons.Moon, system: Icons.Monitor };
+
+function ThemeChoice({ theme, onChange, modes, lang, labels, testIdPrefix }) {
+  const L = labelsFor(lang, labels);
+  const list = modes || ["light", "dark", "system"];
+  const pre = testIdPrefix || "theme-option";
+  return h(
+    "div",
+    { className: "scalio-profile-options is-3", role: "radiogroup", "aria-label": L.theme },
+    list.map((m) => {
+      const I = THEME_ICONS[m];
+      return h(Option, { key: m, on: theme === m, onClick: () => onChange(m), testId: `${pre}-${m}`, icon: I ? h(I, { className: "scalio-icon" }) : null }, L[m]);
+    })
+  );
+}
+
+const LANGUAGES = [
+  { code: "de", label: "Deutsch", flag: "🇩🇪" },
+  { code: "en", label: "English", flag: "🇬🇧" },
+];
+
+// fixed: the language is set for the whole instance (the buttons are disabled, fixedHint explains why).
+function LanguageChoice({ lang, onChange, languages, fixed, fixedHint, labels, testIdPrefix }) {
+  const L = labelsFor(lang, labels);
+  const pre = testIdPrefix || "lang-option";
+  return h(
+    "div",
+    { "data-testid": "language-section" },
+    h(SubLabel, { icon: h(Icons.Globe, { className: "scalio-icon" }) }, L.profile_.language),
+    h(
+      "div",
+      { className: "scalio-profile-options is-2", role: "radiogroup", "aria-label": L.profile_.language },
+      (languages || LANGUAGES).map((l) =>
+        h(Option, { key: l.code, on: lang === l.code, disabled: fixed, onClick: () => onChange(l.code), testId: `${pre}-${l.code}`,
+          icon: h("span", { className: "scalio-profile-flag", "aria-hidden": "true" }, l.flag) }, l.label)
+      )
+    ),
+    fixed && fixedHint ? h("p", { className: "scalio-profile-help", "data-testid": "language-fixed" }, fixedHint) : null
+  );
+}
+
+// Searchable list of IANA time zones; the first entry "Automatic" saves an empty value.
+function TimezoneChoice({ value, onChange, lang, labels, testId, defaultOpen }) {
+  const L = labelsFor(lang, labels);
+  const P = L.profile_;
+  const id = testId || "timezone-select";
+  const [open, setOpen] = React.useState(!!defaultOpen);
+  const [q, setQ] = React.useState("");
+  const ref = React.useRef(null);
+  const zones = React.useMemo(() => listTimezones().map((z) => ({ z, off: tzOffset(z) })), []);
+  React.useEffect(() => {
+    if (!open) return undefined;
+    const away = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    const esc = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", away);
+    document.addEventListener("keydown", esc);
+    return () => {
+      document.removeEventListener("mousedown", away);
+      document.removeEventListener("keydown", esc);
+    };
+  }, [open]);
+  const auto = fill(P.timezoneAuto, { tz: browserTz() });
+  const shown = value ? `${value.replace(/_/g, " ")} (${tzOffset(value)})` : auto;
+  const needle = q.trim().toLowerCase().replace(/\s+/g, "_");
+  const hits = needle ? zones.filter((x) => `${x.z} ${x.off}`.toLowerCase().includes(needle)) : zones;
+  const pick = (v) => {
+    setOpen(false);
+    setQ("");
+    if (v !== value) onChange(v);
+  };
+  const item = (key, v, label, off, tid) =>
+    h(
+      "li",
+      { key },
+      h(
+        "button",
+        { type: "button", className: cx("scalio-tz-item", v === (value || "") && "is-on"), onClick: () => pick(v), "data-testid": tid },
+        h(Icons.Check, { className: "scalio-icon scalio-tz-check" }),
+        h("span", { className: "scalio-tz-name" }, label),
+        off ? h("span", { className: "scalio-tz-off" }, off) : null
+      )
+    );
+  return h(
+    "div",
+    { "data-testid": "timezone-section" },
+    h(SubLabel, { icon: h(Icons.Clock, { className: "scalio-icon" }) }, P.timezone),
+    h(
+      "div",
+      { className: "scalio-tz", ref },
+      h(
+        "button",
+        { type: "button", className: "scalio-input scalio-tz-button", "aria-haspopup": "listbox", "aria-expanded": open,
+          onClick: () => setOpen(!open), "data-testid": id },
+        h("span", { className: "scalio-tz-current" }, h(Icons.Globe, { className: "scalio-icon" }), h("span", null, shown)),
+        h(Icons.ChevronDown, { className: "scalio-icon" })
+      ),
+      open
+        ? h(
+            "div",
+            { className: "scalio-tz-panel" },
+            h("input", { className: "scalio-input", autoFocus: true, value: q, placeholder: P.timezoneSearch, "aria-label": P.timezoneSearch,
+              onChange: (e) => setQ(e.target.value), "data-testid": `${id}-search` }),
+            h(
+              "ul",
+              { className: "scalio-tz-list", role: "listbox" },
+              !needle || "automatic automatisch browser".includes(needle) ? item("__auto", "", auto, "", `${id}-auto`) : null,
+              hits.slice(0, 400).map((x) => item(x.z, x.z, x.z.replace(/_/g, " "), x.off, `${id}-opt-${x.z}`)),
+              hits.length === 0 ? h("li", { className: "scalio-tz-empty" }, P.timezoneNone) : null
+            )
+          )
+        : null
+    ),
+    h("p", { className: "scalio-profile-help" }, P.timezoneHelp)
+  );
+}
+
+// onSubmit(current, next) returns a promise; a rejection shows its message under the form.
+function PasswordChange({ onSubmit, onDone, minLength, lang, labels, testIds }) {
+  const L = labelsFor(lang, labels);
+  const P = L.profile_;
+  const T = Object.assign({ form: "change-password-form", current: "cp-current", next: "cp-new", confirm: "cp-confirm", submit: "cp-submit", error: "cp-error" }, testIds);
+  const [pw, setPw] = React.useState({ current: "", next: "", confirm: "" });
+  const [error, setError] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const min = minLength || 0;
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    if (pw.next !== pw.confirm) {
+      setError(P.pwMismatch);
+      return;
+    }
+    setBusy(true);
+    try {
+      const res = await onSubmit(pw.current, pw.next);
+      setPw({ current: "", next: "", confirm: "" });
+      if (onDone) onDone(res);
+    } catch (err) {
+      setError(errorText(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const set = (k) => (e) => setPw(Object.assign({}, pw, { [k]: e.target.value }));
+  const field = (k, label, auto, extra) =>
+    h(
+      "div",
+      { className: "scalio-profile-field" },
+      h("label", { className: "scalio-field-label", htmlFor: `pw-${k}` }, label),
+      h("input", Object.assign({ id: `pw-${k}`, type: "password", className: "scalio-input", value: pw[k], onChange: set(k), required: true,
+        autoComplete: auto, "data-testid": T[k] }, extra))
+    );
+  return h(
+    "form",
+    { className: "scalio-profile-pw", onSubmit: submit, "data-testid": T.form },
+    field("current", P.pwCurrent, "current-password"),
+    h(
+      "div",
+      { className: "scalio-profile-pw-row" },
+      field("next", P.pwNew, "new-password", min ? { minLength: min } : null),
+      field("confirm", P.pwConfirm, "new-password", min ? { minLength: min } : null)
+    ),
+    min ? h("p", { className: "scalio-profile-help" }, fill(P.pwMin, { n: min })) : null,
+    error ? h("p", { className: "scalio-profile-error", role: "alert", "data-testid": T.error }, error) : null,
+    h("button", { type: "submit", className: "scalio-btn-primary scalio-profile-submit", disabled: busy, "data-testid": T.submit },
+      busy ? P.saving : P.pwSubmit)
+  );
+}
+
+module.exports = {
+  ProfileIdentity,
+  ThemeChoice,
+  LanguageChoice,
+  TimezoneChoice,
+  PasswordChange,
+  PROFILE_LANGUAGES: LANGUAGES,
+  browserTz,
+  setUserTimezone,
+  currentTz,
+  listTimezones,
+  tzOffset,
+  resolveTheme,
+  applyTheme,
+  normalizeTheme,
+};