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>

<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){
			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(); 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="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="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="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="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="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 />'
			+   '<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, $('#permissions-list'), 'danger');
			$.scope.Permission.remove(id);
			loadPermissions();
		});
	}

	$(document).ready(function(){
		loadPermissions();
		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){
			loadPermissions();
		});
		app.subscribe(/^model:Permission:remove/, function(data, topic){
			loadPermissions();
		});
	});
</script>

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

<div class="row">
	<div class="col-12">
		<div class="card shadow">

			<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>
				</div>
			</div>

			<div class="card-header actionMessage" style="display:none"></div>
			<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>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
</div>
<%- include('bottom') %>