proxy/nodejs/views/permissions.ejs

<%- include('top') %>
<script type="text/javascript">
	// Require login to see this page. The API is admin-only; non-admins get 403s.
	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">

	// Fill the username/group datalists that back the Subject autocomplete.
	function loadSubjectSuggestions(){
		app.permission.subjects(function(error, data){
			if(error || !data) return;
			let $users = $('#subjectUsers').empty();
			for(let u of (data.users || [])) $users.append($('<option>').val(u));
			let $groups = $('#subjectGroups').empty();
			for(let g of (data.groups || [])) $groups.append($('<option>').val(g));
		});
	}

	// Point the Subject input at the right suggestion list for the chosen type.
	function subjectTypeChanged(sel){
		let $input = $(sel).closest('form').find('input[name="subject"]');
		if(sel.value === 'group'){
			$input.attr('list', 'subjectGroups').attr('placeholder', 'dns-team');
		}else{
			$input.attr('list', 'subjectUsers').attr('placeholder', 'alice');
		}
	}

	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)">'
			+       '<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>'
			+     '<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">'
			+       '<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>'
			+     '<input type="text" class="form-control" name="domain" placeholder="example.com" autocomplete="off" />'
			+     '<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="form-group">'
			+     '<label class="control-label">Role</label>'
			+     '<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 />'
			+   '<button type="submit" class="btn btn-info">Add Permission</button>'
			+ '</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.
			$.scope.Permission.remove(id);
		});
	}

	$(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);
		});

		loadSubjectSuggestions();

		$.scope.Permission.__take = function($el, item, list){
			$el.addClass('bg-danger');
			$el.fadeOut(600, function(){ $el.remove(); });
		};

		// 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);
		});
		app.subscribe(/^model:Permission:remove/, function(data, topic){
			$.scope.Permission.remove(topic.split(':')[3]);
		});
	});
</script>

<div class="container mt-4">
<datalist id="subjectUsers"></datalist>
<datalist id="subjectGroups"></datalist>

<div class="row" style="display:none">
	<div class="col-12">
		<div class="card shadow-lg">

			<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
					</button>
				</span>
			</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
							</button>
						</div>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</div>
</div>
<%- include('bottom') %>