Merge pull request #126 from theta42/release/1.8.3

Release 1.8.3: unify profile.ejs's API-token UI onto app.modal

CHANGELOG.md

@@ -4,6 +4,110 @@ All notable changes to this project are documented here. Format loosely
 follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
 correspond to git tags (`vX.Y.Z`) and `nodejs/package.json`'s `version`.
 
+## [1.8.3] - 2026-07-28
+
+### Changed
+- **`profile.ejs`'s self-service API-token UI unified onto `app.modal`**, matching the pattern already shipped this round in `directory.ejs`, proxy, and jump-host: the static `#secretModal`/`#editModal` elements are retired in favor of the shared `app.modal` singleton, the always-visible inline create-form card becomes a "+ New Token" button + modal, and badge classes switch from `bg-*` to `text-bg-*`.
+- Checkmark-flash copy feedback (silently broken by FontAwesome's `<i>`→`<svg>` replacement) replaced with toast-based `copyFieldValue`, matching proxy and jump-host.
+
+## [1.8.2] - 2026-07-28
+
+### Fixed
+- **Creating a new OAuth integration didn't reliably show the "save this client secret now" reveal modal** — `saveResource()` called `app.modal.close()` immediately before conditionally showing the secret via `app.modal.open()`. `app.modal` is a singleton, and `close()` immediately followed by `open()` collides with Bootstrap's hide-transition guard. An intervening `await loadResources()` made this race unlikely to lose in practice, but not guaranteed to — found while fixing the same, guaranteed-to-lose bug in jump-host and proxy's API-token create flows.
+
+## [1.8.1] - 2026-07-28
+
+### Fixed
+- **The resource modal's "Associated LDAP Groups" autocomplete went empty after the first Add/Edit** — `loadLdapGroups()`'s fetch-once cache guard (`if (ldapGroupsCache) return;`) also skipped repopulating the `<datalist>` on every call after the first, but the modal body (including that `<datalist>`) is rebuilt fresh and empty on every `app.modal.open()`. Now the fetch is still cached, but the datalist is always repopulated.
+
+## [1.8.0] - 2026-07-28
+
+### Added
+- **Directory resource modal: General / Details / Associated LDAP Groups / Children tabs**, replacing one long form. The new Children tab lists a resource's existing children and lets you add another right from the modal.
+- **Resource audit trail**: `created_by`/`created_on`/`updated_by`/`updated_on`, shown in the modal's new footer (mirrors the convention already used by proxy's `Host` and jump-host's `ApiToken`). Existing resources predating this change show "—" until next edited.
+- **Linkable resource URLs**: `GET /directory/:slug` plus a client-side deep-link check make a resource's modal directly bookmarkable/shareable; the address bar updates to `/directory/{slug}` while its modal is open and reverts on close (including via the browser Back button).
+- **Auto-created LDAP groups are now prefixed with their nearest ancestor Site's slug** (e.g. `site_local_myhost_access` instead of `myhost_access`), so groups for same-named hosts/services under different sites no longer collide or look identical. Resources with no Site ancestor keep the old unprefixed naming.
+
+### Changed
+- `@simpleworkjs/frontend` bumped to 0.2.6: `app.modal` gained the `tabs`/`footer`/`url` options (all opt-in, existing callers unaffected) plus `showTab`/`on`/`deepLinkSlug`/`formatAudit`/`footerButtons` helpers — the shared building blocks behind this release's modal work, reusable by future entity modals in any of the 3 apps.
+
+### Fixed
+- The Directory's Associated LDAP Groups / Relationships lists no longer risk silently dropping their contents on a second modal open (a `jq-repeat`/DOM-rebuild timing race, now rendered manually instead).
+
+### Operational note
+The new `Resource` audit fields require a schema migration on any existing deployment: `ALTER TABLE Resource ADD COLUMN created_by VARCHAR(255); ALTER TABLE Resource ADD COLUMN created_on INTEGER; ALTER TABLE Resource ADD COLUMN updated_by VARCHAR(255); ALTER TABLE Resource ADD COLUMN updated_on INTEGER;` (adjust types for non-sqlite dialects) — `@simpleworkjs/orm`'s `sync()` only creates missing tables, it never alters existing ones.
+
+## [1.7.0] - 2026-07-28
+
+### Fixed
+- **`formAJAX`'s loading indicator showed literal HTML** ("&lt;div class=..."), not a spinner — it passed raw markup to `app.messages.action`, which HTML-escapes its message by design. Replaced with plain text.
+- **`POST /api/user/` (create) and `PUT /api/user/password` had no `message` field** in their response, so the success notification rendered empty. Added messages matching every other route's convention.
+- **The user landing on `/login` with a `?redirect=` had no explanation why** — happens whenever another app's "Log in with SSO" bounces an unauthenticated user through `/oauth/authorize`. Now shows a contextual banner explaining what's happening.
+
+### Changed
+- **Directory: tree view is now the only view** (the list/tree toggle is gone) — simpler, one code path.
+- **Directory: clicking a resource's name opens its detail modal**, not just the pencil/edit icon.
+
+Found via a fresh production install's feedback — see the [theta-env v1.13.0 release](https://github.com/theta42/theta-env/releases) for the full cross-repo summary.
+
+## [1.6.3] - 2026-07-28
+
+### Fixed
+- **Group membership changes (`PUT`/`DELETE /api/group/:group/:uid`) didn't invalidate the User cache**, so `isServiceAccount` (and anything else derived from `memberOf`) could stay stale for up to 5 minutes after a change. This is what caused a real "lost user" report — the account had landed in `app_sso_service_account` (which `users.ejs`'s People tab filters out entirely) and looked exactly like data loss, though nothing was ever deleted.
+
+### Added
+- **A confirmation before adding anyone to `app_sso_service_account`** via the Groups page — that group's whole purpose is to hide an account from the People tab, and there was no guardrail against doing that to a real person by mistake (which is how the bug above happened). Every other group's add-member flow is unchanged.
+
+## [1.6.2] - 2026-07-28
+
+### Fixed
+- **`DELETE /api/oauth/client/:id` 500'd** (`client.remove is not a function`) — `OAuthClient` wraps `@simpleworkjs/orm`'s `Resource` model, whose instance delete method is `.delete()`, not `.remove()`. The Directory Management UI was unaffected (its own delete routes already used `.delete()` correctly); only this legacy/raw API endpoint was broken. Found live against a real deployment's SSO API.
+
+### Added
+- **Regression tests**: PUT/DELETE on `/api/oauth/client/:id` now verify persistence with a follow-up GET rather than trusting the mutating response alone (this is what would have caught the bug above). A static check across all views/client-side scripts fails CI if any native `alert()`/`confirm()`/`prompt()` call appears — these block all further browser events on the page and were fully removed in 1.6.1.
+
+## [1.6.1] - 2026-07-27
+
+### Fixed
+- **Removed every native `alert()`/`confirm()` call**, replacing them with `app.messages.action`/`confirm`/`toast`. Native `confirm()` blocks all further browser events on the page (discovered live, mid browser-verification of the 1.6.0 `app.messages`/`app.modal` adoption, on `directory.ejs`'s "Rotate Client Secret" — it froze the whole tab). Also deleted `app.user.remove`/`app.oauthClient.remove` in `public/js/app.js`, which had native `confirm()` guards and zero callers anywhere in the app.
+
+## [1.6.0] - 2026-07-27
+
+### Changed
+- **Adopted `@simpleworkjs/frontend`'s `app.messages`, `app.modal`, and `app.validate` modules**, replacing the vendored `app.util.actionMessage`/`actionConfirm`/`alert` in `public/lib/js/app-base.js` and the vendored `public/lib/js/val.js`. Message content is now HTML-escaped (the vendored `alert()` this replaces had no escaping), and `app.messages.action` falls back to a page-wide toast when there's no inline `.actionMessage` target. `app.api`/`app.auth`/`app.pubsub`/`app.socket` are untouched — they're app-specific (dual-mode callback/promise API, `auth-token` header injection) and not something the frontend package's generic `app.js` provides.
+
+## [1.5.1] - 2026-07-27
+
+### Fixed
+- **`PUT /api/user/:uid` 500'd with `ObjectClassViolationError` (LDAP `0x41`) when setting `sshPublicKey`** on any account created before the `ldapPublicKey` auxiliary objectClass was added to new-user creation (e.g. the bootstrap `admin` account). `User.update`'s `sshPublicKey` handling and `User.addSSHkey` (`nodejs/models/user_ldap.js`) now add the `ldapPublicKey` objectClass first (ignoring `TypeOrValueExistsError` if already present), the same pattern already used for `dateOfBirth`/`theta42Person`.
+- **OAuth Integration parent dropdown was blank.** `populateHostDropdown` in `nodejs/views/directory.ejs` only built options for `kind === 'host'` and `kind === 'service'` — there was no branch for `kind === 'oauth'`, so choosing "OAuth Integration" in the Directory's add-resource modal left the parent-Service picker empty except the placeholder. Added the missing branch.
+
+## [1.5.0] - 2026-07-26
+
+### Changed
+- **Unified the front-end UI shell across the three theta42 apps.** `views/top.ejs`, `views/bottom.ejs` and `public/lib/js/app-base.js` are now byte-identical in sso-manager-node, proxy and jump-host, so the apps look and behave the same and a shell change lands in one edit per repo instead of three divergent ones. Everything that differs between the apps moved into a new `nodejs/utils/ui.js`, exposed to every render as `ui` via `app.locals`: nav items and the groups that may see them, footer repo/license/docs/Terms links, favicon, the profile and post-logout targets, and whether the update banner exists at all.
+- **One nav-gating model everywhere.** `app-base.js` reveals `.group-required-<cn>` elements for each group the current user is in, read from `GET /api/user/me`. sso-manager-node reports LDAP DNs in `memberOf` and the OIDC clients report CNs in `groups`; both normalise to CNs client-side, and the clients' effective-rights `isAdmin` flag is exposed as a synthetic `admin` group — so one gating model covers a group-based provider and boolean-admin clients without either app learning the other's response shape.
+- **`GET /api/user/me` is fetched once per page load and cached** (`app.auth.loadUser`). The nav, per-view `forceLogin` and every group-gated element read that one promise instead of issuing their own request.
+- `app.auth.isLoggedIn` is dual-mode: it returns a Promise **and** invokes an optional node-style callback, so the async and callback call styles both work against one shared `top.ejs`.
+- `app.auth.forceLogin` no longer uses `$.holdReady` (removed in jQuery 4). An unauthenticated user is redirected to `/login?redirect=<path>`; group requirements are still enforced, and `logOut` now only clears the session, leaving the destination to the caller (`ui.logoutRedirect`).
+- Dependency alignment across all three apps: `jquery` `^4.0.0` and `ejs` `^3.1.10`.
+
+### Fixed
+- **`app.api.delete` dropped its callback when called by `formAJAX`.** `formAJAX` always passes the serialized form as the second argument, so a DELETE-method form's callback landed in the data slot and never ran. `delete` now accepts both `(url, callback)` and `(url, data, callback)`.
+- **`app.api.post`/`put` referenced an undefined `callback2`** and threw when handed a non-function callback. Both are now dual-mode Promise/callback.
+- **The login page's "reveal the card once we know you're logged out" branch threw** (`Cannot read properties of null`) whenever the logged-in check answered before the parser reached that element — which it always did without a stored token. It now runs on DOM ready.
+- **`logInRedirect` on the legacy `/login/<path>` form kept only the path.** The OIDC provider routes an unauthenticated authorization request through `/login/oauth/authorize?client_id=…&state=…`; dropping the query there loses the entire authorization request. The suffix form now preserves its query string.
+
+### Fixed (sso-manager-node)
+- `public/lib/js/val.js` shadowed `message` with `let` inside `validateField`, so a custom rule's return value never reached `validateMessage` and the caller always saw the generic length message. Resolved by adopting the shared validator, which also brings the `target`/`hostname` rules and the real password policy (>= 8 chars, and either 12+ or 3 of 4 character classes) to this app.
+- `public/js/app.js` used `$.isFunction`, removed in jQuery 4.
+
+### Added (sso-manager-node)
+- `GET /api/user/me` now also reports `isAdmin` (membership in `app_sso_admin`), the single effective-rights flag the shared UI shell gates the update banner on. Group-level gating still reads `memberOf`.
+
+### Verified
+- Browser-verified against a full theta-env stack (sso-manager + proxy + jump-host): every top-level page renders with a clean console; nav gating is correct for admin and non-admin; `forceLogin`'s onboarding and group gates fire; `val.js` blocks a weak password and accepts a strong one through a real form submit; the DELETE-method forms work; and the OIDC login round trip (authorize with PKCE -> login -> consent -> callback -> token fragment) completes on both OIDC clients.
+
 ## [1.4.0] - 2026-07-25
 
 ### Security

docs/concepts-accounts.md

@@ -46,7 +46,7 @@ on, just like anyone else's.
 
 A **group** is just a named list of accounts, used to control access. This
 app has a handful of built-in groups that grant admin powers (e.g. only
-people in the `app_sso_admin` group can see the Users/Groups/Integrations
+people in the `app_sso_admin` group can see the Users/Groups/Directory/Executive
 pages at all), but you can also make your own groups for any app you
 connect — say, a group listing everyone who should be allowed into your
 photo server. Once a group exists, add or remove members from the

docs/concepts-oauth-apps.md

@@ -28,7 +28,7 @@ what matters practically is the handful of concepts below.
 ## What's a "client"?
 
 Every app you connect is registered here as a **client** — a single entry
-on the Integrations page representing that one app. Registering a client
+in the Directory representing that one app. Registering a client
 gives you a **Client ID** and **Client Secret**: think of these like a
 username and password, but for the *app itself* rather than for a person.
 You paste them into the other app's own "Single Sign-On" or "OIDC" setup

docs/directory.md

@@ -58,6 +58,8 @@ Resources carry a flexible `metadata` JSON object that can store essential conte
 
 The Directory Management interface provides a **Tree View** toggle that visually nests your resources, making it easy to comprehend your network topography at a glance. You can also filter, search, and sort your entire infrastructure inventory. From the tree view, you can click the green `+` icon next to any resource to instantly add a child resource beneath it.
 
+<a href="images/directory.png" target="_blank"><img src="images/directory.png" alt="Directory & inventory list view" width="80%"></a>
+
 ## Slug conventions
 
 Slugs are the stable identifiers automation keys off, so the tooling around the SSO Manager follows a shared convention:

docs/index.md

@@ -22,10 +22,11 @@ one command).
 
 ## Screenshots
 
-<a href="images/dashboard.png" target="_blank"><img src="images/dashboard.png" alt="Dashboard" width="49%"></a>
+<a href="images/dashboard.png" target="_blank"><img src="images/dashboard.png" alt="Executive dashboard" width="49%"></a>
 <a href="images/users.png" target="_blank"><img src="images/users.png" alt="User list" width="49%"></a>
 <a href="images/groups.png" target="_blank"><img src="images/groups.png" alt="Groups" width="49%"></a>
-<a href="images/oauth-clients.png" target="_blank"><img src="images/oauth-clients.png" alt="OAuth clients" width="49%"></a>
+<a href="images/directory.png" target="_blank"><img src="images/directory.png" alt="Directory & inventory" width="49%"></a>
+<a href="images/oauth-clients.png" target="_blank"><img src="images/oauth-clients.png" alt="OAuth client (edit view)" width="49%"></a>
 
 *(click any screenshot to view full size)*
 

docs/oauth.md

@@ -64,6 +64,8 @@ Clients are managed directly from the **Directory** tab in the web UI. They are
 
 > All client-management actions use the standard Directory API (`/api/directory-admin/resources`) and are gated by the `app_sso_directory_admin` group.
 
+<a href="images/oauth-clients.png" target="_blank"><img src="images/oauth-clients.png" alt="Editing an OAuth client resource" width="80%"></a>
+
 ## Scopes
 
 | Scope | Claims / access |

nodejs/app.js

@@ -61,6 +61,11 @@ app.set('trust proxy', 1);
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 
+// Per-app values for the shared UI shell (views/top.ejs + views/bottom.ejs).
+// Set as an app local so every res.render has it, including routes that don't
+// spread the routers' `values` object.
+app.locals.ui = require('./utils/ui');
+
 // Have express server static content( images, CSS, browser JS) from the public
 // local folder. maxAge is short since this is the app's own JS/CSS, which
 // changes on every deploy and isn't cache-busted/fingerprinted.

nodejs/models/resource.js

@@ -152,10 +152,36 @@ class Resource extends Model {
     owner: { type: 'string' },
     description: { type: 'text' },
     metadata: { type: 'json', default: {} },
+    // Not isRequired: @simpleworkjs/orm has no auto-timestamp hook, so these
+    // are set explicitly by the route handler on every create/update (see
+    // routes/api_directory_admin.js). Existing rows predating this change
+    // simply read back undefined -- callers must render a fallback.
+    created_by: { type: 'string' },
+    created_on: { type: 'integer' },
+    updated_by: { type: 'string' },
+    updated_on: { type: 'integer' },
     edgesAsParent: { type: 'hasMany', model: 'ResourceEdge', remoteKey: 'parentId' },
     edgesAsChild: { type: 'hasMany', model: 'ResourceEdge', remoteKey: 'childId' },
     groups: { type: 'hasMany', model: 'ResourceGroup', remoteKey: 'resourceId' }
   };
+
+  // Walk parent ResourceEdges from resourceId up to the nearest ancestor
+  // whose kind === 'site', returning its slug (or null if none exists -- a
+  // top-level resource with no site parent keeps its unprefixed group name).
+  static async findAncestorSiteSlug(resourceId, visited = new Set()) {
+    if (visited.has(resourceId)) return null;
+    visited.add(resourceId);
+
+    const parentEdges = await ResourceEdge.list({ where: { childId: resourceId } });
+    for (const edge of parentEdges) {
+      const parent = await this.get(edge.parentId);
+      if (!parent) continue;
+      if (parent.kind === 'site') return parent.slug;
+      const found = await this.findAncestorSiteSlug(parent.id, visited);
+      if (found) return found;
+    }
+    return null;
+  }
 }
 
 class ResourceEdge extends Model {

nodejs/models/user_ldap.js

@@ -473,6 +473,19 @@ User.update = async function(data){
 			}
 
 			if(data.sshPublicKey){
+				// Ensure the auxiliary objectClass is present before setting the attribute
+				// -- accounts created before ldapPublicKey was added to addPosixAccount's
+				// objectclass list (e.g. the bootstrap admin) won't have it yet.
+				try {
+					await client.modify(this.dn, [
+						new Change({
+							operation: 'add',
+							modification: new Attribute({ type: 'objectClass', values: ['ldapPublicKey'] }),
+						}),
+					]);
+				} catch(e) {
+					if(e.name !== 'TypeOrValueExistsError') throw e;
+				}
 				await client.modify(this.dn, [
 					new Change({
 						operation: 'replace',
@@ -784,6 +797,19 @@ User.addSSHkey = async function(data) {
 	let result;
 	try {
 		await withClient(async (client) => {
+			// Ensure the auxiliary objectClass is present before setting the attribute
+			// -- accounts created before ldapPublicKey was added to addPosixAccount's
+			// objectclass list (e.g. the bootstrap admin) won't have it yet.
+			try {
+				await client.modify(user.dn, [
+					new Change({
+						operation: 'add',
+						modification: new Attribute({ type: 'objectClass', values: ['ldapPublicKey'] }),
+					}),
+				]);
+			} catch(e) {
+				if (e.name !== 'TypeOrValueExistsError') throw e;
+			}
 			await client.modify(user.dn, [
 				new Change({
 					operation: 'add',

nodejs/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "t42-sso-manager",
-  "version": "1.3.2",
+  "version": "1.7.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "t42-sso-manager",
-      "version": "1.3.2",
+      "version": "1.7.0",
       "license": "MIT",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^7.3.0",
@@ -14,6 +14,7 @@
         "@simpleworkjs/app-stack": "^1.0.0",
         "@simpleworkjs/conf": "^1.2.0",
         "@simpleworkjs/directory-schema": "^1.0.0",
+        "@simpleworkjs/frontend": "^0.2.6",
         "@simpleworkjs/ldap": "^1.0.0",
         "@simpleworkjs/orm": "^0.2.8",
         "bcrypt": "^6.0.0",
@@ -24,7 +25,7 @@
         "express-rate-limit": "^8.5.2",
         "extend": "^3.0.2",
         "jq-repeat": "^2.2.0",
-        "jquery": "^3.7.1",
+        "jquery": "^4.0.0",
         "jsonwebtoken": "^9.0.3",
         "ldapts": "^8.1.8",
         "lru-cache": "^11.5.1",
@@ -1278,6 +1279,15 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@simpleworkjs/frontend": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@simpleworkjs/frontend/-/frontend-0.2.6.tgz",
+      "integrity": "sha512-2uqvEjxyZ2LE+sfhP6rJcEMmqdViazJ3ZkitWJXInPMWF6DiEZuP5MYqBqJvfDko63CCHEt1/ChFQd7Ry85Pzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@simpleworkjs/ldap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@simpleworkjs/ldap/-/ldap-1.0.0.tgz",
@@ -4853,9 +4863,9 @@
       }
     },
     "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-4.0.0.tgz",
+      "integrity": "sha512-TXCHVR3Lb6TZdtw1l3RTLf8RBWVGexdxL6AC8/e0xZKEpBflBsjh9/8LXw+dkNFuOyW9B7iB3O1sP7hS0Kiacg==",
       "license": "MIT"
     },
     "node_modules/js-tokens": {

nodejs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t42-sso-manager",
-  "version": "1.4.0",
+  "version": "1.8.3",
   "description": "A very simple LDAP management and SSO system",
   "author": [
     {
@@ -23,10 +23,11 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^7.3.0",
     "@popperjs/core": "^2.11.8",
-    "@simpleworkjs/conf": "^1.2.0",
     "@simpleworkjs/app-stack": "^1.0.0",
-    "@simpleworkjs/ldap": "^1.0.0",
+    "@simpleworkjs/conf": "^1.2.0",
     "@simpleworkjs/directory-schema": "^1.0.0",
+    "@simpleworkjs/frontend": "^0.2.6",
+    "@simpleworkjs/ldap": "^1.0.0",
     "@simpleworkjs/orm": "^0.2.8",
     "bcrypt": "^6.0.0",
     "bootstrap": "^5.3.8",
@@ -36,7 +37,7 @@
     "express-rate-limit": "^8.5.2",
     "extend": "^3.0.2",
     "jq-repeat": "^2.2.0",
-    "jquery": "^3.7.1",
+    "jquery": "^4.0.0",
     "jsonwebtoken": "^9.0.3",
     "ldapts": "^8.1.8",
     "lru-cache": "^11.5.1",

nodejs/public/js/app.js

@@ -67,13 +67,6 @@ app.user = (function(app){
 		});
 	}
 
-	function remove(args, callack){
-		if(!confirm('Delete '+ args.uid+ 'user?')) return false;
-		app.api.delete('user/'+ args.uid, function(error, data){
-			callack(error, data);
-		});
-	}
-
 	function changePassword(args, callack){
 		app.api.put('users/'+ arg.uid || '', args, function(error, data){
 			callack(error, data);
@@ -110,7 +103,7 @@ app.user = (function(app){
 		return m ? m[1] : dn;
 	}
 
-	return {list, remove, createInvite, setActive, dnToUid};
+	return {list, createInvite, setActive, dnToUid};
 
 })(app);
 
@@ -306,13 +299,6 @@ app.oauthClient = (function(app){
 		});
 	}
 
-	function remove(args, callack){
-		if(!confirm('Delete OAuth client "' + args.client_id + '"?')) return false;
-		app.api.delete('oauth/client/' + args.client_id, function(error, data){
-			callack(error, data);
-		});
-	}
-
 	function update(args, callack){
 		app.api.put('oauth/client/' + args.client_id, args, function(error, data){
 			callack(error, data);
@@ -325,7 +311,7 @@ app.oauthClient = (function(app){
 		});
 	}
 
-	return { list, add, remove, update, rotateSecret };
+	return { list, add, update, rotateSecret };
 })(app);
 
 app.tos = (function(app){
@@ -396,7 +382,7 @@ app.impersonate = (function(app){
 
 app.token = (function(app){
 	function list(name, callack){
-		if($.isFunction(name)){
+		if(typeof name === 'function'){
 			callack = name;
 			name = '';
 		}

nodejs/public/lib/js/app-base.js

@@ -1,3 +1,12 @@
+// Shared client framework for the theta42 apps.
+//
+// This file is byte-identical across sso-manager-node, proxy and jump-host —
+// per-app behaviour comes from the server (the `ui` locals in views/top.ejs and
+// the /api/user/me response), never from edits to this file. Edit all three
+// copies together.
+//
+// jQuery 4 safe: no $.isFunction, no $.holdReady.
+
 var app = {};
 
 app.pubsub = (function(){
@@ -45,7 +54,7 @@ app.pubsub = (function(){
 app.socket = (function(app){
 	// $.getScript('/socket.io/socket.io.js')
 	// <script type="text/javascript" src="/socket.io/socket.io.js"></script>
-	
+
 	var socket;
 	$(document).ready(function(){
 		socket = io({
@@ -75,11 +84,17 @@ app.socket = (function(app){
 app.api = (function(app){
 	var baseURL = '/api/'
 
-	function post(url, data, callback){
-		if (!$.isFunction(callback)) {
-			return new Promise((resolve, reject) => {
+	// post/put/delete are dual-mode: pass a callback for the node-style
+	// (error, data, status) form, or omit it to get a Promise that resolves
+	// with the parsed body and rejects with the error body. get/options return
+	// the jqXHR, which is itself thenable, so `await app.api.get(...)` works.
+
+	function body(method, url, data, callback){
+		if(typeof callback !== 'function'){
+			return new Promise(function(resolve, reject){
 				$.ajax({
-					type: 'POST', url: baseURL+url,
+					type: method,
+					url: baseURL+url,
 					headers: { 'auth-token': app.auth.getToken() },
 					data: JSON.stringify(data),
 					contentType: 'application/json; charset=utf-8',
@@ -88,9 +103,11 @@ app.api = (function(app){
 			});
 		}
 		return $.ajax({
-			type: 'POST',
+			type: method,
 			url: baseURL+url,
-			headers:{ 'auth-token': app.auth.getToken() },
+			headers:{
+				'auth-token': app.auth.getToken()
+			},
 			data: JSON.stringify(data),
 			contentType: "application/json; charset=utf-8",
 			dataType: "json",
@@ -104,40 +121,27 @@ app.api = (function(app){
 		});
 	}
 
+	function post(url, data, callback){
+		return body('POST', url, data, callback);
+	}
+
 	function put(url, data, callback){
-		if (!$.isFunction(callback)) {
-			return new Promise((resolve, reject) => {
-				$.ajax({
-					type: 'PUT', url: baseURL+url,
-					headers: { 'auth-token': app.auth.getToken() },
-					data: JSON.stringify(data),
-					contentType: 'application/json; charset=utf-8',
-					dataType: 'json',
-				}).done(resolve).fail(function(xhr){ reject(xhr.responseJSON || {}); });
-			});
-		}
-		return $.ajax({
-			type: 'PUT',
-			url: baseURL+url,
-			headers:{ 'auth-token': app.auth.getToken() },
-			data: JSON.stringify(data),
-			contentType: "application/json; charset=utf-8",
-			dataType: "json",
-			complete: function(res, text){
-				callback(
-					text !== 'success' ? res.statusText : null,
-					JSON.parse(res.responseText),
-					res.status
-				);
-			}
-		});
+		return body('PUT', url, data, callback);
 	}
 
-	function remove(url, callback){
-		if (!$.isFunction(callback)) {
-			return new Promise((resolve, reject) => {
+	// Called both as (url, callback) and — from formAJAX, which always passes
+	// the serialized form as the second argument — as (url, data, callback).
+	// No request body is sent either way.
+	function remove(url, data, callback){
+		if(typeof data === 'function'){
+			callback = data;
+			data = undefined;
+		}
+		if(typeof callback !== 'function'){
+			return new Promise(function(resolve, reject){
 				$.ajax({
-					type: 'DELETE', url: baseURL+url,
+					type: 'DELETE',
+					url: baseURL+url,
 					headers: { 'auth-token': app.auth.getToken() },
 					contentType: 'application/json; charset=utf-8',
 					dataType: 'json',
@@ -147,7 +151,9 @@ app.api = (function(app){
 		return $.ajax({
 			type: 'DELETE',
 			url: baseURL+url,
-			headers:{ 'auth-token': app.auth.getToken() },
+			headers:{
+				'auth-token': app.auth.getToken()
+			},
 			contentType: "application/json; charset=utf-8",
 			dataType: "json",
 			complete: function(res, text){
@@ -202,7 +208,10 @@ app.api = (function(app){
 })(app)
 
 app.auth = (function(app){
-	var user = {};
+	// One in-flight/cached GET /api/user/me per page load. Every gating
+	// decision (nav items, per-view forceLogin, group-required elements) reads
+	// this same promise instead of re-fetching.
+	var userPromise = null;
 
 	function setToken(token){
 		localStorage.setItem('APIToken', token);
@@ -216,35 +225,70 @@ app.auth = (function(app){
 		try{
 			return await app.api.get('user/me');
 		}catch(error){
-			if(error?.status === 401) return null;
-			throw error
+			if(error && error.status === 401) return null;
+			throw error;
 		}
 	}
 
+	// Cached current user, or false when there's no token at all. Callers that
+	// need a fresh copy (after a login or a profile change) pass force.
+	function loadUser(force){
+		if(force || !userPromise){
+			userPromise = getToken() ? getUser() : Promise.resolve(null);
+			userPromise = userPromise.then(function(user){
+				app.auth.user = app.auth.perms = user || null;
+				return user;
+			});
+		}
+		return userPromise;
+	}
+
+	// The apps report group membership two ways: sso-manager-node returns LDAP
+	// DNs in `memberOf`, the OIDC clients return plain CNs in `groups`. Both
+	// normalise to a list of CNs. `isAdmin` (the clients' effective-rights flag)
+	// is exposed as a synthetic `admin` group so one gating model covers both.
+	function groupCNs(user){
+		var raw = (user && (user.memberOf || user.groups)) || [];
+		if(!Array.isArray(raw)) raw = [raw];
+		var names = raw.map(function(group){
+			return String(group).split(',')[0].replace(/^cn=/i, '');
+		});
+		if(user && user.isAdmin && names.indexOf('admin') === -1) names.push('admin');
+		return names;
+	}
+
 	async function memberOf(groupNameToFind, user){
-		try{
-			user = user || await app.auth.asyncUser;
-			groupNameToFind = Array.isArray(groupNameToFind) ? groupNameToFind : [groupNameToFind]
+		user = user || await loadUser();
+		if(!user) return false;
+		groupNameToFind = Array.isArray(groupNameToFind) ? groupNameToFind : [groupNameToFind];
 
-			for(let group of user.memberOf){
-				group = group.split(',ou=groups')[0].replace('cn=', '');
-				if(groupNameToFind.includes(group)) return true;
-			}
-
-			return false;
-
-		}catch(error){
-			throw(error);
-		}
+		return groupCNs(user).some(function(group){
+			return groupNameToFind.includes(group);
+		});
 	}
 
-	async function isLoggedIn(){
-		if(getToken()){
-			user = await app.auth.asyncUser;
-			return user;
-		}else{
-			return false;
+	// True when the logged-in user is a global admin (per user/me). Sync — only
+	// meaningful once isLoggedIn/forceLogin has resolved.
+	function isAdmin(){
+		return !!(app.auth.perms && app.auth.perms.isAdmin);
+	}
+
+	// Dual-mode: returns a Promise resolving to the user (or false), and calls
+	// an optional node-style callback with the same result.
+	function isLoggedIn(callback){
+		var promise = loadUser().then(function(user){
+			return user || false;
+		});
+
+		if(typeof callback === 'function'){
+			promise.then(function(user){
+				callback(null, user);
+			}, function(error){
+				callback(error, false);
+			});
 		}
+
+		return promise;
 	}
 
 	function logIn(args, callback){
@@ -252,62 +296,125 @@ app.auth = (function(app){
 			if(data.login){
 				setToken(data.token);
 			}
+			loadUser(true);
 			callback(error, !!data.token);
 		});
 	}
 
+	// Clears the session only — the caller decides where to go next (the nav's
+	// Log Out button uses ui.logoutRedirect).
 	function logOut(callback){
 		localStorage.removeItem('APIToken');
-		location.replace(`/login${location.href.replace(location.origin, '')}`);
-		callback();
+		userPromise = null;
+		app.auth.user = app.auth.perms = null;
+		if(typeof callback === 'function') callback();
 	}
 
+	// Constrain a redirect target to a same-origin absolute path. Rejects
+	// absolute URLs (open redirect), protocol-relative "//host" and "/\host",
+	// and non-path schemes like "javascript:" (XSS). Falls back to "/".
+	function safeInternalPath(path){
+		if(typeof path !== 'string' || path.charAt(0) !== '/'
+				|| path.charAt(1) === '/' || path.charAt(1) === '\\'){
+			return '/';
+		}
+		return path;
+	}
+
+	// Consume an app token handed back by the OIDC callback via the URL
+	// fragment (#token=…&redirect=…). Stores it, strips the fragment, and
+	// forwards to the intended page. Returns true if a token was consumed.
+	function consumeTokenFragment(){
+		if(!location.hash) return false;
+		var params = new URLSearchParams(location.hash.replace(/^#/, ''));
+		var token = params.get('token');
+		if(!token) return false;
+
+		setToken(token);
+		// redirect comes from the URL fragment (attacker-controllable); only
+		// allow a same-origin path so it can't become an open redirect / XSS.
+		var redirect = safeInternalPath(params.get('redirect') || '/');
+		// Drop the token from the address bar before navigating on.
+		history.replaceState(null, '', location.pathname + location.search);
+		window.location.href = redirect;
+		return true;
+	}
+
+	// Page-level gate. jQuery 4 removed $.holdReady, so an unauthenticated or
+	// unauthorised user is kept off the page by a redirect / an error panel
+	// rather than by pausing document ready.
+	//
+	// `requiredGroups` is a group CN or an OR-list of them; the synthetic
+	// `admin` group covers the OIDC clients' isAdmin flag.
 	async function forceLogin(requiredGroups){
-		$.holdReady(true);
-		if(!await app.auth.isLoggedIn()) app.auth.logOut(function(){});
+		var user = await loadUser();
+
+		if(!user){
+			logOut(function(){});
+			location.replace('/login?redirect=' + encodeURIComponent(
+				location.pathname + location.search
+			));
+			return false;
+		}
 
 		if(user.onboardingRequired && location.pathname !== '/onboarding'){
 			location.replace('/onboarding');
+			return false;
 		}
 
-		if(requiredGroups){
-			if(!await memberOf(requiredGroups)){
-				console.log("Does not have permission!!!")
-				app.util.actionMessage(
-					`<h1>
-						<i class="fa-solid fa-triangle-exclamation"></i>
-						<b>You do not have permission to be here.</b>
-						<i class="fa-solid fa-triangle-exclamation"></i>
-					</h1>`,
-					$('#spa-shell'),
-					'danger',
-				);
-				throw new Error("User does not have permission");
-			}
+		if(requiredGroups && !await memberOf(requiredGroups, user)){
+			app.messages.action(
+				`<h1>
+					<i class="fa-solid fa-triangle-exclamation"></i>
+					<b>You do not have permission to be here.</b>
+					<i class="fa-solid fa-triangle-exclamation"></i>
+				</h1>`,
+				$('#spa-shell'),
+				'danger',
+			);
+			throw new Error("User does not have permission");
 		}
 
-		$.holdReady(false);	
+		return user;
 	}
 
+	// Where to go after a successful login: the ?redirect= query param, or the
+	// legacy /login/<path> suffix form, constrained to a same-origin path. The
+	// suffix form keeps its query string — /login/oauth/authorize?client_id=…
+	// is how the OIDC provider sends an unauthenticated user through login.
 	function logInRedirect(){
-		window.location.href = location.href.replace(location.origin+'/login', '') || '/'
+		var params = new URLSearchParams(location.search);
+		var target = params.get('redirect')
+			|| location.href.replace(location.origin + '/login', '')
+			|| '/';
+		window.location.href = safeInternalPath(target);
 	}
 
 	return {
 		getToken: getToken,
 		setToken: setToken,
+		getUser: getUser,
+		loadUser: loadUser,
+		groupCNs: groupCNs,
+		memberOf: memberOf,
+		isAdmin: isAdmin,
 		isLoggedIn: isLoggedIn,
+		safeInternalPath: safeInternalPath,
+		consumeTokenFragment: consumeTokenFragment,
+		user: null,
+		perms: null,
 		logIn: logIn,
 		logOut: logOut,
 		forceLogin,
 		logInRedirect,
-		getUser,
-		memberOf,
 	}
 
 })(app);
-app.auth.asyncUser = app.auth.getUser();
 
+// Back-compat alias for views that awaited the cached user directly.
+Object.defineProperty(app.auth, 'asyncUser', {
+	get: function(){ return app.auth.loadUser(); },
+});
 
 app.user = (function(app){
 	function list(callback){
@@ -338,6 +445,72 @@ app.user = (function(app){
 
 })(app);
 
+// Local (app-managed) permissions and groups. Only the OIDC-client apps serve
+// these endpoints; the calls are inert elsewhere.
+app.permission = (function(app){
+	function list(callback){
+		app.api.get('permission/', function(error, data){
+			callback(error, data);
+		});
+	}
+
+	function subjects(callback){
+		app.api.get('permission/subjects', function(error, data){
+			callback(error, data);
+		});
+	}
+
+	function add(args, callback){
+		app.api.post('permission/', args, function(error, data){
+			callback(error, data);
+		});
+	}
+
+	function remove(id, callback){
+		app.api.delete('permission/' + encodeURIComponent(id), function(error, data){
+			callback(error, data);
+		});
+	}
+
+	return {list, subjects, add, remove};
+
+})(app);
+
+app.group = (function(app){
+	function list(callback){
+		app.api.get('group/', function(error, data){
+			callback(error, data);
+		});
+	}
+
+	function add(args, callback){
+		app.api.post('group/', args, function(error, data){
+			callback(error, data);
+		});
+	}
+
+	function remove(name, callback){
+		app.api.delete('group/' + encodeURIComponent(name), function(error, data){
+			callback(error, data);
+		});
+	}
+
+	function addMember(name, username, callback){
+		app.api.post('group/' + encodeURIComponent(name) + '/members', {username}, function(error, data){
+			callback(error, data);
+		});
+	}
+
+	function removeMember(name, username, callback){
+		app.api.delete('group/' + encodeURIComponent(name) + '/members/' + encodeURIComponent(username), function(error, data){
+			callback(error, data);
+		});
+	}
+
+	return {list, add, remove, addMember, removeMember};
+
+})(app);
+
 app.util = (function(app){
 
 	function getUrlParameter(name){
@@ -347,65 +520,15 @@ app.util = (function(app){
 		return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
 	};
 
-	function actionMessage(message, $targetPassed, type, callback){
-		message = message || '';
-
-		let $target = $targetPassed.closest('div.card').find('.actionMessage');
-		if(!$target.length) $target = $($targetPassed.find('.actionMessage')[0]);
-
-		type = type || 'info';
-		callback = callback || function(){};
-
-		if($target.html() === message) return;
-
-		if($target.html()){
-			$target.slideUp('fast', function(){
-				$target.html('')
-				$target.removeClass (function(index, className){
-					return (className.match (/(^|\s)bg-\S+/g) || []).join(' ');
-				});
-				if(message) return actionMessage(message, $target, type, callback);
-				$target.hide()
-			})
-		}else{
-			if(type) $target.addClass('bg-' + type);
-
-			if(!message.includes('<button')) message += `
-				<button class="action-close btn btn-sm btn-outline-dark float-end">
-					<i class="fa-solid fa-xmark"></i>
-				</button>
-			`
-			$target.html(message).slideDown('fast');
-		}
-		setTimeout(callback,10)
-	}
-
-	function actionConfirm(message, $target, type, callback){
-		return new Promise((resolve, reject) =>{
-			let id = crypto.randomUUID();
-			message = `
-				<h4 class"align-middle" >
-					<i class="fa-solid fa-triangle-exclamation"></i>
-					<b>${message}</b>
-					<span class="float-end">
-						<button type="button" class="btn btn-success confirm-${id}" data-confirm="true">
-							<i class="fa-solid fa-circle-check"></i>
-							Confirm
-						</button>
-						<button type="button" class="btn btn-danger confirm-${id}">
-							<i class="fa-solid fa-circle-stop"></i>
-							Cancel
-						</button>
-					</span>
-				</h4>
-			`
-			actionMessage(message, $target, type);
-			$("body").on('click', `.confirm-${id}`, function(){
-				actionMessage('', $target, type);
-				resolve(!!$(this).data('confirm'));
-			});
-		});
-
+	// escapeHtml/actionMessage/actionConfirm moved to @simpleworkjs/frontend's
+	// app.util.escapeHtml and app.messages.action/confirm.
+	function escapeHtml(s){
+		return String(s == null ? '' : s)
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;')
+			.replace(/'/g, '&#39;');
 	}
 
 	$.fn.serializeObject = function() {
@@ -415,8 +538,11 @@ app.util = (function(app){
 		for (let {name, value} of $(this).serializeArray()) {
 			console.log(name, value)
 			if (obj[name] === undefined) {
-				if (!value 
+				if (!value
 					&& !$(this).parent().find(`[name="${name}"]`).attr('value')
+					// Keep empty <textarea>s so a cleared field is submitted (and
+					// can reset a list, e.g. the per-host IP/header controls).
+					&& !$(this).filter(`textarea[name="${name}"]`).length
 				){
 					continue;
 				}
@@ -461,26 +587,40 @@ app.util = (function(app){
 	return {
 		downloadFile: downloadFile,
 		getUrlParameter: getUrlParameter,
-		actionMessage: actionMessage,
-		actionConfirm,
+		escapeHtml: escapeHtml,
 	}
 })(app);
 
-$( document ).ready(async function(){
+// Reveal every .group-required-<cn> element the current user's groups entitle
+// them to. Elements carrying .group-required start hidden (styles.css), so a
+// user who is in no groups — or who isn't logged in — simply never sees them.
+app.auth.applyGroupVisibility = function(user){
+	var groups = app.auth.groupCNs(user);
+	if(!groups.length) return;
 
-	// Show content if the user has the correct group
-	for(let group of (await app.auth.asyncUser)?.memberOf || []){
+	var style = document.getElementById('group-required-rules');
+	if(!style){
+		style = document.createElement('style');
+		style.id = 'group-required-rules';
+		document.head.appendChild(style);
+	}
+
+	for(var group of groups){
 		try{
-			group = group.split(',ou=groups')[0].replace('cn=', '');
-
-			const sheet = document.styleSheets[0];
-			const selector = `.group-required-${group}`;
-			const cssText = `${selector} { display: revert !important; }`;
-			sheet.insertRule(cssText, sheet.cssRules.length);
+			style.sheet.insertRule(
+				`.group-required-${CSS.escape(group)} { display: revert !important; }`,
+				style.sheet.cssRules.length
+			);
 		}catch(error){
-			
+			// A group whose CN isn't a usable CSS identifier just gates nothing.
 		}
 	}
+};
+
+$( document ).ready(async function(){
+
+	// Show content the user's groups entitle them to.
+	app.auth.applyGroupVisibility(await app.auth.loadUser());
 
 	$('div.row').fadeIn('slow'); //show the page
 
@@ -502,9 +642,9 @@ $( document ).ready(async function(){
 		$(this).closest('.card').slideUp('fast');
 	});
 
-	$('.actionMessage').on('click', 'button.action-close', function(event){
-		app.util.actionMessage(null, $(this));
-	});
+	// action-close click handling is wired by @simpleworkjs/frontend's
+	// app.messages.js (delegated on document, so it also covers messages
+	// rendered after this ready handler runs).
 
 	setInterval(()=>{
 		$('.momentFromNow').each((idx, el)=>{
@@ -535,20 +675,17 @@ function formAJAX(btn){
 	var method = ($form.attr('method') || 'post').toLowerCase();
 
 	if($form.validate && !$form.validate()){
-		app.util.actionMessage('Please fix the form errors.', $form, 'danger')
+		app.messages.action('Please fix the form errors.', $form, 'danger')
 		return false;
 	}
-	
-	app.util.actionMessage( 
-		`<div class="spinner-border" role="status">
-			<span class="visually-hidden">Loading...</span>
-		</div>`,
-		$form,
-		'info'
-	);
+
+	// Plain text: app.messages.action HTML-escapes its message (by design,
+	// see @simpleworkjs/frontend), so raw markup like a spinner <div> would
+	// render literally instead of as an element.
+	app.messages.action('Saving…', $form, 'info');
 
 	app.api[method]($form.attr('action'), formData, function(error, data){
-		app.util.actionMessage(data.message, $form, error ? 'danger' : 'success'); //re-populate table
+		app.messages.action(data.message, $form, error ? 'danger' : 'success'); //re-populate table
 		$form.validateClear();
 		if(!error){
 			$form.trigger("reset");
@@ -556,7 +693,7 @@ function formAJAX(btn){
 		}else{
 			console.log('formAJAX res error', error, data)
 			if(data && data.name === 'ObjectValidateError'){
-				app.util.actionMessage('Please fix the form errors', $form, 'danger'); //re-populate table
+				app.messages.action('Please fix the form errors', $form, 'danger'); //re-populate table
 			}
 			if(data && data.keys){
 				console.log('form key errors', data.keys)
@@ -567,4 +704,3 @@ function formAJAX(btn){
 		}
 	});
 }
-

nodejs/public/lib/js/val.js

@@ -1,133 +0,0 @@
-( function( $ ) {
-	var settings = {
-		rule: {
-			eq: function(value, options){
-				var compare = $('[name=' + options + ']').val();
-	 
-				if ( value != compare ) {
-					return "Miss-match";
-				}
-			}
-		},
-	};
-
-	$.fn.validate = function(event) {
-		// let	thisSettings = $.extend(true, settings, settingsObj);
-		let hasErrors = false;
-
-		if(this.is('[validate]')) return this.validateField(event);
-
-		if(!this.attr('isValid')){
-			console.log('adding reset event')
-			this.on('reset', function(){
-				$(this).attr('isValid', false);
-				$(this).validateClear();
-			})
-		}
-
-		this.find('[validate]').each(function(){
-			if(!$(this).validateField()) hasErrors = true;
-		});
-		
-		this.attr('isValid', !hasErrors);
-
-		if(hasErrors && event) event.preventDefault();
-
-		return !hasErrors;
-	};
-
-	$.fn.validateClear = function(){
-		$(this).find('input').each(function(){
-			$(this).removeClass('is-invalid');
-			$(this).removeClass('is-valid');
-		})
-	}
-
-	$.fn.validateField = function(){
-		var attr = this.attr('validate').split(':'); //array of params
-		var	rule = attr[0];
-		var	options = attr[1];
-		var	value = this.val(); //link to input value
-		var message;
-
-		if(this.prop('disabled')) return true;
-
-
-		//checks if field is required, and length 
-		if(!isNaN(options) && value.length < options){
-			message = `Must be ${options} characters`;
-		}
-
-		//checks if empty to stop processing 
-		if(!isNaN(options) && value.length === 0) {
-		}else if(rule in settings.rule){
-			let message = settings.rule[rule].apply(this, [value, options]);
-		}
-
-		this.validateMessage(message)
-		return !message;
-	}
-
-	$.fn.validateMessage = function(message){
-		if(message && message !== true){
-			this.closest('.form-group').find('b.invalid-feedback').html(message);
-			this.addClass('is-invalid');
-		}else{
-			this.removeClass('is-invalid');
-			this.addClass('is-valid');
-		}
-		return this;
-	};
-
-	jQuery.extend({
-		validateSettings: function( settingsObj ) {
-			$.extend( true, settings, settingsObj );
-		},
-
-		validateInit: function( ettingsObj ) {
-			$( '[action]' ).on( 'submit', function ( event, settingsObj ){
-				$( this ).validate( settingsObj, event );
-			});
-		}
-	});
-
-}( jQuery ));
-
-$.validateSettings({
-	rule:{
-		ip: function( value ) {
-			value = value.split( '.' );
- 
-			if ( value.length != 4 ) {
-				return "Malformed IP";
-			}
- 
-			$.each( value, function( key, value ) {
-				if( value > 255 || value < 0 ) {
-					return "Malformed IP";
-				}
-			});
-		},
-
-		host: function( value ) {
-			var reg = /^(?=.{1,255}$)[0-9A-Za-z](?:(?:[0-9A-Za-z]|-){0,61}[0-9A-Za-z])?(?:\.[0-9A-Za-z](?:(?:[0-9A-Za-z]|-){0,61}[0-9A-Za-z])?)*\.?$/;
-			if ( reg.test( value ) === false ) {
-				return "Invalid";
-			}
-		},
-
-		user: function( value ) {
-			var reg = /^[a-z0-9\_\-\@\.]{1,32}$/;
-			if ( reg.test( value ) === false ) {
-				return "Invalid";
-			}
-		},
- 
-		password: function( value ) {
-			var reg = /^(?=[^\d_].*?\d)\w(\w|[!@#$%]){1,48}/;
-			if ( reg.test( value ) === false ) {
-				return "Weak password, Try again";
-			}
-		}
-	}
-});

nodejs/routes/api_directory_admin.js

@@ -43,25 +43,33 @@ router.post('/resources', async (req, res, next) => {
     }
     
     req.body.owner = req.body.owner || req.user.uid;
-    
+
+    const now = Date.now();
+    req.body.created_by = req.body.created_by || req.user.uid;
+    req.body.created_on = now;
+    req.body.updated_by = req.user.uid;
+    req.body.updated_on = now;
+
     let r;
     if (req.body.kind === 'oauth') {
       const { OAuthClient } = require('../models/oauth_client');
-      // Pass created_by explicitly for the wrapper
+      // Pass created_by explicitly for the wrapper (overrides the generic
+      // assignment above -- this is OAuthClient-wrapper-specific behavior).
       req.body.created_by = req.body.owner;
       // In the UI we might pass slug, but OAuthClient wrapper expects name
       r = await OAuthClient.add(req.body);
     } else {
       r = await Resource.create(req.body);
     }
-    
+
     if ((r.kind === 'host' || r.kind === 'service' || r.kind === 'oauth') && req.body.hostId) {
       await ResourceEdge.create({ parentId: req.body.hostId, childId: r.id, relation: r.kind === 'oauth' ? 'oauth' : 'hosts' });
     }
-    
+
     if (r.kind === 'host' || r.kind === 'service') {
+      const siteSlug = await Resource.findAncestorSiteSlug(r.id);
       const createGroup = async (suffix, accessLevel) => {
-        const cn = `${r.slug}_${suffix}`;
+        const cn = siteSlug ? `${siteSlug}_${r.slug}_${suffix}` : `${r.slug}_${suffix}`;
         try {
           await Group.add({
             name: cn,
@@ -103,7 +111,10 @@ router.put('/resources/:id', async (req, res, next) => {
         r = await Resource.get(req.params.id);
     }
     if (!r) return res.status(404).json({ error: 'Not found' });
-    
+
+    req.body.updated_by = req.user.uid;
+    req.body.updated_on = Date.now();
+
     if (req.body.kind === 'host' && !req.body.hostId) {
       return res.status(400).json({ error: 'Hosts must have a parent Site or Host' });
     }

nodejs/routes/group.js

@@ -82,8 +82,13 @@ router.put('/:group/:uid', async function(req, res, next){
 
 		var group = await Group.get(req.params.group);
 		var user = await User.get(req.params.uid);
+		const results = await group.addMember(user);
+		// Group membership feeds directly into cached-User-derived state
+		// (isServiceAccount, isAdmin, group-gated nav/UI) -- without this,
+		// a membership change here is invisible for up to the cache's TTL.
+		User.clearCache();
 		return res.json({
-			results: await group.addMember(user),
+			results,
 			message: `Added user ${req.params.uid} to ${req.params.group} group.`
 		});
 	}catch(error){
@@ -98,8 +103,10 @@ router.delete('/:group/:uid', async function(req, res, next){
 
 		var group = await Group.get(req.params.group);
 		var user = await User.get(req.params.uid);
+		const results = await group.removeMember(user);
+		User.clearCache();
 		return res.json({
-			results: await group.removeMember(user),
+			results,
 			message: `Removed user ${req.params.uid} from ${req.params.group} group.`
 		});
 	}catch(error){

nodejs/routes/index.js

@@ -28,7 +28,7 @@ const values ={
 // every deploy and isn't cache-busted/fingerprinted.
 mountStaticModules(router, {
   root: path.join(__dirname, '..'),
-  deps: ['bootstrap', 'mustache', 'jquery', '@fortawesome', 'moment', '@popper', 'jq-repeat'],
+  deps: ['bootstrap', 'mustache', 'jquery', '@fortawesome', 'moment', '@popper', 'jq-repeat', '@simpleworkjs/frontend'],
 });
 
 // Public health endpoint for container/orchestration healthchecks.
@@ -60,6 +60,14 @@ router.get('/directory', function(req, res) {
   res.render('directory', {...values});
 });
 
+// Linkable deep-link to a single resource's modal, e.g. from the resource
+// modal's app.modal `url` option. Mirrors /users/:uid below: no server-side
+// use of :slug at all -- the client reads location.pathname itself and opens
+// the matching resource's modal once the page's own data has loaded.
+router.get('/directory/:slug', function(req, res) {
+  res.render('directory', {...values});
+});
+
 // Route removed since it's now in directory
 
 router.get('/onboarding', async function(req, res, next) {

nodejs/routes/oauth_client.js

@@ -97,7 +97,7 @@ router.delete('/:client_id', async function(req, res, next) {
 		await permission.byGroup(req.user, [ADMIN_GROUP]);
 
 		const client = await OAuthClient.get(req.params.client_id);
-		await client.remove();
+		await client.delete();
 
 		return res.json({
 			client_id: req.params.client_id,

nodejs/routes/user.js

@@ -49,7 +49,7 @@ router.post('/', async function(req, res, next){
 			}
 		}
 
-		return res.json({results: user});
+		return res.json({results: user, message: `User ${user.uid} created.`});
 	}catch(error){
 		next(error);
 	}
@@ -74,7 +74,17 @@ router.delete('/:uid', async function(req, res, next){
 
 router.get('/me', async function(req, res, next){
 	try{
-		return res.json(await User.get({uid: req.user.uid}));
+		const user = JSON.parse(JSON.stringify(await User.get({uid: req.user.uid})));
+
+		// The shared client framework gates the UI on a single effective-rights
+		// flag (the OIDC-client apps send the same key). Here "admin" means
+		// membership in app_sso_admin; group-level gating still reads memberOf.
+		const groups = (user.memberOf || []).map(function(dn){
+			return String(dn).split(',')[0].replace(/^cn=/i, '');
+		});
+		user.isAdmin = groups.includes('app_sso_admin');
+
+		return res.json(user);
 	}catch(error){
 		next(error);
 	}
@@ -97,7 +107,7 @@ router.put('/password', async function(req, res, next){
 		const verif = await UserVerification.getOrCreate(req.user.uid);
 		await verif.update({ password_must_change: false });
 		User.clearCache();
-		return res.json({results: result});
+		return res.json({results: result, message: 'Password changed.'});
 	}catch(error){
 		next(error);
 	}

nodejs/tests/group.test.js

@@ -151,6 +151,32 @@ describe('Groups — member management', () => {
 		const members = Array.isArray(group.member) ? group.member : [group.member];
 		expect(members.some(dn => dn && dn.includes(MEMBER_UID))).toBe(false);
 	});
+
+	// Regression: adding/removing a member here didn't clear User's LRU
+	// cache (ttl 5 minutes), so isServiceAccount -- derived from
+	// app_sso_service_account membership at GET /api/user/:uid time -- could
+	// stay wrong for up to 5 minutes after the group change. In production
+	// this hid a real person's account from the Users page's "People" tab
+	// (it filters out anything with isServiceAccount) for however long the
+	// stale cache entry lived, which looked exactly like the account had
+	// vanished.
+	test('PUT app_sso_service_account/:uid immediately flips isServiceAccount (no stale cache)', async () => {
+		const added = await request(app)
+			.put(`/api/group/app_sso_service_account/${MEMBER_UID}`)
+			.set('auth-token', token);
+		expect(added.status).toBe(200);
+
+		const afterAdd = await request(app).get(`/api/user/${MEMBER_UID}`).set('auth-token', token);
+		expect(afterAdd.body.results.isServiceAccount).toBeTruthy();
+
+		const removed = await request(app)
+			.delete(`/api/group/app_sso_service_account/${MEMBER_UID}`)
+			.set('auth-token', token);
+		expect(removed.status).toBe(200);
+
+		const afterRemove = await request(app).get(`/api/user/${MEMBER_UID}`).set('auth-token', token);
+		expect(afterRemove.body.results.isServiceAccount).toBeFalsy();
+	});
 });
 
 describe('Groups — owner management', () => {

nodejs/tests/no_native_dialogs.test.js

@@ -0,0 +1,45 @@
+'use strict';
+
+// Regression guard: native alert()/confirm()/prompt() calls block all further
+// browser events on the page (found live, mid browser-automation testing, on
+// directory.ejs's "Rotate Client Secret" — it froze the tab entirely) and are
+// visually inconsistent with the rest of the UI. Every call site was removed
+// in favor of app.messages.action/confirm/toast and app.modal.open; this test
+// keeps it that way.
+
+const fs = require('fs');
+const path = require('path');
+
+const ROOTS = ['views', 'public/js', 'public/lib/js'].map((d) => path.join(__dirname, '..', d));
+
+// Matches a bare alert(/confirm(/prompt( call, but not app.messages.*,
+// app.modal.*, or identifiers merely containing these words (e.g.
+// "confirmation", ".confirmed").
+const NATIVE_DIALOG_RE = /(^|[^.\w$])(alert|confirm|prompt)\s*\(/g;
+
+function walk(dir) {
+	let files = [];
+	if (!fs.existsSync(dir)) return files;
+	for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+		const full = path.join(dir, entry.name);
+		if (entry.isDirectory()) files = files.concat(walk(full));
+		else if (/\.(ejs|js)$/.test(entry.name)) files.push(full);
+	}
+	return files;
+}
+
+test('no view or client-side script calls native alert()/confirm()/prompt()', () => {
+	const offenders = [];
+	for (const root of ROOTS) {
+		for (const file of walk(root)) {
+			const src = fs.readFileSync(file, 'utf8');
+			let m;
+			NATIVE_DIALOG_RE.lastIndex = 0;
+			while ((m = NATIVE_DIALOG_RE.exec(src))) {
+				const line = src.slice(0, m.index).split('\n').length;
+				offenders.push(`${path.relative(path.join(__dirname, '..'), file)}:${line} — ${m[2]}(`);
+			}
+		}
+	}
+	expect(offenders).toEqual([]);
+});

nodejs/tests/oauth.test.js

@@ -69,6 +69,51 @@ describe('OAuth client management API — /api/oauth/client', () => {
 		expect(res.body.results).not.toHaveProperty('client_secret_hash');
 	});
 
+	test('PUT persists — a changed name survives a fresh GET', async () => {
+		const created = await request(app)
+			.post('/api/oauth/client/')
+			.set('auth-token', token)
+			.send({ name: 'put-persist-test', redirect_uris: REDIRECT_URI });
+		expect(created.status).toBe(200);
+		const id = created.body.results.client_id;
+
+		const updated = await request(app)
+			.put(`/api/oauth/client/${id}`)
+			.set('auth-token', token)
+			.send({ name: 'put-persist-test-renamed' });
+		expect(updated.status).toBe(200);
+		expect(updated.body.results.name).toBe('put-persist-test-renamed');
+
+		const fetched = await request(app).get(`/api/oauth/client/${id}`).set('auth-token', token);
+		expect(fetched.status).toBe(200);
+		expect(fetched.body.results.name).toBe('put-persist-test-renamed');
+
+		await request(app).delete(`/api/oauth/client/${id}`).set('auth-token', token);
+	});
+
+	// Regression: this route called client.remove(), but OAuthClient wraps
+	// @simpleworkjs/orm's Resource model, whose instance method is .delete()
+	// — .remove() doesn't exist on it (unlike the model-redis Tables
+	// elsewhere in this app, e.g. api_token.js, which really do have
+	// .remove()). The route's try/catch turned the resulting TypeError into
+	// a plain 500 JSON response rather than a thrown exception, so every
+	// prior DELETE call in this file's cleanup hooks silently "succeeded"
+	// from Jest's point of view while leaving the client un-deleted.
+	test('DELETE persists — the client is actually gone, not just a 200', async () => {
+		const created = await request(app)
+			.post('/api/oauth/client/')
+			.set('auth-token', token)
+			.send({ name: 'delete-persist-test', redirect_uris: REDIRECT_URI });
+		expect(created.status).toBe(200);
+		const id = created.body.results.client_id;
+
+		const deleted = await request(app).delete(`/api/oauth/client/${id}`).set('auth-token', token);
+		expect(deleted.status).toBe(200);
+
+		const fetched = await request(app).get(`/api/oauth/client/${id}`).set('auth-token', token);
+		expect(fetched.status).toBe(404);
+	});
+
 	test('list then rotate a client by its returned client_id (the bootstrap path)', async () => {
 		// Reproduces exactly what the theta-env bootstrap does: create, list,
 		// find by name, rotate by the client_id from the list response. Uses a
@@ -90,7 +135,11 @@ describe('OAuth client management API — /api/oauth/client', () => {
 		expect(rotated.status).toBe(200);
 		expect(rotated.body.client_secret).toBeTruthy();
 
-		await request(app).delete(`/api/oauth/client/${found.client_id}`).set('auth-token', token);
+		const deleted = await request(app).delete(`/api/oauth/client/${found.client_id}`).set('auth-token', token);
+		expect(deleted.status).toBe(200);
+
+		const afterDelete = await request(app).get(`/api/oauth/client/${found.client_id}`).set('auth-token', token);
+		expect(afterDelete.status).toBe(404);
 	});
 
 	test('GET /:id unknown id returns 404, not 500', async () => {

nodejs/tests/resource_site_slug.test.js

@@ -0,0 +1,63 @@
+'use strict';
+
+// findAncestorSiteSlug has no LDAP dependency (unlike most of this test
+// suite, which needs a live LDAP server) -- it's pure Resource/ResourceEdge
+// graph traversal against the ORM, so it's tested directly here rather than
+// through the (LDAP-gated) directory-admin HTTP routes.
+
+const { initORM } = require('../models');
+const { Resource, ResourceEdge } = require('../models/resource');
+
+const marker = 'test_site_slug_' + Date.now();
+const created = [];
+
+async function makeResource(kind, name) {
+	const r = await Resource.create({ kind, name, slug: `${marker}_${name}` });
+	created.push(r);
+	return r;
+}
+
+beforeAll(async () => {
+	await initORM();
+});
+
+afterAll(async () => {
+	for (const r of created) {
+		try { await r.delete(); } catch (_) {}
+	}
+});
+
+describe('Resource.findAncestorSiteSlug', () => {
+	test('returns the direct parent site\'s slug', async () => {
+		const site = await makeResource('site', 'site-direct');
+		const host = await makeResource('host', 'host-direct');
+		await ResourceEdge.create({ parentId: site.id, childId: host.id, relation: 'hosts' });
+
+		await expect(Resource.findAncestorSiteSlug(host.id)).resolves.toBe(site.slug);
+	});
+
+	test('walks up through an intermediate host to find the owning site', async () => {
+		const site = await makeResource('site', 'site-nested');
+		const host = await makeResource('host', 'host-nested');
+		const service = await makeResource('service', 'service-nested');
+		await ResourceEdge.create({ parentId: site.id, childId: host.id, relation: 'hosts' });
+		await ResourceEdge.create({ parentId: host.id, childId: service.id, relation: 'hosts' });
+
+		await expect(Resource.findAncestorSiteSlug(service.id)).resolves.toBe(site.slug);
+	});
+
+	test('returns null for a top-level resource with no site ancestor', async () => {
+		const host = await makeResource('host', 'host-orphan');
+
+		await expect(Resource.findAncestorSiteSlug(host.id)).resolves.toBeNull();
+	});
+
+	test('does not loop forever on a cyclic parent chain', async () => {
+		const a = await makeResource('host', 'host-cycle-a');
+		const b = await makeResource('host', 'host-cycle-b');
+		await ResourceEdge.create({ parentId: a.id, childId: b.id, relation: 'hosts' });
+		await ResourceEdge.create({ parentId: b.id, childId: a.id, relation: 'hosts' });
+
+		await expect(Resource.findAncestorSiteSlug(a.id)).resolves.toBeNull();
+	});
+});

nodejs/utils/ui.js

@@ -0,0 +1,46 @@
+'use strict';
+
+// Per-app values for the shared UI shell (views/top.ejs + views/bottom.ejs).
+//
+// Those two partials are byte-identical across sso-manager-node, proxy and
+// jump-host — everything that differs between the apps lives here and is
+// exposed to every render as `ui` via app.locals (see app.js). Keep the key set
+// in sync across the three apps; a missing key is a render-time ReferenceError,
+// not a silent fallback.
+
+const conf = require('@simpleworkjs/conf');
+
+module.exports = {
+	// --- footer -------------------------------------------------------------
+	repoUrl: 'https://github.com/theta42/sso-manager-node',
+	licenseUrl: 'https://github.com/theta42/sso-manager-node/blob/master/LICENSE',
+	// In-app docs route (routes/docs.js). Apps without one point at the
+	// published docs site and set docsExternal.
+	docsUrl: '/docs',
+	docsExternal: false,
+	// Only sso-manager-node serves a Terms of Service page; null hides the link.
+	tosUrl: '/tos',
+
+	// --- header / nav -------------------------------------------------------
+	faviconUrl: conf.logo,
+	// Where the current-user chip links. null renders it as a plain span (for
+	// apps with no profile page).
+	profileUrl: '/profile',
+	// Where "Log Out" lands.
+	logoutRedirect: '/',
+	// Admin-only "a newer release is available" banner, backed by
+	// GET /api/update-check. Apps without that endpoint set false.
+	updateCheck: true,
+	updateLabel: 'SSO Manager',
+
+	// Nav items, in order. `groups` is an OR-list of group CNs that may see the
+	// item; an empty list means "always visible". Gating is done client-side by
+	// app-base.js, which reveals .group-required-<cn> for each group the user is
+	// in (plus the synthetic `admin` group when user/me reports isAdmin).
+	nav: [
+		{href: '/users', icon: 'fa-solid fa-users', label: 'Users', groups: ['app_sso_admin']},
+		{href: '/groups', icon: 'fa-solid fa-users-viewfinder', label: 'Groups', groups: ['app_sso_admin']},
+		{href: '/directory', icon: 'fa-solid fa-server', label: 'Directory', groups: ['app_sso_admin', 'app_sso_directory_admin']},
+		{href: '/executive', icon: 'fa-solid fa-gauge-high', label: 'Executive', groups: ['app_sso_admin']},
+	],
+};

nodejs/views/bottom.ejs

@@ -1,5 +1,8 @@
 		</div><!-- end spa-shell -->
 
+	<!-- Shared UI shell — byte-identical across sso-manager-node, proxy and
+	     jump-host. Everything per-app comes from `ui` (utils/ui.js, exposed via
+	     app.locals in app.js). Edit all three copies together. -->
 	<footer class="py-2 bg-dark text-light mt-4">
 		<div class="container-fluid d-flex flex-wrap justify-content-between align-items-center small gap-2">
 			<span class="d-flex align-items-center gap-2">
@@ -7,19 +10,21 @@
 					<img width="64" src="/static/img/theta42.svg"/>
 				</a>
 				&copy; <%- buildYear %> theta42 &middot;
-				<a href="https://github.com/theta42/sso-manager-node/blob/master/LICENSE" target="_blank" class="text-light">MIT License</a>
+				<a href="<%- ui.licenseUrl %>" target="_blank" class="text-light">MIT License</a>
 			</span>
 			<span class="d-flex align-items-center gap-3">
-				<a href="/docs" class="text-light text-decoration-none">
+				<a href="<%- ui.docsUrl %>"<%- ui.docsExternal ? ' target="_blank"' : '' %> class="text-light text-decoration-none">
 					<i class="fa-solid fa-book"></i> Docs
 				</a>
-				<a href="https://github.com/theta42/sso-manager-node" target="_blank" class="text-light text-decoration-none">
+				<a href="<%- ui.repoUrl %>" target="_blank" class="text-light text-decoration-none">
 					<i class="fa-brands fa-github"></i> GitHub
 				</a>
-				<a href="/tos" class="text-light text-decoration-none">Terms of Service</a>
+				<% if(ui.tosUrl){ %>
+				<a href="<%- ui.tosUrl %>" class="text-light text-decoration-none">Terms of Service</a>
+				<% } %>
 			</span>
 			<span>v<%- buildVersion %> (<%- buildHash %>)</span>
 		</div>
 	</footer>
-    </body>
+	</body>
 </html>

nodejs/views/directory.ejs

@@ -15,12 +15,6 @@
                           <option value="kind">Kind</option>
                           <option value="env">Environment</option>
                         </select>
-                        <div class="btn-group btn-group-sm shadow-sm" role="group">
-                          <input type="radio" class="btn-check" name="viewMode" id="view-list" value="list" autocomplete="off" checked onchange="renderTable()">
-                          <label class="btn btn-outline-secondary" for="view-list"><i class="fa-solid fa-list"></i></label>
-                          <input type="radio" class="btn-check" name="viewMode" id="view-tree" value="tree" autocomplete="off" onchange="renderTable()">
-                          <label class="btn btn-outline-secondary" for="view-tree"><i class="fa-solid fa-folder-tree"></i></label>
-                        </div>
 					    <button class="btn btn-sm btn-primary ms-1 shadow-sm" onclick="openAddModal()">
 					        <i class="fas fa-plus"></i> Add Resource
 					    </button>
@@ -49,7 +43,12 @@
                   {{{indentHtml}}}
                   <span class="badge bg-secondary">{{kind}}{{#metadata.subType}} ({{metadata.subType}}){{/metadata.subType}}</span>
                 </td>
-                <td><strong>{{name}}</strong><br><small class="text-muted">{{slug}}</small></td>
+                <td>
+                  <a href="#" class="text-reset text-decoration-none" onclick="openEditModal('{{id}}'); return false;" title="View details">
+                    <strong>{{name}}</strong>
+                  </a>
+                  <br><small class="text-muted">{{slug}}</small>
+                </td>
                 <td>
                   {{#metadata.isProduction}}<span class="badge bg-danger">Prod</span>{{/metadata.isProduction}}
                   {{^metadata.isProduction}}<span class="badge bg-info">Dev</span>{{/metadata.isProduction}}
@@ -79,252 +78,269 @@
   </div>
 </div>
 
-<!-- Edit Resource Modal -->
-<div class="modal fade" id="resourceModal" tabindex="-1">
-  <div class="modal-dialog modal-lg">
-    <div class="modal-content">
-      <div class="modal-header shadow">
-        <h5 class="modal-title" id="resourceModalTitle">Resource</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-      </div>
-      <div class="modal-body">
-        <div class="actionMessage mb-3" style="display:none"></div>
-        <input type="hidden" id="res-id">
-        
-        <div class="row mb-3">
-          <div class="col-6">
-            <label class="form-label">Name</label>
-            <input type="text" id="res-name" class="form-control shadow-sm">
-          </div>
-          <div class="col-6">
-            <label class="form-label">Slug</label>
-            <input type="text" id="res-slug" class="form-control shadow-sm font-monospace">
-          </div>
-        </div>
-        
-        <div class="row mb-3">
-          <div class="col-6">
-            <label class="form-label">Kind</label>
-            <select id="res-kind" class="form-select shadow-sm" onchange="toggleFormFields()">
-              <option value="site">Site</option>
-              <option value="host">Host</option>
-              <option value="service">Service (App)</option>
-              <option value="oauth">OAuth Integration</option>
-            </select>
-          </div>
-          <div class="col-6">
-            <label class="form-label">Sub Type</label>
-            <input type="text" id="res-subtype" class="form-control shadow-sm" placeholder="e.g. proxmox_node, web, etc.">
-          </div>
-        </div>
-        
-        <div class="row mb-3" id="site-details-container" style="display: none;">
-          <div class="col-12">
-            <div class="form-check">
-              <input class="form-check-input" type="checkbox" id="res-is-current-site">
-              <label class="form-check-label" for="res-is-current-site">
-                Mark as Current Site
-              </label>
-            </div>
-          </div>
-        </div>
-        
-        <div class="row mb-3" id="host-parent-container" style="display: none;">
-          <div class="col-12">
-            <label class="form-label text-primary">Parent Resource <span class="text-danger">*</span></label>
-            <select id="res-host-id" class="form-select shadow-sm border-primary">
-              <option value="">-- Select Parent --</option>
-            </select>
-          </div>
-        </div>
-
-        <div class="row mb-3">
-          <div class="col-6">
-            <label class="form-label">IP Address</label>
-            <input type="text" id="res-ip" class="form-control shadow-sm font-monospace" placeholder="192.168.1.x">
-          </div>
-          <div class="col-6">
-            <label class="form-label">Host / URI Address</label>
-            <input type="text" id="res-address" class="form-control shadow-sm font-monospace" placeholder="https://...">
-          </div>
-        </div>
-        
-        <div class="row mb-3" id="host-details-container" style="display: none;">
-          <div class="col-4">
-            <label class="form-label">VMID</label>
-            <input type="number" id="res-vmid" class="form-control shadow-sm" placeholder="e.g. 101">
-          </div>
-          <div class="col-4">
-            <label class="form-label">MAC Address</label>
-            <input type="text" id="res-mac" class="form-control shadow-sm font-monospace" placeholder="00:00:00:00:00:00">
-          </div>
-          <div class="col-4">
-            <label class="form-label">OS / Kernel</label>
-            <input type="text" id="res-os" class="form-control shadow-sm" placeholder="Ubuntu / 5.15">
-          </div>
-        </div>
-        
-        <div class="row mb-3" id="service-ports-container" style="display: none;">
-          <div class="col-6">
-            <label class="form-label">Internal Port</label>
-            <input type="number" id="res-port" class="form-control shadow-sm" placeholder="e.g. 8080">
-          </div>
-          <div class="col-6">
-            <label class="form-label">External Port</label>
-            <input type="number" id="res-external-port" class="form-control shadow-sm" placeholder="e.g. 443">
-            <small class="text-muted">Same as Internal if empty</small>
-          </div>
-        </div>
-
-        <div class="row mb-3" id="service-details-container" style="display: none;">
-          <div class="col-4">
-            <label class="form-label">Git Repo</label>
-            <input type="text" id="res-git-repo" class="form-control shadow-sm" placeholder="https://github.com/...">
-          </div>
-          <div class="col-4">
-            <label class="form-label">Install Path</label>
-            <input type="text" id="res-install-path" class="form-control shadow-sm" placeholder="/opt/app">
-          </div>
-          <div class="col-4">
-            <label class="form-label">Systemd Service</label>
-            <input type="text" id="res-systemd" class="form-control shadow-sm" placeholder="app.service">
-          </div>
-        </div>
-        
-        <div id="oauth-details-container" style="display: none;">
-          <hr>
-          <h5>OAuth Configuration</h5>
-          <div class="mb-3">
-            <label class="form-label">Redirect URIs <small class="text-muted">(one per line)</small></label>
-            <textarea id="res-redirect-uris" class="form-control shadow-sm font-monospace" rows="3"></textarea>
-            <small class="field-help text-muted d-block">
-              <code>*</code> matches one hostname label, <code>**</code> matches any number of labels.
-            </small>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Scopes <small class="text-muted">(space separated)</small></label>
-            <input type="text" id="res-scopes" class="form-control shadow-sm" value="openid profile email groups">
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Restrict to Groups <small class="text-muted">(space separated CNs, optional)</small></label>
-            <input type="text" id="res-allowed-groups" class="form-control shadow-sm">
-          </div>
-          <div class="row mb-3">
-            <div class="col-6">
-              <label class="form-label">Access Token TTL <small class="text-muted">(seconds)</small></label>
-              <input type="number" id="res-access-ttl" class="form-control shadow-sm" value="3600" min="60">
-            </div>
-            <div class="col-6">
-              <label class="form-label">Refresh Token TTL <small class="text-muted">(seconds)</small></label>
-              <input type="number" id="res-refresh-ttl" class="form-control shadow-sm" value="2592000" min="3600">
-            </div>
-          </div>
-          <div class="mb-3" id="oauth-rotate-container" style="display: none;">
-            <button class="btn btn-outline-warning" onclick="rotateSecret()">
-              <i class="fa-solid fa-arrows-rotate"></i> Rotate Client Secret
-            </button>
-            <small class="d-block text-muted mt-1">Rotating the secret will break any currently running clients until they are updated.</small>
-          </div>
-        </div>
-        
-        <div class="row mb-3">
-          <div class="col-4">
-            <div class="form-check form-switch mt-2">
-              <input class="form-check-input" type="checkbox" id="res-is-production">
-              <label class="form-check-label" for="res-is-production"><strong>Production</strong></label>
-            </div>
-          </div>
-          <div class="col-4" id="external-container" style="display: none;">
-            <div class="form-check form-switch mt-2">
-              <input class="form-check-input" type="checkbox" id="res-is-external">
-              <label class="form-check-label" for="res-is-external"><strong>External Reachable</strong></label>
-            </div>
-          </div>
-          <div class="col-4" id="public-container" style="display: none;">
-            <div class="form-check form-switch mt-2">
-              <input class="form-check-input" type="checkbox" id="res-is-public">
-              <label class="form-check-label" for="res-is-public"><strong>Public (No Auth)</strong></label>
-            </div>
-          </div>
-        </div>
-
-        <div class="mb-3">
-          <label class="form-label">Description</label>
-          <textarea id="res-description" class="form-control shadow-sm" rows="2"></textarea>
-        </div>
-        
-        <hr>
-        
-        <div id="edit-only-section" style="display: none;">
-          <h5>Associated LDAP Groups</h5>
-          <div class="mb-3">
-            <ul class="list-group mb-2 shadow-sm" id="groups-list" jq-repeat="groups">
-              <li class="list-group-item d-flex justify-content-between align-items-center">
-                <span>
-                  <i class="fa-solid fa-users text-muted me-2"></i> 
-                  <strong>{{groupCn}}</strong> 
-                  <span class="badge bg-primary ms-2">{{accessLevel}}</span>
-                </span>
-                <button class="btn btn-sm btn-outline-danger" onclick="removeGroup('{{id}}')"><i class="fa-solid fa-xmark"></i></button>
-              </li>
-            </ul>
-            <div class="input-group shadow-sm mt-2">
-              <input type="text" class="form-control" id="new-group-cn" placeholder="Group CN (e.g. app_emby_users)" list="ldap-groups-datalist">
-              <datalist id="ldap-groups-datalist"></datalist>
-              <select class="form-select" id="new-group-level" style="max-width: 140px;">
-                <option value="member">Member</option>
-                <option value="owner">Owner</option>
-              </select>
-              <button class="btn btn-success" onclick="addGroup()"><i class="fa-solid fa-plus"></i></button>
-            </div>
-          </div>
-          
-          <hr>
-          
-          <h5>Relationships (Graph Edges)</h5>
-          <div class="mb-3">
-            <ul class="list-group mb-2 shadow-sm" id="edges-list" jq-repeat="edges">
-              <li class="list-group-item d-flex justify-content-between align-items-center">
-                <span>
-                  {{#isParent}}
-                    <i class="fa-solid fa-arrow-down text-success me-2"></i> Has child: <strong>{{targetName}}</strong> <span class="badge bg-secondary ms-1">{{relation}}</span>
-                  {{/isParent}}
-                  {{^isParent}}
-                    <i class="fa-solid fa-arrow-up text-primary me-2"></i> Is child of: <strong>{{targetName}}</strong> <span class="badge bg-secondary ms-1">{{relation}}</span>
-                  {{/isParent}}
-                </span>
-                <button class="btn btn-sm btn-outline-danger" onclick="removeEdge('{{id}}')"><i class="fa-solid fa-xmark"></i></button>
-              </li>
-            </ul>
-            <div class="input-group shadow-sm mt-2">
-              <select class="form-select" id="new-edge-dir" style="max-width: 140px;">
-                <option value="parent">Has child</option>
-                <option value="child">Is child of</option>
-              </select>
-              <select class="form-select" id="new-edge-target">
-                <option value="">-- Select Resource --</option>
-              </select>
-              <input type="text" class="form-control" id="new-edge-relation" placeholder="Relation (e.g. hosts)" style="max-width: 150px;">
-              <button class="btn btn-success" onclick="addEdge()"><i class="fa-solid fa-plus"></i></button>
-            </div>
-          </div>
-        </div>
-        
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary" onclick="saveResource()">
-          <i class="fa-solid fa-floppy-disk"></i> Save Resource
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
 <script>
   app.auth.forceLogin(['app_sso_admin', 'app_sso_directory_admin']);
-  
-  var resourceModal = new bootstrap.Modal(document.getElementById('resourceModal'));
+
+  // --- Resource modal tab content, built once. Populated via .val() in
+  //     openAddModal/openEditModal AFTER app.modal.open() has (re)built the
+  //     DOM from these strings -- order matters, unlike the old always-in-DOM
+  //     static modal. ---
+
+  var generalTabHtml = `
+    <div class="actionMessage mb-3" style="display:none"></div>
+    <input type="hidden" id="res-id">
+
+    <div class="row mb-3">
+      <div class="col-6">
+        <label class="form-label">Name</label>
+        <input type="text" id="res-name" class="form-control shadow-sm">
+      </div>
+      <div class="col-6">
+        <label class="form-label">Slug</label>
+        <input type="text" id="res-slug" class="form-control shadow-sm font-monospace">
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-6">
+        <label class="form-label">Kind</label>
+        <select id="res-kind" class="form-select shadow-sm" onchange="toggleFormFields()">
+          <option value="site">Site</option>
+          <option value="host">Host</option>
+          <option value="service">Service (App)</option>
+          <option value="oauth">OAuth Integration</option>
+        </select>
+      </div>
+      <div class="col-6">
+        <label class="form-label">Sub Type</label>
+        <input type="text" id="res-subtype" class="form-control shadow-sm" placeholder="e.g. proxmox_node, web, etc.">
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-6">
+        <label class="form-label">IP Address</label>
+        <input type="text" id="res-ip" class="form-control shadow-sm font-monospace" placeholder="192.168.1.x">
+      </div>
+      <div class="col-6">
+        <label class="form-label">Host / URI Address</label>
+        <input type="text" id="res-address" class="form-control shadow-sm font-monospace" placeholder="https://...">
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-6">
+        <div class="form-check form-switch mt-2">
+          <input class="form-check-input" type="checkbox" id="res-is-production">
+          <label class="form-check-label" for="res-is-production"><strong>Production</strong></label>
+        </div>
+      </div>
+    </div>
+
+    <div class="mb-3">
+      <label class="form-label">Description</label>
+      <textarea id="res-description" class="form-control shadow-sm" rows="2"></textarea>
+    </div>
+  `;
+
+  var detailsTabHtml = `
+    <div class="row mb-3" id="site-details-container" style="display: none;">
+      <div class="col-12">
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" id="res-is-current-site">
+          <label class="form-check-label" for="res-is-current-site">
+            Mark as Current Site
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="row mb-3" id="host-parent-container" style="display: none;">
+      <div class="col-12">
+        <label class="form-label text-primary">Parent Resource <span class="text-danger">*</span></label>
+        <select id="res-host-id" class="form-select shadow-sm border-primary">
+          <option value="">-- Select Parent --</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="row mb-3" id="host-details-container" style="display: none;">
+      <div class="col-4">
+        <label class="form-label">VMID</label>
+        <input type="number" id="res-vmid" class="form-control shadow-sm" placeholder="e.g. 101">
+      </div>
+      <div class="col-4">
+        <label class="form-label">MAC Address</label>
+        <input type="text" id="res-mac" class="form-control shadow-sm font-monospace" placeholder="00:00:00:00:00:00">
+      </div>
+      <div class="col-4">
+        <label class="form-label">OS / Kernel</label>
+        <input type="text" id="res-os" class="form-control shadow-sm" placeholder="Ubuntu / 5.15">
+      </div>
+    </div>
+
+    <div class="row mb-3" id="service-ports-container" style="display: none;">
+      <div class="col-6">
+        <label class="form-label">Internal Port</label>
+        <input type="number" id="res-port" class="form-control shadow-sm" placeholder="e.g. 8080">
+      </div>
+      <div class="col-6">
+        <label class="form-label">External Port</label>
+        <input type="number" id="res-external-port" class="form-control shadow-sm" placeholder="e.g. 443">
+        <small class="text-muted">Same as Internal if empty</small>
+      </div>
+    </div>
+
+    <div class="row mb-3" id="service-details-container" style="display: none;">
+      <div class="col-4">
+        <label class="form-label">Git Repo</label>
+        <input type="text" id="res-git-repo" class="form-control shadow-sm" placeholder="https://github.com/...">
+      </div>
+      <div class="col-4">
+        <label class="form-label">Install Path</label>
+        <input type="text" id="res-install-path" class="form-control shadow-sm" placeholder="/opt/app">
+      </div>
+      <div class="col-4">
+        <label class="form-label">Systemd Service</label>
+        <input type="text" id="res-systemd" class="form-control shadow-sm" placeholder="app.service">
+      </div>
+    </div>
+
+    <div id="oauth-details-container" style="display: none;">
+      <hr>
+      <h5>OAuth Configuration</h5>
+      <div class="mb-3">
+        <label class="form-label">Redirect URIs <small class="text-muted">(one per line)</small></label>
+        <textarea id="res-redirect-uris" class="form-control shadow-sm font-monospace" rows="3"></textarea>
+        <small class="field-help text-muted d-block">
+          <code>*</code> matches one hostname label, <code>**</code> matches any number of labels.
+        </small>
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Scopes <small class="text-muted">(space separated)</small></label>
+        <input type="text" id="res-scopes" class="form-control shadow-sm" value="openid profile email groups">
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Restrict to Groups <small class="text-muted">(space separated CNs, optional)</small></label>
+        <input type="text" id="res-allowed-groups" class="form-control shadow-sm">
+      </div>
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label">Access Token TTL <small class="text-muted">(seconds)</small></label>
+          <input type="number" id="res-access-ttl" class="form-control shadow-sm" value="3600" min="60">
+        </div>
+        <div class="col-6">
+          <label class="form-label">Refresh Token TTL <small class="text-muted">(seconds)</small></label>
+          <input type="number" id="res-refresh-ttl" class="form-control shadow-sm" value="2592000" min="3600">
+        </div>
+      </div>
+      <div class="mb-3" id="oauth-rotate-container" style="display: none;">
+        <button class="btn btn-outline-warning" onclick="rotateSecret()">
+          <i class="fa-solid fa-arrows-rotate"></i> Rotate Client Secret
+        </button>
+        <small class="d-block text-muted mt-1">Rotating the secret will break any currently running clients until they are updated.</small>
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-6" id="external-container" style="display: none;">
+        <div class="form-check form-switch mt-2">
+          <input class="form-check-input" type="checkbox" id="res-is-external">
+          <label class="form-check-label" for="res-is-external"><strong>External Reachable</strong></label>
+        </div>
+      </div>
+      <div class="col-6" id="public-container" style="display: none;">
+        <div class="form-check form-switch mt-2">
+          <input class="form-check-input" type="checkbox" id="res-is-public">
+          <label class="form-check-label" for="res-is-public"><strong>Public (No Auth)</strong></label>
+        </div>
+      </div>
+    </div>
+  `;
+
+  var groupsTabHtml = `
+    <div class="mb-3">
+      <ul class="list-group mb-2 shadow-sm" id="groups-list"></ul>
+      <div class="input-group shadow-sm mt-2">
+        <input type="text" class="form-control" id="new-group-cn" placeholder="Group CN (e.g. app_emby_users)" list="ldap-groups-datalist">
+        <datalist id="ldap-groups-datalist"></datalist>
+        <select class="form-select" id="new-group-level" style="max-width: 140px;">
+          <option value="member">Member</option>
+          <option value="owner">Owner</option>
+        </select>
+        <button class="btn btn-success" onclick="addGroup()"><i class="fa-solid fa-plus"></i></button>
+      </div>
+    </div>
+  `;
+
+  var childrenTabHtml = `
+    <div class="mb-3">
+      <ul class="list-group mb-2 shadow-sm" id="children-list"></ul>
+      <button class="btn btn-success btn-sm" onclick="openAddModal($('#res-id').val(), $('#res-kind').val())">
+        <i class="fa-solid fa-plus"></i> Add Child Resource
+      </button>
+    </div>
+
+    <hr>
+
+    <h6 class="text-muted">Other Relationships (advanced)</h6>
+    <div class="mb-3">
+      <ul class="list-group mb-2 shadow-sm" id="edges-list"></ul>
+      <div class="input-group shadow-sm mt-2">
+        <select class="form-select" id="new-edge-dir" style="max-width: 140px;">
+          <option value="parent">Has child</option>
+          <option value="child">Is child of</option>
+        </select>
+        <select class="form-select" id="new-edge-target">
+          <option value="">-- Select Resource --</option>
+        </select>
+        <input type="text" class="form-control" id="new-edge-relation" placeholder="Relation (e.g. hosts)" style="max-width: 150px;">
+        <button class="btn btn-success" onclick="addEdge()"><i class="fa-solid fa-plus"></i></button>
+      </div>
+    </div>
+  `;
+
+  // Shared by openAddModal/openEditModal: builds the tabbed/footer/(optionally
+  // URL-tracked) modal DOM. Callers then populate fields via .val() and hide
+  // the Groups/Children tabs in add-mode (no resource id to scope them to).
+  function openResourceModal(title, id) {
+    app.modal.open({
+      title: title,
+      size: 'lg',
+      tabs: [
+        {id: 'general', label: 'General', bodyHtml: generalTabHtml, active: true},
+        {id: 'details', label: 'Details', bodyHtml: detailsTabHtml},
+        {id: 'groups', label: 'Associated LDAP Groups', bodyHtml: groupsTabHtml},
+        {id: 'children', label: 'Children', bodyHtml: childrenTabHtml},
+      ],
+      footer: {
+        metaHtml: id ? app.modal.formatAudit(resourcesById[id], {formatDate: function(ms){ return moment(ms).format('YYYY-MM-DD HH:mm'); }}) : '',
+        buttonsHtml: app.modal.footerButtons({onSave: 'saveResource()', saveLabel: 'Save Resource'}),
+      },
+      url: id ? {path: '/directory/' + resourcesById[id].slug} : null,
+    });
+    $('#sw-modal-tab-groups-btn, #sw-modal-tab-children-btn').closest('li').toggle(!!id);
+  }
+
+  function refreshChildrenUI(resourceId) {
+    const kids = allEdges.filter(e => e.parentId === resourceId)
+      .map(e => resourcesById[e.childId]).filter(Boolean);
+    const $list = $('#children-list').empty();
+    if (!kids.length) {
+      $list.append('<li class="list-group-item text-muted">No child resources.</li>');
+      return;
+    }
+    for (const kid of kids) {
+      const $li = $('<li class="list-group-item d-flex justify-content-between align-items-center"></li>');
+      $('<a href="#" class="text-reset text-decoration-none"></a>')
+        .text(kid.name + ' (' + kid.slug + ')')
+        .on('click', function(e){ e.preventDefault(); openEditModal(kid.id); })
+        .appendTo($li);
+      $('<span class="badge bg-secondary"></span>').text(kid.kind).appendTo($li);
+      $list.append($li);
+    }
+  }
+
   var resourcesById = {};
   var allGroups = [];
   var allEdges = [];
@@ -332,6 +348,11 @@
   
   $(document).ready(async function() {
     await loadResources();
+    const slug = app.modal.deepLinkSlug('/directory');
+    if (slug) {
+      const match = Object.values(resourcesById).find(r => r.slug === slug);
+      if (match) openEditModal(match.id);
+    }
   });
   
   async function loadResources() {
@@ -369,15 +390,14 @@
       renderTable();
     } catch (err) {
       console.error(err);
-      alert('Failed to load data');
+      app.messages.toast('Failed to load data', 'danger');
     }
   }
   
   function renderTable() {
     const filter = $('#search-filter').val().toLowerCase();
     const sort = $('#sort-by').val();
-    const viewMode = $('input[name="viewMode"]:checked').val();
-    
+
     let filtered = rawResources.filter(r => {
       if (!filter) return true;
       return (r.name || '').toLowerCase().includes(filter) ||
@@ -402,42 +422,38 @@
 
     let finalRenderList = [];
 
-    if (viewMode === 'tree') {
-      const map = {};
-      const roots = [];
-      filtered.forEach(r => { map[r.id] = { ...r, children: [] }; });
-      
-      filtered.forEach(r => {
-        const node = map[r.id];
-        if (node.parentId && map[node.parentId]) {
-           map[node.parentId].children.push(node);
-        } else {
-           roots.push(node);
-        }
-      });
-      
-      const flatten = (nodes, depth) => {
-         nodes.forEach(n => {
-           let indentHtml = '';
-           for(let i = 0; i < depth; i++) {
-              indentHtml += '<span style="display:inline-block; width: 1.5rem;"></span>';
-           }
-           if (depth > 0) {
-              indentHtml += '<i class="fa-solid fa-turn-up fa-rotate-90 text-muted me-2"></i>';
-           }
-           n.indentHtml = indentHtml;
-           finalRenderList.push(n);
-           if (n.children.length > 0) {
-             flatten(n.children, depth + 1);
-           }
-         });
-      };
-      
-      flatten(roots, 0);
-    } else {
-      finalRenderList = filtered.map(r => ({ ...r, indentHtml: '' }));
-    }
-    
+    const map = {};
+    const roots = [];
+    filtered.forEach(r => { map[r.id] = { ...r, children: [] }; });
+
+    filtered.forEach(r => {
+      const node = map[r.id];
+      if (node.parentId && map[node.parentId]) {
+         map[node.parentId].children.push(node);
+      } else {
+         roots.push(node);
+      }
+    });
+
+    const flatten = (nodes, depth) => {
+       nodes.forEach(n => {
+         let indentHtml = '';
+         for(let i = 0; i < depth; i++) {
+            indentHtml += '<span style="display:inline-block; width: 1.5rem;"></span>';
+         }
+         if (depth > 0) {
+            indentHtml += '<i class="fa-solid fa-turn-up fa-rotate-90 text-muted me-2"></i>';
+         }
+         n.indentHtml = indentHtml;
+         finalRenderList.push(n);
+         if (n.children.length > 0) {
+           flatten(n.children, depth + 1);
+         }
+       });
+    };
+
+    flatten(roots, 0);
+
     $.scope.resources.empty();
     for (const r of finalRenderList) {
       $.scope.resources.push(r);
@@ -486,7 +502,10 @@
     populateHostDropdown($('#res-host-id').val());
   }
 
-  $('#res-name, #res-kind').on('input change', function() {
+  // Delegated (not direct) since app.modal.open() rebuilds the modal body
+  // from scratch every call -- a direct .on() bind here would silently stop
+  // firing after the first Add/Edit.
+  app.modal.on('input change', '#res-name, #res-kind', function() {
     const id = $('#res-id').val();
     if (!id && $('#res-name').val()) {
       const name = $('#res-name').val();
@@ -495,18 +514,18 @@
       if (kind === 'service') prefix = 'app_';
       if (kind === 'host') prefix = 'host_';
       if (kind === 'site') prefix = 'site_';
-      
+
       const slug = prefix + name.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, '');
       $('#res-slug').val(slug);
     }
   });
 
   function openAddModal(parentId, parentKind) {
-    $('#resourceModalTitle').html('<i class="fa-solid fa-plus"></i> Add Resource');
+    openResourceModal('Add Resource', null);
     $('#res-id').val('');
     $('#res-name').val('');
     $('#res-slug').val('');
-    
+
     let defaultKind = 'service';
     if (parentKind === 'site') defaultKind = 'host';
     if (parentKind === 'host') defaultKind = 'service';
@@ -537,20 +556,22 @@
     $('#res-is-external').prop('checked', false);
     $('#res-is-public').prop('checked', false);
     $('#res-is-current-site').prop('checked', false);
-    $('#edit-only-section').hide();
-    
+
     populateHostDropdown(parentId || '');
     toggleFormFields();
-    
-    resourceModal.show();
   }
   
   var ldapGroupsCache = null;
   async function loadLdapGroups() {
-    if (ldapGroupsCache) return;
     try {
-      const res = await app.api.get('group');
-      ldapGroupsCache = res.results;
+      if (!ldapGroupsCache) {
+        const res = await app.api.get('group');
+        ldapGroupsCache = res.results;
+      }
+      // Re-populate every call, not just the first -- #ldap-groups-datalist
+      // is rebuilt fresh (empty) on every app.modal.open(), so returning
+      // early here on a cache hit left the second and later modal opens
+      // with no autocomplete options at all.
       const $datalist = $('#ldap-groups-datalist');
       $datalist.empty();
       for (const cn of ldapGroupsCache) {
@@ -572,36 +593,66 @@
         $target.append($('<option>').val(r.id).text(r.name + ' (' + r.slug + ')'));
       } else if (kind === 'service' && (r.kind === 'host' || r.kind === 'service')) {
         $target.append($('<option>').val(r.id).text(r.name + ' (' + r.slug + ')'));
+      } else if (kind === 'oauth' && r.kind === 'service') {
+        $target.append($('<option>').val(r.id).text(r.name + ' (' + r.slug + ')'));
       }
     });
     if (selectedId) $target.val(selectedId);
   }
 
+  // Plain DOM rendering, not jq-repeat: #groups-list is injected fresh into
+  // the modal body on every app.modal.open() call, and jq-repeat's
+  // MutationObserver-based (re)registration for a same-id element that's
+  // destroyed and recreated runs asynchronously -- populating it
+  // synchronously right after open() (as this function is called) would race
+  // that and silently lose the pushed data on the second and later opens.
   function refreshGroupsUI(resourceId) {
     const myGroups = allGroups.filter(g => g.resourceId === resourceId);
-    $.scope.groups.empty();
+    const $list = $('#groups-list').empty();
+    if (!myGroups.length) {
+      $list.append('<li class="list-group-item text-muted">No associated groups.</li>');
+      return;
+    }
     for (const g of myGroups) {
-      $.scope.groups.push(g);
+      const $li = $('<li class="list-group-item d-flex justify-content-between align-items-center"></li>');
+      const $span = $('<span></span>');
+      $span.append('<i class="fa-solid fa-users text-muted me-2"></i>');
+      $('<strong></strong>').text(g.groupCn).appendTo($span);
+      $('<span class="badge bg-primary ms-2"></span>').text(g.accessLevel).appendTo($span);
+      $li.append($span);
+      $('<button class="btn btn-sm btn-outline-danger"><i class="fa-solid fa-xmark"></i></button>')
+        .on('click', function(){ removeGroup(g.id); })
+        .appendTo($li);
+      $list.append($li);
     }
   }
 
   function refreshEdgesUI(resourceId) {
     const myEdges = allEdges.filter(e => e.parentId === resourceId || e.childId === resourceId);
-    $.scope.edges.empty();
+    const $list = $('#edges-list').empty();
+    if (!myEdges.length) {
+      $list.append('<li class="list-group-item text-muted">No other relationships.</li>');
+    }
     for (const e of myEdges) {
       const isParent = e.parentId === resourceId;
       const targetId = isParent ? e.childId : e.parentId;
       const target = resourcesById[targetId];
       if (!target) continue;
-      
-      $.scope.edges.push({
-        id: e.id,
-        isParent: isParent,
-        relation: e.relation,
-        targetName: target.name + ' (' + target.slug + ')'
-      });
+
+      const $li = $('<li class="list-group-item d-flex justify-content-between align-items-center"></li>');
+      const $span = $('<span></span>');
+      $span.append(isParent
+        ? '<i class="fa-solid fa-arrow-down text-success me-2"></i> Has child: '
+        : '<i class="fa-solid fa-arrow-up text-primary me-2"></i> Is child of: ');
+      $('<strong></strong>').text(target.name + ' (' + target.slug + ')').appendTo($span);
+      $('<span class="badge bg-secondary ms-1"></span>').text(e.relation).appendTo($span);
+      $li.append($span);
+      $('<button class="btn btn-sm btn-outline-danger"><i class="fa-solid fa-xmark"></i></button>')
+        .on('click', function(){ removeEdge(e.id); })
+        .appendTo($li);
+      $list.append($li);
     }
-    
+
     const $target = $('#new-edge-target');
     $target.empty().append('<option value="">-- Select Resource --</option>');
     Object.values(resourcesById).forEach(r => {
@@ -614,8 +665,8 @@
   async function openEditModal(id) {
     const r = resourcesById[id];
     if (!r) return;
-    
-    $('#resourceModalTitle').html('<i class="fa-solid fa-pen-to-square"></i> Edit Resource');
+
+    openResourceModal('Edit Resource', id);
     $('#res-id').val(r.id);
     $('#res-name').val(r.name);
     $('#res-slug').val(r.slug);
@@ -653,14 +704,11 @@
     const parentEdge = allEdges.find(e => e.childId === r.id && (e.relation === 'hosts' || e.relation === 'oauth'));
     populateHostDropdown(parentEdge ? parentEdge.parentId : '');
     toggleFormFields();
-    
-    $('#edit-only-section').show();
-    
+
     refreshGroupsUI(r.id);
     refreshEdgesUI(r.id);
+    refreshChildrenUI(r.id);
     await loadLdapGroups();
-    
-    resourceModal.show();
   }
   
   async function saveResource() {
@@ -708,29 +756,38 @@
         res = await app.api.post('directory-admin/resources', data);
       }
       
-      resourceModal.hide();
       await loadResources();
-      
+
       if (!id && data.kind === 'oauth' && res.results && res.results._raw_secret) {
-        app.util.alert('OAuth Secret', 'Save this client secret, it will not be shown again: <br><br><code>' + res.results._raw_secret + '</code>', 'success');
+        // Deliberately no app.modal.close() before this -- app.modal is a
+        // singleton, and close() immediately followed by open() in the same
+        // tick collides with Bootstrap's hide-transition guard (show()
+        // silently no-ops while _isTransitioning is still true from the
+        // just-started hide()). open() alone already overwrites the
+        // (already-visible) modal's content in place. The await above made
+        // this race unlikely to lose in practice, but not guaranteed to.
+        app.modal.open({title: 'OAuth Secret', bodyHtml: 'Save this client secret, it will not be shown again: <br><br><code>' + res.results._raw_secret + '</code>'});
+      } else {
+        app.modal.close();
       }
     } catch (err) {
       console.error(err);
-      alert(err.message || 'Failed to save');
+      app.messages.action(err.message || 'Failed to save', app.modal.body(), 'danger');
     }
   }
 
   async function rotateSecret() {
     const id = $('#res-id').val();
     if (!id) return;
-    if (!confirm('Are you sure you want to rotate the OAuth secret? Any existing integrations using the old secret will break.')) return;
-    
+    const ok = await app.messages.confirm('Are you sure you want to rotate the OAuth secret? Any existing integrations using the old secret will break.', app.modal.body(), 'warning');
+    if (!ok) return;
+
     try {
       const res = await app.api.post(`directory-admin/resources/${id}/rotate-secret`);
-      app.util.alert('Secret Rotated', 'Save this NEW client secret, it will not be shown again: <br><br><code>' + res.secret + '</code>', 'success');
+      app.modal.open({title: 'Secret Rotated', bodyHtml: 'Save this NEW client secret, it will not be shown again: <br><br><code>' + res.secret + '</code>'});
     } catch (err) {
       console.error(err);
-      alert(err.message || 'Failed to rotate secret');
+      app.messages.action(err.message || 'Failed to rotate secret', app.modal.body(), 'danger');
     }
   }
 
@@ -739,7 +796,7 @@
     const groupCn = $('#new-group-cn').val().trim();
     const accessLevel = $('#new-group-level').val();
     
-    if (!groupCn) return alert('Group CN is required');
+    if (!groupCn) return app.messages.action('Group CN is required', app.modal.body(), 'danger');
     try {
       const res = await app.api.post('directory-admin/groups', {
         resourceId,
@@ -751,10 +808,10 @@
       $('#new-group-cn').val('');
     } catch (err) {
       console.error(err);
-      alert('Failed to add group');
+      app.messages.action('Failed to add group', app.modal.body(), 'danger');
     }
   }
-  
+
   async function removeGroup(id) {
     try {
       await app.api.delete('directory-admin/groups/' + id);
@@ -762,7 +819,7 @@
       refreshGroupsUI($('#res-id').val());
     } catch (err) {
       console.error(err);
-      alert('Failed to remove group');
+      app.messages.action('Failed to remove group', app.modal.body(), 'danger');
     }
   }
 
@@ -772,7 +829,7 @@
     const targetId = $('#new-edge-target').val();
     const relation = $('#new-edge-relation').val().trim() || 'hosts';
     
-    if (!targetId) return alert('Select a target resource');
+    if (!targetId) return app.messages.action('Select a target resource', app.modal.body(), 'danger');
     
     const data = { relation };
     if (dir === 'parent') {
@@ -790,10 +847,10 @@
       $('#new-edge-target').val('');
     } catch (err) {
       console.error(err);
-      alert('Failed to add edge');
+      app.messages.action('Failed to add edge', app.modal.body(), 'danger');
     }
   }
-  
+
   async function removeEdge(id) {
     try {
       await app.api.delete('directory-admin/edges/' + id);
@@ -801,18 +858,23 @@
       refreshEdgesUI($('#res-id').val());
     } catch (err) {
       console.error(err);
-      alert('Failed to remove edge');
+      app.messages.action('Failed to remove edge', app.modal.body(), 'danger');
     }
   }
 
   async function deleteResource(id) {
-    if (!confirm('Are you sure you want to delete this resource? All relationships will be destroyed.')) return;
+    // Called from the outer table's row button, not from inside the resource
+    // modal — target the page's own card so the confirm/error renders
+    // somewhere actually visible.
+    const $target = $('#resources-list');
+    const ok = await app.messages.confirm('Are you sure you want to delete this resource? All relationships will be destroyed.', $target, 'danger');
+    if (!ok) return;
     try {
       await app.api.delete('directory-admin/resources/' + id);
       await loadResources();
     } catch (err) {
       console.error(err);
-      alert('Failed to delete');
+      app.messages.action('Failed to delete', $target, 'danger');
     }
   }
 </script>

nodejs/views/executive.ejs

@@ -117,8 +117,8 @@
 		const msgEl       = document.getElementById('notif-result');
 		const $compose    = $('#notif-subject').closest('.card-body');
 
-		if (!subject || !message) { alert('Subject and message are required.'); return; }
-		if (!filterCheck) { alert('Choose who to send this to.'); return; }
+		if (!subject || !message) { app.messages.action('Subject and message are required.', $compose, 'danger'); return; }
+		if (!filterCheck) { app.messages.action('Choose who to send this to.', $compose, 'danger'); return; }
 		const filterType = filterCheck.value;
 
 		let filter_value = '';
@@ -129,7 +129,7 @@
 		// trying the form out — make it a deliberate, confirmed action.
 		if (filterType === 'all' || filterType === 'all_active') {
 			const label = filterType === 'all' ? 'ALL users (including inactive)' : 'all ACTIVE users';
-			const confirmed = await app.util.actionConfirm(`Send this notification to ${label}?`, $compose, 'warning');
+			const confirmed = await app.messages.confirm(`Send this notification to ${label}?`, $compose, 'warning');
 			if (!confirmed) return;
 		}
 
@@ -179,7 +179,12 @@
 		const resetAcceptance = document.getElementById('tos-reset-acceptance').checked;
 		const msgEl = document.getElementById('tos-result');
 
-		if (!content) { alert('Terms of Service text cannot be empty.'); return; }
+		if (!content) {
+			msgEl.className = 'alert alert-danger mt-2';
+			msgEl.textContent = 'Terms of Service text cannot be empty.';
+			msgEl.style.display = '';
+			return;
+		}
 
 		app.tos.update({content, resetAcceptance}, function(error, data) {
 			if (error) {

nodejs/views/groups.ejs

@@ -32,10 +32,37 @@
 		return value;
 	}
 
+	// app_sso_service_account is a marker group: membership hides an account
+	// from the Users page's People tab entirely (see users.ejs), which is
+	// exactly right for a non-person account but has silently made a real
+	// person's account look "gone" before (nothing else about it changes).
+	// Everywhere else in this dropdown just fires the PUT directly; only
+	// this one group gets a confirmation first.
+	function addMemberClick(event, groupCN, uid, el){
+		event.preventDefault();
+		const $el = $(el);
+		(async function(){
+			if (groupCN === 'app_sso_service_account') {
+				const ok = await app.messages.confirm(
+					`Mark "${uid}" as a service account? This hides them from the Users page's People tab (Service Accounts tab only) — only do this for a non-person account.`,
+					$el.closest('.card'), 'warning'
+				);
+				if (!ok) return;
+			}
+			try {
+				const data = await app.api.put(`group/${groupCN}/${uid}`, {});
+				await addedUser(data.message, groupCN, uid, $el);
+			} catch(e) {
+				app.messages.action(e.message || 'Failed to add member', $el.closest('.card'), 'danger');
+			}
+		})();
+		return false;
+	}
+
 	async function addedUser(message, group, user, $form){
 		let data = await app.group.get(group);
 		$.scope.groupCard.update('cn', group, processGroup(data.results));
-		app.util.actionMessage(message, $("#group-card-"+group), 'success');
+		app.messages.action(message, $("#group-card-"+group), 'success');
 		$('a[href="#'+$form.closest('.tab-pane').attr('id')+'"]').tab('show');
 		setTimeout(function(group){
 			$("body,html").animate({ scrollTop: $("#group-card-" + group).offset().top }, 0);
@@ -73,44 +100,44 @@
 	async function removeMember(groupCN, uid, btn) {
 		const $item = $(btn).closest('li');
 		$item.addClass('list-group-item-warning');
-		const confirmed = await app.util.actionConfirm(`Remove "${uid}" from "${groupCN}"?`, $item, 'warning');
+		const confirmed = await app.messages.confirm(`Remove "${uid}" from "${groupCN}"?`, $item, 'warning');
 		if (!confirmed) { $item.removeClass('list-group-item-warning'); return; }
 		try {
 			const data = await app.api.delete(`group/${groupCN}/${uid}`);
 			const groupData = await app.group.get(groupCN);
 			$.scope.groupCard.update('cn', groupCN, processGroup(groupData.results));
-			app.util.actionMessage(data.message, $('#group-card-' + groupCN), 'success');
+			app.messages.action(data.message, $('#group-card-' + groupCN), 'success');
 		} catch(e) {
 			$item.removeClass('list-group-item-warning');
-			app.util.actionMessage(e.message || 'Failed to remove member', $('#group-card-' + groupCN), 'danger');
+			app.messages.action(e.message || 'Failed to remove member', $('#group-card-' + groupCN), 'danger');
 		}
 	}
 
 	async function removeOwner(groupCN, uid, btn) {
 		const $item = $(btn).closest('li');
 		$item.addClass('list-group-item-warning');
-		const confirmed = await app.util.actionConfirm(`Remove "${uid}" as owner of "${groupCN}"?`, $item, 'warning');
+		const confirmed = await app.messages.confirm(`Remove "${uid}" as owner of "${groupCN}"?`, $item, 'warning');
 		if (!confirmed) { $item.removeClass('list-group-item-warning'); return; }
 		try {
 			const data = await app.api.delete(`group/owner/${groupCN}/${uid}`);
 			const groupData = await app.group.get(groupCN);
 			$.scope.groupCard.update('cn', groupCN, processGroup(groupData.results));
-			app.util.actionMessage(data.message, $('#group-card-' + groupCN), 'success');
+			app.messages.action(data.message, $('#group-card-' + groupCN), 'success');
 		} catch(e) {
 			$item.removeClass('list-group-item-warning');
-			app.util.actionMessage(e.message || 'Failed to remove owner', $('#group-card-' + groupCN), 'danger');
+			app.messages.action(e.message || 'Failed to remove owner', $('#group-card-' + groupCN), 'danger');
 		}
 	}
 
 	async function deleteGroup(cn, btn) {
 		const $card = $(btn).closest('.card');
-		const confirmed = await app.util.actionConfirm(`Delete group "${cn}"?`, $card, 'danger');
+		const confirmed = await app.messages.confirm(`Delete group "${cn}"?`, $card, 'danger');
 		if (!confirmed) return;
 		try {
 			await app.api.delete(`group/${cn}`);
 			$.scope.groupCard.remove('cn', cn);
 		} catch(e) {
-			app.util.actionMessage(e.message || 'Failed to delete group', $card, 'danger');
+			app.messages.action(e.message || 'Failed to delete group', $card, 'danger');
 		}
 	}
 
@@ -214,7 +241,7 @@
 								</button>
 								<div class="dropdown-menu shadow-lg" aria-labelledby="group_add_member">
 								{{ #toAdd }}{{#.}}
-									<a class="dropdown-item" action="group/{{groupCN}}/{{uid}}" method="put" onclick="formAJAX(this)" evalAJAX="addedUser(data.message, '{{groupCN}}', '{{uid}}', $form);">
+									<a class="dropdown-item" href="#" onclick="return addMemberClick(event, '{{groupCN}}', '{{uid}}', this);">
 										<i class="fa-solid fa-user"></i> {{uid}}
 									</a>
 								{{/.}}{{ /toAdd }}

nodejs/views/impersonate_modal.ejs

@@ -68,7 +68,7 @@
 function startImpersonate(uid){
 	app.impersonate.create(uid, function(error, data){
 		if(error){
-			alert('Could not start impersonation: ' + (data && data.message ? data.message : 'Unknown error'));
+			app.messages.toast('Could not start impersonation: ' + (data && data.message ? data.message : 'Unknown error'), 'danger');
 			return;
 		}
 		$('#impersonateModalTitle').text(data.uid);
@@ -79,7 +79,7 @@ function startImpersonate(uid){
 		$('#impersonateStopBtn').off('click').on('click', function(){
 			app.impersonate.revoke(data.uid, function(err){
 				$('#impersonateModal').modal('hide');
-				if(!err) app.util.actionMessage('Impersonation ended for ' + data.uid, $('body'), 'success');
+				if(!err) app.messages.action('Impersonation ended for ' + data.uid, $('body'), 'success');
 			});
 		});
 

nodejs/views/invite.ejs

@@ -1,7 +1,7 @@
 <%- include('top') %>
 <script type="text/javascript">
 	function tableAJAX(message){
-		app.util.actionMessage(message);
+		app.messages.action(message);
 	}
 
 	$(document).ready(function(){

nodejs/views/landing.ejs

@@ -131,6 +131,6 @@
     });
     
     function requestAccess(id) {
-        app.util.alert('Access Request', 'This feature is coming soon!', 'info');
+        app.modal.open({title: 'Access Request', bodyHtml: 'This feature is coming soon!'});
     }
 </script>

nodejs/views/login.ejs

@@ -7,6 +7,22 @@
 		}
 	});
 
+	// Landing here with no explanation ("why am I on the SSO login page?") is
+	// exactly what happens when another app's "Log in with SSO" button sends
+	// an unauthenticated user through /oauth/authorize, which bounces them
+	// here with ?redirect=. Tell them what's happening instead of leaving it
+	// a mystery.
+	$(document).ready(function(){
+		var redirect = <%- JSON.stringify(redirect || '') %>;
+		if(redirect){
+			var isOauth = /\/oauth\/authorize/.test(redirect);
+			var message = isOauth
+				? 'Log in to continue — an application is requesting access to your account.'
+				: "Log in to continue to what you were doing — you'll be sent back afterward.";
+			app.messages.action(message, $('.card').first(), 'info');
+		}
+	});
+
 	function setOtpMethod(method) {
 		$('#otpMethodInput').val(method);
 		$('#otpMethodEmail').toggleClass('active', method === 'email').toggleClass('btn-secondary', method === 'email').toggleClass('btn-outline-secondary', method !== 'email');

nodejs/views/oauth_authorize.ejs

@@ -39,7 +39,7 @@
 			app.api.post('oauth/authorize', oauthParams, function(error, data){
 				if(error){
 					$btn.prop('disabled', false).html('<i class="fa-solid fa-check"></i> Allow');
-					app.util.actionMessage(data.message || 'Authorization failed.', $('#authorize-card'), 'danger');
+					app.messages.action(data.message || 'Authorization failed.', $('#authorize-card'), 'danger');
 					return;
 				}
 				window.location.href = data.redirect_url;

nodejs/views/onboarding.ejs

@@ -38,7 +38,7 @@
 	async function acceptTos() {
 		var checkbox = document.getElementById('tosCheckbox');
 		if (!checkbox.checked) {
-			alert('Please read and check the box to accept the Terms of Service.');
+			app.messages.toast('Please read and check the box to accept the Terms of Service.', 'danger');
 			return;
 		}
 		try {
@@ -50,14 +50,14 @@
 			document.getElementById('section-tos').style.display = 'none';
 			checkAllDone();
 		} catch(e) {
-			alert('Could not save TOS acceptance. Please try again.');
+			app.messages.toast('Could not save TOS acceptance. Please try again.', 'danger');
 		}
 	}
 
 	async function saveDob() {
 		var dob = document.getElementById('dobInput').value;
 		if (!dob) {
-			alert('Please enter your date of birth.');
+			app.messages.toast('Please enter your date of birth.', 'danger');
 			return;
 		}
 		try {
@@ -73,7 +73,7 @@
 			document.getElementById('section-dob').style.display = 'none';
 			checkAllDone();
 		} catch(e) {
-			alert('Could not save date of birth. Please try again.');
+			app.messages.toast('Could not save date of birth. Please try again.', 'danger');
 		}
 	}
 
@@ -81,11 +81,11 @@
 		var pw  = document.getElementById('pwInput').value;
 		var pw2 = document.getElementById('pwInput2').value;
 		if (!pw || pw.length < 5) {
-			alert('Password must be at least 5 characters.');
+			app.messages.toast('Password must be at least 5 characters.', 'danger');
 			return;
 		}
 		if (pw !== pw2) {
-			alert('Passwords do not match.');
+			app.messages.toast('Passwords do not match.', 'danger');
 			return;
 		}
 		try {
@@ -101,7 +101,7 @@
 			document.getElementById('section-password').style.display = 'none';
 			checkAllDone();
 		} catch(e) {
-			alert('Could not change password. Please try again.');
+			app.messages.toast('Could not change password. Please try again.', 'danger');
 		}
 	}
 

nodejs/views/profile.ejs

@@ -27,10 +27,10 @@
 
 	async function removeFromGroup(cn, btn){
 		const $row = $(btn).closest('tr');
-		const confirmed = await app.util.actionConfirm(`Remove ${currentUser.uid} from "${cn}"?`, $row, 'warning');
+		const confirmed = await app.messages.confirm(`Remove ${currentUser.uid} from "${cn}"?`, $row, 'warning');
 		if (!confirmed) return;
 		app.api.delete('group/' + encodeURIComponent(cn) + '/' + encodeURIComponent(currentUser.uid), function(error, data){
-			if(error){ app.util.actionMessage((data && data.message) || 'Failed to remove from group', $row, 'danger'); return; }
+			if(error){ app.messages.action((data && data.message) || 'Failed to remove from group', $row, 'danger'); return; }
 			$.scope.mygroups.remove('cn', cn);
 		});
 	}
@@ -43,7 +43,7 @@
 		for(const cn of cns){
 			await new Promise(function(resolve){
 				app.api.put('group/' + encodeURIComponent(cn) + '/' + encodeURIComponent(currentUser.uid), {}, function(error, data){
-					if(error) app.util.actionMessage((data && data.message) || `Failed to add to "${cn}"`, $card, 'danger');
+					if(error) app.messages.action((data && data.message) || `Failed to add to "${cn}"`, $card, 'danger');
 					resolve();
 				});
 			});
@@ -64,10 +64,10 @@
 
 	async function removePersonalGroupMember(memberUid, btn){
 		const $row = $(btn).closest('tr');
-		const confirmed = await app.util.actionConfirm(`Remove ${memberUid} from ${currentUser.uid}'s group?`, $row, 'warning');
+		const confirmed = await app.messages.confirm(`Remove ${memberUid} from ${currentUser.uid}'s group?`, $row, 'warning');
 		if (!confirmed) return;
 		app.api.delete('user/' + encodeURIComponent(currentUser.uid) + '/group-member/' + encodeURIComponent(memberUid), function(error, data){
-			if(error){ app.util.actionMessage((data && data.message) || 'Failed to remove from group', $row, 'danger'); return; }
+			if(error){ app.messages.action((data && data.message) || 'Failed to remove from group', $row, 'danger'); return; }
 			$.scope.personalGroupMembers.remove('uid', memberUid);
 		});
 	}
@@ -80,7 +80,7 @@
 		for(const uid of uids){
 			await new Promise(function(resolve){
 				app.api.put('user/' + encodeURIComponent(currentUser.uid) + '/group-member/' + encodeURIComponent(uid), {}, function(error, data){
-					if(error) app.util.actionMessage((data && data.message) || `Failed to add "${uid}"`, $card, 'danger');
+					if(error) app.messages.action((data && data.message) || `Failed to add "${uid}"`, $card, 'danger');
 					resolve();
 				});
 			});
@@ -176,7 +176,7 @@
 
 	async function toggleActive(uid, active){
 		app.user.setActive(uid, active, async function(error, data){
-			if(error) return alert('Failed to update user status');
+			if(error) return app.messages.toast('Failed to update user status', 'danger');
 			currentUser = await determinUser();
 			renderProfile(currentUser);
 		});
@@ -184,11 +184,11 @@
 
 	async function deleteUser(uid, btn){
 		const $card = $(btn).closest('.card');
-		const confirmed = await app.util.actionConfirm(`Delete user "${uid}"?`, $card, 'warning');
+		const confirmed = await app.messages.confirm(`Delete user "${uid}"?`, $card, 'warning');
 		if (!confirmed) return;
 		app.api.delete('user/' + uid, function(error, data){
 			if (error) {
-				app.util.actionMessage(data.message || 'Failed to delete user', $card, 'danger');
+				app.messages.action(data.message || 'Failed to delete user', $card, 'danger');
 				return;
 			}
 			window.location.href = '/users';
@@ -220,9 +220,6 @@
 		if(isOwnProfile){
 			$('#own-api-tokens-section').show();
 			tableAJAX();
-			$('form[action="api-token/"]').attr('evalAJAX',
-				'showSecret(data.token); tableAJAX(); $form.trigger("reset");'
-			);
 		}
 	});
 </script>
@@ -545,83 +542,35 @@
 </div>
 </div>
 
-<!-- Token modal (shown once on create/rotate) -->
-<div class="modal fade" id="secretModal" tabindex="-1">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title"><i class="fa-solid fa-key"></i> API Token</h5>
-				<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-			</div>
-			<div class="modal-body">
-				<p class="text-danger"><i class="fa-solid fa-triangle-exclamation"></i> Save this token now — it will <strong>not</strong> be shown again.</p>
-				<div class="input-group">
-					<input type="text" id="secretValue" class="form-control font-monospace" readonly>
-					<button class="btn btn-outline-secondary" onclick="copySecret()" title="Copy">
-						<i class="fa-solid fa-copy"></i>
-					</button>
-				</div>
-				<p class="mt-3 mb-0 text-muted small">Use it as a bearer token:<br><code>Authorization: Bearer &lt;token&gt;</code></p>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Done</button>
-			</div>
-		</div>
-	</div>
-</div>
-
-<!-- Edit modal -->
-<div class="modal fade" id="editModal" tabindex="-1">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title"><i class="fa-solid fa-pen-to-square"></i> Edit API Token</h5>
-				<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-			</div>
-			<div class="modal-body">
-				<div class="card-header actionMessage mb-3" style="display:none"></div>
-				<input type="hidden" id="edit-id">
-				<div class="mb-3">
-					<label class="form-label">Name</label>
-					<input type="text" id="edit-name" class="form-control shadow">
-				</div>
-				<div class="mb-3">
-					<label class="form-label">Description</label>
-					<input type="text" id="edit-description" class="form-control shadow">
-				</div>
-				<div class="mb-3">
-					<label class="form-label">Expires in (days) <small class="text-muted">(0 = never)</small></label>
-					<input type="number" id="edit-expires_in_days" class="form-control shadow" min="0">
-				</div>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-				<button type="button" class="btn btn-primary" onclick="saveEdit(this)"><i class="fa-solid fa-floppy-disk"></i> Save</button>
-			</div>
-		</div>
-	</div>
-</div>
-
 <script type="text/javascript">
 	// Any logged-in user can manage their own API tokens (self-service).
 	// Section is only revealed (see $(document).ready above) when isOwnProfile.
 
-	var secretModal = new bootstrap.Modal(document.getElementById('secretModal'));
-	var editModal   = new bootstrap.Modal(document.getElementById('editModal'));
 	var tokensById = {};
 
-	function showSecret(secret){
-		document.getElementById('secretValue').value = secret;
-		secretModal.show();
+	// Shared "reveal secret once" display -- same pattern as jump-host's and
+	// proxy's showToken().
+	function showToken(title, token){
+		app.modal.open({title: title, bodyHtml:
+			'<p class="text-danger"><i class="fa-solid fa-triangle-exclamation"></i> Save this token now — it will <strong>not</strong> be shown again.</p>'
+			+ '<div class="input-group"><input type="text" class="form-control font-monospace" id="revealed-token" readonly value="' + app.util.escapeHtml(token) + '">'
+			+   '<button class="btn btn-outline-secondary" onclick="copyFieldValue(\'#revealed-token\')" title="Copy"><i class="fa-solid fa-copy"></i></button></div>'
+			+ '<p class="mt-3 mb-0 text-muted small">Use it as a bearer token:<br><code>Authorization: Bearer ' + app.util.escapeHtml(token) + '</code></p>'
+		});
 	}
-	function copySecret(){ copyField('secretValue'); }
-
-	function copyField(id, btn){
-		var el = document.getElementById(id);
-		if(!el) return;
-		el.select(); el.setSelectionRange(0, 99999); document.execCommand('copy');
-		if(btn){ var $i = $(btn).find('i'), prev = $i.attr('class');
-			$i.attr('class', 'fa-solid fa-check'); setTimeout(function(){ $i.attr('class', prev); }, 1200); }
+	// Not the checkmark-flash technique this file used to use for its copy
+	// buttons -- FontAwesome replaces <i> icons with inline <svg>, so
+	// swapping the <i>'s class silently no-ops. A toast doesn't have that
+	// problem.
+	function copyFieldValue(sel){
+		var $el = $(sel);
+		var text = $el.val();
+		if(!text) return;
+		navigator.clipboard.writeText(text).then(function(){
+			app.messages.toast('Copied to clipboard', 'success');
+		}, function(){
+			app.messages.toast('Could not copy — select and copy manually', 'danger');
+		});
 	}
 
 	function fmtTime(ms){
@@ -637,9 +586,9 @@
 		// expires_at is type:number (a real number); isExpired is a class getter
 		// that is NOT serialized to the client, so compute expiry here.
 		var exp = Number(token.expires_at);
-		if(!exp) return '<span class="badge bg-secondary">never</span>';
-		if(Date.now() > exp) return '<span class="badge bg-danger">expired</span>';
-		return '<span class="badge bg-warning text-dark">' + moment(exp, "x").fromNow() + '</span>';
+		if(!exp) return '<span class="badge text-bg-secondary">never</span>';
+		if(Date.now() > exp) return '<span class="badge text-bg-danger">expired</span>';
+		return '<span class="badge text-bg-warning">' + moment(exp, "x").fromNow() + '</span>';
 	}
 
 	function processToken(token){
@@ -653,55 +602,107 @@
 
 	async function tableAJAX(){
 		let data = await app.apiToken.list();
+		var tokens = data.results || [];
 		$.scope.apiTokenCard.empty();
-		$.each(data.results, function(_, token){
+		tokens.forEach(function(token){
 			$.scope.apiTokenCard.push(processToken(token));
 		});
+		$('#api-tokens-empty').toggle(tokens.length === 0);
 	}
 
 	async function revokeToken(id, name, btn){
 		var $card = $(btn).closest('.card');
 		$card.addClass('table-warning');
-		var confirmed = await app.util.actionConfirm('Revoke API token "' + name + '"? It stops working immediately.', $card, 'warning');
+		var confirmed = await app.messages.confirm('Revoke API token "' + name + '"? It stops working immediately.', $card, 'warning');
 		$card.removeClass('table-warning');
 		if(!confirmed) return;
 		app.apiToken.remove({id: id}, function(error, data){
-			if(error){ app.util.actionMessage('Error: ' + data.message, $card, 'danger'); return; }
+			if(error){ app.messages.action('Error: ' + data.message, $card, 'danger'); return; }
 			$.scope.apiTokenCard.remove('id', id);
 		});
 	}
 
 	async function rotateToken(id, name, btn){
 		var $card = $(btn).closest('.card');
-		var confirmed = await app.util.actionConfirm('Rotate API token "' + name + '"? The old token stops working immediately.', $card, 'warning');
+		var confirmed = await app.messages.confirm('Rotate API token "' + name + '"? The old token stops working immediately.', $card, 'warning');
 		if(!confirmed) return;
 		app.apiToken.rotate({id: id}, function(error, data){
-			if(error){ app.util.actionMessage('Error: ' + data.message, $card, 'danger'); return; }
-			showSecret(data.token);
+			if(error){ app.messages.action('Error: ' + data.message, $card, 'danger'); return; }
+			showToken('API Token Rotated', data.token);
 			tableAJAX();
 		});
 	}
 
-	function editToken(id){
-		var t = tokensById[id]; if(!t) return;
-		$('#edit-id').val(id);
-		$('#edit-name').val(t.name || '');
-		$('#edit-description').val(t.description || '');
-		$('#edit-expires_in_days').val('');
-		editModal.show();
+	// Create is a native <form>+formAJAX submission (matching this app's own
+	// hostModal-style convention) rather than a JS-built payload. Deliberately
+	// does NOT call app.modal.close() before showToken() -- app.modal is a
+	// singleton, and close() immediately followed by open() in the same tick
+	// collides with Bootstrap's hide-transition guard (show() silently
+	// no-ops while _isTransitioning is still true from the just-started
+	// hide()). open() alone already overwrites the (already-visible) modal's
+	// content in place.
+	function createApiToken(){
+		var $body = app.modal.open({
+			title: 'New API Token',
+			bodyHtml:
+				'<div class="actionMessage mb-3" style="display:none"></div>'
+				+ '<form id="newTokenForm" action="api-token/" method="post" onsubmit="formAJAX(this)" evalAJAX="showToken(\'API Token Created\', data.token); tableAJAX();">'
+				+   '<div class="mb-3">'
+				+     '<label class="form-label">Name</label>'
+				+     '<input type="text" class="form-control shadow" name="name" placeholder="CI user sync" validate=":1">'
+				+   '</div>'
+				+   '<div class="mb-3">'
+				+     '<label class="form-label">Description</label>'
+				+     '<input type="text" class="form-control shadow" name="description" placeholder="Used by the nightly sync job">'
+				+   '</div>'
+				+   '<div class="mb-3">'
+				+     '<label class="form-label">Expires in (days) <small class="text-muted">(0 = never)</small></label>'
+				+     '<input type="number" class="form-control shadow" name="expires_in_days" value="0" min="0">'
+				+   '</div>'
+				+ '</form>',
+			footer: {
+				buttonsHtml: '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>'
+					+ '<button type="submit" form="newTokenForm" class="btn btn-outline-dark"><i class="fa-solid fa-plus"></i> Create</button>',
+			},
+		});
+		$body.find('[name=name]').focus();
 	}
 
-	function saveEdit(btn){
-		var $msg = $('#editModal .actionMessage');
+	function editToken(id){
+		var t = tokensById[id]; if(!t) return;
+		app.modal.open({
+			title: 'Edit Token',
+			bodyHtml:
+				'<input type="hidden" id="edit-token-id" value="' + app.util.escapeHtml(id) + '">'
+				+ '<div class="mb-3">'
+				+   '<label class="form-label">Name</label>'
+				+   '<input type="text" class="form-control shadow" id="edit-token-name" value="' + app.util.escapeHtml(t.name || '') + '">'
+				+ '</div>'
+				+ '<div class="mb-3">'
+				+   '<label class="form-label">Description</label>'
+				+   '<input type="text" class="form-control shadow" id="edit-token-description" value="' + app.util.escapeHtml(t.description || '') + '">'
+				+ '</div>'
+				+ '<div class="mb-3">'
+				+   '<label class="form-label">Expires in (days, blank = keep as-is, 0 = never)</label>'
+				+   '<input type="number" class="form-control shadow" id="edit-token-days" min="0">'
+				+ '</div>',
+			footer: {
+				metaHtml: 'Created by ' + app.util.escapeHtml(t.created_by || '—') + ' on ' + fmtTime(t.created_on),
+				buttonsHtml: app.modal.footerButtons({onSave: 'saveEditToken()', saveLabel: 'Save'}),
+			},
+		});
+	}
+
+	function saveEditToken(){
 		var payload = {
-			id: $('#edit-id').val(),
-			name: $('#edit-name').val(),
-			description: $('#edit-description').val(),
-			expires_in_days: $('#edit-expires_in_days').val(),
+			id: $('#edit-token-id').val(),
+			name: $('#edit-token-name').val(),
+			description: $('#edit-token-description').val(),
+			expires_in_days: $('#edit-token-days').val(),
 		};
 		app.apiToken.update(payload, function(error, data){
-			if(error){ app.util.actionMessage((data && data.message) || 'Update failed.', $msg.parent(), 'danger'); return; }
-			editModal.hide();
+			if(error){ app.messages.action((data && data.message) || 'Update failed.', app.modal.body(), 'danger'); return; }
+			app.modal.close();
 			tableAJAX();
 		});
 	}
@@ -711,62 +712,45 @@
      runs before this page's own ready handler and would unhide any div.row
      unconditionally, defeating the isOwnProfile check below. -->
 <div id="own-api-tokens-section" style="display:none">
-<div class="row mt-3">
-	<div class="col-12">
-		<h5 class="mb-3"><i class="fa-solid fa-code"></i> API Tokens</h5>
-	</div>
-	<div class="col-md-4">
-		<div class="card shadow-lg">
-			<div class="card-header"><i class="fa-solid fa-plus"></i> New API Token
-				<a href="/docs/api-tokens" class="text-reset float-end" title="Help"><i class="fa-solid fa-circle-question"></i></a>
-			</div>
-			<div class="card-header actionMessage" style="display:none"></div>
-			<div class="card-body">
-				<p class="text-muted small">A personal access token lets scripts and services call the SSO management API as you, with your permissions. Treat it like a password.</p>
-				<form action="api-token/" method="post" onsubmit="formAJAX(this)">
-					<div class="mb-3">
-						<label class="form-label">Name</label>
-						<input type="text" class="form-control shadow" name="name" placeholder="CI user sync" validate=":1">
-					</div>
-					<div class="mb-3">
-						<label class="form-label">Description</label>
-						<input type="text" class="form-control shadow" name="description" placeholder="Used by the nightly sync job">
-					</div>
-					<div class="mb-3">
-						<label class="form-label">Expires in (days) <small class="text-muted">(0 = never)</small></label>
-						<input type="number" class="form-control shadow" name="expires_in_days" value="0" min="0">
-					</div>
-					<button type="submit" class="btn btn-outline-dark"><i class="fa-solid fa-plus"></i> Create</button>
-				</form>
-			</div>
-		</div>
-	</div>
+<div class="row mt-3 justify-content-center">
 	<div class="col-md-8">
-		<div class="card-header actionMessage" style="display:none"></div>
-
-		<div jq-repeat="apiTokenCard" jq-index-key="id" id="apitoken-card-{{id}}" class="card shadow mb-3">
-			<div class="card-header">
-				<h5><i class="fa-solid fa-key"></i> {{ name }}</h5>
-				<small class="text-muted font-monospace">{{ id_short }}</small>
+		<div class="card shadow-lg">
+			<div class="card-header d-flex justify-content-between align-items-center">
+				<span><i class="fa-solid fa-key me-1"></i> API Tokens</span>
+				<span>
+					<a href="/docs/api-tokens" class="text-reset me-2" title="Help"><i class="fa-solid fa-circle-question"></i></a>
+					<button class="btn btn-sm btn-primary" onclick="createApiToken()"><i class="fa-solid fa-plus"></i> New token</button>
+				</span>
 			</div>
 			<div class="card-header actionMessage" style="display:none"></div>
+			<p class="text-muted small px-3 pt-3 mb-0">A personal access token lets scripts and services call the SSO management API as you, with your permissions. Treat it like a password.</p>
 			<div class="card-body">
-				{{ #description }}<p>{{ description }}</p>{{ /description }}
-				<dl class="row mb-0">
-					<dt class="col-sm-3">Token ID</dt>
-					<dd class="col-sm-9"><code>{{ id_short }}</code></dd>
-					<dt class="col-sm-3">Created</dt>
-					<dd class="col-sm-9">{{{ created_display }}}</dd>
-					<dt class="col-sm-3">Last used</dt>
-					<dd class="col-sm-9">{{{ last_used_display }}}</dd>
-					<dt class="col-sm-3">Expires</dt>
-					<dd class="col-sm-9">{{{ expires_display }}}</dd>
-				</dl>
-			</div>
-			<div class="card-footer">
-				<button type="button" onclick="editToken('{{id}}')" class="btn btn-primary btn-sm"><i class="fa-solid fa-pen-to-square"></i> Edit</button>
-				<button type="button" onclick="rotateToken('{{id}}', '{{name}}', this)" class="btn btn-warning btn-sm"><i class="fa-solid fa-arrows-rotate"></i> Rotate</button>
-				<button type="button" onclick="revokeToken('{{id}}', '{{name}}', this)" class="btn btn-danger btn-sm float-end"><i class="fa-solid fa-trash"></i> Revoke</button>
+				<p id="api-tokens-empty" class="text-muted mb-0" style="display:none">No API tokens.</p>
+				<div jq-repeat="apiTokenCard" jq-index-key="id" id="apitoken-card-{{id}}" class="card shadow mb-3">
+					<div class="card-header">
+						<h5><i class="fa-solid fa-key"></i> {{ name }}</h5>
+						<small class="text-muted font-monospace">{{ id_short }}</small>
+					</div>
+					<div class="card-header actionMessage" style="display:none"></div>
+					<div class="card-body">
+						{{ #description }}<p>{{ description }}</p>{{ /description }}
+						<dl class="row mb-0">
+							<dt class="col-sm-3">Token ID</dt>
+							<dd class="col-sm-9"><code>{{ id_short }}</code></dd>
+							<dt class="col-sm-3">Created</dt>
+							<dd class="col-sm-9">{{{ created_display }}}</dd>
+							<dt class="col-sm-3">Last used</dt>
+							<dd class="col-sm-9">{{{ last_used_display }}}</dd>
+							<dt class="col-sm-3">Expires</dt>
+							<dd class="col-sm-9">{{{ expires_display }}}</dd>
+						</dl>
+					</div>
+					<div class="card-footer">
+						<button type="button" onclick="editToken('{{id}}')" class="btn btn-primary btn-sm"><i class="fa-solid fa-pen-to-square"></i> Edit</button>
+						<button type="button" onclick="rotateToken('{{id}}', '{{name}}', this)" class="btn btn-warning btn-sm"><i class="fa-solid fa-arrows-rotate"></i> Rotate</button>
+						<button type="button" onclick="revokeToken('{{id}}', '{{name}}', this)" class="btn btn-danger btn-sm float-end"><i class="fa-solid fa-trash"></i> Revoke</button>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>

nodejs/views/top.ejs

@@ -1,138 +1,151 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title><%- name %> <%- title %></title>
-    <!-- Favicon -->
-    <link rel="icon" type="image/svg+xml" href="<%- logo %>">
-    <!-- CSS are placed here -->
-    <link rel="stylesheet" href="/static-modules/bootstrap/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/static-modules/@fortawesome/fontawesome-free/css/all.min.css">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		<title><%- name %> <%- title %></title>
+		<!-- Shared UI shell — byte-identical across sso-manager-node, proxy and
+		     jump-host. Everything per-app comes from `ui` (utils/ui.js, exposed
+		     via app.locals in app.js). Edit all three copies together. -->
+		<!-- Favicon -->
+		<link rel="icon" type="image/svg+xml" href="<%- ui.faviconUrl %>">
+		<!-- CSS are placed here -->
+		<link rel="stylesheet" href="/static-modules/bootstrap/dist/css/bootstrap.min.css">
+		<link rel="stylesheet" href="/static-modules/@fortawesome/fontawesome-free/css/all.min.css">
 
-    <link rel='stylesheet' href='/static/css/styles.css' />
-    <!-- Scripts are placed here -->
-    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
-    <script type="text/javascript" src='/static-modules/jquery/dist/jquery.js'></script>
-    <!-- <script type="text/javascript" src="/static/lib/js/popper-1.16.0.min.js"></script> -->
-    <!-- <script type="text/javascript" src="/static-modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
-    <script type="text/javascript" src="/static-modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script type="text/javascript" src="/static-modules/@fortawesome/fontawesome-free/js/all.min.js"></script>
-    <script type="text/javascript" src='/static-modules/mustache/mustache.min.js'></script>
-    <script type="text/javascript" src='/static-modules/jq-repeat/dist/js/jq-repeat.js'></script>
-    <script type="text/javascript" src='/static/lib/js/val.js'></script>
-    <script type="text/javascript" src="/static-modules/moment/moment.js"></script>
-    <script type="text/javascript" src="/static/lib/js/app-base.js"></script>
-    <script type="text/javascript" src="/static/js/app.js"></script>
-  </head>
-  <body>
+		<link rel='stylesheet' href='/static/css/styles.css' />
+		<!-- Scripts are placed here -->
+		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
+		<script type="text/javascript" src='/static-modules/jquery/dist/jquery.js'></script>
+		<script type="text/javascript" src="/static-modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+		<script type="text/javascript" src="/static-modules/@fortawesome/fontawesome-free/js/all.min.js"></script>
+		<script type="text/javascript" src='/static-modules/mustache/mustache.min.js'></script>
+		<script type="text/javascript" src='/static-modules/jq-repeat/dist/js/jq-repeat.js'></script>
+		<script type="text/javascript" src="/static-modules/moment/moment.js"></script>
+		<script type="text/javascript" src="/static/lib/js/app-base.js"></script>
+		<script type="text/javascript" src="/static-modules/@simpleworkjs/frontend/lib/app.messages.js"></script>
+		<script type="text/javascript" src="/static-modules/@simpleworkjs/frontend/lib/app.modal.js"></script>
+		<script type="text/javascript" src="/static-modules/@simpleworkjs/frontend/lib/app.validate.js"></script>
+		<script type="text/javascript" src="/static/js/app.js"></script>
+	</head>
+	<body>
 
-  	<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
-  	  <a class="navbar-brand" href="/"><img src="<%- logo %>" height="28" class="me-2" alt=""><%- name %> <%- titleIcon %></a>
-  	  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-  	    <span class="navbar-toggler-icon"></span>
-  	  </button>
-  	  <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
-  	    <ul class="navbar-nav top-nav">
-  	      <li class="nav-item group-required group-required-app_sso_admin">
-  	        <a class="nav-link" href="/users"><i class="fa-solid fa-users"></i>
-  	          Users
-  	        </a>
-  	      </li>
-  	      <li class="nav-item group-required group-required-app_sso_admin">
-  	        <a class="nav-link" href="/groups"><i class="fa-solid fa-users-viewfinder"></i>
-  	          Groups
-  	        </a>
-  	      </li>
-  	      <li class="nav-item group-required group-required-app_sso_admin group-required-app_sso_directory_admin">
-  	        <a class="nav-link" href="/directory"><i class="fa-solid fa-server"></i>
-  	          Directory
-  	        </a>
-  	      </li>
+		<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+			<a class="navbar-brand" href="/"><img src="<%- logo %>" height="28" class="me-2" alt=""><%- name %> <%- titleIcon %></a>
+			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+				<span class="navbar-toggler-icon"></span>
+			</button>
+			<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
+				<ul class="navbar-nav top-nav">
+					<%# Items gated on a group start hidden (.group-required) and are
+					    revealed by app-base.js for the groups the user is in. %>
+					<% for(const item of ui.nav){ %>
+					<li class="nav-item<%- item.groups.length ? ' group-required' : '' %><%- item.groups.map(group => ' group-required-' + group).join('') %>">
+						<a class="nav-link" href="<%- item.href %>"><i class="<%- item.icon %>"></i>
+							<%- item.label %>
+						</a>
+					</li>
+					<% } %>
+				</ul>
+				<div class="form-inline mt-2 mt-md-0">
+					<% if(ui.profileUrl){ %>
+					<a id="cl-username" class="navbar-text text-light me-3" href="<%- ui.profileUrl %>" style="display: none;">
+						<i class="fa-solid fa-user me-1"></i><span id="cl-username-text"></span>
+					</a>
+					<% } else { %>
+					<span id="cl-username" class="navbar-text text-light me-3" style="display: none;">
+						<i class="fa-solid fa-user me-1"></i><span id="cl-username-text"></span>
+					</span>
+					<% } %>
+					<a id="cl-login-button" class="btn btn-outline-danger my-2 my-sm-0" onclick="app.auth.forceLogin()" style="display: none;">
+						<i class="fas fa-sign-in"></i>
+						Login
+					</a>
+
+					<button id="cl-logout-button" class="btn btn-outline-danger my-2 my-sm-0" onclick="app.auth.logOut(function(){ window.location.href = '<%- ui.logoutRedirect %>'; })" style="display: none;">
+						<i class="fas fa-sign-out"></i>
+						Log Out
+					</button>
+				</div>
+			</div>
+		</nav>
+
+		<% if(ui.updateCheck){ %>
+		<!-- Admin-only "a newer release is available" notice (services/update_check.js).
+		     Dismissal is per-browser-session only (sessionStorage), not persisted server-side.
+		     Fixed-positioned below the fixed navbar (a plain in-flow div here would render
+		     UNDER the nav, since fixed elements are taken out of document flow) -- shown/hidden
+		     dynamically, so #spa-shell's margin-top is adjusted in JS to make room for it. -->
+		<div id="update-banner" class="alert alert-info alert-dismissible mb-0 rounded-0 text-center" style="display:none; position:fixed; left:0; right:0; z-index:1029;">
+			<span id="update-banner-text"></span>
+			<button type="button" class="btn-close" onclick="dismissUpdateBanner()"></button>
+		</div>
+
+		<script type="text/javascript">
+			function showUpdateBanner(){
+				let $nav = $('nav.fixed-top');
+				let $banner = $('#update-banner');
+				$banner.css('top', $nav.outerHeight() + 'px').show();
+				$('#spa-shell').css('margin-top', ($nav.outerHeight() + $banner.outerHeight()) + 'px');
+			}
+
+			function dismissUpdateBanner(){
+				$('#update-banner').hide();
+				$('#spa-shell').css('margin-top', '');
+				sessionStorage.setItem('update-banner-dismissed', '1');
+			}
+
+			function checkForUpdate(){
+				if(sessionStorage.getItem('update-banner-dismissed')) return;
+				app.api.get('update-check', function(error, info){
+					if(error || !info || !info.updateAvailable) return;
+					$('#update-banner-text').html(
+						'A newer version of <%- ui.updateLabel %> is available: <b>v' + info.latestVersion + '</b> ' +
+						'(running v' + info.currentVersion + ') — ' +
+						'<a href="' + info.releaseUrl + '" target="_blank" class="alert-link">see what changed</a>.'
+					);
+					showUpdateBanner();
+				});
+			}
+		</script>
+		<% } %>
+
+		<script type="text/javascript">
+			$(document).ready(function(){
+
+				// Set the correct link to active in the top nav bar
+				$('.top-nav a').each(function(index){
+					let $this = $(this);
+					$this.removeClass('active');
+					if($this.attr('href').toLocaleLowerCase() === window.location.pathname.toLocaleLowerCase()){
+						$this.addClass('active')
+					}
+				})
+
+				// Set the correct login/logout button, and reveal the current user's
+				// name once we know who they are. Group-gated nav items are revealed
+				// by app-base.js off the same cached user/me.
+				app.auth.isLoggedIn(function(error, me){
+					if(me){
+						$('#cl-logout-button').show();
+						let username = me.uid || me.username;
+						if(username){
+							$('#cl-username-text').text(username);
+							$('#cl-username').css('display', '');
+						}
+
+						<% if(ui.updateCheck){ %>
+						if(me.isAdmin) checkForUpdate();
+						<% } %>
+					}else{
+						$('#cl-login-button').show();
+					}
+				});
+
+			});
+		</script>
 
 
-  	      <li class="nav-item group-required group-required-app_sso_admin">
-  	        <a class="nav-link" href="/executive">
-  	          <i class="fa-solid fa-gauge-high"></i>
-  	          Executive
-  	        </a>
-  	      </li>
-  	    </ul>
-  	    <div class="form-inline mt-2 mt-md-0">
-  	      <a id="cl-username" class="navbar-text text-light me-3" href="/profile" style="display: none;">
-  	        <i class="fa-solid fa-user me-1"></i><span id="cl-username-text"></span>
-  	      </a>
-  	      <a id="cl-login-button" class="btn btn-outline-danger my-2 my-sm-0" onclick="app.auth.forceLogin()" style="display: none;">
-  	        <i class="fas fa-sign-out"></i>
-  	        Login
-  	      </a>
-
-  	      <button id="cl-logout-button" class="btn btn-outline-danger my-2 my-sm-0" onclick="app.auth.logOut(e => window.location.href='/')" style="display: none;">
-  	        <i class="fas fa-sign-out"></i>
-  	        Log Out
-  	      </button>
-  	    </div>
-  	  </div>
-  	</nav>
-
-  	<div id="update-banner" class="alert alert-info alert-dismissible mb-0 rounded-0 text-center" style="display:none; position:fixed; left:0; right:0; z-index:1029;">
-  	  <span id="update-banner-text"></span>
-  	  <button type="button" class="btn-close" onclick="dismissUpdateBanner()"></button>
-  	</div>
-
-  	<script type="text/javascript">
-  	  function showUpdateBanner(){
-  	    let $nav = $('nav.fixed-top');
-  	    let $banner = $('#update-banner');
-  	    $banner.css('top', $nav.outerHeight() + 'px').show();
-  	    $('#spa-shell').css('margin-top', ($nav.outerHeight() + $banner.outerHeight()) + 'px');
-  	  }
-  	  function dismissUpdateBanner(){
-  	    $('#update-banner').hide();
-  	    $('#spa-shell').css('margin-top', '');
-  	    sessionStorage.setItem('update-banner-dismissed', '1');
-  	  }
-
-  	  $(document).ready(async function(){
-
-  	    // Set the correct link to active in the top nav bar
-  	    $('.top-nav a').each(function(index){
-  	      let $this = $(this);
-  	      $this.removeClass('active');
-  	      if($this.attr('href').toLocaleLowerCase() === window.location.pathname.toLocaleLowerCase()){
-  	        $this.addClass('active')
-  	      }
-  	    })
-
-  	    // Set the correct login/logout button, and reveal the current user's
-  	    // name (linking to their profile) once we know who they are.
-  	    var me = await app.auth.isLoggedIn();
-  	    if(me){
-  	      $('#cl-logout-button').show();
-  	      if(me.uid){
-  	        $('#cl-username-text').text(me.uid);
-  	        $('#cl-username').css('display', '');
-  	      }
-
-  	      if(await app.auth.memberOf('app_sso_admin', me) && !sessionStorage.getItem('update-banner-dismissed')){
-  	        app.api.get('update-check', function(error, info){
-  	          if(error || !info || !info.updateAvailable) return;
-  	          $('#update-banner-text').html(
-  	            'A newer version of SSO Manager is available: <b>v' + info.latestVersion + '</b> ' +
-  	            '(running v' + info.currentVersion + ') — ' +
-  	            '<a href="' + info.releaseUrl + '" target="_blank" class="alert-link">see what changed</a>.'
-  	          );
-  	          showUpdateBanner();
-  	        });
-  	      }
-  	    }else{
-  	      $('#cl-login-button').show();
-  	    }
-
-  	  });
-  	</script>
-
-
-  	<!-- Container -->
-  	<div id="spa-shell" class="container-fluid">
-      <div class="actionMessage" style="display:none;"></div>
+		<!-- Container -->
+		<div id="spa-shell" class="container-fluid">
+			<div class="actionMessage" style="display:none;"></div>

nodejs/views/users.ejs

@@ -6,7 +6,7 @@
 	function renderUsers(){
 		app.user.list(function(error, data){
 			if(error){
-				app.util.actionMessage(data.message, $('#tab-people'), 'danger');
+				app.messages.action(data.message, $('#tab-people'), 'danger');
 				return;
 			}
 			$.scope.userRow.empty();
@@ -19,7 +19,7 @@
 
 	function toggleActive(uid, active){
 		app.user.setActive(uid, active, function(error, data){
-			if(error) return alert('Failed to update user status');
+			if(error) return app.messages.toast('Failed to update user status', 'danger');
 			renderUsers();
 		});
 	}
@@ -128,7 +128,7 @@
 	async function revokeInvite(tokenId, btn) {
 		$thisRow = $(btn).closest('tr');
 		$thisRow.addClass('table-warning');
-		let confirmation = await app.util.actionConfirm('Revoke selected invite token?', $thisRow, 'warning');
+		let confirmation = await app.messages.confirm('Revoke selected invite token?', $thisRow, 'warning');
 		if(!confirmation){
 			$thisRow.removeClass('table-warning');
 			return;
@@ -137,7 +137,7 @@
 			await app.api.delete(`user/invite/${tokenId}`);
 			loadInvites();
 		} catch(e) {
-			alert('Failed to revoke invite.');
+			app.messages.action('Failed to revoke invite.', $thisRow, 'danger');
 		}
 	}
 
@@ -153,12 +153,12 @@
 	async function deleteUser(uid, btn){
 		const $row = $(btn).closest('tr');
 		$row.addClass('table-warning');
-		const confirmed = await app.util.actionConfirm(`Delete user "${uid}"?`, $row, 'warning');
+		const confirmed = await app.messages.confirm(`Delete user "${uid}"?`, $row, 'warning');
 		$row.removeClass('table-warning');
 		if (!confirmed) return;
 		app.api.delete('user/' + uid, function(error, data){
 			if (error) {
-				app.util.actionMessage(data.message || 'Failed to delete user', $row, 'danger');
+				app.messages.action(data.message || 'Failed to delete user', $row, 'danger');
 				return;
 			}
 			renderUsers();