feat(proxy): remove standalone users UI/nav, refactor permissions to list view with live reload, and add dynamic reload to groups v1.32.0
This commit is contained in:
+43
-40
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user