roles

web/roles.js

@@ -0,0 +1,197 @@
+const state = {tenants: [], roles: [], permissions: [], selectedTenant: ''};
+const $ = selector => document.querySelector(selector);
+const $$ = selector => [...document.querySelectorAll(selector)];
+const escapeHTML = value => String(value ?? '').replace(/[&<>"']/g, c => ({
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+}[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));