${tf('no_groups_defined', 'No groups defined yet. Click “Add group” to create one.')}
`; + return; + } + + let html = ''; + groupNames.forEach(name => { + const g = __groupsCache[name] || {}; + const label = g.label || name; + const members = Array.isArray(g.members) ? g.members : []; + + const memberOptions = usernames.map(u => { + const sel = members.includes(u) ? 'selected' : ''; + return ``; + }).join(''); + + html += ` +${tf('error_loading_groups', 'Error loading groups')}
`; + } +} + +function addEmptyGroupRow() { + if (!__groupsCache || typeof __groupsCache !== 'object') { + __groupsCache = {}; + } + let idx = 1; + let name = `group${idx}`; + while (__groupsCache[name]) { + idx += 1; + name = `group${idx}`; + } + __groupsCache[name] = { name, label: name, members: [], grants: {} }; + // Re-render using local cache only; don't clobber with server (which is still empty) + loadUserGroupsList(true); +} + +async function saveUserGroupsFromUI() { + const body = document.getElementById('userGroupsBody'); + const status = document.getElementById('userGroupsStatus'); + if (!body) return; + + const cards = body.querySelectorAll('[data-group-name]'); + const groups = {}; + + cards.forEach(card => { + const oldName = card.getAttribute('data-group-name') || ''; + const nameEl = card.querySelector('input[data-group-field="name"]'); + const labelEl = card.querySelector('input[data-group-field="label"]'); + const membersSel = card.querySelector('select[data-group-field="members"]'); + + const name = (nameEl && nameEl.value || '').trim(); + if (!name) return; + + const label = (labelEl && labelEl.value || '').trim() || name; + const members = Array.from(membersSel && membersSel.selectedOptions || []).map(o => o.value); + + const existing = __groupsCache[oldName] || __groupsCache[name] || { grants: {} }; + groups[name] = { + name, + label, + members, + grants: existing.grants || {} + }; + }); + + if (status) { + status.textContent = 'Saving groups…'; + status.className = 'small text-muted'; + } + + try { + const res = await saveAllGroups(groups); + if (!res.success) { + showToast(res.error || 'Error saving groups'); + if (status) { + status.textContent = 'Error saving groups.'; + status.className = 'small text-danger'; + } + return; + } + + __groupsCache = groups; + if (status) { + status.textContent = 'Groups saved.'; + status.className = 'small text-success'; + } + showToast('Groups saved.'); + } catch (e) { + console.error(e); + if (status) { + status.textContent = 'Error saving groups.'; + status.className = 'small text-danger'; + } + showToast('Error saving groups', 'error'); + } +} + +async function openGroupAclEditor(groupName) { + const isDark = document.body.classList.contains('dark-mode'); + const overlayBg = isDark ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0.3)'; + const contentBg = isDark ? '#2c2c2c' : '#fff'; + const contentFg = isDark ? '#e0e0e0' : '#000'; + const borderCol = isDark ? '#555' : '#ccc'; + + let modal = document.getElementById('groupAclModal'); + if (!modal) { + modal = document.createElement('div'); + modal.id = 'groupAclModal'; + modal.style.cssText = ` + position:fixed; inset:0; background:${overlayBg}; + display:flex; align-items:center; justify-content:center; z-index:3700; + `; + modal.innerHTML = ` + + `; + document.body.appendChild(modal); + + document.getElementById('closeGroupAclModal').onclick = () => (modal.style.display = 'none'); + document.getElementById('cancelGroupAcl').onclick = () => (modal.style.display = 'none'); + document.getElementById('saveGroupAcl').onclick = saveGroupAclFromUI; + } else { + modal.style.background = overlayBg; + const content = modal.querySelector('.modal-content'); + if (content) { + content.style.background = contentBg; + content.style.color = contentFg; + content.style.border = `1px solid ${borderCol}`; + } + } + + const title = document.getElementById('groupAclTitle'); + if (title) title.textContent = `Group folder access: ${groupName}`; + + const body = document.getElementById('groupAclBody'); + if (body) body.textContent = `${t('loading')}…`; + + modal.dataset.groupName = groupName; + modal.style.display = 'flex'; + + const folders = await getAllFolders(true); + const grants = (__groupsCache[groupName] && __groupsCache[groupName].grants) || {}; + + if (body) { + body.textContent = ''; + const box = document.createElement('div'); + box.className = 'folder-grants-box'; + body.appendChild(box); + + renderFolderGrantsUI(groupName, box, ['root', ...folders.filter(f => f !== 'root')], grants); + } +} + +function saveGroupAclFromUI() { + const modal = document.getElementById('groupAclModal'); + if (!modal) return; + const groupName = modal.dataset.groupName; + if (!groupName) return; + + const body = document.getElementById('groupAclBody'); + if (!body) return; + const box = body.querySelector('.folder-grants-box'); + if (!box) return; + + const grants = collectGrantsFrom(box); + if (!__groupsCache[groupName]) { + __groupsCache[groupName] = { name: groupName, label: groupName, members: [], grants: {} }; + } + __groupsCache[groupName].grants = grants; + + showToast('Group folder access updated. Remember to Save groups.'); + modal.style.display = 'none'; +} + + async function fetchAllUserFlags() { const r = await fetch("/api/getUserPermissions.php", { credentials: "include" }); const data = await r.json(); @@ -2489,31 +3024,194 @@ async function loadUserPermissionsList() { listContainer.innerHTML = `${t("loading")}…
`; try { - const usersRes = await fetch("/api/getUsers.php", { credentials: "include" }); - const usersData = await safeJson(usersRes); - const users = Array.isArray(usersData) ? usersData : (usersData.users || []); - if (!users.length) { + // Load users + groups together (folders separately) + const [usersRes, groupsMap] = await Promise.all([ + fetch("/api/getUsers.php", { credentials: "include" }).then(safeJson), + fetchAllGroups().catch(() => ({})) + ]); + + const users = Array.isArray(usersRes) ? usersRes : (usersRes.users || []); + const groups = groupsMap && typeof groupsMap === "object" ? groupsMap : {}; + + if (!users.length && !Object.keys(groups).length) { listContainer.innerHTML = "" + t("no_users_found") + "
"; return; } - const folders = await getAllFolders(true); + // Keep cache in sync with the groups UI + __groupsCache = groups || {}; + const folders = await getAllFolders(true); + const orderedFolders = ["root", ...folders.filter(f => f !== "root")]; + + // Build map: username -> [groupName, ...] + const userGroupMap = {}; + Object.keys(groups).forEach(gName => { + const g = groups[gName] || {}; + const members = Array.isArray(g.members) ? g.members : []; + members.forEach(m => { + const u = String(m || "").trim(); + if (!u) return; + if (!userGroupMap[u]) userGroupMap[u] = []; + userGroupMap[u].push(gName); + }); + }); + + // Clear the container and render sections listContainer.innerHTML = ""; - users.forEach(user => { - const isAdmin = (user.role && String(user.role) === "1") || String(user.username).toLowerCase() === "admin"; + +// ==================== +// Groups section (top) +// ==================== +const groupNames = Object.keys(groups).sort((a, b) => a.localeCompare(b)); +if (groupNames.length) { + const groupHeader = document.createElement("div"); + groupHeader.className = "muted"; + groupHeader.style.margin = "4px 0 6px"; + groupHeader.textContent = tf("groups_header", "Groups"); + listContainer.appendChild(groupHeader); + + groupNames.forEach(name => { + const g = groups[name] || {}; + const label = g.label || name; + const members = Array.isArray(g.members) ? g.members : []; + const membersSummary = members.length + ? members.join(", ") + : tf("no_members", "No members yet"); + + const row = document.createElement("div"); + row.classList.add("user-permission-row", "group-permission-row"); + row.setAttribute("data-group-name", name); + row.style.padding = "6px 0"; + + row.innerHTML = ` +