fix(auth): smoother session-expiry recovery (no toast spam, no focus theft)

When a session expired, every parallel in-flight API call returned
401 and each one independently spawned a "Failed to load X:
Unauthorized" toast — burying the login form under 5-15 stacked
errors. _showLogin() also cloned the form node on every 401, stealing
focus from anyone trying to type their password.

- Toast.muteErrorsForMs(ms): drops error/warning toasts during auth
  transitions. Set to 6s on the first 401, self-extends if more arrive.
- App.handleUnauthorized(): now idempotent (_inUnauthState flag) and
  destroys the current page so its setInterval polling stops.
- App._showLogin(): if already visible, reuses the existing form
  bindings instead of cloning. Best-effort focus restore.
- Auto-focus on #login-user 50ms after _showLogin() so re-auth is
  type → tab → type → enter, no mouse needed.
- _inUnauthState cleared in _showApp() so future expirations work.

Also updates whatsnew.js with entries for v7.3.0, v7.3.1, and v7.2.1.

Release: v7.3.1

Author: bogdanpricop

CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to Docker Dash are documented here.
 
+## [7.3.1] - 2026-04-25 — Smoother session-expiry recovery
+
+When a session expired, the UX collapsed: every parallel in-flight API call (containers list, stats, alerts, notifications, host overview…) returned 401 and each one independently:
+
+1. Spawned a `Failed to load X: Unauthorized` red toast — burying the login form under 5-15 stacked errors.
+2. Called `App.handleUnauthorized()` → `_showLogin()` → which **cloned the login form node** to remove old listeners, **detaching whatever the user was typing into**. Focus disappeared mid-keystroke. Some users had to triple-click to re-focus the password field.
+3. Did nothing to stop the previous page's `setInterval` polling, so 401s kept arriving every few seconds and the cycle repeated.
+
+This release fixes all three.
+
+### Fixed
+
+- **Toast spam during auth transitions** — added [`Toast.muteErrorsForMs(ms)`](public/js/components/toast.js). When `Api.request` sees a 401, it mutes error/warning toasts for 6s before calling `handleUnauthorized()`. The mute window self-extends if more 401s arrive (so a stuck `setInterval` doesn't break out after 6s).
+- **`App.handleUnauthorized()` is idempotent** — the first 401 transitions to login and sets `_inUnauthState = true`; subsequent 401s are no-ops until login succeeds. Cleared in `_showApp()` so a future expiration triggers fresh.
+- **`App._showLogin()` is idempotent** — if the screen is already visible, the existing form bindings are reused (no clone, no focus theft). Best-effort focus to `#login-user` if nothing else is focused.
+- **Stale polling stopped** — `handleUnauthorized()` now destroys `_currentPage` (calling its `destroy()` to clear `_refreshTimer` / `_statsTimer` / etc.) so the previous page's intervals stop firing while the user is on the login screen.
+- **Auto-focus on login screen** — username field gets focus 50ms after `_showLogin()` so re-auth is `type → tab → type → enter` (no mouse).
+
+### Files touched
+
+- `public/js/components/toast.js` — `muteErrorsForMs` + `show()` mute gate
+- `public/js/api.js` — sets the mute window before calling `handleUnauthorized`, throws `Error` with `isAuthError = true` flag
+- `public/js/app.js` — idempotent `handleUnauthorized` + `_showLogin`, page destroy on 401, auto-focus, `_inUnauthState` cleared in `_showApp`
+- `public/js/pages/whatsnew.js` — entries for v7.3.1, v7.3.0, v7.2.1
+
 ## [7.3.0] - 2026-04-25 — "Update Notifications"
 
 Periodic, opt-out check for new Docker Dash releases on GitHub. Solves the "user cloned the repo a week ago and has no idea v7.3.0 shipped" gap. Designed to be **quiet**: a tiny pulsing ↑ badge next to the sidebar version, click-to-open modal with the full release notes (rendered from the GitHub Release `body`), and a one-click "show upgrade command" for admins.

docker-compose.yml

@@ -4,8 +4,8 @@ services:
       context: .
       dockerfile: Dockerfile
       args:
-        APP_VERSION: "${APP_VERSION:-7.3.0}"
-    image: docker-dash:${APP_VERSION:-7.3.0}
+        APP_VERSION: "${APP_VERSION:-7.3.1}"
+    image: docker-dash:${APP_VERSION:-7.3.1}
     container_name: docker-dash
     restart: unless-stopped
     env_file:
@@ -54,7 +54,7 @@ services:
   dd-egress-filter:
     build:
       context: ./docker/egress-filter
-    image: docker-dash-egress-filter:${APP_VERSION:-7.3.0}
+    image: docker-dash-egress-filter:${APP_VERSION:-7.3.1}
     container_name: dd-egress-filter
     restart: unless-stopped
     # Uses the default bridge so target containers on the default bridge can

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docker-dash",
-  "version": "7.3.0",
+  "version": "7.3.1",
   "description": "Full-featured Docker management dashboard",
   "main": "src/server.js",
   "scripts": {

public/js/api.js

@@ -61,8 +61,14 @@ const Api = {
     try {
       const res = await fetch(`/api${this._appendHostId(path)}`, options);
       if (res.status === 401 && !path.startsWith('/auth/login')) {
+        // v7.3.1: mute error toasts for 6s so parallel in-flight requests
+        // don't bury the login form with "Failed to load X: Unauthorized".
+        // App.handleUnauthorized() is idempotent so repeated 401s are harmless.
+        if (typeof Toast !== 'undefined') Toast.muteErrorsForMs(6000);
         App.handleUnauthorized();
-        throw new Error('Unauthorized');
+        const err = new Error('Unauthorized');
+        err.isAuthError = true;
+        throw err;
       }
       const data = res.headers.get('content-type')?.includes('json')
         ? await res.json()

public/js/app.js

@@ -73,8 +73,23 @@ const App = {
   // ─── Auth ──────────────────────────────────────
 
   _showLogin() {
-    document.getElementById('login-screen').classList.remove('hidden');
-    document.getElementById('app-shell').classList.add('hidden');
+    const loginScreen = document.getElementById('login-screen');
+    const appShell = document.getElementById('app-shell');
+
+    // v7.3.1: if the login screen is already visible, don't tear down + re-bind
+    // the form. Doing so on every 401 stole keyboard focus mid-typing. The
+    // form bindings from the previous _showLogin call are still good.
+    if (!loginScreen.classList.contains('hidden')) {
+      // Best-effort: focus the username field if nothing is focused yet
+      const userField = document.getElementById('login-user');
+      if (userField && document.activeElement === document.body) {
+        try { userField.focus(); } catch { /* ignore */ }
+      }
+      return;
+    }
+
+    loginScreen.classList.remove('hidden');
+    appShell.classList.add('hidden');
     WS.disconnect();
 
     // Check if OIDC is enabled and show SSO button
@@ -92,6 +107,11 @@ const App = {
     // IMPORTANT: re-query errEl from the NEW form (old ref is detached from DOM)
     const errEl = newForm.querySelector('#login-error');
 
+    // Auto-focus username so the user can start typing immediately
+    setTimeout(() => {
+      try { newForm.querySelector('#login-user')?.focus(); } catch { /* ignore */ }
+    }, 50);
+
     newForm.addEventListener('submit', async (e) => {
       e.preventDefault();
       errEl.classList.add('hidden');
@@ -354,6 +374,9 @@ const App = {
   },
 
   _showApp() {
+    // v7.3.1: clear unauth-state flag so a future session expiry triggers
+    // the login transition again.
+    this._inUnauthState = false;
     document.getElementById('login-screen').classList.add('hidden');
     document.getElementById('app-shell').classList.remove('hidden');
 
@@ -1210,8 +1233,20 @@ const App = {
   },
 
   handleUnauthorized() {
+    // v7.3.1: idempotent. Multiple parallel 401s used to each tear down
+    // the login form (re-cloning it), stealing focus from the user trying
+    // to type their password. Now: first 401 transitions, subsequent 401s
+    // are no-ops until login succeeds.
+    if (this._inUnauthState) return;
+    this._inUnauthState = true;
     this.user = null;
     WS.disconnect();
+    // Stop the current page's timers/intervals so they don't keep firing
+    // 401s in a loop while the user is on the login screen.
+    if (this._currentPage?.destroy) {
+      try { this._currentPage.destroy(); } catch { /* page destroy errors are non-fatal */ }
+    }
+    this._currentPage = null;
     this._showLogin();
   },
 

public/js/components/toast.js

@@ -5,6 +5,7 @@
 
 const Toast = {
   _container: null,
+  _muteErrorsUntil: 0,  // v7.3.1: drop error/warning toasts during auth transitions
 
   _getContainer() {
     if (!this._container) {
@@ -13,7 +14,21 @@ const Toast = {
     return this._container;
   },
 
+  /**
+   * Suppress error + warning toasts for `ms` milliseconds. Used by the
+   * auth layer when a 401 fires: in-flight parallel requests would
+   * otherwise each spawn a "Failed to load X: Unauthorized" toast,
+   * burying the login form.
+   */
+  muteErrorsForMs(ms) {
+    const until = Date.now() + ms;
+    if (until > this._muteErrorsUntil) this._muteErrorsUntil = until;
+  },
+
   show(message, type = 'info', duration = 4000) {
+    if ((type === 'error' || type === 'warning') && Date.now() < this._muteErrorsUntil) {
+      return null;
+    }
     const container = this._getContainer();
     if (!container) return;
 

public/js/pages/whatsnew.js

@@ -9,6 +9,41 @@ const WhatsNewPage = {
   // Add new releases at the TOP of this array.
   // Types: feature, fix, improvement, security, breaking
   _releases: [
+    {
+      version: '7.3.1',
+      date: '2026-04-25',
+      title: 'Smoother session-expiry recovery',
+      changes: [
+        { type: 'fix', text: 'When the session expired, parallel in-flight API calls each spawned a "Failed to load X: Unauthorized" toast — burying the login form under 5-15 red error toasts. Now: the first 401 mutes error/warning toasts for 6 seconds, so the login form stays clean. The mute window auto-extends if more 401s arrive (e.g. from setIntervals on the previously-active page).' },
+        { type: 'fix', text: 'Login form no longer steals keyboard focus mid-typing. Previously, every parallel 401 called _showLogin() which cloned the form node, detaching whatever the user was typing into. Now _showLogin() is idempotent — if the screen is already visible, the form bindings are reused and focus is preserved.' },
+        { type: 'fix', text: 'handleUnauthorized() is now idempotent and also destroys the current page (stopping its setInterval timers). Previously, a containers list page kept polling every few seconds while the user was on the login screen, generating a fresh 401 each tick and re-triggering the login dance.' },
+        { type: 'improvement', text: 'Username field auto-focuses when the login screen appears, so re-authenticating after a session timeout is now: type → tab → type → enter, with no mouse needed.' },
+      ],
+    },
+    {
+      version: '7.3.0',
+      date: '2026-04-25',
+      title: 'In-app update notifications via GitHub releases',
+      changes: [
+        { type: 'feature', text: 'Subtle pulsing ↑ badge appears next to the sidebar version when a newer Docker Dash release exists on GitHub. Click → modal with the release notes (rendered from this very Release body), publish date, last-checked timestamp, and a "View on GitHub" link.' },
+        { type: 'feature', text: 'Admin-only collapsed details inside the modal: copy-pasteable upgrade command (`git pull && APP_VERSION=X.Y.Z docker compose up -d --build app`) with a "back up /data first" reminder. Operators and viewers see the notes but not the command.' },
+        { type: 'feature', text: 'New System Settings → General card with a toggle ("Check for updates"), the last-checked timestamp, and a "Check now" button (admin-only). Default ON. Disable for fully air-gapped deployments — zero outbound calls, badge never appears.' },
+        { type: 'feature', text: 'Backend: src/services/update-check.js polls api.github.com/repos/<owner>/<repo>/releases/latest every 12 hours (configurable owner/repo via DD_UPDATE_CHECK_OWNER and DD_UPDATE_CHECK_REPO env vars). Cache lives in the settings table. Network failures preserve the existing cache (UI shows last known release until next successful poll).' },
+        { type: 'feature', text: 'Endpoints: GET /api/system/update-check (any auth user, for sidebar badge) + POST /api/system/update-check/refresh (admin, force) + POST /api/system/update-check/setting (admin, toggle, audited).' },
+        { type: 'improvement', text: 'HA-aware: the 12h cron + the 60s post-boot one-shot both run on the leader replica only, so 4-replica HA still makes 1 GitHub call per 12h (not 4). User-Agent is `docker-dash/<version>` — no install ID, no telemetry beyond what the TCP connection inherently exposes.' },
+        { type: 'improvement', text: 'Minimal markdown-to-HTML renderer in update-notifier.js (~190 LOC, no external deps) handles the subset GitHub release notes use: headings, bold/italic, inline code, fenced code blocks, lists, links. All input HTML-escaped first.' },
+        { type: 'improvement', text: '24 new tests (semver compare, enable/disable, getStatus state machine including cache JSON corruption tolerance, refresh HTTP behavior with mocked https). Suite: 907 → 931 / 60 suites. Lint clean, npm audit clean.' },
+      ],
+    },
+    {
+      version: '7.2.1',
+      date: '2026-04-23',
+      title: 'Containers page TypeError + missing nav.observability key',
+      changes: [
+        { type: 'fix', text: 'Fixed `TypeError: this._stopLogFollow is not a function` thrown on every navigation away from the containers list view. Root cause was the v6.16.0 lazy-load split: `_stopLogFollow` lives in the lazy-loaded container-detail.js module, but `destroy()` (eager containers.js) called it unconditionally. If the user never opened a detail view, the method didn\'t exist and the call crashed. Now guarded with a `typeof === "function"` check — harmless no-op when the detail module was never loaded.' },
+        { type: 'fix', text: 'Sidebar showed `nav.observability` as a raw string (missing translation). Added the key to the `nav:` block in EN + RO; other 9 languages fall back to EN automatically via `_fallback`.' },
+      ],
+    },
     {
       version: '7.2.0',
       date: '2026-04-22',

src/version.js

@@ -2,4 +2,4 @@
 // Single source of truth for the application version.
 // Updated automatically by: npm version X.Y.Z  (via scripts/sync-version.js)
 // server.js reads this to inject into index.html at startup — no build step needed.
-module.exports = '7.3.0';
+module.exports = '7.3.1';