proxy/nodejs/views/groups.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; }
	.member-pill{ cursor: default; }
	.member-pill i{ cursor: pointer; }
</style>

<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(){
		app.permission.subjects(function(error, data){
			if(error || !data) return;
			let $users = $('#groupUsers').empty();
			for(let u of (data.users || [])) $users.append($('<option>').val(u));
		});
	}

	function removeGroup(name){
		app.group.remove(name, function(error, data){
			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, $('#groups-list'), 'danger');
			loadGroups();
		});
	}

	function addMember(btn){
		let $wrap = $(btn).closest('.member-add');
		let group = $wrap.data('group');
		let $input = $wrap.find('input');
		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');
			$input.val('');
			loadGroups();
		});
	}

	$(document).ready(function(){
		loadGroups();
		loadUserSuggestions();

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

		app.subscribe(/^model:LocalGroup:create/, function(data){
			loadGroups();
		});
		app.subscribe(/^model:LocalGroup:update/, function(data, topic){
			loadGroups();
		});
		app.subscribe(/^model:LocalGroup:remove/, function(data, topic){
			loadGroups();
		});
	});
</script>

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

<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)" 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-primary w-100"><i class="fa-solid fa-plus me-1"></i> Add Group</button>
				</form>
			</div>
		</div>
	</div>

	<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-sm border">
					<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>
						<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-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 text-danger" onclick="removeMember('{{group}}','{{username}}')"></i>
							</span>
							{{/memberList}}
							{{^memberList}}
							<span class="text-muted small">No members yet.</span>
							{{/memberList}}
						</div>
						<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 me-1"></i> Add
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
<%- include('bottom') %>