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.

sso-manager-node specifics:
- val.js adopts the shared superset (adds the target/hostname rules and
  the password policy, and fixes the let-shadowed `message` that stopped
  custom rule messages from reaching validateMessage).
- GET /api/user/me now also reports isAdmin (membership in app_sso_admin).
- public/js/app.js: $.isFunction -> typeof (removed in jQuery 4).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

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,20 @@ 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) => {
+		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 +144,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 +201,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 +218,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 +289,123 @@ 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.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");
 		}
 
-		$.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.
 	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', '').split('?')[0]
+			|| '/';
+		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 +436,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){
@@ -370,7 +534,10 @@ app.util = (function(app){
 		}else{
 			if(type) $target.addClass('bg-' + type);
 
-			if(!message.includes('<button')) message += `
+			// Messages that bring their own buttons (actionConfirm) are left
+			// alone; everything else gets the standard dismiss button.
+			if(!message.includes('<button')) 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>
@@ -415,8 +582,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;
 				}
@@ -466,21 +636,36 @@ app.util = (function(app){
 	}
 })(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
 
@@ -538,8 +723,8 @@ function formAJAX(btn){
 		app.util.actionMessage('Please fix the form errors.', $form, 'danger')
 		return false;
 	}
-	
-	app.util.actionMessage( 
+
+	app.util.actionMessage(
 		`<div class="spinner-border" role="status">
 			<span class="visually-hidden">Loading...</span>
 		</div>`,
@@ -567,4 +752,3 @@ function formAJAX(btn){
 		}
 	});
 }
-