feat: SSO group autocomplete for per-host SSO allow-lists (v1.34.0)

The per-host "Allowed groups" field suggested only local groups,
permission subjects and conf.auth maps. None of those can ever match an
SSO-gated host: its allow-list is checked against the `groups` claim the
SSO issues (utils/host_sso.js), so only SSO groups are candidates.

Adds a conf.sso block (url + read-only apiToken, minted by theta-suite's
bootstrap) and a cached /api/group lookup merged into the suggestions.
Degrades silently to the previous local-only list when unset, and never
fails the request.

Authenticates with `Authorization: Bearer <token>` -- the SSO's
`auth-token` header is for browser session UUIDs and rejects a minted
API token.

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

CHANGELOG.md

@@ -1,4 +1,18 @@
-# v1.13.2
+## v1.34.0
+- feat: the per-host SSO **Allowed groups** field now autocompletes from the SSO directory's groups. Suggestions previously came only from local groups, permission subjects and `conf.auth` maps — none of which can match an SSO-gated host, because its allow-list is checked against the `groups` claim the SSO issues. New `conf.sso` block (`url` + read-only `apiToken`, minted by theta-suite's bootstrap); results are cached for 5 minutes and the endpoint degrades silently to the old local-only list when unset.
+- fix: the SSO group lookup authenticates with `Authorization: Bearer <token>`, not the `auth-token` header — the latter is for browser session UUIDs and would be rejected for a minted API token.
+- docs: `docs/concepts-hosts.md` gains a "Putting a host behind single sign-on" section covering the per-host `/__proxy_auth` flow, the wildcard redirect URI the IdP must allow, and where group suggestions come from.
+- docs: `secrets.js.example` documents the new `sso` block.
+
+## v1.33.0
+- feat: Add SSO-style error page (404/500) for browser navigation instead of a bare JSON/text response
+- feat: DNS page is now admin-only (hidden from non-admins; API already admin-gated)
+- feat: navbar — username no longer underlined; only the active link is bold + underlined
+
+## v1.13.3
+- fix: remove missing DEPLOYMENT.md and docs/ from Docker build context
+
+## v1.13.2
 - chore: Update CI pipeline integration
 
 # Changelog

Dockerfile

@@ -116,8 +116,6 @@ COPY nodejs/api.md ./api.md
 COPY README.md /README.md
 COPY CHANGELOG.md /CHANGELOG.md
 
-
-
 # Baked commit hash from the gitinfo stage (see build_info.js).
 COPY --from=gitinfo /commit.txt ./.build_commit
 

docs/concepts-hosts.md

@@ -68,6 +68,38 @@ host form whenever the name you're entering already has a matching
 wildcard available to reuse — including the wildcard's own bare base
 domain (e.g. `example.com` itself, not just `something.example.com`).
 
+## Putting a host behind single sign-on
+
+Each host can be gated on its own, independently of the proxy's management UI.
+On the host's **Auth** tab pick **Single sign-on (SSO)** and, optionally, fill in
+the **Allowed users** / **Allowed groups** lists. Empty lists mean any
+authenticated user is allowed; otherwise the identity must match one of them.
+
+The proxy runs the OIDC flow itself at `/__proxy_auth` on the protected host and
+keeps a Redis-backed session in a `__proxy_sso` cookie, so the app behind it
+needs no changes.
+
+**The IdP must allow the per-host callback.** Each protected host calls back to
+`https://<that-host>/__proxy_auth/callback`, which is a different URL for every
+host, all against the proxy's one OAuth client. Register a wildcard redirect URI
+on that client — the SSO Manager supports `*` (one label) and `**` (any number):
+
+```
+https://**.example.com/__proxy_auth/callback
+https://example.com/__proxy_auth/callback
+```
+
+theta-suite's bootstrap registers both automatically, and backfills them onto an
+existing client. Without them, switching a host to SSO fails at the IdP with
+`400 redirect_uri is not registered for this client`.
+
+**Group suggestions come from the SSO.** The Allowed groups field autocompletes
+from the SSO directory's groups when `sso.url` and `sso.apiToken` are set in the
+proxy's config (theta-suite's bootstrap mints that read-only token). Without it
+the field can only suggest the proxy's local groups, which for an SSO-gated host
+are rarely the ones you want — the allow-list is matched against the `groups`
+claim in the SSO's token, so only SSO groups can ever match.
+
 ## Load Balancing
 
 If you have multiple servers running the same application, you can load balance traffic across them. When editing a host, you can specify **Additional Targets** (one `IP:port` per line). The proxy will automatically distribute incoming requests across your primary target and all additional targets using a round-robin strategy, providing simple high availability and load distribution without extra configuration.

nodejs/app.js

@@ -21,6 +21,8 @@ module.exports = app;
 
 // Hold onto the auth middleware 
 const middleware = require('./middleware/auth');
+const conf = require('@simpleworkjs/conf');
+const buildInfo = require('./utils/build_info');
 
 // Grab the projects PubSub
 app.contoller = require('./controller');
@@ -115,6 +117,19 @@ app.use(async function(err, req, res, next) {
     res.status(status);
     // Only expose safe, non-internal fields to the client.
     const body = { name: err.name, message: err.message };
+    // Browser navigation gets the HTML error page (shared with SSO); API
+    // clients get JSON.
+    if (req.accepts('html') && !req.originalUrl.startsWith('/api/')) {
+      res.render('error', {
+        title: conf.environment !== 'production' ? 'dev' : '',
+        titleIcon: conf.environment !== 'production' ? '<i class="fa-brands fa-dev"></i>' : '',
+        name: conf.name,
+        logo: conf.logo,
+        ...buildInfo,
+        error: err,
+      });
+      return;
+    }
     res.json(body);
   }catch(error){
     console.error('error in the catch-all error handler', error);

nodejs/conf/base.js

@@ -45,6 +45,18 @@ module.exports = {
 		usernameClaim: 'preferred_username',
 	},
 
+	// Read-only SSO management API access, used to populate the per-host SSO
+	// allow-list autocomplete with the groups that actually exist in the
+	// directory. Without it the "Allowed groups" field can only suggest groups
+	// the proxy already knows locally, which for an SSO-gated host is usually
+	// none of the ones the operator wants. `apiToken` is a machine token minted
+	// by the theta-suite bootstrap and lives in secrets.js; leaving it unset
+	// simply falls back to the local-only suggestions.
+	sso: {
+		url: '',        // e.g. https://sso.example.com
+		apiToken: '',
+	},
+
 	// Authorization: how groups map to roles, and which groups are global admin.
 	// Per-user overrides are Grant records managed in the app.
 	auth: {

nodejs/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "proxy-api",
-  "version": "1.14.2",
+  "version": "1.34.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "proxy-api",
-      "version": "1.14.2",
+      "version": "1.34.0",
       "license": "MIT",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^7.3.0",

nodejs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proxy-api",
-  "version": "1.14.2",
+  "version": "1.34.0",
   "author": [
     {
       "name": "William Mantly",

nodejs/public/css/styles.css

@@ -3,6 +3,12 @@ nav.navbar{
 	padding-right: 1em;
 }
 
+/* Only the active top-nav link is bold + underlined; the username is plain. */
+.top-nav a.active{
+	font-weight: bold;
+	text-decoration: underline;
+}
+
 body {
 	display: flex;
 	flex-direction: column;

nodejs/routes/host.js

@@ -58,16 +58,55 @@ function hashHostSecrets(body){
 	}
 }
 
+// The SSO's directory groups, for the per-host SSO allow-list autocomplete.
+// The host's allow-list is checked against the `groups` claim the SSO puts in
+// the token (see utils/host_sso.js), so the only suggestions that can ever
+// match are the SSO's own groups -- the local groups below are a fallback, not
+// the real answer. Requires conf.sso.apiToken; degrades to [] without it, and
+// never fails the request (the form still works, just without suggestions).
+//
+// Cached for a few minutes: this is typeahead fodder, and every host editor
+// opening the form would otherwise hit the SSO.
+let ssoGroupCache = {at: 0, groups: []};
+const SSO_GROUP_TTL = 5 * 60 * 1000;
+
+async function ssoGroups(){
+	let sso = conf.sso || {};
+	if(!sso.url || !sso.apiToken) return [];
+	if(Date.now() - ssoGroupCache.at < SSO_GROUP_TTL) return ssoGroupCache.groups;
+	try{
+		let res = await fetch(`${sso.url.replace(/\/$/, '')}/api/group`, {
+			// A minted API token (`sso_<id>_<secret>`) authenticates as a bearer
+			// token; the SSO's `auth-token` header is for browser session UUIDs
+			// only and would be rejected here.
+			headers: {Authorization: `Bearer ${sso.apiToken}`, Accept: 'application/json'},
+			signal: AbortSignal.timeout(5000),
+		});
+		if(!res.ok) throw new Error(`SSO group list failed (${res.status})`);
+		let body = await res.json();
+		// The SSO returns { results: [...] } -- either CN strings or objects.
+		let groups = (body && body.results || []).map(g => (typeof g === 'string' ? g : g && g.name)).filter(Boolean);
+		ssoGroupCache = {at: Date.now(), groups};
+		return groups;
+	}catch(error){
+		console.error(`[auth-suggestions] could not list SSO groups: ${error.message}`);
+		// Cache the failure briefly so a down SSO doesn't stall every form open.
+		ssoGroupCache = {at: Date.now(), groups: ssoGroupCache.groups};
+		return ssoGroupCache.groups;
+	}
+}
+
 // Autocomplete source for the per-host auth allow-lists (SSO users/groups).
 // Available to any authenticated host editor (not just global admins). Groups
-// are derived from local groups, existing permission group-subjects, and the
-// conf.auth admin/role-map groups.
+// are the SSO directory's groups plus local groups, existing permission
+// group-subjects, and the conf.auth admin/role-map groups.
 router.get('/auth-suggestions', async function(req, res, next){
 	try{
 		let users = [];
 		try{ users = (await User.list()) || []; }catch(error){ /* none */ }
 
 		let groups = new Set();
+		for(let g of await ssoGroups()) groups.add(g);
 		try{ for(let g of await LocalGroup.list()) groups.add(g); }catch(error){ /* none */ }
 		try{
 			for(let p of await Permission.listDetail()){

nodejs/routes/render.js

@@ -55,7 +55,7 @@ router.get('/dns', async function(req, res, next) {
 
 
 router.get('/users', async function(req, res, next) {
-  res.render('users', {...values});
+  res.redirect(301, '/hosts');
 });
 
 router.get('/permissions', async function(req, res, next) {

nodejs/utils/ui.js

@@ -37,8 +37,7 @@ module.exports = {
 	// 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: '/dns', icon: 'fa-solid fa-record-vinyl', label: 'DNS', 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']},
 	],

nodejs/views/dns.ejs

@@ -1,7 +1,7 @@
 <%- include('top') %>
 <script type="text/javascript">
-	// Require login to see this page.
-	app.auth.forceLogin();
+	// Require an admin to see this page.
+	app.auth.forceLogin(['admin']);
 </script>
 
 <style type="text/css">
@@ -192,7 +192,7 @@
 					<div class="card-header actionMessage" style="display:none"></div>
 					<div class="card-body">
 						<div class="row">
-								<h3>{{name}} </h3>
+								<h3><img height="32px" src="{{ displayIconHtml }}"/> {{name}} </h3>
 						</div>
 						<div>
 							{{#domains}}

nodejs/views/error.ejs

@@ -0,0 +1,25 @@
+<%- include('top') %>
+
+<div class="container mt-5">
+  <div class="row justify-content-center">
+    <div class="col-md-6 text-center">
+      <div class="mb-4">
+        <i class="fa-solid fa-triangle-exclamation text-warning" style="font-size: 4rem;"></i>
+      </div>
+      <h1 class="display-4 fw-bold text-dark"><%= error.status || 500 %></h1>
+      <h3 class="mb-3 text-secondary"><%= error.message || 'Something went wrong' %></h3>
+      <p class="text-muted mb-4">
+        <% if (error.status === 404) { %>
+          The page you are looking for doesn't exist or has been moved.
+        <% } else { %>
+          An unexpected error occurred. Please try again later.
+        <% } %>
+      </p>
+      <a href="/" class="btn btn-primary shadow-sm px-4 py-2">
+        <i class="fa-solid fa-house me-2"></i>Return to Home
+      </a>
+    </div>
+  </div>
+</div>
+
+<%- include('bottom') %>

nodejs/views/groups.ejs

@@ -16,6 +16,14 @@
 
 <script type="text/javascript">
 
+	function loadGroups() {
+		app.group.list(function(error, data){
+			if(error) return app.messages.action(error, $('#groups-list'), 'danger');
+			$.scope.LocalGroup.empty();
+			for(let g of (data.results || [])) $.scope.LocalGroup.push(g);
+		});
+	}
+
 	// Usernames for the "add member" autocomplete (reuses the permission
 	// subjects endpoint, which is admin-only like this page).
 	function loadUserSuggestions(){
@@ -28,15 +36,16 @@
 
 	function removeGroup(name){
 		app.group.remove(name, function(error, data){
-			if(error) return app.messages.action(error, $.scope.LocalGroup.$this, 'danger');
+			if(error) return app.messages.action(error, $('#groups-list'), 'danger');
 			$.scope.LocalGroup.remove(name);
+			loadGroups();
 		});
 	}
 
 	function removeMember(group, username){
 		app.group.removeMember(group, username, function(error, data){
-			if(error) return app.messages.action(error, $.scope.LocalGroup.$this, 'danger');
-			// websocket update echoes the new member list.
+			if(error) return app.messages.action(error, $('#groups-list'), 'danger');
+			loadGroups();
 		});
 	}
 
@@ -47,17 +56,14 @@
 		let username = ($input.val() || '').trim();
 		if(!username) return;
 		app.group.addMember(group, username, function(error, data){
-			if(error) return app.messages.action(error, $.scope.LocalGroup.$this, 'danger');
+			if(error) return app.messages.action(error, $('#groups-list'), 'danger');
 			$input.val('');
+			loadGroups();
 		});
 	}
 
 	$(document).ready(function(){
-		app.group.list(function(error, data){
-			if(error) return app.messages.action(error, $.scope.LocalGroup.$this, 'danger');
-			for(let g of data.results) $.scope.LocalGroup.push(g);
-		});
-
+		loadGroups();
 		loadUserSuggestions();
 
 		$.scope.LocalGroup.__take = function($el){
@@ -66,14 +72,13 @@
 		};
 
 		app.subscribe(/^model:LocalGroup:create/, function(data){
-			$.scope.LocalGroup.remove(data.name);
-			$.scope.LocalGroup.unshift(data);
+			loadGroups();
 		});
 		app.subscribe(/^model:LocalGroup:update/, function(data, topic){
-			$.scope.LocalGroup.update(topic.split(':')[3], data);
+			loadGroups();
 		});
 		app.subscribe(/^model:LocalGroup:remove/, function(data, topic){
-			$.scope.LocalGroup.remove(topic.split(':')[3]);
+			loadGroups();
 		});
 	});
 </script>
@@ -81,61 +86,59 @@
 <div class="container mt-4">
 <datalist id="groupUsers"></datalist>
 
-<div class="row" style="display:none">
-	<div class="col-md-4">
-		<div class="card shadow-lg">
-			<div class="card-header text-center">
-				<span class="card-icon float-start"><i class="fa-solid fa-users-gear"></i></span>
-				<span class="card-title">Add Group</span>
-				<a href="/docs/access" class="text-reset float-end" title="Help"><i class="fa-solid fa-circle-question"></i></a>
+<div class="row">
+	<div class="col-md-4 mb-4">
+		<div class="card shadow">
+			<div class="card-header d-flex justify-content-between align-items-center">
+				<div><i class="fa-solid fa-users-gear me-2"></i><strong>Add Group</strong></div>
+				<a href="/docs/access" class="text-reset" 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">
-				<form action="group/" onsubmit="formAJAX(this)">
-					<div class="form-group">
-						<label class="control-label">Group name</label>
-						<input type="text" class="form-control" name="name" placeholder="dns-team" autocomplete="off" />
-						<div class="text-muted" style="font-size:.8rem">
-							Lowercased to a slug. Use the name as a Subject (type "group")
-							on the Permissions page.
+				<form action="group/" onsubmit="formAJAX(this)" evalAJAX="loadGroups(); this.reset();">
+					<div class="mb-3">
+						<label class="form-label fw-bold">Group name</label>
+						<input type="text" class="form-control" name="name" placeholder="dns-team" autocomplete="off" required />
+						<div class="form-text">
+							Lowercased to a slug. Use the name as a Subject (type "group") on the Permissions page.
 						</div>
 					</div>
 					<hr />
-					<button type="submit" class="btn btn-info">Add Group</button>
+					<button type="submit" class="btn btn-primary w-100"><i class="fa-solid fa-plus me-1"></i> Add Group</button>
 				</form>
 			</div>
 		</div>
 	</div>
 
-	<div class="col-md-8">
-		<div class="row row-cols-1 g-3">
+	<div class="col-md-8 mb-4">
+		<div class="row row-cols-1 g-3" id="groups-list">
 			<div jq-repeat="LocalGroup" jq-repeat-index="name" style="display:none" class="col">
-				<div class="card shadow-lg">
+				<div class="card shadow-sm border">
 					<div class="card-header d-flex align-items-center">
-						<span class="card-icon me-2"><i class="fa-solid fa-users"></i></span>
-						<span class="card-title">{{ name }}</span>
-						<span class="badge text-bg-secondary ms-2">{{ memberCount }} member(s)</span>
+						<span class="card-icon me-2"><i class="fa-solid fa-users text-primary"></i></span>
+						<strong class="me-2">{{ name }}</strong>
+						<span class="badge text-bg-secondary">{{ memberCount }} member(s)</span>
 						<button type="button" class="btn btn-sm btn-outline-danger ms-auto" onclick="removeGroup('{{name}}')">
 							<i class="fa-solid fa-trash"></i>
 						</button>
 					</div>
 					<div class="card-body">
-						<div class="mb-2">
+						<div class="mb-3">
 							{{#memberList}}
 							<span class="badge text-bg-info member-pill me-1 mb-1 fs-6">
 								{{ username }}
-								<i class="fa-solid fa-xmark ms-1" onclick="removeMember('{{group}}','{{username}}')"></i>
+								<i class="fa-solid fa-xmark ms-1 text-danger" onclick="removeMember('{{group}}','{{username}}')"></i>
 							</span>
 							{{/memberList}}
 							{{^memberList}}
-							<span class="text-muted">No members yet.</span>
+							<span class="text-muted small">No members yet.</span>
 							{{/memberList}}
 						</div>
-						<div class="input-group member-add" data-group="{{name}}">
-							<input type="text" class="form-control" list="groupUsers" placeholder="username" autocomplete="off"
+						<div class="input-group input-group-sm member-add" data-group="{{name}}">
+							<input type="text" class="form-control" list="groupUsers" placeholder="Add username..." autocomplete="off"
 								onkeydown="if(event.key==='Enter'){event.preventDefault();addMember(this.nextElementSibling);}" />
 							<button type="button" class="btn btn-success" onclick="addMember(this)">
-								<i class="fa-solid fa-user-plus"></i> Add
+								<i class="fa-solid fa-user-plus me-1"></i> Add
 							</button>
 						</div>
 					</div>

nodejs/views/hosts.ejs

@@ -820,7 +820,7 @@
 								</a>
 								{{#domain.provider}}
 									<br />
-									{{displayName}} - {{name}}
+									<img width="24px" src="{{displayIconHtml}}" /> {{displayName}} - {{name}}
 								{{/domain.provider}}
 
 								{{#wildcard_parent}}

nodejs/views/permissions.ejs

@@ -4,21 +4,16 @@
 	app.auth.forceLogin();
 </script>
 
-<style type="text/css">
-	label.control-label{
-		font-weight: bold;
-		margin-bottom: 1px;
-	}
-	.card-title{
-		font-weight: bold;
-	}
-	.field-hint{
-		font-size: .8rem;
-	}
-</style>
-
 <script type="text/javascript">
 
+	function loadPermissions() {
+		app.permission.list(function(error, data){
+			if(error) return app.messages.action(error, $('#permissions-list'), 'danger');
+			$.scope.Permission.empty();
+			for(let p of (data.results || [])) $.scope.Permission.push(p);
+		});
+	}
+
 	// Fill the username/group datalists that back the Subject autocomplete.
 	function loadSubjectSuggestions(){
 		app.permission.subjects(function(error, data){
@@ -42,63 +37,61 @@
 
 	function permissionAddOpen(){
 		app.modal.open({title: 'Add Permission', bodyHtml:
-			'<form action="permission/" onsubmit="formAJAX(this)" evalAJAX="app.modal.close();">'
-			+   '<div class="form-group">'
-			+     '<label class="control-label">Subject type</label>'
-			+     '<select class="form-control" name="subjectType" onchange="subjectTypeChanged(this)">'
+			'<form action="permission/" onsubmit="formAJAX(this)" evalAJAX="app.modal.close(); loadPermissions();">'
+			+   '<div class="mb-3">'
+			+     '<label class="form-label fw-bold">Subject type</label>'
+			+     '<select class="form-select" name="subjectType" onchange="subjectTypeChanged(this)">'
 			+       '<option value="user">User</option>'
 			+       '<option value="group">Group</option>'
 			+     '</select>'
 			+   '</div>'
-			+   '<div class="form-group">'
-			+     '<label class="control-label">Subject (username or group)</label>'
+			+   '<div class="mb-3">'
+			+     '<label class="form-label fw-bold">Subject (username or group)</label>'
 			+     '<input type="text" class="form-control" name="subject" list="subjectUsers" placeholder="alice" autocomplete="off" />'
 			+   '</div>'
-			+   '<div class="form-group">'
-			+     '<label class="control-label">Scope</label>'
-			+     '<select class="form-control" name="scope">'
+			+   '<div class="mb-3">'
+			+     '<label class="form-label fw-bold">Scope</label>'
+			+     '<select class="form-select" name="scope">'
 			+       '<option value="domain">Domain</option>'
 			+       '<option value="global">Global</option>'
 			+     '</select>'
 			+   '</div>'
-			+   '<div class="form-group">'
-			+     '<label class="control-label">Domain (for domain scope)</label>'
+			+   '<div class="mb-3">'
+			+     '<label class="form-label fw-bold">Domain (for domain scope)</label>'
 			+     '<input type="text" class="form-control" name="domain" placeholder="example.com" autocomplete="off" />'
-			+     '<div class="field-hint text-muted">'
+			+     '<div class="form-text text-muted">'
 			+       'Wildcards: <code>*.example.com</code> matches one label, '
 			+       '<code>**.example.com</code> matches any depth (incl. the apex), '
 			+       '<code>**</code> matches every domain.'
 			+     '</div>'
 			+   '</div>'
-			+   '<div class="form-group">'
-			+     '<label class="control-label">Role</label>'
-			+     '<select class="form-control" name="role">'
+			+   '<div class="mb-3">'
+			+     '<label class="form-label fw-bold">Role</label>'
+			+     '<select class="form-select" name="role">'
 			+       '<option value="viewer">Viewer (read)</option>'
 			+       '<option value="manager">Manager (full over domain)</option>'
 			+       '<option value="admin">Admin (global only)</option>'
 			+     '</select>'
 			+   '</div>'
 			+   '<hr />'
-			+   '<button type="submit" class="btn btn-info">Add Permission</button>'
+			+   '<div class="d-flex justify-content-end gap-2">'
+			+     '<button type="button" class="btn btn-secondary" onclick="app.modal.close()">Cancel</button>'
+			+     '<button type="submit" class="btn btn-primary">Add Permission</button>'
+			+   '</div>'
 			+ '</form>',
 		});
 	}
 
 	function removePermission(id){
 		app.permission.remove(id, function(error, data){
-			if(error) return app.messages.action(error, $.scope.Permission.$this, 'danger');
-			// The websocket echo removes the row; drop it locally too for snappiness.
+			if(error) return app.messages.action(error, $('#permissions-list'), 'danger');
 			$.scope.Permission.remove(id);
+			loadPermissions();
 		});
 	}
 
 	$(document).ready(function(){
-		// Existing permissions.
-		app.permission.list(function(error, data){
-			if(error) return app.messages.action(error, $.scope.Permission.$this, 'danger');
-			for(let p of data.results) $.scope.Permission.push(p);
-		});
-
+		loadPermissions();
 		loadSubjectSuggestions();
 
 		$.scope.Permission.__take = function($el, item, list){
@@ -108,12 +101,10 @@
 
 		// Live updates (model:Permission:*), so adds/removes reflect for everyone.
 		app.subscribe(/^model:Permission:create/, function(data){
-			$.scope.Permission.remove(data.id);
-			$.scope.Permission.unshift(data);
-			setTimeout(function(){ app.util.revealItem($('#permission-row-' + data.id)); }, 100);
+			loadPermissions();
 		});
 		app.subscribe(/^model:Permission:remove/, function(data, topic){
-			$.scope.Permission.remove(topic.split(':')[3]);
+			loadPermissions();
 		});
 	});
 </script>
@@ -122,47 +113,48 @@
 <datalist id="subjectUsers"></datalist>
 <datalist id="subjectGroups"></datalist>
 
-<div class="row" style="display:none">
+<div class="row">
 	<div class="col-12">
-		<div class="card shadow-lg">
+		<div class="card shadow">
 
-			<div class="card-header text-center">
-				<span class="card-icon float-start">
-					<i class="fa-solid fa-list-check"></i>
-				</span>
-				<span class="card-title">Permissions</span>
-				<span class="float-end">
-					<a href="/docs/access" class="text-reset me-2" title="Help"><i class="fa-solid fa-circle-question"></i></a>
-					<button type="button" class="btn btn-sm btn-success" onclick="permissionAddOpen()">
-						<i class="fa-solid fa-user-shield"></i>
-						Add Permission
+			<div class="card-header d-flex justify-content-between align-items-center">
+				<div>
+					<i class="fa-solid fa-user-shield me-2"></i><strong>Permissions List</strong>
+				</div>
+				<div>
+					<a href="/docs/access" class="text-reset me-3" title="Help"><i class="fa-solid fa-circle-question"></i></a>
+					<button type="button" class="btn btn-sm btn-primary" onclick="permissionAddOpen()">
+						<i class="fa-solid fa-user-shield me-1"></i> Add Permission
 					</button>
-				</span>
+				</div>
 			</div>
 
 			<div class="card-header actionMessage" style="display:none"></div>
-			<div class="card-body">
-			<div class="row row-cols-1 row-cols-lg-2 g-3" id="permission-cards">
-				<div class="col" jq-repeat="Permission" jq-repeat-index="id" id="permission-row-{{id}}" style="display:none">
-					<div class="card shadow-sm h-100">
-						<div class="card-body">
-							<h6 class="mb-2">
-								<span class="badge text-bg-secondary">{{ subjectType }}</span>
-								{{ subject }}
-							</h6>
-							<dl class="row mb-2 small">
-								<dt class="col-4">Scope</dt><dd class="col-8">{{ scope }}</dd>
-								<dt class="col-4">Domain</dt><dd class="col-8">{{ domain }}</dd>
-								<dt class="col-4">Role</dt><dd class="col-8">{{ role }}</dd>
-							</dl>
-							<button type="button" class="btn btn-sm btn-danger" onclick="removePermission('{{id}}')">
-								<i class="fa-solid fa-trash"></i>
-								Delete
+			<div class="card-body p-0">
+				<ul class="list-group list-group-flush" id="permissions-list">
+					<li class="list-group-item d-flex align-items-center justify-content-between py-3" jq-repeat="Permission" jq-repeat-index="id" id="permission-row-{{id}}" style="display:none">
+						<div class="d-flex align-items-center">
+							<div class="me-3 fs-4 text-primary">
+								<i class="fa-solid fa-user-check"></i>
+							</div>
+							<div>
+								<h6 class="mb-1 fw-bold">
+									<span class="badge bg-secondary me-2">{{ subjectType }}</span> {{ subject }}
+								</h6>
+								<div class="small text-muted">
+									<span class="me-3"><strong>Scope:</strong> {{ scope }}</span>
+									<span class="me-3"><strong>Domain:</strong> <code>{{ domain }}</code></span>
+									<span><strong>Role:</strong> <span class="badge bg-info text-dark">{{ role }}</span></span>
+								</div>
+							</div>
+						</div>
+						<div>
+							<button type="button" class="btn btn-sm btn-outline-danger" onclick="removePermission('{{id}}')">
+								<i class="fa-solid fa-trash me-1"></i> Delete
 							</button>
 						</div>
-					</div>
-				</div>
-			</div>
+					</li>
+				</ul>
 			</div>
 		</div>
 	</div>

nodejs/views/top.ejs

@@ -49,7 +49,7 @@
 				</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;">
+					<a id="cl-username" class="navbar-text text-light me-3 text-decoration-none" href="<%- ui.profileUrl %>" style="display: none;">
 						<i class="fa-solid fa-user me-1"></i><span id="cl-username-text"></span>
 					</a>
 					<% } else { %>

secrets.js.example

@@ -42,6 +42,18 @@ module.exports = {
         usernameClaim: 'preferred_username',
     },
 
+    // Read-only access to the SSO's management API, used to populate the
+    // per-host SSO allow-list autocomplete with the directory's actual groups.
+    // A host gated on SSO matches its allow-list against the `groups` claim the
+    // SSO issues, so only SSO groups can ever match -- without this the field
+    // can only suggest the proxy's own local groups. `apiToken` is a machine
+    // token minted by theta-suite's bootstrap; leaving it blank simply falls
+    // back to local-only suggestions.
+    sso: {
+        url: 'http://sso-manager:3001',
+        apiToken: '',
+    },
+
     // Direct LDAP user lookups. ldaps:// + rejectUnauthorized:false for a
     // self-signed cert (the SSO's default), or set tlsOptions.ca to a CA path
     // for strict verification. bindPassword MUST match the