197 lines
8 KiB
JavaScript
197 lines
8 KiB
JavaScript
const state = {tenants: [], roles: [], permissions: [], selectedTenant: ''};
|
|
const $ = selector => document.querySelector(selector);
|
|
const $$ = selector => [...document.querySelectorAll(selector)];
|
|
const escapeHTML = value => String(value ?? '').replace(/[&<>"']/g, c => ({
|
|
'&': '&',
|
|
'<': '<',
|
|
'>': '>',
|
|
'"': '"',
|
|
"'": '''
|
|
}[c]));
|
|
const notice = (message, error = false) => {
|
|
const el = $('#notice');
|
|
el.textContent = message;
|
|
el.hidden = false;
|
|
el.style.borderColor = error ? 'var(--danger)' : 'var(--accent)';
|
|
clearTimeout(notice.timer);
|
|
notice.timer = setTimeout(() => el.hidden = true, 5000)
|
|
};
|
|
|
|
async function api(path, options = {}) {
|
|
const response = await fetch(path, {
|
|
credentials: 'same-origin', ...options,
|
|
headers: {'Content-Type': 'application/json', ...(options.headers || {})}
|
|
});
|
|
if (response.status === 401) {
|
|
location.href = '/login';
|
|
throw new Error('Session expired')
|
|
}
|
|
const body = response.status === 204 ? null : await response.json();
|
|
if (!response.ok) throw new Error(body?.error || `Request failed (${response.status})`);
|
|
return body
|
|
}
|
|
|
|
async function load() {
|
|
const dashboard = await api('/api/v1/dashboard');
|
|
state.tenants = dashboard.tenants;
|
|
state.permissions = dashboard.permissions || [];
|
|
if (!state.tenants.some(tenant => tenant.id === state.selectedTenant)) state.selectedTenant = state.tenants[0]?.id || '';
|
|
renderIdentity(dashboard.profile);
|
|
await loadRoles();
|
|
render()
|
|
}
|
|
|
|
function renderIdentity(profile) {
|
|
profile = profile || {};
|
|
$('#identity-name').textContent = profile.display_name || profile.email || '';
|
|
const image = $('#identity-avatar');
|
|
if (profile.avatar_url) {
|
|
image.src = profile.avatar_url;
|
|
image.hidden = false
|
|
} else {
|
|
image.hidden = true;
|
|
image.removeAttribute('src')
|
|
}
|
|
}
|
|
|
|
async function loadRoles() {
|
|
if (!state.selectedTenant) {
|
|
state.roles = [];
|
|
return
|
|
}
|
|
try {
|
|
state.roles = (await api(`/api/v1/roles?tenant_id=${encodeURIComponent(state.selectedTenant)}`)).roles
|
|
} catch (error) {
|
|
state.roles = [];
|
|
notice('You do not have permission to read the roles of this tenant.', true)
|
|
}
|
|
}
|
|
|
|
function selectedTenant() {
|
|
return state.tenants.find(tenant => tenant.id === state.selectedTenant)
|
|
}
|
|
|
|
const canManageRoles = () => Boolean(selectedTenant()?.permissions?.includes('roles.manage'));
|
|
|
|
function render() {
|
|
const tenant = selectedTenant();
|
|
const custom = state.roles.filter(item => !item.system);
|
|
$('#tenant-context').innerHTML = state.tenants.map(item =>
|
|
`<option value="${escapeHTML(item.id)}" ${item.id === state.selectedTenant ? 'selected' : ''}>${escapeHTML(item.name)}</option>`).join('');
|
|
$('#role-tenant').textContent = tenant ? tenant.name : 'No tenant';
|
|
$('#role-count').textContent = String(state.roles.length);
|
|
$('#role-summary').textContent = canManageRoles() ? 'Roles · editable' : 'Roles · read only';
|
|
$('#stat-roles').textContent = state.roles.length;
|
|
$('#stat-system').textContent = state.roles.length - custom.length;
|
|
$('#stat-custom').textContent = custom.length;
|
|
$('#stat-assignable').textContent = state.roles.filter(item => item.assignable).length;
|
|
$('#new-role').hidden = !canManageRoles();
|
|
|
|
$('#role-list').innerHTML = state.roles.map(item => `<tr>
|
|
<td><strong>${escapeHTML(item.name)}</strong>${item.system ? ' <span class="badge">built-in</span>' : ''}<br><small>${escapeHTML(item.description || 'No description')}</small></td>
|
|
<td><code>${escapeHTML(item.slug)}</code></td>
|
|
<td class="capabilities">${item.permissions.map(permission => `<span class="chip">${escapeHTML(permission)}</span>`).join('') || '<span class="muted">None</span>'}</td>
|
|
<td>${item.member_count}</td>
|
|
<td>${item.assignable ? 'Yes' : '<span class="muted">No</span>'}</td>
|
|
<td>${item.system ? '' : canManageRoles() ? `<button class="card-action" data-edit="${escapeHTML(item.id)}">Edit</button><button class="danger" data-delete="${escapeHTML(item.id)}">Delete</button>` : ''}</td>
|
|
</tr>`).join('') || '<tr><td colspan="6">No roles available for this tenant.</td></tr>';
|
|
|
|
$('#permission-list').innerHTML = state.permissions.map(item => `<tr>
|
|
<td><code>${escapeHTML(item.value)}</code></td>
|
|
<td>${escapeHTML(item.description)}</td>
|
|
</tr>`).join('')
|
|
}
|
|
|
|
function permissionCheckboxes(selected) {
|
|
const held = new Set(selected || []);
|
|
$('#role-permissions').innerHTML = state.permissions.map(item => `<label>
|
|
<input type="checkbox" name="permissions" value="${escapeHTML(item.value)}" ${held.has(item.value) ? 'checked' : ''}>
|
|
<span><strong>${escapeHTML(item.label)}</strong><br><small>${escapeHTML(item.description)}</small></span>
|
|
</label>`).join('')
|
|
}
|
|
|
|
function openDialog(item) {
|
|
const form = $('#role-form');
|
|
form.reset();
|
|
form.role_id.value = item?.id || '';
|
|
form.slug.value = item?.slug || '';
|
|
form.name.value = item?.name || '';
|
|
form.description.value = item?.description || '';
|
|
// The slug identifies a role for the lifetime of the role, so it is fixed
|
|
// once the role exists.
|
|
$('#role-slug-label').hidden = Boolean(item);
|
|
form.slug.required = !item;
|
|
$('#role-dialog-title').textContent = item ? `Edit ${item.name}` : 'New role';
|
|
$('#role-hint').textContent = item
|
|
? 'Saving replaces the permissions of every member holding this role.'
|
|
: 'The slug cannot be changed later.';
|
|
permissionCheckboxes(item?.permissions);
|
|
$('#role-dialog').showModal()
|
|
}
|
|
|
|
$('#new-role').addEventListener('click', () => openDialog(null));
|
|
$$('.close').forEach(button => button.addEventListener('click', () => button.closest('dialog').close()));
|
|
|
|
$('#role-form').addEventListener('submit', async event => {
|
|
event.preventDefault();
|
|
const form = event.target;
|
|
const permissions = [...form.querySelectorAll('input[name=permissions]:checked')].map(input => input.value);
|
|
const id = form.role_id.value;
|
|
const body = id
|
|
? {name: form.name.value, description: form.description.value, permissions}
|
|
: {tenant_id: state.selectedTenant, slug: form.slug.value, name: form.name.value, description: form.description.value, permissions};
|
|
try {
|
|
await api(id ? `/api/v1/roles/${id}` : '/api/v1/roles', {
|
|
method: id ? 'PUT' : 'POST',
|
|
body: JSON.stringify(body)
|
|
});
|
|
form.closest('dialog').close();
|
|
notice(id ? 'Role updated' : 'Role created');
|
|
await loadRoles();
|
|
render()
|
|
} catch (error) {
|
|
notice(error.message, true)
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', async event => {
|
|
const edit = event.target.dataset.edit;
|
|
if (edit) {
|
|
openDialog(state.roles.find(item => item.id === edit));
|
|
return
|
|
}
|
|
const remove = event.target.dataset.delete;
|
|
if (remove) {
|
|
const item = state.roles.find(role => role.id === remove);
|
|
if (!confirm(`Delete the role "${item.name}"?`)) return;
|
|
try {
|
|
await api(`/api/v1/roles/${remove}`, {method: 'DELETE'});
|
|
notice('Role deleted');
|
|
await loadRoles();
|
|
render()
|
|
} catch (error) {
|
|
notice(error.message, true)
|
|
}
|
|
}
|
|
});
|
|
|
|
const theme = $('#theme');
|
|
theme.value = localStorage.getItem('gl-theme') || 'tokyo';
|
|
document.documentElement.dataset.theme = theme.value;
|
|
document.documentElement.dataset.mode = localStorage.getItem('gl-mode') || 'dark';
|
|
theme.addEventListener('change', () => {
|
|
document.documentElement.dataset.theme = theme.value;
|
|
localStorage.setItem('gl-theme', theme.value)
|
|
});
|
|
$('#mode').addEventListener('click', () => {
|
|
const next = document.documentElement.dataset.mode === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.dataset.mode = next;
|
|
localStorage.setItem('gl-mode', next)
|
|
});
|
|
$('#tenant-context').addEventListener('change', async event => {
|
|
state.selectedTenant = event.target.value;
|
|
await loadRoles();
|
|
render()
|
|
});
|
|
|
|
load().catch(error => notice(error.message, true));
|