Add ACL management UI for readers (users, card numbers, groups, allow-all)
This commit is contained in:
copilot-swe-agent[bot]
GitHub
parent
5961cba546
commit
67c2252f43
|
|
@ -304,3 +304,68 @@ button.danger {
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 560px;
|
||||||
|
max-height: 85vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: var(--bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.acl-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.acl-entry {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.acl-entry:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.acl-entry .acl-description {
|
||||||
|
flex: 1;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.type-badge {
|
||||||
|
background: rgba(79, 124, 255, 0.15);
|
||||||
|
color: var(--accent);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -61,6 +61,51 @@
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="acl-modal" class="modal-overlay hidden">
|
||||||
|
<div class="modal">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h2>Allowed persons & credentials — <span id="acl-reader-name"></span></h2>
|
||||||
|
<button class="secondary" id="acl-close-btn">Close</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h3>Add entry</h3>
|
||||||
|
<form id="add-acl-form" class="inline-form">
|
||||||
|
<div class="field-group">
|
||||||
|
<label for="acl-type">Type</label>
|
||||||
|
<select id="acl-type">
|
||||||
|
<option value="0">User ID</option>
|
||||||
|
<option value="1">Card number</option>
|
||||||
|
<option value="2">Group exact rank</option>
|
||||||
|
<option value="3">Group minimum rank</option>
|
||||||
|
<option value="4">Allow all</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="field-group" id="acl-data-group">
|
||||||
|
<label for="acl-data">User ID</label>
|
||||||
|
<input type="text" id="acl-data">
|
||||||
|
</div>
|
||||||
|
<div class="field-group hidden" id="acl-group-id-group">
|
||||||
|
<label for="acl-group-id">Group ID</label>
|
||||||
|
<input type="text" id="acl-group-id">
|
||||||
|
</div>
|
||||||
|
<div class="field-group hidden" id="acl-group-rank-group">
|
||||||
|
<label for="acl-group-rank">Rank</label>
|
||||||
|
<input type="number" id="acl-group-rank" min="0">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="primary">Add entry</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h3>Entries</h3>
|
||||||
|
<div id="acl-empty" class="empty-state hidden">No entries yet. Access will be denied for everyone until an entry is added.</div>
|
||||||
|
<ul class="acl-list" id="acl-list"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="/js/dashboard.js"></script>
|
<script src="/js/dashboard.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -89,12 +89,14 @@ function renderReaders(accessPoints) {
|
||||||
</div>
|
</div>
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<button class="secondary save-btn">Save</button>
|
<button class="secondary save-btn">Save</button>
|
||||||
|
<button class="secondary acl-btn">Manage access</button>
|
||||||
<button class="danger delete-btn">Delete</button>
|
<button class="danger delete-btn">Delete</button>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
card.querySelector('.save-btn').addEventListener('click', () => saveReader(ap.id, card));
|
card.querySelector('.save-btn').addEventListener('click', () => saveReader(ap.id, card));
|
||||||
card.querySelector('.delete-btn').addEventListener('click', () => deleteReader(ap.id));
|
card.querySelector('.delete-btn').addEventListener('click', () => deleteReader(ap.id));
|
||||||
|
card.querySelector('.acl-btn').addEventListener('click', () => openAclModal(ap.id, ap.name));
|
||||||
|
|
||||||
grid.appendChild(card);
|
grid.appendChild(card);
|
||||||
});
|
});
|
||||||
|
|
@ -185,4 +187,160 @@ document.getElementById('logout-btn').addEventListener('click', async () => {
|
||||||
window.location.href = '/login.html';
|
window.location.href = '/login.html';
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// --- ACL (allowed persons / credentials) management ---
|
||||||
|
|
||||||
|
let currentAclReaderId = null;
|
||||||
|
|
||||||
|
const ACL_TYPE_LABELS = {
|
||||||
|
0: 'User ID',
|
||||||
|
1: 'Card number',
|
||||||
|
2: 'Group exact rank',
|
||||||
|
3: 'Group min rank',
|
||||||
|
4: 'Allow all'
|
||||||
|
};
|
||||||
|
|
||||||
|
function aclEntryDescription(entry) {
|
||||||
|
switch (entry.type) {
|
||||||
|
case 0:
|
||||||
|
return `User ID: ${entry.data}`;
|
||||||
|
case 1:
|
||||||
|
return `Card number: ${entry.data}`;
|
||||||
|
case 2: {
|
||||||
|
const [group, rank] = entry.data.split(':');
|
||||||
|
return `Group ${group}, exact rank ${rank}`;
|
||||||
|
}
|
||||||
|
case 3: {
|
||||||
|
const [group, rank] = entry.data.split(':');
|
||||||
|
return `Group ${group}, rank ${rank}+`;
|
||||||
|
}
|
||||||
|
case 4:
|
||||||
|
return 'Everyone';
|
||||||
|
default:
|
||||||
|
return entry.data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateAclFormFields() {
|
||||||
|
const type = parseInt(document.getElementById('acl-type').value, 10);
|
||||||
|
const dataGroup = document.getElementById('acl-data-group');
|
||||||
|
const groupIdGroup = document.getElementById('acl-group-id-group');
|
||||||
|
const groupRankGroup = document.getElementById('acl-group-rank-group');
|
||||||
|
const dataLabel = dataGroup.querySelector('label');
|
||||||
|
const dataInput = document.getElementById('acl-data');
|
||||||
|
|
||||||
|
dataGroup.classList.add('hidden');
|
||||||
|
groupIdGroup.classList.add('hidden');
|
||||||
|
groupRankGroup.classList.add('hidden');
|
||||||
|
dataInput.required = false;
|
||||||
|
|
||||||
|
if (type === 0) {
|
||||||
|
dataLabel.textContent = 'User ID';
|
||||||
|
dataGroup.classList.remove('hidden');
|
||||||
|
dataInput.required = true;
|
||||||
|
} else if (type === 1) {
|
||||||
|
dataLabel.textContent = 'Card number';
|
||||||
|
dataGroup.classList.remove('hidden');
|
||||||
|
dataInput.required = true;
|
||||||
|
} else if (type === 2 || type === 3) {
|
||||||
|
groupIdGroup.classList.remove('hidden');
|
||||||
|
groupRankGroup.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
// type === 4 (Allow all) needs no extra input
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('acl-type').addEventListener('change', updateAclFormFields);
|
||||||
|
updateAclFormFields();
|
||||||
|
|
||||||
|
async function openAclModal(readerId, readerName) {
|
||||||
|
currentAclReaderId = readerId;
|
||||||
|
document.getElementById('acl-reader-name').textContent = readerName;
|
||||||
|
document.getElementById('acl-modal').classList.remove('hidden');
|
||||||
|
document.getElementById('add-acl-form').reset();
|
||||||
|
updateAclFormFields();
|
||||||
|
await loadAcl();
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeAclModal() {
|
||||||
|
currentAclReaderId = null;
|
||||||
|
document.getElementById('acl-modal').classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadAcl() {
|
||||||
|
if (!currentAclReaderId) return;
|
||||||
|
const data = await api(`/dashboard/places/${encodeURIComponent(currentPlaceId)}/access-points/${encodeURIComponent(currentAclReaderId)}/acl`);
|
||||||
|
renderAclList(data.acl || []);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderAclList(entries) {
|
||||||
|
const list = document.getElementById('acl-list');
|
||||||
|
const empty = document.getElementById('acl-empty');
|
||||||
|
list.innerHTML = '';
|
||||||
|
|
||||||
|
if (entries.length === 0) {
|
||||||
|
empty.classList.remove('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
empty.classList.add('hidden');
|
||||||
|
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
const li = document.createElement('li');
|
||||||
|
li.className = 'acl-entry';
|
||||||
|
li.innerHTML = `
|
||||||
|
<span class="badge type-badge">${escapeHtml(ACL_TYPE_LABELS[entry.type] || 'Unknown')}</span>
|
||||||
|
<span class="acl-description">${escapeHtml(aclEntryDescription(entry))}</span>
|
||||||
|
<button class="danger acl-delete-btn">Remove</button>
|
||||||
|
`;
|
||||||
|
li.querySelector('.acl-delete-btn').addEventListener('click', () => deleteAclEntry(entry.id));
|
||||||
|
list.appendChild(li);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteAclEntry(aclId) {
|
||||||
|
if (!currentAclReaderId) return;
|
||||||
|
if (!confirm('Remove this entry?')) return;
|
||||||
|
|
||||||
|
await api(`/dashboard/places/${encodeURIComponent(currentPlaceId)}/access-points/${encodeURIComponent(currentAclReaderId)}/acl/${encodeURIComponent(aclId)}`, {
|
||||||
|
method: 'DELETE'
|
||||||
|
});
|
||||||
|
await loadAcl();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('add-acl-form').addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!currentAclReaderId) return;
|
||||||
|
|
||||||
|
const type = parseInt(document.getElementById('acl-type').value, 10);
|
||||||
|
let data;
|
||||||
|
|
||||||
|
if (type === 0 || type === 1) {
|
||||||
|
data = document.getElementById('acl-data').value.trim();
|
||||||
|
if (!data) return;
|
||||||
|
} else if (type === 2 || type === 3) {
|
||||||
|
const groupId = document.getElementById('acl-group-id').value.trim();
|
||||||
|
const rank = document.getElementById('acl-group-rank').value.trim();
|
||||||
|
if (!groupId || rank === '') return;
|
||||||
|
data = `${groupId}:${rank}`;
|
||||||
|
} else if (type === 4) {
|
||||||
|
data = '*';
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await api(`/dashboard/places/${encodeURIComponent(currentPlaceId)}/access-points/${encodeURIComponent(currentAclReaderId)}/acl`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ type, data })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
document.getElementById('add-acl-form').reset();
|
||||||
|
updateAclFormFields();
|
||||||
|
await loadAcl();
|
||||||
|
} else {
|
||||||
|
alert(result.message || 'Failed to add entry');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('acl-close-btn').addEventListener('click', closeAclModal);
|
||||||
|
document.getElementById('acl-modal').addEventListener('click', (e) => {
|
||||||
|
if (e.target.id === 'acl-modal') closeAclModal();
|
||||||
|
});
|
||||||
|
|
||||||
init();
|
init();
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue