frugal-iot-client 1.3.14 → 1.3.15

package/CARDS_UX.md

@@ -772,6 +772,11 @@ Reopening one means revisiting this document, not deciding it in code.
 | D-42 | How the brand greens are used | A pale tint behind near-black text, never a fill under white — sunlight and dim sheds |
 | D-43 | Where the connection details live | An ungated Info card on the project's back, not an expandable in the header |
 | D-44 | How a module without a hand-written summary gets one | A generic default — its own readings, capped at two — not a list per module |
+| D-45 | Login page: keep the Sign In / Register tab strip? | No — one card, four modes. Two tabs were chrome around one short form, and "forgot" and "reset" make four, which no longer reads as tabs |
+| D-46 | Log in by username or by email? | One field, labelled "Username or email". The server tries username first, then email, so a username containing "@" still works |
+| D-47 | How a forgotten password is reset | A stateless HMAC code — see §16. Nothing is stored, so there is no token table to expire, leak or clean up |
+| D-48 | Six digits to type, or a link to click? | Both, from the same digest — see §16 |
+| D-49 | Is `email` optional at registration? | No, required now. It was optional, and an account without one cannot use D-47 at all |
 
 ---
 
@@ -958,6 +963,49 @@ flickers.
 
 ---
 
+---
+
+## 16. Forgotten passwords — a code that is stored nowhere
+
+The usual design writes a random token to a table with an expiry, and then needs the table cleaned
+up, the token invalidated on use, and the row protected. None of that is wanted on a Pi in a shed.
+
+Instead a code is **derived**, in `frugal-iot-server/lib/resetcode.js`:
+
+```
+HMAC(secret, user id + email + current hashed_password + five-minute slot)
+```
+
+- **`secret`** is 32 random bytes made at server start. A restart invalidates every outstanding
+  code, which is the right way round.
+- **the five-minute slot** is `floor(now / 5 min)`. Verification accepts the current slot and the
+  one before, so a code lasts between 5 and 10 minutes. Nothing expires it; the arithmetic moves on.
+- **`current hashed_password`** is what makes a code single-use, for free. Resetting the password
+  changes the hash, so every code derived from the old one stops matching the instant it is used.
+- **Nothing is written down**, so there is no token table, no cleanup, and nothing to leak.
+
+Two forms come out of one digest (D-48):
+
+| Form | What it is | Why |
+|---|---|---|
+| code | six digits | short enough to read off a phone and type into the form |
+| token | 32 hex characters | goes in the emailed link, where length costs nothing |
+
+Six digits is a million guesses, and a code is alive for up to ten minutes, so the six-digit form
+is only safe alongside the in-memory rate limiting in the same file — 3 sends and 10 verification
+attempts per identifier per 15 minutes. The link form does not depend on that.
+
+`POST /forgotpassword` answers identically whether or not the account exists, and identically when
+the mail fails to send, so the form cannot be used to find out who has an account here. A failed
+send is logged loudly instead, because a server with broken SMTP looks from the outside exactly
+like one that is working.
+
+Mail itself is configured in `config.d/email.yaml` and is **absent by default**. A server that
+cannot send mail says "Password reset is not available on this server" rather than accepting the
+request and quietly dropping it.
+
+---
+
 ## Appendix — implementation notes parked for step 2
 
 Not a plan; a scratchpad so nothing is lost while the UX is still moving.

package/CLAUDE.md

@@ -16,11 +16,13 @@ it loadable on its own, and it is maintained by reaching the display elements **
 | `cards.js` | core | the card UI: `mqtt-devicecard`, `mqtt-devicegrid`, `mqtt-projectback`, `mqtt-dashboard`, the layout store |
 | `nodeview.js` | core, widgets | the old node/group UI — **retires with `index-old.html`**; nothing new belongs here |
 | `flash.js` | core | `mqtt-flash` — pulls esptool-js |
-| `admin.js` | core | `mqtt-admin`, `mqtt-login`, `tabbed-display` |
+| `admin.js` | core | `mqtt-admin`, `tabbed-display` |
+| `login.js` | core | `mqtt-login` — sign in, register, forgot/reset password; light DOM |
 
 Entry points: `index.html` → `dashboard.js` (the card UI, everything but `nodeview.js`);
 `index-old.html` → `webcomponents.js` (everything, and the only remaining user of it);
-`index-embedded.html` needs only `core.js` + `widgets.js` and must keep working.
+`login.html` → `login.js`, which imports only `core.js` — that is why `mqtt-login` is not in
+`admin.js`; `index-embedded.html` needs only `core.js` + `widgets.js` and must keep working.
 
 Dashboards (e.g. `dashboard_example.html`) are thin HTML pages importing selectively.
 
@@ -93,7 +95,7 @@ Helper functions: `topicTwig(path)` → twig, `topicLeaf(path)` → leaf, `twigA
 - `mt.twig` — stored twig string (e.g. `sht/temperature`)
 - `mt.leaf` — getter, last segment of twig
 - `mt.topicPath` — getter, full path including node prefix
-- `mt.topicSetPath` — getter, write path (`…/set/…`); **throws when `this.node` is null** — only call on topics that are known to be part of the node hierarchy (i.e. `this.node` is set). Project-level or standalone topics (e.g. those created by an embedded `mqtt-graphdataset`) have no real node and must not reach this getter.
+- `mt.topicSetPath` — getter, write path (`…/set/…`); **throws when `this.nodeMt` is null** — only call on topics that are part of the node hierarchy. Project-level topics have no node and must not reach this getter. Topics built by `standaloneTopic()` do have a `nodeMt` (a stub), so an embedded widget's set path resolves.
 - `mt.element` — back-reference to the DOM element currently bound to this topic (null in headless mode or before binding)
 - `el.mt` — forward-reference from a DOM element to its `MqttTopic`
 
@@ -159,10 +161,12 @@ HTMLElementExtended          (from html-element-extended)
       MqttGroupFrugalIot     the frugal_iot system group (name, battery, OTA…)
   MqttClient                 MQTT connection UI element
   MqttWrapper                top-level entry point; fetches config, builds tree
-  MqttLogin                  login/register form
   MqttAdmin                  admin panel (OTA, permissions, node table)
   LanguagePicker             language selector
   TabbedDisplay              generic tab UI
+HTMLElementExtendedMinimum   (light DOM - no shadow root, so frugaliot.css reaches inside)
+  MqttLogin                  sign in / register / forgot / reset, one card and four modes
+  MqttDeviceCard, MqttDeviceGrid, MqttProjectBack, MqttDashboard   the card UI
 ```
 
 ### Adding a new display element
@@ -186,8 +190,8 @@ a control shows a rule. Then:
 
 ### The card UI
 
-- `mqtt-devicecard` and `mqtt-devicegrid` are **light DOM** (`HTMLElementExtendedMinimum`), so
-  `frugaliot.css` reaches them directly. That needs html-element-extended ≥ 0.1.7 (`renderRoot`).
+- `mqtt-devicecard`, `mqtt-devicegrid` and `mqtt-login` are **light DOM**
+  (`HTMLElementExtendedMinimum`), so `frugaliot.css` reaches them directly. That needs html-element-extended ≥ 0.1.7 (`renderRoot`).
 - A light-DOM element has no `<slot>`, and `renderAndReplace` **clears its own children** — so the
   grid renders once with `render0()` and mutates in place, and a card builds every child itself.
 - Widgets in a card are pre-bound (`el.mt = mt`) but deliberately **not** registered as `mt.element`:
@@ -233,6 +237,18 @@ if (prevBarMt) prevBarMt.element = null;
 prevBarMt = sensorMt;
 ```
 
+### Embedded widgets (no wrapper)
+
+`index-embedded.html` puts an `mqtt-bar`/`mqtt-toggle`/`mqtt-graphdataset` on a page with nothing
+else — no `mqtt-wrapper`, no discovery tree, no `/config.json`. `standaloneTopic(path, o)` in
+`core.js` builds the one topic such a widget needs, giving it a stub `nodeMt` so `topicPath`,
+`topicSetPath` and `groupMt` all resolve. It also sets `mt.standalone`, which is what makes
+`canWrite` true: there is no permission list to consult, and the broker enforces the credentials on
+the `mqtt-client` element instead. `test/embedded.test.js` guards this — it has broken twice
+unnoticed.
+
+Still not available on such a page: graph history (`addDataFrom` needs `server_config.logger.url`).
+
 ### Looking up topics
 
 Use `wrapper.projectMt.findTopic(fullPath)` — never fabricate a new `MqttTopic` with partial paths:
@@ -273,8 +289,21 @@ Each of these cost real time. They are not obvious from reading the code.
 - **`:host-context(details[open]) div { display: block }`** near the top of `frugaliot.css` has
   specificity (0,2,2) and overrides most rules for any div in a shadow root inside an open
   `<details>` — which is every widget in the old UI.
+- **A card's own gestures eat keystrokes and drags meant for a widget inside it.** `mqtt-devicecard`
+  listens for `keydown` (space picks it up) and `pointerdown` (drag to reorder) on itself, so a text
+  field on the back had every space `preventDefault`ed and a mouse selection of its text lifted the
+  card. Both handlers now bail on `isEditableTarget(e)` from `core.js`, which reads
+  `composedPath()[0]` — the target a card sees has been retargeted to the widget host, so
+  `e.target.tagName` is `MQTT-TEXT`, never `INPUT`.
 - **Assets resolve against the module, not the document**: `CssUrl` and `ImagesUrl` use
   `import.meta.url`, or a page in a subdirectory 404s every stylesheet and icon.
+- **A node reports in a burst**, publishing its whole topic set at once, so gaps between messages
+  are milliseconds. `MqttTopicNode.noteMessage` ignores anything closer than `REPORT_BURST_MS` when
+  learning the reporting interval — without that the interval collapses and every device reads as
+  offline seconds after reporting. Status is also floored by `MIN_REPORT_INTERVAL_MS`.
+- **A device going quiet sends nothing**, so nothing prompts a re-render. `status` is derived rather
+  than timed, but a card still needs a slow interval to re-read it, or it shows whatever it showed
+  when the last message arrived.
 - **Timestamps go through `nowMs()`**, never `Date.now()`, or a replayed history collapses onto one
   instant and a graph has nothing to draw. `setClock()` is how tests decide what "now" is.
 - **Caching will lie to you.** `/node_modules` and the client directory are served

package/admin.js

@@ -1,122 +1,12 @@
 /*
- * Frugal IoT client - login, the tab strip, and the admin panel: OTA, permissions, projects, nodes
- * and the API tools.
+ * Frugal IoT client - the tab strip, and the admin panel: OTA, permissions, projects, nodes
+ * and the API tools. The login page moved to login.js, so that it does not have to load this.
  */
 
 import {EL, GET, HTMLElementExtended} from '/node_modules/html-element-extended/htmlelementextended.js';
 import mqtt from '/node_modules/mqtt/dist/mqtt.esm.js'; // https://www.npmjs.com/package/mqtt
-import { CssUrl, POST, XXX, configSet, el, getString, hasCapability, locationParameterChange, mqtt_client, preferedLanguageSet, preferedLanguages, redirectToLogin, server_config } from './core.js';
+import { CssUrl, POST, XXX, configSet, el, getString, hasCapability, mqttTempConnect, retainedPattern, locationParameterChange, mqtt_client, preferedLanguageSet, preferedLanguages, redirectToLogin, server_config } from './core.js';
 
-class MqttLogin extends HTMLElementExtended { // TODO-89 may depend on organization
-  constructor(props) {
-    super(props);
-    this.state = {register: false};
-  }
-  static get observedAttributes() { return ['register','message','url','lang']; }
-  static get boolAttributes() { return ['register']; }
-
-  connectedCallback() {
-    this.loadAttributesFromURL();
-    super.connectedCallback();
-  }
-  changeAttribute(name, value) {
-    if (name === "lang") {
-      if (value.includes(',')) {
-        preferedLanguages = (value.split(',')).map(v => v.toUpperCase());
-      } else if (!value) {
-        preferedLanguageSet('EN');
-        locationParameterChange("lang", preferedLanguages.join(','));
-      } else {
-        preferedLanguageSet(value.toUpperCase());
-      }
-    }
-    super.changeAttribute(name, value);
-  }
-
-  tabRegister(register) {
-    this.changeAttribute('register', register);
-    this.renderAndReplace();
-  }
-  // this.state.url (the page to return to after login) may already have its own query string, so set
-  // "lang" via the URL API rather than naively concatenating "?lang=...", which would produce a second
-  // "?" if one is already present.
-  urlWithLang(urlStr) {
-    if (!urlStr) { return urlStr; }
-    try {
-      const u = new URL(urlStr, window.location.origin);
-      u.searchParams.set('lang', preferedLanguages.join(','));
-      return u.toString();
-    } catch (e) {
-      return urlStr;
-    }
-  }
-  render() { //TODO-89 needs styles
-    // TODO-89 organization should be dropdown
-    // TODO-89 merge login & register
-    if (preferedLanguages.length === 0) { XXX("Tracking down issue with lang"); }
-    return [
-      el('link', {rel: 'stylesheet', href: CssUrl}),
-      el('div', {class: 'mqtt-login'},[
-        // This is a top bar, holds message and language picker
-        el('div',{class: 'message'},[
-          el('span', {textContent: this.state.message}),
-          el('language-picker'),
-        ]),
-        el('tabbed-display', {tab: this.state.register ? 1 : 0 }, [
-          el('section', {title: "Sign In"}, [
-            el('form', {action:  '/login', method: "post"}, [
-              el('section', {}, [
-                el('label', {for: "username", textContent: 'Username'}),
-                el('input', {id: "username", name: "username", type: "text", autocomplete: "username", required: true, autofocus: true}),
-              ]),
-              el('section', {}, [
-                el('label', {for: "password", textContent: "Password"}),
-                el('input', {id: "password", name: "password", type: "password", autocomplete: "current-password", required: true}),
-              ]),
-              el('input', {id: "url", name: "url", type: "hidden", value: this.urlWithLang(this.state.url)}),
-              el('button', {class: "submit", type: "submit",
-                textContent: (this.state.register ? 'Submit' : 'Submit')}),
-            ]),
-          ]),
-          el('section', {title: "Register"}, [
-            el('form', {action: '/register', method: "post"}, [
-              el('section', {}, [
-                el('label', {for: "username", textContent: 'Username'}),
-                el('input', {id: "username", name: "username", type: "text", autocomplete: "username", required: true, autofocus: true}),
-              ]),
-              el('section', {}, [
-                el('label', {for: "password", textContent: "Password"}),
-                el('input', {id: "password", name: "password", type: "password", autocomplete: "current-password", required: true}),
-              ]),
-              // TODO-22 TODO-14 organization should be a drop-down
-              el('section', {}, [
-                el('label', {for: "organization", textContent: "Organization"}),
-                el('span', {textContent: "Note this is your organization - not the organizations whose devices you want to access." }),
-                el('br'),
-                el('input', {id: "organization", name: "organization", type: "text", autocomplete: "organization", required: false}),
-              ]),
-              el('section', {}, [
-                el('label', {for: "name", textContent: "Name"}),
-                el('input', {id: "name", name: "name", type: "text", autocomplete: "name", required: true}),
-              ]),
-              el('section', {}, [
-                el('label', {for: "email", textContent: "Email"}),
-                el('input', {id: "email", name: "email", type: "text", autocomplete: "email", required: true}),
-              ]),
-              el('section', {}, [
-                el('label', {for: "phone", textContent: "Phone or Whatsapp"}),
-                el('input', {id: "phone", name: "phone", type: "text", autocomplete: "phone", required: true}),
-              ]),
-              el('input', {id: "url", name: "url", type: "hidden", value: this.urlWithLang(this.state.url)}),
-              el('button', {class: "submit", type: "submit", textContent: 'Submit'}),
-            ]),
-          ]),
-        ]),
-      ]),
-    ];
-  }
-}
-customElements.define('mqtt-login', MqttLogin);
 class TabbedDisplay extends HTMLElementExtended {
   constructor() {
     super();
@@ -945,22 +835,17 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
     this.state.farm_nodes_list = [];
     // Rebuild the gated content of each tab first, since it re-creates the elements (e.g. ota_files,
     // people_perms_list, platforms_list_display) that loadTabData() below then asynchronously replaces.
-    this.replaceElement('ota_rest', this.gatedContent(this.otaRestContent));
-    this.replaceElement('admin_rest', this.gatedContent(this.adminRestContent));
-    this.replaceElement('nodes_rest', this.gatedContent(this.nodesRestContent));
-    this.replaceElement('api_rest', this.gatedContent(this.apiRestContent));
+    this.adminSections().forEach((section) => this.replaceElement(section.rest, this.gatedContent(section.content)));
     // Only OTA/Admin/API tabs do their own network fetch (Nodes reads server_config, already loaded,
     // and Dashboard is handled by mqtt-wrapper) - mark them all as needing a refetch for the new
     // organization, but only actually fetch whichever tab is currently active; the rest load lazily
     // if/when the user switches to them (see onTabChange), to avoid a server-side fetch per tab on
     // every organization change.
-    this.state.tabsNeedingLoad = new Set(['OTA', 'Admin', 'API']);
+    this.state.tabsNeedingLoad = new Set(['OTA', 'Admin', 'Projects', 'API']);
     this.loadTabIfNeeded(this.state.activeTabTitle);
     // Note both these dropdowns are fine if this.state.org is undefined
-    this.replaceElement("otaorgsdropdown", this.orgDropdown(this.state.org, this.otaOrgs,"otaorganizations"));
-    this.replaceElement("adminorgsdropdown", this.orgDropdown(this.state.org, this.adminOrgs,"adminorganizations"));
-    this.replaceElement("nodesorgsdropdown", this.orgDropdown(this.state.org, this.adminOrgs,"nodesorganizations"));
-    this.replaceElement("apiorgsdropdown", this.orgDropdown(this.state.org, this.adminOrgs,"apiorganizations"));
+    this.adminSections().forEach((section) =>
+      this.replaceElement(section.dropdown, this.orgDropdown(this.state.org, this[section.orgs], `${section.key}organizations`)));
     // Keep the Dashboard tab's own organization in sync with the shared dropdown above.
     if (this.state.elements.mqttWrapper) {
       this.state.elements.mqttWrapper.setOrganization(org);
@@ -999,6 +884,7 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
       this.getOtaFiles();
     } else if (title === 'Admin') {
       this.getPeopleList();
+    } else if (title === 'Projects') {
       this.getProjectsList();
     } else if (title === 'API') {
       this.getPlatformsList();
@@ -1189,6 +1075,14 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
        el('form', {action: '/ota_update', method: "post", enctype: "multipart/form-data"}, [
          el('input', {id: "url2", name: "url", type: "hidden", value: `/dashboard/`}),
          el('input', {id: "lang", name: "lang", type: "hidden", value: preferedLanguages.join(',')}),
+         // The organization dropdown for this tab is a sibling of this form rather than inside it
+         // (see renderSection), so the browser does not submit it. The server needs it: it checks
+         // the OTAUPDATE permission against it and builds the upload directory from it, and
+         // without it every upload is refused as "Permission denied to OTAUPDATE".
+         // It must stay ahead of the file input. Multer fills req.body only from the parts that
+         // arrive before the file, and the permission check runs while the file is being stored,
+         // so a field placed after the file would not be there yet when it is read.
+         el('input', {id: "otaorganization", name: "organization", type: "hidden", value: this.state.org}),
          el('section', {}, [
            el('label', {for: 'projects', textContent: "Project"}),
            this.state.elements.projectdropdown = this.projectDropdown(this.state.org)
@@ -1227,6 +1121,99 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
              // and form to add (dropdown of people and permissions)
              this.state.elements.people_list = this.peopleList(),
        ]),
+     ]);
+   }
+   // ---- Retained messages ----
+   //
+   // Nodes publish almost everything retained, so the broker keeps the last value of every topic and
+   // hands it to each new subscriber - which is how a card shows a reading straight away. The cost is
+   // that a topic published by mistake outlives the mistake: rename a module, misspell a field, test
+   // with the wrong node id, and it stays on the broker for ever, on every dashboard. Fixing the node
+   // does not clear it and neither does restarting the broker. The only way is to publish an empty
+   // message to that exact topic.
+   //
+   // Same mechanics as frugal-iot-server/scripts/clearretained.js, which is the version to reach for
+   // when there is no browser.
+   retainedRestContent() {
+     const r = this.state.retained || (this.state.retained = { status: null, topics: [], pattern: '#' });
+     return el('div', {class: 'retained'}, [
+       el('div', {class: 'formgroup'}, [
+         el('label', {for: 'retained_pattern', textContent: "Pattern"}),
+         el('span', {i8n: false, textContent: `${this.state.org}/`}),
+         this.state.elements.retained_pattern = el('input', {id: 'retained_pattern', type: 'text',
+           value: r.pattern, placeholder: 'lotus/+/sht30/#'}),
+         el('button', {class: 'submit', type: 'button', textContent: "List",
+           onclick: this.onRetainedList.bind(this)}),
+       ]),
+       el('p', {class: 'retained__help', textContent:
+         "+ matches one level, # matches the rest. Look before deleting."}),
+       this.state.elements.retained_result = this.retainedResult(),
+     ]);
+   }
+   retainedResult() {
+     const r = this.state.retained;
+     if (r.status) return el('p', {i8n: false, textContent: r.status});
+     if (!r.topics.length) return el('span', {});
+     return el('div', {}, [
+       el('p', {i8n: false, textContent: `${r.topics.length} retained topic(s)`}),
+       el('ul', {class: 'retained__list'}, r.topics.map((t) =>
+         el('li', {i8n: false, textContent: `${t.topic} = ${t.value}`}))),
+       // Two steps on purpose: this cannot be undone, and a wildcard is easy to get wrong
+       el('button', {class: 'submit', type: 'button',
+         textContent: r.confirming ? `Yes - delete ${r.topics.length}` : "Delete these",
+         onclick: this.onRetainedDelete.bind(this)}),
+     ]);
+   }
+   retainedShow(status, topics, confirming) {
+     this.state.retained = { pattern: this.state.retained.pattern, status, topics: topics || [], confirming };
+     this.replaceElement('retained_result', this.retainedResult());
+   }
+   onRetainedList() {
+     const pattern = retainedPattern(this.state.org, this.state.elements.retained_pattern.value);
+     this.state.retained.pattern = this.state.elements.retained_pattern.value;
+     const client = mqttTempConnect(this.state.org);
+     if (!client) { this.retainedShow("No broker credentials for this organization"); return; }
+     this.retainedShow(`Listening on ${pattern} ...`);
+     const found = new Map();
+     client.on('message', (topic, payload, packet) => {
+       // Only what the broker is holding. A live message arriving while we listen has the retain
+       // flag clear, and clearing that would remove something nobody asked us to.
+       if (packet.retain) found.set(topic, payload.toString());
+     });
+     client.on('error', (e) => { this.retainedShow(`Could not connect: ${e.message}`); client.end(true); });
+     client.on('connect', () => {
+       client.subscribe(pattern, {qos: 0}, (err) => {
+         if (err) { this.retainedShow(`Could not subscribe: ${err.message}`); client.end(true); return; }
+         // Retained messages all arrive at once on subscribe; this waits for them, not for news
+         setTimeout(() => {
+           client.end(true);
+           const topics = [...found].map(([topic, value]) => ({topic, value})).sort((a, b) => a.topic.localeCompare(b.topic));
+           this.retainedShow(topics.length ? null : "Nothing retained matches that pattern", topics);
+         }, 3000);
+       });
+     });
+   }
+   onRetainedDelete() {
+     const r = this.state.retained;
+     if (!r.confirming) { this.retainedShow(null, r.topics, true); return; }
+     const topics = r.topics;
+     const client = mqttTempConnect(this.state.org);
+     if (!client) { this.retainedShow("No broker credentials for this organization"); return; }
+     this.retainedShow(`Deleting ${topics.length} ...`);
+     client.on('connect', () => {
+       // An empty retained message is how MQTT spells "forget this topic"
+       let left = topics.length;
+       topics.forEach((t) => client.publish(t.topic, '', {retain: true, qos: 1}, () => {
+         if (--left === 0) {
+           client.end();
+           this.retainedShow(`Deleted ${topics.length}. If one comes back, a node is still publishing it.`);
+         }
+       }));
+     });
+     client.on('error', (e) => { this.retainedShow(`Could not connect: ${e.message}`); client.end(true); });
+   }
+   projectsRestContent() {
+     return el('div', {}, [
        el('section', {}, [
              el('h3', {textContent: "Projects"}),
              // List of existing projects for this organization,
@@ -1234,11 +1221,13 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
              // and, once expanded, a form to add a new project (id and name)
              this.state.elements.add_project = this.collapsibleArea('add_project', "Add Project", this.projectsAddForm),
        ]),
-       // TODO-CSS cleanup - labels are too big
-       // This should really use a superuser permission but for now its just the super admin can do this
-       // ADMIN, not WRITE: someone who can change things through the UI should not thereby get a
-       // raw publish box - the UI constrains them to topics and values that mean something (D-32)
-       !hasCapability(this.state.org, 'ADMIN') ? null :
+     ]);
+   }
+   // TODO-CSS cleanup - labels are too big
+   // ADMIN, not WRITE: someone who can change things through the UI should not thereby get a raw
+   // publish box - the UI constrains them to topics and values that mean something (D-32)
+   messageRestContent() {
+     return el('div', {}, [
          el('section', {}, [
            el('h3', {textContent: "Publish Message"}),
            el('form', {}, [
@@ -1308,7 +1297,10 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
    adminSections() {
      return [
        { key: 'ota',   title: "OTA",   orgs: 'otaOrgs',   dropdown: 'otaorgsdropdown',   rest: 'ota_rest',   content: this.otaRestContent },
-       { key: 'admin', title: "Admin", orgs: 'adminOrgs', dropdown: 'adminorgsdropdown', rest: 'admin_rest', content: this.adminRestContent },
+       { key: 'admin',   title: "Admin",   orgs: 'adminOrgs', dropdown: 'adminorgsdropdown',   rest: 'admin_rest',   content: this.adminRestContent },
+       { key: 'projects', title: "Projects", orgs: 'adminOrgs', dropdown: 'projectsorgsdropdown', rest: 'projects_rest', content: this.projectsRestContent },
+       { key: 'message', title: "Message", orgs: 'adminOrgs', dropdown: 'messageorgsdropdown', rest: 'message_rest', content: this.messageRestContent },
+       { key: 'retained', title: "Retained", orgs: 'adminOrgs', dropdown: 'retainedorgsdropdown', rest: 'retained_rest', content: this.retainedRestContent },
        { key: 'nodes', title: "Nodes", orgs: 'adminOrgs', dropdown: 'nodesorgsdropdown', rest: 'nodes_rest', content: this.nodesRestContent },
        { key: 'api',   title: "API",   orgs: 'adminOrgs', dropdown: 'apiorgsdropdown',   rest: 'api_rest',   content: this.apiRestContent },
      ];
@@ -1333,30 +1325,12 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
            el('section', {title: "Dashboard"}, [
              this.state.elements.mqttWrapper = el('mqtt-wrapper'),
            ]),
-           !this.otaOrgs.length ? null :
-             el('section', {title: "OTA"}, [
-                this.state.elements.otaorgsdropdown = el('span',{ textContent: "Waiting"}),
-                this.state.elements.ota_rest = this.gatedContent(this.otaRestContent),
-            ]
-          ), // OTA tab
-
-          !this.adminOrgs.length ? null :
-            el('section', {title: "Admin"}, [
-              this.state.elements.adminorgsdropdown = el('span',{ textContent: "Waiting"}),
-              this.state.elements.admin_rest = this.gatedContent(this.adminRestContent),
-             ]), // Admin tab
-
-           !this.adminOrgs.length ? null :
-             el('section', {title: "Nodes"}, [
-               this.state.elements.nodesorgsdropdown = el('span',{ textContent: "Waiting"}),
-               this.state.elements.nodes_rest = this.gatedContent(this.nodesRestContent),
-             ]), // Nodes tab
-
-           !this.adminOrgs.length ? null :
-             el('section', {title: "API"}, [
-               this.state.elements.apiorgsdropdown = el('span',{ textContent: "Waiting"}),
-               this.state.elements.api_rest = this.gatedContent(this.apiRestContent),
-             ]), // API tab
+           // From adminSections, so a section added for the cards gets a tab here too
+           ...this.adminSections().map((section) => (!this[section.orgs].length ? null :
+             el('section', {title: section.title}, [
+               this.state.elements[section.dropdown] = el('span', { textContent: "Waiting"}),
+               this.state.elements[section.rest] = this.gatedContent(section.content),
+             ]))),
      ]);
      // Lazily load a tab's data only once the user actually switches to it - see onTabChange.
      tabbedDisplay.addEventListener('tabchange', (e) => this.onTabChange(e.detail));

package/cards.js

@@ -24,10 +24,13 @@ if (!('renderRoot' in HTMLElementExtendedMinimum.prototype)) {
     + 'elements cannot render. If it is linked, the browser is probably holding a cached copy - '
     + 'reload ignoring the cache.');
 }
-import { el, getString, hasCapability, ImagesUrl, relativeTime, server_config, XXX } from './core.js';
+import { el, getString, hasCapability, ImagesUrl, isEditableTarget, relativeTime, server_config, XXX } from './core.js';
 
 // Shape as well as colour, so status survives sunlight and colour blindness
 const STATUS_MARK = { live: '●', stale: '◌', offline: '○', never: '·' };
+// How often a card re-reads its own status and age. Nothing arrives to prompt it when a device
+// stops reporting, which is exactly when the card most needs to change.
+const STATUS_TICK_MS = 10000;
 
 class MqttDeviceCard extends HTMLElementExtendedMinimum {
   static get observedAttributes() { return ['mode', 'movable']; }
@@ -49,6 +52,13 @@ class MqttDeviceCard extends HTMLElementExtendedMinimum {
     // Every message fires this, in both the element and the headless paths, so it is the one signal
     // a card needs. Filtered to this device below.
     document.addEventListener('frugaliot:groupchanged', this.onGroupChanged);
+    // A device going quiet sends nothing, so nothing would re-render to show it - status and "4s
+    // ago" would both sit at whatever they were when the last message arrived. This is the only
+    // clock the card needs; status itself is derived, not timed.
+    this.state.tick = setInterval(() => this.refresh(), STATUS_TICK_MS);
+    // A pending interval keeps node's event loop alive, so a card left attached by a test would
+    // hang the run. In a browser setInterval returns a number and this does nothing.
+    if (this.state.tick && (typeof this.state.tick.unref === 'function')) this.state.tick.unref();
     this.addEventListener('keydown', this.onKeyDown);
     // Not via el(): EL only assigns onclick, onchange and onsubmit as properties - any other
     // function it is handed goes into el.state and is never wired up at all.
@@ -56,6 +66,7 @@ class MqttDeviceCard extends HTMLElementExtendedMinimum {
   }
   disconnectedCallback() {
     document.removeEventListener('frugaliot:groupchanged', this.onGroupChanged);
+    clearInterval(this.state.tick);
     this.removeEventListener('keydown', this.onKeyDown);
     this.removeEventListener('pointerdown', this.onPointerDown);
     // Deliberately not endDrag(): reordering re-appends the cards, so the one being dragged is
@@ -121,13 +132,27 @@ class MqttDeviceCard extends HTMLElementExtendedMinimum {
     (e.widgets || []).forEach(({ row, widget }) => {
       if (row.mt.state.value !== undefined) widget.valueSet(row.mt.state.value);
       widget.parentElement?.classList.toggle('fi-row--outofrange', row.mt.outOfRange);
+      widget.parentElement?.classList.toggle('fi-row--invalid', row.mt.invalid);
     });
     // A row can appear or disappear - a sensor starts reporting, a control gets wired
     if (e.rows && (e.widgets.length !== nodeMt.frontRows.filter((r) => r.mt).length)) this.renderAndReplace();
   }
 
+  // A dot the colour the LED is showing, or dark when it is off - the same thing the board itself
+  // tells you from across the room
+  renderLed() {
+    const led = this.nodeMt.led;
+    if (!led) return null;
+    return el('span', {
+      class: `fi-led${led.on ? ' fi-led--on' : ''}`,
+      style: led.on ? `background:${led.color};` : '',
+      title: `${getString('Built in LED')}: ${led.on ? getString('On') : getString('Off')}`,
+    });
+  }
+
   renderMeta() {
     return [
+      this.renderLed(),
       this.renderBattery(),
       (this.nodeMt.status === 'live') ? null : el('span', { class: 'fi-age', i8n: false, textContent: this.ageText }),
     ].filter(Boolean);
@@ -165,6 +190,9 @@ class MqttDeviceCard extends HTMLElementExtendedMinimum {
   // someone who cannot make one.
   onKeyDown(e) {
     if (!this.state.movable) return;
+    // Space is a character in a text field before it is a pick-up gesture, and Escape/arrows belong
+    // to the input too
+    if (isEditableTarget(e)) return;
     if (e.key === ' ') {
       e.preventDefault();
       this.setGrabbed(!this.state.grabbed);
@@ -186,6 +214,8 @@ class MqttDeviceCard extends HTMLElementExtendedMinimum {
   // this has to work on. Touch needs a hold first, or the page cannot be scrolled.
   onPointerDown(e) {
     if (!this.state.movable || (e.button !== undefined && e.button !== 0)) return;
+    // Dragging across a text field selects text; six pixels of that must not lift the card
+    if (isEditableTarget(e)) return;
     this.state.drag = { x: e.clientX, y: e.clientY, id: e.pointerId, active: false };
     if (e.pointerType === 'touch') {
       this.state.drag.timer = setTimeout(() => this.beginDrag(e), 400); // hold to lift
@@ -274,7 +304,7 @@ class MqttDeviceCard extends HTMLElementExtendedMinimum {
     const widget = this.widgetFor(row);
     this.state.elements.widgets.push({ row, widget });
     return el('div', {
-      class: `fi-row fi-row--${row.kind}${row.mt.outOfRange ? ' fi-row--outofrange' : ''}`,
+      class: `fi-row fi-row--${row.kind}${row.mt.outOfRange ? ' fi-row--outofrange' : ''}${row.mt.invalid ? ' fi-row--invalid' : ''}`,
     }, [widget]);
   }
 
@@ -379,7 +409,7 @@ class MqttDeviceCard extends HTMLElementExtendedMinimum {
         const widget = this.widgetForTopic(mt, mt.name);
         this.state.elements.widgets.push({ row: { mt }, widget });
         return el('div', {
-          class: `fi-field fi-field--reading${mt.outOfRange ? ' fi-row--outofrange' : ''}`,
+          class: `fi-field fi-field--reading${mt.outOfRange ? ' fi-row--outofrange' : ''}${mt.invalid ? ' fi-row--invalid' : ''}`,
         }, [widget]);
       }));
   }
@@ -678,8 +708,11 @@ const ADMIN_CARDS = [
   { section: 'info',  title: 'Info',            capability: null, own: true },
   { section: 'ota',   title: 'OTA',             capability: 'OTAUPDATE' },
   { section: 'flash', title: 'Flash over USB',  capability: 'OTAFLASH' },
-  { section: 'admin', title: 'Permissions',     capability: 'ADMIN' },
-  { section: 'nodes', title: 'Nodes',           capability: 'ADMIN' },
+  { section: 'admin',    title: 'Permissions',      capability: 'ADMIN' },  // people
+  { section: 'projects', title: 'Projects',         capability: 'ADMIN' },
+  { section: 'message',  title: 'Publish Message',  capability: 'ADMIN' },
+  { section: 'retained', title: 'Retained messages', capability: 'ADMIN' },
+  { section: 'nodes',   title: 'Nodes',            capability: 'ADMIN' },
   { section: 'api',   title: 'API',             capability: 'ADMIN' },
 ];