fix: drop displayIconHtml to fix literal rendering (#153)

CHANGELOG.md

@@ -1,12 +1,4 @@
-## v1.33.0
+# v1.13.2
-- 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,6 +116,8 @@ 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
 

nodejs/app.js

@@ -21,8 +21,6 @@ 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');
@@ -117,19 +115,6 @@ 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/package-lock.json

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

nodejs/package.json

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

nodejs/public/css/styles.css

@@ -3,12 +3,6 @@ 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/render.js

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

nodejs/utils/ui.js

@@ -37,7 +37,8 @@ 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: ['admin']},
+		{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']},
 	],

nodejs/views/dns.ejs

@@ -1,7 +1,7 @@
 <%- include('top') %>
 <script type="text/javascript">
-	// Require an admin to see this page.
+	// Require login to see this page.
-	app.auth.forceLogin(['admin']);
+	app.auth.forceLogin();
 </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><img height="32px" src="{{ displayIconHtml }}"/> {{name}} </h3>
+								<h3>{{name}} </h3>
 						</div>
 						<div>
 							{{#domains}}

nodejs/views/error.ejs

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

nodejs/views/hosts.ejs

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

nodejs/views/permissions.ejs

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