Merge pull request #182 from theta42/release/1.5.0

Release 1.5.0
Release 1.5.0: adopt @simpleworkjs/frontend messages/modal/validate
2026-07-27 14:18:27 -04:00 · 2026-07-27 14:16:47 -04:00 · 2026-07-27 14:10:13 -04:00 · 2026-07-27 14:07:14 -04:00 · 2026-07-26 16:31:50 -04:00 · 2026-07-26 16:28:44 -04:00
21 changed files with 617 additions and 421 deletions
@@ -6,6 +6,34 @@ correspond to git tags (`vX.Y.Z`) and `nodejs/package.json`'s `version`.

 ## [Unreleased]

+## [1.5.0] - 2026-07-27
+
+### Changed
+- **Adopted `@simpleworkjs/frontend`'s `app.messages`, `app.modal`, and `app.validate` modules**, replacing the vendored `app.util.actionMessage`/`actionConfirm` in `public/lib/js/app-base.js` and the vendored `public/lib/js/val.js`. Message content is now HTML-escaped, and `app.messages.action` falls back to a page-wide toast when there's no inline `.actionMessage` target. proxy's `host`/`target`/`hostname` wildcard-DNS validation rules (mirroring `utils/hostname_validate.js`) moved to `public/js/app.js`, registered via `$.validateSettings`, since they're proxy-specific and don't belong in the shared package's generic rule set. `app.api`/`app.auth`/`app.pubsub`/`app.socket` are untouched.
+
+## [1.4.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.
+
+### Added
+- `.group-required { display: none }` in `public/css/styles.css`, the base rule the shared gating model reveals against.
+- Admin-only nav items lost their inline `display: none` in favour of that class, and the brand link points at `/` instead of `#`.
+
+### 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.3.0] - 2026-07-25

 ### Added
@@ -69,6 +69,11 @@ app.use(express.json());
 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');
+
 // Per-host SSO endpoints. nginx routes /__proxy_auth/* on every proxied host to
 // the app (see ops/nginx_conf/proxy.conf); these run the OIDC flow and set the
 // per-host session cookie. Mounted before the page router.
@@ -1,18 +1,19 @@
 {
  "name": "proxy-api",
-  "version": "1.2.2",
+  "version": "1.4.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "proxy-api",
-      "version": "1.2.2",
+      "version": "1.4.0",
      "license": "MIT",
      "dependencies": {
        "@fortawesome/fontawesome-free": "^7.3.0",
        "@popperjs/core": "^2.11.8",
        "@simpleworkjs/app-stack": "^1.0.0",
        "@simpleworkjs/conf": "^1.2.0",
+        "@simpleworkjs/frontend": "^0.2.5",
        "@simpleworkjs/ldap": "^1.0.0",
        "@simpleworkjs/oidc-client": "^1.0.0",
        "acme-client": "^5.4.0",
@@ -20,7 +21,7 @@
        "bcrypt": "^6.0.0",
        "bootstrap": "^5.3.8",
        "compression": "^1.8.1",
-        "ejs": "^6.0.1",
+        "ejs": "^3.1.10",
        "express": "^5.2.1",
        "express-rate-limit": "^8.5.2",
        "extend": "^3.0.2",
@@ -308,6 +309,15 @@
        "node": ">=16.0.0"
      }
    },
+    "node_modules/@simpleworkjs/frontend": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@simpleworkjs/frontend/-/frontend-0.2.5.tgz",
+      "integrity": "sha512-PxR7UVPv3gRpdF0WsuAZplF1vYvKsEJQevVPhz9d72U+69vP/OH3tlaAXjtO/apMHfhT1viOPw2gMVOrPSxYZw==",
+      "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",
@@ -436,6 +446,12 @@
        "node": ">=12.0.0"
      }
    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
    "node_modules/asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -832,15 +848,18 @@
      "license": "MIT"
    },
    "node_modules/ejs": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-6.0.1.tgz",
-      "integrity": "sha512-UaaM14yby8U3k02ihS1Bmj5Kz2d7CCQM1scxpgs4Mhkq8F1wR2gl3+Ts4h5Ne4Mnt7M9m4Dw7jsuMr3+xO4vZA==",
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
      "license": "Apache-2.0",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
      "bin": {
        "ejs": "bin/cli.js"
      },
      "engines": {
-        "node": ">=0.12.18"
+        "node": ">=0.10.0"
      }
    },
    "node_modules/encodeurl": {
@@ -1052,6 +1071,42 @@
      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
      "license": "MIT"
    },
+    "node_modules/filelist": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.6.tgz",
+      "integrity": "sha512-5giy2PkLYY1cP39p17Ech+2xlpTRL9HLspOfEgm0L6CwBXBTgsK5ou0JtzYuepxkaQ/tvhCFIJ5uXo0OrM2DxA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.2.tgz",
+      "integrity": "sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
+      "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/fill-range": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -1428,6 +1483,23 @@
      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
      "license": "MIT"
    },
+    "node_modules/jake": {
+      "version": "10.9.4",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
+      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "async": "^3.2.6",
+        "filelist": "^1.0.4",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/jq-repeat": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/jq-repeat/-/jq-repeat-2.2.0.tgz",
@@ -1734,6 +1806,12 @@
        "url": "https://opencollective.com/express"
      }
    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
    "node_modules/picomatch": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
@@ -1,6 +1,6 @@
 {
  "name": "proxy-api",
-  "version": "1.3.0",
+  "version": "1.5.0",
  "author": [
    {
      "name": "William Mantly",
@@ -21,8 +21,9 @@
  "dependencies": {
    "@fortawesome/fontawesome-free": "^7.3.0",
    "@popperjs/core": "^2.11.8",
-    "@simpleworkjs/conf": "^1.2.0",
    "@simpleworkjs/app-stack": "^1.0.0",
+    "@simpleworkjs/conf": "^1.2.0",
+    "@simpleworkjs/frontend": "^0.2.5",
    "@simpleworkjs/ldap": "^1.0.0",
    "@simpleworkjs/oidc-client": "^1.0.0",
    "acme-client": "^5.4.0",
@@ -30,7 +31,7 @@
    "bcrypt": "^6.0.0",
    "bootstrap": "^5.3.8",
    "compression": "^1.8.1",
-    "ejs": "^6.0.1",
+    "ejs": "^3.1.10",
    "express": "^5.2.1",
    "express-rate-limit": "^8.5.2",
    "extend": "^3.0.2",
@@ -18,3 +18,7 @@ body {
 .card-title{
 	font-weight: bold;
 }
+
+.group-required{
+	display: none;
+}
@@ -91,3 +91,72 @@ app.apiToken = (function(app){

 	return {list, get, add, update, remove, rotate};
 })(app);
+
+// Host / target validation, mirrored from the backend (utils/hostname_validate.js):
+// a bare hostname or IPv4 address, no protocol / "/" / ":" / whitespace. The
+// incoming host may be a wildcard ("*.example.com"); the target may not.
+// Proxy-specific, so it's registered here (via @simpleworkjs/frontend's
+// $.validateSettings) rather than in the shared package's generic rule set.
+(function(){
+	var LABEL = /^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/i;
+	// Either one bare label (Docker service names, /etc/hosts entries) or a
+	// dotted hostname with an alphabetic TLD.
+	var HOSTNAME = /^(?=.{1,253}$)(?:(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,63}|[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)$/i;
+	var FORBIDDEN = /[\s/:]/;
+
+	function isIPv4( value ) {
+		var parts = value.split( '.' );
+		if ( parts.length !== 4 ) return false;
+		return parts.every( function( p ) {
+			return /^(0|[1-9]\d{0,2})$/.test( p ) && Number( p ) <= 255;
+		});
+	}
+
+	// Incoming-host pattern: labels may be normal, "*" (one fragment), or "**"
+	// (any number of fragments, incl. a bare "**" global catch-all).
+	function isHostPattern( value ) {
+		if ( value.length > 253 ) return false;
+		return value.split( '.' ).every( function( l ) {
+			return l === '*' || l === '**' || LABEL.test( l );
+		});
+	}
+
+	function forbidden( value ) {
+		return FORBIDDEN.test( value ) || value.includes( '://' );
+	}
+
+	// Incoming host: IPv4 or a wildcard host pattern.
+	function checkHost( value ) {
+		if ( typeof value !== 'string' || value.length === 0 ) return "Required";
+		if ( forbidden( value ) ) return 'No protocol, "/", or ":"';
+		if ( isIPv4( value ) || isHostPattern( value ) ) return;
+		return "Enter a valid host or wildcard (*, **)";
+	}
+
+	// Downstream target: IPv4 or a strict hostname, no wildcard.
+	function checkTarget( value ) {
+		if ( typeof value !== 'string' || value.length === 0 ) return "Required";
+		if ( forbidden( value ) ) return 'No protocol, "/", or ":"';
+		if ( isIPv4( value ) || HOSTNAME.test( value ) ) return;
+		return "Enter a valid hostname or IP";
+	}
+
+	$.validateSettings({
+		rule:{
+			// Incoming host name — hostname, IPv4, or wildcard pattern (*, **).
+			host: function( value ) {
+				return checkHost( value );
+			},
+
+			// Downstream target — hostname or IPv4, no wildcard.
+			target: function( value ) {
+				return checkTarget( value );
+			},
+
+			// Back-compat alias (no wildcard).
+			hostname: function( value ) {
+				return checkTarget( value );
+			},
+		}
+	});
+})();
@@ -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,10 +84,26 @@ app.socket = (function(app){
 app.api = (function(app){
 	var baseURL = '/api/'

-	function post(url, data, callback){
-		if(typeof callback !== 'function') callback = callback2;
+	// 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: method,
+					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: 'POST',
+			type: method,
 			url: baseURL+url,
 			headers:{
 				'auth-token': app.auth.getToken()
@@ -87,40 +112,44 @@ app.api = (function(app){
 			contentType: "application/json; charset=utf-8",
 			dataType: "json",
 			complete: function(res, text){
-				callback ? callback(
+				callback(
 					text !== 'success' ? res.statusText : null,
 					JSON.parse(res.responseText),
 					res.status
-				) : function(){}
+				);
 			}
 		});
 	}

+	function post(url, data, callback){
+		return body('POST', url, data, callback);
+	}
+
 	function put(url, data, callback){
-		if(typeof callback !== 'function') callback = callback2;
-		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 ? callback(
-					text !== 'success' ? res.statusText : null,
-					JSON.parse(res.responseText),
-					res.status
-				) : function(){}
-			}
-		});
+		return body('PUT', url, data, callback);
 	}

-	function remove(url, callback, callback2){
-		if(typeof callback !== 'function') callback = callback2;
+	// 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,
+					headers: { 'auth-token': app.auth.getToken() },
+					contentType: 'application/json; charset=utf-8',
+					dataType: 'json',
+				}).done(resolve).fail(function(xhr){ reject(xhr.responseJSON || {}); });
+			});
+		}
 		return $.ajax({
-			type: 'delete',
+			type: 'DELETE',
 			url: baseURL+url,
 			headers:{
 				'auth-token': app.auth.getToken()
@@ -128,11 +157,11 @@ app.api = (function(app){
 			contentType: "application/json; charset=utf-8",
 			dataType: "json",
 			complete: function(res, text){
-				callback ? callback(
+				callback(
 					text !== 'success' ? res.statusText : null,
 					JSON.parse(res.responseText),
 					res.status
-				) : function(){}
+				);
 			}
 		});
 	}
@@ -179,7 +208,11 @@ 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);
 	}
@@ -188,18 +221,95 @@ app.auth = (function(app){
 		return localStorage.getItem('APIToken');
 	}

-	function isLoggedIn(callback){
-		if(getToken()){
-			return app.api.get('user/me', function(error, data){
-				// data now carries effective rights (isAdmin, global, domains).
-				if(!error) app.auth.user = app.auth.perms = data;
-				return callback(error, data);
-			});
-		}else{
-			callback(null, false);
+	async function getUser(){
+		try{
+			return await app.api.get('user/me');
+		}catch(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){
+		user = user || await loadUser();
+		if(!user) return false;
+		groupNameToFind = Array.isArray(groupNameToFind) ? groupNameToFind : [groupNameToFind];
+
+		return groupCNs(user).some(function(group){
+			return groupNameToFind.includes(group);
+		});
+	}
+
+	// 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){
+		app.api.post('auth/login', args, function(error, data){
+			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');
+		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 "/".
@@ -230,46 +340,68 @@ app.auth = (function(app){
 		return true;
 	}

-	// True when the logged-in user is a global admin (per user/me).
-	function isAdmin(){
-		return !!(app.auth.perms && app.auth.perms.isAdmin);
-	}
-
-	function logIn(args, callback){
-		app.api.post('auth/login', args, function(error, data){
-			if(data.login){
-				setToken(data.token);
-			}
-			callback(error, !!data.token);
-		});
-	}
-
-	function logOut(callback){
-		localStorage.removeItem('APIToken');
-		callback();
-	}
-
-	function forceLogin(){
-		// jQuery 4 removed $.holdReady; rely on the redirect below to keep an
-		// unauthenticated user off the page instead of pausing document ready.
-		app.auth.isLoggedIn(function(error, isLoggedIn){
-			if(error || !isLoggedIn){
-				app.auth.logOut(function(){})
-				location.replace(`/login${location.href.replace(location.origin, '')}`);
-			}
-		});
+	// 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){
+		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 && !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");
+		}
+
+		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 = safeInternalPath(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,
-		isLoggedIn: isLoggedIn,
-		consumeTokenFragment: consumeTokenFragment,
+		getUser: getUser,
+		loadUser: loadUser,
+		groupCNs: groupCNs,
+		memberOf: memberOf,
 		isAdmin: isAdmin,
+		isLoggedIn: isLoggedIn,
+		safeInternalPath: safeInternalPath,
+		consumeTokenFragment: consumeTokenFragment,
+		user: null,
 		perms: null,
 		logIn: logIn,
 		logOut: logOut,
@@ -279,6 +411,11 @@ app.auth = (function(app){

 })(app);

+// 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){
 		app.api.get('user/?detail=true', function(error, data){
@@ -308,6 +445,8 @@ 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){
@@ -381,29 +520,15 @@ app.util = (function(app){
 		return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
 	};

-	function actionMessage(message, $target, type, callback){
-		message = message || '';
-		$target = $target.closest('div.card').find('.actionMessage');
-		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);
-			message = '<span class="align-middle">' + message + '</span><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)
+	// 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() {
@@ -462,11 +587,41 @@ app.util = (function(app){
 	return {
 		downloadFile: downloadFile,
 		getUrlParameter: getUrlParameter,
-		actionMessage: actionMessage
+		escapeHtml: escapeHtml,
 	}
 })(app);

-$( document ).ready(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;
+
+	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{
+			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

 	//panel button's
@@ -487,9 +642,9 @@ $( document ).ready(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)=>{
@@ -520,18 +675,20 @@ 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="sr-only">Loading...</span></div>',
+
+	app.messages.action(
+		`<div class="spinner-border" role="status">
+			<span class="visually-hidden">Loading...</span>
+		</div>`,
 		$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");
@@ -539,7 +696,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)
@@ -1,201 +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){
-			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 ));
-
-// Host / target validation, mirrored from the backend (utils/hostname_validate.js):
-// a bare hostname or IPv4 address, no protocol / "/" / ":" / whitespace. The
-// incoming host may be a wildcard ("*.example.com"); the target may not.
-(function(){
-	var LABEL = /^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/i;
-	// Either one bare label (Docker service names, /etc/hosts entries) or a
-	// dotted hostname with an alphabetic TLD.
-	var HOSTNAME = /^(?=.{1,253}$)(?:(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,63}|[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)$/i;
-	var FORBIDDEN = /[\s/:]/;
-
-	function isIPv4( value ) {
-		var parts = value.split( '.' );
-		if ( parts.length !== 4 ) return false;
-		return parts.every( function( p ) {
-			return /^(0|[1-9]\d{0,2})$/.test( p ) && Number( p ) <= 255;
-		});
-	}
-
-	// Incoming-host pattern: labels may be normal, "*" (one fragment), or "**"
-	// (any number of fragments, incl. a bare "**" global catch-all).
-	function isHostPattern( value ) {
-		if ( value.length > 253 ) return false;
-		return value.split( '.' ).every( function( l ) {
-			return l === '*' || l === '**' || LABEL.test( l );
-		});
-	}
-
-	function forbidden( value ) {
-		return FORBIDDEN.test( value ) || value.includes( '://' );
-	}
-
-	// Incoming host: IPv4 or a wildcard host pattern.
-	function checkHost( value ) {
-		if ( typeof value !== 'string' || value.length === 0 ) return "Required";
-		if ( forbidden( value ) ) return 'No protocol, "/", or ":"';
-		if ( isIPv4( value ) || isHostPattern( value ) ) return;
-		return "Enter a valid host or wildcard (*, **)";
-	}
-
-	// Downstream target: IPv4 or a strict hostname, no wildcard.
-	function checkTarget( value ) {
-		if ( typeof value !== 'string' || value.length === 0 ) return "Required";
-		if ( forbidden( value ) ) return 'No protocol, "/", or ":"';
-		if ( isIPv4( value ) || HOSTNAME.test( value ) ) return;
-		return "Enter a valid hostname or IP";
-	}
-
-	$.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";
-					}
-				});
-			},
-
-			// Incoming host name — hostname, IPv4, or wildcard pattern (*, **).
-			host: function( value ) {
-				return checkHost( value );
-			},
-
-			// Downstream target — hostname or IPv4, no wildcard.
-			target: function( value ) {
-				return checkTarget( value );
-			},
-
-			// Back-compat alias (no wildcard).
-			hostname: function( value ) {
-				return checkTarget( value );
-			},
-
-			user: function( value ) {
-				var reg = /^[a-z0-9\_\-\@\.]{1,32}$/;
-				if ( reg.test( value ) === false ) {
-					return "Invalid";
-				}
-			},
-
-			// Mirrors utils/password_policy.js: >= 8 chars, and either 12+ chars
-			// or at least 3 of {lowercase, uppercase, number, symbol}.
-			password: function( value ) {
-				if ( typeof value !== 'string' || value.length < 8 ) {
-					return "Password must be at least 8 characters";
-				}
-				if ( value.length >= 12 ) return;
-
-				var classes = 0;
-				if ( /[a-z]/.test( value ) ) classes++;
-				if ( /[A-Z]/.test( value ) ) classes++;
-				if ( /[0-9]/.test( value ) ) classes++;
-				if ( /[^A-Za-z0-9]/.test( value ) ) classes++;
-
-				if ( classes < 3 ) {
-					return "Use 3 of: lowercase, uppercase, number, symbol (or 12+ chars)";
-				}
-			}
-		}
-	});
-})();
@@ -23,7 +23,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'],
 });

 router.get('/', (req, res) => {
@@ -0,0 +1,45 @@
+'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.
+
+module.exports = {
+	// --- footer -------------------------------------------------------------
+	repoUrl: 'https://github.com/theta42/proxy',
+	licenseUrl: 'https://github.com/theta42/proxy/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: null,
+
+	// --- header / nav -------------------------------------------------------
+	faviconUrl: '/static/favicon.svg',
+	// 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: 'the proxy',
+
+	// 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: '/hosts', icon: 'fa-solid fa-network-wired', label: 'Hosts', groups: []},
+		{href: '/dns', icon: 'fa-solid fa-record-vinyl', label: 'DNS', groups: []},
+		{href: '/users', icon: 'fa-solid fa-users', label: 'Users', groups: ['admin']},
+		{href: '/permissions', icon: 'fa-solid fa-user-shield', label: 'Permissions', groups: ['admin']},
+		{href: '/groups', icon: 'fa-solid fa-users-gear', label: 'Groups', groups: ['admin']},
+	],
+};
@@ -1,24 +1,30 @@
-		</div>
+		</div><!-- end spa-shell -->

-		<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">
-					<a href="https://theta42.com" target="_blank">
-						<img width="64" src="/static/img/theta42.svg"/>
-					</a>
-					&copy; <%- buildYear %> theta42 &middot;
-					<a href="https://github.com/theta42/proxy/blob/master/LICENSE" 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">
-						<i class="fa-solid fa-book"></i> Docs
-					</a>
-					<a href="https://github.com/theta42/proxy" target="_blank" class="text-light text-decoration-none">
-						<i class="fa-brands fa-github"></i> GitHub
-					</a>
-				</span>
-				<span>v<%- buildVersion %> (<%- buildHash %>)</span>
-			</div>
-		</footer>
-    </body>
-</html>
+	<!-- 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">
+				<a href="https://theta42.com" target="_blank">
+					<img width="64" src="/static/img/theta42.svg"/>
+				</a>
+				&copy; <%- buildYear %> theta42 &middot;
+				<a href="<%- ui.licenseUrl %>" target="_blank" class="text-light">MIT License</a>
+			</span>
+			<span class="d-flex align-items-center gap-3">
+				<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="<%- ui.repoUrl %>" target="_blank" class="text-light text-decoration-none">
+					<i class="fa-brands fa-github"></i> GitHub
+				</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>
+</html>
@@ -28,14 +28,14 @@

 	function removeGroup(name){
 		app.group.remove(name, function(error, data){
-			if(error) return app.util.actionMessage(error, $.scope.LocalGroup.$this, 'danger');
+			if(error) return app.messages.action(error, $.scope.LocalGroup.$this, 'danger');
 			$.scope.LocalGroup.remove(name);
 		});
 	}

 	function removeMember(group, username){
 		app.group.removeMember(group, username, function(error, data){
-			if(error) return app.util.actionMessage(error, $.scope.LocalGroup.$this, 'danger');
+			if(error) return app.messages.action(error, $.scope.LocalGroup.$this, 'danger');
 			// websocket update echoes the new member list.
 		});
 	}
@@ -47,14 +47,14 @@
 		let username = ($input.val() || '').trim();
 		if(!username) return;
 		app.group.addMember(group, username, function(error, data){
-			if(error) return app.util.actionMessage(error, $.scope.LocalGroup.$this, 'danger');
+			if(error) return app.messages.action(error, $.scope.LocalGroup.$this, 'danger');
 			$input.val('');
 		});
 	}

 	$(document).ready(function(){
 		app.group.list(function(error, data){
-			if(error) return app.util.actionMessage(error, $.scope.LocalGroup.$this, 'danger');
+			if(error) return app.messages.action(error, $.scope.LocalGroup.$this, 'danger');
 			for(let g of data.results) $.scope.LocalGroup.push(g);
 		});

@@ -63,7 +63,7 @@

 	function hostPopulate(){
 		app.api.get('host?detail=1&provider=1', function(error, res){
-			if(error) return app.util.actionMessage(error, $.scope.hosts.$this, 'danger');
+			if(error) return app.messages.action(error, $.scope.hosts.$this, 'danger');

 			for(let host of res.results){
 				$.scope.hosts.push(hostParseRow(host));
@@ -152,9 +152,9 @@
 				let password = $pass.val();
 				if(!password) return;
 				app.api.put('host/' + encodeURIComponent(host) + '/basicauth-user/' + encodeURIComponent(username), {password}, function(error, data){
-					if(error) return app.util.actionMessage((data && data.message) || 'Failed to update password', $rows, 'danger');
+					if(error) return app.messages.action((data && data.message) || 'Failed to update password', $rows, 'danger');
 					$pass.val('');
-					app.util.actionMessage('Password updated for "' + username + '".', $rows, 'success');
+					app.messages.action('Password updated for "' + username + '".', $rows, 'success');
 				});
 			});
 			// No confirm step, matching this form's existing "Delete" button
@@ -163,7 +163,7 @@
 			let $del = $('<button type="button" class="btn btn-sm btn-outline-danger"><i class="fa-solid fa-trash"></i></button>');
 			$del.on('click', function(){
 				app.api.delete('host/' + encodeURIComponent(host) + '/basicauth-user/' + encodeURIComponent(username), function(error, data){
-					if(error) return app.util.actionMessage((data && data.message) || 'Failed to delete user', $rows, 'danger');
+					if(error) return app.messages.action((data && data.message) || 'Failed to delete user', $rows, 'danger');
 					$tr.remove();
 					$('.basicauth-current').text(Object.keys((data && data.basicauth_users) || {}).join(', ') || 'none');
 				});
@@ -291,7 +291,7 @@

 	function hostDownloadCert(host, type){
 		app.host.getCert({host}, function(error, data){
-			if(error) app.util.actionMessage(error.message, $.scope.hosts.$this, 'danger');
+			if(error) app.messages.action(error.message, $.scope.hosts.$this, 'danger');
 			app.util.downloadFile(`${host}-${type}.crt`, data[type])
 		});
 	}
@@ -322,9 +322,9 @@
 		app.host.clearCache(function(error, data){
 			$btn.prop('disabled', false);
 			if(error){
-				return app.util.actionMessage(error.message || error, $.scope.hosts.$this, 'danger');
+				return app.messages.action(error.message || error, $.scope.hosts.$this, 'danger');
 			}
-			app.util.actionMessage(data.message, $.scope.hosts.$this, 'success');
+			app.messages.action(data.message, $.scope.hosts.$this, 'success');
 		});
 	}

@@ -4,14 +4,18 @@
 	// If we arrived from the OIDC callback with a token in the URL fragment,
 	// store it and forward on before doing anything else.
 	if(!app.auth.consumeTokenFragment()){
-		app.auth.isLoggedIn(function(error, isLoggedIn){
-			if(isLoggedIn){
-				app.auth.logInRedirect();
-			}else{
-				// Reveal the login card once we know the user is not logged in.
-				document.getElementById('login-card-row').style.display = '';
-			}
-		})
+		// The reveal below touches an element further down this page, so wait
+		// for the DOM — isLoggedIn can answer before the parser gets there.
+		$(document).ready(function(){
+			app.auth.isLoggedIn(function(error, isLoggedIn){
+				if(isLoggedIn){
+					app.auth.logInRedirect();
+				}else{
+					// Reveal the login card once we know the user is not logged in.
+					document.getElementById('login-card-row').style.display = '';
+				}
+			});
+		});
 	}

 </script>
@@ -42,7 +42,7 @@

 	function removePermission(id){
 		app.permission.remove(id, function(error, data){
-			if(error) return app.util.actionMessage(error, $.scope.Permission.$this, 'danger');
+			if(error) return app.messages.action(error, $.scope.Permission.$this, 'danger');
 			// The websocket echo removes the row; drop it locally too for snappiness.
 			$.scope.Permission.remove(id);
 		});
@@ -51,7 +51,7 @@
 	$(document).ready(function(){
 		// Existing permissions.
 		app.permission.list(function(error, data){
-			if(error) return app.util.actionMessage(error, $.scope.Permission.$this, 'danger');
+			if(error) return app.messages.action(error, $.scope.Permission.$this, 'danger');
 			for(let p of data.results) $.scope.Permission.push(p);
 		});

@@ -63,7 +63,7 @@

 	$(document).ready(function(){
 		app.api.get('user/me', function(error, data){
-			if(error) return app.util.actionMessage(error, $('#profile-card'), 'danger');
+			if(error) return app.messages.action(error, $('#profile-card'), 'danger');
 			renderProfile(data);
 		});
 	});
@@ -170,7 +170,7 @@

 	function tableAJAX(){
 		app.apiToken.list(function(error, data){
-			if(error) return app.util.actionMessage(error, $.scope.apiTokenCard.$this, 'danger');
+			if(error) return app.messages.action(error, $.scope.apiTokenCard.$this, 'danger');
 			$.scope.apiTokenCard.empty();
 			(data.results || []).forEach(function(token){
 				$.scope.apiTokenCard.push(processToken(token));
@@ -181,7 +181,7 @@
 	function revokeToken(id, name, btn){
 		if(!confirm('Revoke API token "' + name + '"? It stops working immediately.')) return;
 		app.apiToken.remove({id: id}, function(error, data){
-			if(error) return app.util.actionMessage(error, $(btn).closest('.card'), 'danger');
+			if(error) return app.messages.action(error, $(btn).closest('.card'), 'danger');
 			$.scope.apiTokenCard.remove('id', id);
 		});
 	}
@@ -189,7 +189,7 @@
 	function rotateToken(id, name, btn){
 		if(!confirm('Rotate API token "' + name + '"? The old token stops working immediately.')) return;
 		app.apiToken.rotate({id: id}, function(error, data){
-			if(error) return app.util.actionMessage(error, $(btn).closest('.card'), 'danger');
+			if(error) return app.messages.action(error, $(btn).closest('.card'), 'danger');
 			showSecret(data.token);
 			tableAJAX();
 		});
@@ -4,8 +4,11 @@
 		<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="/static/favicon.svg">
+		<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">
@@ -14,63 +17,52 @@
 		<!-- 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-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>
+			<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">
-						<a class="nav-link active" href="/hosts">
-							<i class="fa-solid fa-network-wired"></i>
-							Hosts
-						</a>
-					</li>
-					<li class="nav-item">
-						<a class="nav-link" href="/dns"><i class="fa-solid fa-record-vinyl"></i>
-							DNS
-						</a>
-					</li>
-					<li class="nav-item nav-admin" style="display: none;">
-						<a class="nav-link" href="/users"><i class="fa-solid fa-users"></i>
-							Users
-						</a>
-					</li>
-					<li class="nav-item nav-admin" style="display: none;">
-						<a class="nav-link" href="/permissions"><i class="fa-solid fa-user-shield"></i>
-							Permissions
-						</a>
-					</li>
-					<li class="nav-item nav-admin" style="display: none;">
-						<a class="nav-link" href="/groups"><i class="fa-solid fa-users-gear"></i>
-							Groups
+					<%# 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">
-					<a id="cl-username" class="navbar-text text-light me-3" href="/profile" style="display: none;">
+					<% 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-out"></i>
+						<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(e => window.location.href='/')" style="display: none;">
+					<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>
@@ -78,6 +70,7 @@
 			</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
@@ -102,6 +95,22 @@
 				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
@@ -113,34 +122,24 @@
 					}
 				})

-				// Set the correct login/logout button, and reveal admin-only nav
-				// items for global admins.
-				app.auth.isLoggedIn(function(error, data){
-					if(data){
+				// 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();
-						if(data.username){
-							$('#cl-username-text').text(data.username);
+						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();
 					}
-
-					if(data && data.isAdmin){
-						$('.nav-admin').css('display', '');
-
-						if(!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 the proxy 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();
-							});
-						}
-					}
 				});

 			});
@@ -148,4 +147,5 @@


 		<!-- Container -->
-		<div id="spa-shell" class="container-fluid">
+		<div id="spa-shell" class="container-fluid">
+			<div class="actionMessage" style="display:none;"></div>
@@ -22,7 +22,7 @@

 	function populateUsers(actionMessage){
 		app.user.list(function(error, data){
-			if(error) return app.util.actionMessage(error, $.scope.users.$this, 'danger');
+			if(error) return app.messages.action(error, $.scope.users.$this, 'danger');
 			for(let user of data.results){
 				$.scope.users.push(user);
 			}
@@ -37,7 +37,7 @@

 	function removeUser(username){
 		app.user.remove({username: username}, function(error, data){
-			if(error) return app.util.actionMessage(error, $.scope.users.$this, 'danger');
+			if(error) return app.messages.action(error, $.scope.users.$this, 'danger');
 			$.scope.users.remove(username);
 		});
 	}
Author	SHA1	Message	Date
wmantly	3686a5ddb8	Merge pull request #182 from theta42/release/1.5.0 Release 1.5.0	2026-07-27 14:18:27 -04:00
wmantly	ce013d7e31	Release 1.5.0: adopt @simpleworkjs/frontend messages/modal/validate Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-07-27 14:16:47 -04:00
wmantly	f6bc38eef2	Merge pull request #181 from theta42/modernize/simpleworkjs-frontend Adopt @simpleworkjs/frontend messages/modal/validate modules	2026-07-27 14:10:13 -04:00
wmantly	0a659428dd	Adopt @simpleworkjs/frontend's messages/modal/validate modules Same swap as sso-manager-node/jump-host: vendored app.util.actionMessage/ actionConfirm replaced by @simpleworkjs/frontend's app.messages.action/ confirm (real HTML-escaping, toast fallback); vendored val.js replaced by the package's app.validate.js. proxy's host/target/hostname validation rules (mirrored from the backend's utils/hostname_validate.js — wildcard DNS patterns, not something other apps need) move to public/js/app.js, registered via $.validateSettings, since they're proxy-specific and don't belong in the shared package's generic rule set (eq/user/password/ip). app.api/app.auth/app.pubsub/app.socket in app-base.js are untouched, same reasoning as sso-manager-node's PR. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-07-27 14:07:14 -04:00
wmantly	e770bbb41f	Merge pull request #180 from theta42/docs/screenshots-refresh docs: refresh proxy screenshots for the unified UI	2026-07-26 16:31:50 -04:00
wmantly	90619dd4ff	docs: refresh proxy screenshots for the unified UI hosts.png, host-auth-sso.png and host-auth-basic.png still showed the pre-unification nav; replaced with the current shared shell. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-07-26 16:28:44 -04:00
wmantly	75045b4b33	Merge pull request #178 from theta42/feature/ui-unification Release 1.4.0: unified front-end UI shell	2026-07-26 00:30:08 -04:00
wmantly	2e959f7c48	Release 1.4.0: unified front-end UI shell across the theta42 apps Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-07-26 00:21:51 -04:00
wmantly	fcc09d1e4b	logInRedirect: keep the query string on the legacy /login/<path> form The OIDC provider sends an unauthenticated authorize request through /login/oauth/authorize?client_id=…&state=…; dropping the query there loses the whole authorization request. The ?redirect= form is unaffected. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-07-25 23:55:08 -04:00
wmantly	a83a5fd39a	app.api.delete: accept the (url, data, callback) form formAJAX uses; defer the login-card reveal to DOM ready formAJAX always passes the serialized form as the second argument, so a DELETE-method form (the host/DNS delete buttons) landed its callback in the data slot and never ran. The login page's "reveal the card once we know you're logged out" branch touched an element further down the same page, which threw when isLoggedIn answered before the parser got there (it always did without a stored token). It now runs on DOM ready. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-07-25 23:15:07 -04:00
wmantly	3a307c1563	Unify the front-end UI shell across the theta42 apps views/top.ejs, views/bottom.ejs and public/lib/js/app-base.js are now byte-identical across sso-manager-node, proxy and jump-host. Everything per-app moved into utils/ui.js, exposed to every render as `ui` via app.locals (nav items + their group gates, footer repo/docs/ToS links, favicon, profile/logout targets, update-banner on/off + label). Client framework changes: - One gating model everywhere: app-base.js reveals .group-required-<cn> for each of the current user user/me groups. sso-manager-node sends LDAP DNs in memberOf, the OIDC clients send CNs in groups; both normalise to CNs, and the clients isAdmin flag becomes a synthetic `admin` group, so proxy nav-admin items are now group-required-admin. - user/me is fetched once per page load and cached (app.auth.loadUser); nav, forceLogin and group-required elements all read that one promise. - isLoggedIn is dual-mode (Promise + node-style callback), so the async and callback call styles both work from one shared top.ejs. - forceLogin no longer uses $.holdReady (removed in jQuery 4): it redirects to /login?redirect=<path>, and still enforces required groups. - logOut only clears the session; the caller decides where to go next. - post/put/delete are dual-mode Promise/callback, which also removes the undefined `callback2` reference that threw on a non-function callback. Dependencies: jquery ^4.0.0 and ejs ^3.1.10 in all three apps. proxy specifics: - .group-required base rule added to styles.css; the admin nav items lost their inline display:none in favour of it. - The brand link points at / instead of #. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-07-25 22:57:34 -04:00
wmantly	f055d4f567	Merge pull request #177 from theta42/release/v1.3.0 Release 1.3.0	2026-07-25 16:38:47 -04:00