cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(group): 1st implementation of Groups

Browse Source 
this implements first version (manageable only by admin right now)

    routes:

        GET /api/groups
        List subject groups (paginated). Admin-only.

        POST /api/groups
        Create a new ReBAC subject group. Admin-only. The name must match the RFC 5321 local-part shape and be globally unique (case-insensitive).

        GET /api/groups/search
        Search non-virtual groups by name substring. Authenticated only (no admin role required) — backs the share-dialog recipient autocomplete.

        GET /api/groups/{id}
        Fetch a single group's details. Admin-only.

        DELETE /api/groups/{id}
        Delete a group. Cascades to `subject_group_members` (FK) and to `access_grants` rows referencing this group as a subject. Admin-only.

        PATCH /api/groups/{id}
        Update a group's metadata. Admin-only. v1 only persists name renames.

        GET /api/groups/{id}/effective-members
        List every user transitively reached through this group (members of members of members, etc.). Used by admin / audit tooling. Admin-only.

        GET /api/groups/{id}/members
        List the *direct* members of a group (one level only). Admin-only.

        POST /api/groups/{id}/members
        Add a member to a group. Exactly one of `user_id` / `group_id` must be provided. Adding a group-member runs a write-time cycle check and a nesting-depth check (max 8). Admin-only.

        DELETE /api/groups/{id}/members/group/{gid}
        Remove a nested group-member from a group. Admin-only.

        DELETE /api/groups/{id}/members/user/{uid}
        Remove a user-member from a group. Admin-only.

fix hurl

groups

round

groups
This commit is contained in:
Edouard Vanbelle
2026-05-30 23:35:47 +02:00
parent 41356b6490
commit 09985f8a95
54 changed files with 6421 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/app/userMenu.js
+15
View File
@@ -6,6 +6,7 @@ import { createUserVignette } from '../components/userVignette.js';
import { getCsrfHeaders } from '../core/csrf.js';
import { formatFileSize, formatQuotaSize } from '../core/formatters.js';
import { i18n } from '../core/i18n.js';
import { groupsView } from '../views/groups/groupsView.js';
function setupUserMenu() {
const wrapper = document.getElementById('user-menu-wrapper');
@@ -15,6 +16,7 @@ function setupUserMenu() {
const themeSegmented = document.getElementById('user-menu-theme-segmented');
const aboutBtn = document.getElementById('user-menu-about');
const adminBtn = document.getElementById('user-menu-admin');
const groupsBtn = document.getElementById('user-menu-groups');
const adminDivider = document.getElementById('user-menu-admin-divider');
const profileBtn = document.getElementById('user-menu-profile');
const roleBadge = document.getElementById('user-menu-role-badge');
@@ -42,6 +44,12 @@ function setupUserMenu() {
if (adminBtn) {
isAdmin ? adminBtn.classList.remove('hidden') : adminBtn.classList.add('hidden');
}
if (groupsBtn) {
// v1: admin-only. v2 will broaden to "has any manageable
// group" — change the right-hand side here without touching
// anything else.
isAdmin ? groupsBtn.classList.remove('hidden') : groupsBtn.classList.add('hidden');
}
if (adminDivider) {
isAdmin ? adminDivider.classList.remove('hidden') : adminDivider.classList.add('hidden');
}
@@ -117,6 +125,13 @@ function setupUserMenu() {
});
}
if (groupsBtn) {
groupsBtn.addEventListener('click', () => {
wrapper.classList.remove('open');
groupsView.open();
});
}
if (profileBtn) {
profileBtn.addEventListener('click', () => {
wrapper.classList.remove('open');
static/js/components/groupDisplay.js
+86
View File
@@ -0,0 +1,86 @@
// @ts-check
/**
* Display helpers for ReBAC subject groups.
*
* Server-side names of virtual groups (`Internal`, future `Everyone`, …) are
* fixed RFC 5321 local-part strings so they can be email-addressable. The UI
* surfaces them with a localised, capitalised label and a distinct icon.
*
* "Add a new virtual group" — frontend cost is:
* 1. Add an entry to `VIRTUAL_NAME_KEYS` mapping the well-known UUID to an
* `i18n` key.
* 2. Add the i18n key + translations in the 16 locale files.
*
* Everything else (search results, vignettes, member rows, autocomplete)
* picks the new group up automatically because the backend now returns
* virtual groups in `/api/groups/search`.
*/
import { i18n } from '../core/i18n.js';
import { INTERNAL_GROUP_ID } from '../model/groups.js';
/**
* Map of well-known virtual-group UUIDs → i18n key for the human-readable
* display name. Anything not in this map falls back to `group.name`.
*
* @type {Record<string, string>}
*/
const VIRTUAL_NAME_KEYS = {
[INTERNAL_GROUP_ID]: 'groups.virtual_internal_name'
};
/**
* Minimal shape needed by the display helpers. Both `GroupItem` (from
* `/api/groups`) and shareModal's `GroupSuggestion` satisfy it, so callers
* can pass either without an awkward upcast.
*
* @typedef {{id: string, name: string, is_virtual: boolean}} GroupDisplay
*/
/**
* Human-readable display name for a group. Virtual groups get a translated
* label; user-defined groups display their raw name.
*
* @param {GroupDisplay} group
* @returns {string}
*/
export function groupDisplayName(group) {
if (group.is_virtual) {
const key = VIRTUAL_NAME_KEYS[group.id];
if (key) return i18n.t(key, group.name);
}
return group.name;
}
/** FA class for system-managed (virtual) groups. `fa-people-roof` evokes a
* shared roof / community, distinguishing virtual instance-wide groups
* (Internal, future Everyone, …) from user-defined groups. Change here to
* re-skin every virtual-group surface in the app in one place. */
const VIRTUAL_ICON = 'fa-people-roof';
/** FA class for user-defined groups. */
const REGULAR_ICON = 'fa-user-group';
/**
* Pick the Font Awesome icon class for a group vignette. Virtual groups use
* `VIRTUAL_ICON`; user-defined groups use `REGULAR_ICON`.
*
* @param {GroupDisplay} group
* @returns {string}
*/
export function groupIconClass(group) {
return group.is_virtual ? VIRTUAL_ICON : REGULAR_ICON;
}
/**
* Same as `groupIconClass` but for call sites that hold only the
* `is_virtual` boolean — e.g. `MemberEntry._isVirtual` in shareModal,
* where the full `GroupItem` isn't kept around.
*
* @param {boolean | undefined} isVirtual
* @returns {string}
*/
export function groupIconClassByVirtual(isVirtual) {
return isVirtual ? VIRTUAL_ICON : REGULAR_ICON;
}
static/js/components/groupVignette.js
+42
View File
@@ -0,0 +1,42 @@
// @ts-check
/**
* Inline element representing a ReBAC subject group: user-group icon +
* the group's name. Used by the share dialog (to display groups as share
* recipients) and by the group-management view (to display nested-group
* members).
*
* Visually mirrors `createUserVignette` from `./userVignette.js` so a row
* built from one can swap in the other without layout shift. Picks
* `fa-user-group` (a *people* icon) rather than `fa-layer-group`, which is
* reserved across the app for the *grouping operator* on group-by menu pills
* — keeping the two concepts visually distinct.
*
* subject group (this file) fa-user-group
* grouping operator (group-by pills) fa-layer-group
*/
import { escapeHtml } from '../core/formatters.js';
/**
* Build the inline vignette.
*
* @param {string} name
* Display name of the group (escaped before injection).
* @param {'xs'|'sm'|'md'|'list'} [size='sm']
* Matches the size scale of `createUserVignette`. The size class is
* `user-vignette--${size}`; see `static/css/components/userVignette.css`.
* @param {{ icon?: string }} [opts]
* `icon`: FA class string without the `fa-` prefix (defaults to
* `'fa-user-group'`). Used to signal virtual groups visually — see
* `groupIconClass()` / `groupIconClassByVirtual()` in `./groupDisplay.js`
* return a distinct icon for system-wide virtual groups (Internal,
* future Everyone, …).
* @returns {HTMLElement}
*/
export function createGroupVignette(name, size = 'sm', { icon = 'fa-user-group' } = {}) {
const el = document.createElement('div');
el.className = `user-vignette user-vignette-group user-vignette--${size}`;
el.innerHTML = `<span class="user-vignette__avatar"><i class="fas ${escapeHtml(icon)}"></i></span><span class="user-vignette__name">${escapeHtml(name)}</span>`;
return el;
}
static/js/components/mySharesList.js
+81 -4
View File
@@ -15,6 +15,8 @@ import { fileSharing } from '../features/sharing/fileSharing.js';
import { grants } from '../model/grants.js';
import { buildExpiryChip } from '../utils/expiryChip.js';
import { buildPasswordChip } from '../utils/passwordChip.js';
import { groupDisplayName, groupIconClass } from './groupDisplay.js';
import { createGroupVignette } from './groupVignette.js';
import { buildLinkChip } from './linkChip.js';
import { buildResourceIcon } from './resourceIcon.js';
import { buildRoleChip, roleLabel } from './roleChip.js';
@@ -40,6 +42,26 @@ function _expiryState(expiresAt) {
return 'active';
}
/**
* Extract the unique group subject IDs across all grants in a page.
* Callers feed the result to `groups.resolveGroups(...)` so rows can render
* the group's display name instead of its UUID.
*
* @param {OutgoingResourceItem[]} items
* @returns {Set<string>}
*/
function collectGroupSubjectIds(items) {
const out = new Set();
for (const item of items) {
for (const g of item.grants) {
if (g.subject_type === 'group') out.add(g.subject_id);
}
}
return out;
}
export { collectGroupSubjectIds };
class MySharesList {
/**
* @param {HTMLElement} container
@@ -55,6 +77,47 @@ class MySharesList {
this._lastSwimKey = null;
/** @type {HTMLElement|null} */
this._lastSwimEl = null;
/**
* Cached map of group subject UUID → full GroupItem. Populated by
* the view via `setGroupMeta()` before each `render()` / `append()`
* so group lane headers and identity rows render with the localised
* name + virtual-aware icon.
* @type {Record<string, import('../core/types.js').GroupItem>}
*/
this._groupMeta = {};
}
/**
* Provide a resolved id→GroupItem map for group subjects expected in
* the next render / append call. Replaces (does not merge) any previous
* map.
* @param {Record<string, import('../core/types.js').GroupItem>} map
*/
setGroupMeta(map) {
this._groupMeta = map;
}
/**
* Best-effort display name for a group subject. Falls back to the UUID
* when no entry has been resolved yet — better than nothing while the
* resolve query is in flight.
* @param {string} groupId
* @returns {string}
*/
_groupName(groupId) {
const g = this._groupMeta[groupId];
return g ? groupDisplayName(g) : groupId;
}
/**
* Icon class for a group subject. Falls back to the regular group icon
* if the entry hasn't been resolved yet.
* @param {string} groupId
* @returns {string}
*/
_groupIcon(groupId) {
const g = this._groupMeta[groupId];
return g ? groupIconClass(g) : 'fa-user-group';
}
clear() {
@@ -119,6 +182,8 @@ class MySharesList {
let swimKey;
if (grant.subject_type === 'user') {
swimKey = `user:${grant.subject_id}`;
} else if (grant.subject_type === 'group') {
swimKey = `group:${grant.subject_id}`;
} else if (grant.has_password) {
swimKey = 'links:password';
} else {
@@ -201,6 +266,11 @@ class MySharesList {
if (swimKey.startsWith('user:')) {
return createUserVignette(grant.subject_id, 'list');
}
if (swimKey.startsWith('group:')) {
return createGroupVignette(this._groupName(grant.subject_id), 'list', {
icon: this._groupIcon(grant.subject_id)
});
}
const el = document.createElement('div');
el.className = 'ms-link-lane-label';
const icon = document.createElement('i');
@@ -258,8 +328,8 @@ class MySharesList {
const el = document.createElement('div');
el.className = 'ms-grant-row__identity';
if (grant.subject_type === 'user' && viewMode === 'sharedWith') {
// Lane header is already the user — show the resource instead
if ((grant.subject_type === 'user' || grant.subject_type === 'group') && viewMode === 'sharedWith') {
// Lane header is already the subject — show the resource instead.
el.appendChild(buildResourceIcon(item.resource, item.resource_type));
const nameLink = document.createElement('a');
nameLink.className = 'ms-identity__resource-name';
@@ -272,6 +342,12 @@ class MySharesList {
el.appendChild(nameLink);
} else if (grant.subject_type === 'user') {
el.appendChild(createUserVignette(grant.subject_id, 'xs'));
} else if (grant.subject_type === 'group') {
el.appendChild(
createGroupVignette(this._groupName(grant.subject_id), 'xs', {
icon: this._groupIcon(grant.subject_id)
})
);
} else {
// Token — link chip handles icon + label + copy-on-click
el.appendChild(buildLinkChip(grant));
@@ -355,7 +431,7 @@ class MySharesList {
// Current expiry as YYYY-MM-DD (or null)
const initialExpiry = grant.expires_at ? String(grant.expires_at).slice(0, 10) : null;
if (grant.subject_type === 'user') {
if (grant.subject_type === 'user' || grant.subject_type === 'group') {
for (const role of /** @type {('admin'|'editor'|'viewer')[]} */ (['admin', 'editor', 'viewer'])) {
const isCurrent = grant.role === role;
const mi = this._menuItem(isCurrent ? 'fas fa-check' : '', roleLabel(role), false, async () => {
@@ -376,8 +452,9 @@ class MySharesList {
menu.appendChild(this._menuSeparator());
menu.appendChild(this._menuExpiryRow(grant, item, rowEl, initialExpiry));
menu.appendChild(this._menuSeparator());
const removeIcon = grant.subject_type === 'group' ? 'fas fa-user-group' : 'fas fa-user-times';
menu.appendChild(
this._menuItem('fas fa-user-times', i18n.t('myshares.removeAccess', 'Remove access'), true, async () => {
this._menuItem(removeIcon, i18n.t('myshares.removeAccess', 'Remove access'), true, async () => {
menu.remove();
await grants.revokeGrant(grant.grant_id);
this._removeRowAndCleanLane(rowEl);
static/js/components/shareModal.js
+111 -22
View File
@@ -19,14 +19,29 @@ import { i18n } from '../core/i18n.js';
import { fileSharing } from '../features/sharing/fileSharing.js';
import { addressBook, SYSTEM_BOOK_ID } from '../model/addressBook.js';
import { grants } from '../model/grants.js';
import { groups } from '../model/groups.js';
import { systemUsers } from '../model/systemUsers.js';
import { buildExpiryChip } from '../utils/expiryChip.js';
import { buildPasswordChip } from '../utils/passwordChip.js';
import { groupDisplayName, groupIconClass, groupIconClassByVirtual } from './groupDisplay.js';
import { createGroupVignette } from './groupVignette.js';
import { Modal } from './modal.js';
import { createUserVignette } from './userVignette.js';
/** @import {FileItem, FolderItem, Grant, ContactItem, MemberEntry, LinkEntry, DraftLink, ShareRoleEnum} from '../core/types.js' */
/**
* A ReBAC subject group surfaced by `/api/groups/search`. Shape is a
* deliberate superset of `ContactItem` so the staging / chip / commit code
* paths can treat both uniformly, discriminating on the `_kind` field.
*
* @typedef {Object} GroupSuggestion
* @property {string} id
* @property {string} name
* @property {boolean} is_virtual
* @property {'group'} _kind
*/
/** Permissions that belong to each role (must mirror the Rust DTO). */
const ROLE_PERMISSIONS = {
viewer: ['read'],
@@ -34,6 +49,32 @@ const ROLE_PERMISSIONS = {
admin: ['read', 'comment', 'create', 'update', 'share', 'delete']
};
/**
* Fetch up to ~8 ReBAC subject groups whose name matches `q`. Authenticated
* endpoint; returns `[]` on any failure so the autocomplete degrades to
* contacts-only rather than breaking the dialog.
* @param {string} q
* @returns {Promise<GroupSuggestion[]>}
*/
async function _searchGroups(q) {
try {
const res = await fetch(`/api/groups/search?q=${encodeURIComponent(q)}&limit=8`, {
credentials: 'include'
});
if (!res.ok) return [];
/** @type {Array<{id:string,name:string,is_virtual:boolean}>} */
const items = await res.json();
return items.map((g) => ({
id: g.id,
name: g.name,
is_virtual: !!g.is_virtual,
_kind: /** @type {'group'} */ ('group')
}));
} catch {
return [];
}
}
/**
* Derive the highest role a set of grants represents for one subject.
* @param {Grant[]} subjectGrants
@@ -95,7 +136,7 @@ const shareModal = {
/** @type {DraftLink[]} */
_newLinks: [],
/** @type {ContactItem[]} */
/** @type {Array<ContactItem | GroupSuggestion>} */
_stagedUsers: [],
/** @type {ShareRoleEnum} */
@@ -157,6 +198,26 @@ const shareModal = {
this._localMembers = _buildMembers(grantList);
this._localLinks = linkList.map((share) => /** @type {LinkEntry} */ ({ share, _op: 'keep', _draft: null }));
// Group subjects in grants only carry their UUID — resolve full
// GroupItem records so member rows render the localised name and
// pick the correct icon (virtual groups get people-roof via
// `groupIconClass`).
const groupIds = new Set(this._localMembers.filter((m) => m.grant.subject.type === 'group').map((m) => m.grant.subject.id));
if (groupIds.size > 0) {
const resolved = await groups.resolveGroups(groupIds);
for (const m of this._localMembers) {
if (m.grant.subject.type === 'group') {
const g = resolved[m.grant.subject.id];
if (g) {
m._displayName = groupDisplayName(g);
m._isVirtual = g.is_virtual;
} else {
m._displayName = m.grant.subject.id;
}
}
}
}
} catch (err) {
console.error('shareModal: load error', err);
}
@@ -307,7 +368,10 @@ const shareModal = {
return;
}
debounce = setTimeout(async () => {
const results = await addressBook.searchContacts(q, [SYSTEM_BOOK_ID]);
// Search contacts (users) and ReBAC subject groups in parallel.
// Group results are tagged with `_kind='group'` so the rest of
// the dialog can render and commit them as group subjects.
const [contacts, groupItems] = await Promise.all([addressBook.searchContacts(q, [SYSTEM_BOOK_ID]), _searchGroups(q)]);
// Filter out the currently logged-in user — they cannot share with themselves
const currentUserId = (() => {
try {
@@ -316,9 +380,12 @@ const shareModal = {
return null;
}
})();
const filtered = currentUserId ? results.filter((c) => c.id !== currentUserId) : results;
this._renderSuggestions(dropdown, filtered.slice(0, 8), (contact) => {
this._stageUser(contact, input, dropdown, addBtn);
const filtered = currentUserId ? contacts.filter((c) => c.id !== currentUserId) : contacts;
// Groups first (they're a smaller, distinctively-iconed set),
// then contacts. Cap at 8 combined.
const combined = [...groupItems, ...filtered].slice(0, 8);
this._renderSuggestions(dropdown, combined, (item) => {
this._stageUser(item, input, dropdown, addBtn);
});
}, 200);
});
@@ -349,9 +416,9 @@ const shareModal = {
},
/**
* @param {HTMLElement} container
* @param {ContactItem[]} results
* @param {(c: ContactItem) => void} onSelect
* @param {HTMLElement} container
* @param {Array<ContactItem | GroupSuggestion>} results
* @param {(c: ContactItem | GroupSuggestion) => void} onSelect
*/
_renderSuggestions(container, results, onSelect) {
container.replaceChildren();
@@ -364,7 +431,12 @@ const shareModal = {
item.className = 'smd-suggestion-item';
item.tabIndex = 0;
item.appendChild(createUserVignette(c.id, 'sm', { showEmail: true }));
if (c._kind === 'group') {
const g = /** @type {GroupSuggestion} */ (c);
item.appendChild(createGroupVignette(groupDisplayName(g), 'sm', { icon: groupIconClass(g) }));
} else {
item.appendChild(createUserVignette(c.id, 'sm', { showEmail: true }));
}
const select = () => onSelect(c);
item.addEventListener('click', select);
@@ -377,15 +449,18 @@ const shareModal = {
},
/**
* @param {ContactItem} contact
* @param {HTMLInputElement} inputEl
* @param {HTMLElement} dropdown
* @param {HTMLButtonElement} addBtn
* @param {ContactItem | GroupSuggestion} contact
* @param {HTMLInputElement} inputEl
* @param {HTMLElement} dropdown
* @param {HTMLButtonElement} addBtn
*/
_stageUser(contact, inputEl, dropdown, addBtn) {
// Idempotent: skip duplicates and already-existing members
const alreadyMember = this._localMembers.some((m) => m.grant.subject.id === contact.id && m._op !== 'remove');
const alreadyStaged = this._stagedUsers.some((u) => u.id === contact.id);
// Idempotent: skip duplicates and already-existing members. Match on
// id *and* kind so a user and a group sharing a UUID collision (in
// theory impossible; in practice harmless) wouldn't shadow each other.
const kind = contact._kind === 'group' ? 'group' : 'user';
const alreadyMember = this._localMembers.some((m) => m.grant.subject.id === contact.id && m.grant.subject.type === kind && m._op !== 'remove');
const alreadyStaged = this._stagedUsers.some((u) => u.id === contact.id && (u._kind ?? 'user') === kind);
if (alreadyMember || alreadyStaged) return;
this._stagedUsers.push(contact);
@@ -422,20 +497,27 @@ const shareModal = {
const chip = document.createElement('div');
chip.className = 'smd-chip';
const vignette = createUserVignette(c.id, 'xs');
const visual =
c._kind === 'group'
? (() => {
const g = /** @type {GroupSuggestion} */ (c);
return createGroupVignette(groupDisplayName(g), 'xs', { icon: groupIconClass(g) });
})()
: createUserVignette(c.id, 'xs');
const rm = document.createElement('button');
rm.className = 'smd-chip-remove';
rm.innerHTML = '&times;';
rm.title = i18n.t('actions.remove', 'Remove');
const kind = c._kind === 'group' ? 'group' : 'user';
rm.addEventListener('click', () => {
this._stagedUsers = this._stagedUsers.filter((u) => u.id !== c.id);
this._stagedUsers = this._stagedUsers.filter((u) => !(u.id === c.id && (u._kind ?? 'user') === kind));
this._refreshChips();
const addBtn = /** @type {HTMLButtonElement|null} */ (document.querySelector('.smd-add-btn'));
if (addBtn) addBtn.disabled = this._stagedUsers.length === 0;
});
chip.appendChild(vignette);
chip.appendChild(visual);
chip.appendChild(rm);
container.appendChild(chip);
});
@@ -443,12 +525,13 @@ const shareModal = {
_commitStagedUsers() {
for (const contact of this._stagedUsers) {
const subjectType = contact._kind === 'group' ? 'group' : 'user';
/** @type {Grant} */
const placeholderGrant = {
id: '', // not yet persisted
granted_at: '',
granted_by: '',
subject: { type: 'user', id: contact.id },
subject: { type: subjectType, id: contact.id },
permission: /** @type {import('../core/types.js').PermissionTypeEnum} */ (ROLE_PERMISSIONS[this._stagedRole][0]),
resource: { type: this._itemType, id: this._item?.id ?? '' }
};
@@ -457,7 +540,8 @@ const shareModal = {
_grants: [], // no server grants yet — nothing to revoke on remove
role: this._stagedRole,
_op: 'new',
expires_at: this._stagedExpiry
expires_at: this._stagedExpiry,
_displayName: contact._kind === 'group' ? /** @type {GroupSuggestion} */ (contact).name : undefined
});
}
this._stagedUsers = [];
@@ -528,7 +612,12 @@ const shareModal = {
const row = document.createElement('div');
row.className = 'smd-member-row';
const vignette = createUserVignette(entry.grant.subject.id, 'md');
const vignette =
entry.grant.subject.type === 'group'
? createGroupVignette(entry._displayName ?? entry.grant.subject.id, 'md', {
icon: groupIconClassByVirtual(entry._isVirtual)
})
: createUserVignette(entry.grant.subject.id, 'md');
const roleSelect = document.createElement('select');
roleSelect.className = 'smd-member-role-select';
static/js/core/icons.js
+9
View File
@@ -161,6 +161,7 @@ const OxiIcons = {
512,
'M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'
],
'ellipsis-v': [128, 'M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z'],
envelope: [
512,
'M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'
@@ -341,6 +342,10 @@ const OxiIcons = {
512,
'M36.4 353.2c4.1-14.6 11.8-27.9 22.6-38.7l181.2-181.2 33.9-33.9c16.6 16.6 51.3 51.3 104 104l33.9 33.9-33.9 33.9-181.2 181.2c-10.7 10.7-24.1 18.5-38.7 22.6L30.4 510.6c-8.3 2.3-17.3 0-23.4-6.2S-1.4 489.3 .9 481L36.4 353.2zm55.6-3.7c-4.4 4.7-7.6 10.4-9.3 16.6l-24.1 86.9 86.9-24.1c6.4-1.8 12.2-5.1 17-9.7L91.9 349.5zm354-146.1c-16.6-16.6-51.3-51.3-104-104L308 65.5C334.5 39 349.4 24.1 352.9 20.6 366.4 7 384.8-.6 404-.6S441.6 7 455.1 20.6l35.7 35.7C504.4 69.9 512 88.3 512 107.4s-7.6 37.6-21.2 51.1c-3.5 3.5-18.4 18.4-44.9 44.9z'
],
'people-roof': [
576,
'M302.3-12.6c-9-4.5-19.6-4.5-28.6 0l-256 128C1.9 123.3-4.5 142.5 3.4 158.3s27.1 22.2 42.9 14.3L288 51.8 529.7 172.6c15.8 7.9 35 1.5 42.9-14.3s1.5-35-14.3-42.9l-256-128zM288 272a56 56 0 1 0 0-112 56 56 0 1 0 0 112zm0 48c-53 0-96 43-96 96l0 32c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32l0-32c0-53-43-96-96-96zM160 256a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm352 0a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM112 336c-44.2 0-80 35.8-80 80l0 33.1c0 17 13.8 30.9 30.9 30.9l87.8 0c-4.3-9.8-6.7-20.6-6.7-32l0-48c0-18.4 3.5-36 9.8-52.2-12.2-7.5-26.5-11.8-41.8-11.8zM425.4 480l87.8 0c17 0 30.9-13.8 30.9-30.9l0-33.1c0-44.2-35.8-80-80-80-15.3 0-29.6 4.3-41.8 11.8 6.3 16.2 9.8 33.8 9.8 52.2l0 48c0 11.4-2.4 22.2-6.7 32z'
],
play: [
384,
'M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'
@@ -453,6 +458,10 @@ const OxiIcons = {
512,
'M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'
],
'user-group': [
640,
'M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'
],
'user-plus': [
640,
'M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'
static/js/core/types.js
+46 -8
View File
@@ -338,15 +338,20 @@
/**
* One (subject, permissions) entry within an outgoing resource item.
* Mirrors the server's `OutgoingResourceGrantDto`. `subject_type` is the
* full set the backend may emit; the UI for My Shares filters out `'group'`
* before rendering (see `_excludeGroupGrants` in mySharesList.js) so only
* `'user'` and `'token'` rows actually reach the view layer there.
*
* @typedef {Object} OutgoingResourceGrant
* @property {string} grant_id
* @property {'user'|'token'} subject_type
* @property {string} subject_id
* @property {string} subject_display - Username (users) or share name (tokens).
* @property {'viewer'|'editor'|'admin'} role
* @property {string} granted_at - ISO-8601
* @property {string|null} [expires_at] - ISO-8601 or absent.
* @property {boolean} has_password - True when a token subject has a password set.
* @property {string} grant_id
* @property {'user'|'group'|'token'|'external'} subject_type
* @property {string} subject_id
* @property {string} subject_display - Username (users) or share name (tokens).
* @property {'viewer'|'editor'|'admin'} role
* @property {string} granted_at - ISO-8601
* @property {string|null} [expires_at] - ISO-8601 or absent.
* @property {boolean} has_password - True when a token subject has a password set.
*/
/**
@@ -406,6 +411,8 @@
* @property {string} created_at - ISO-8601
* @property {string} updated_at - ISO-8601
* @property {string} etag
* @property {'user'|'group'} [_kind] - Discriminator added by the share-modal autocomplete when merging contacts with ReBAC subject groups. Absent (or 'user') for plain contacts; 'group' indicates the row is a subject-group suggestion with a `name` field instead of contact details.
* @property {string} [name] - Present only when `_kind === 'group'` — the subject-group's display name.
*/
/**
@@ -438,6 +445,8 @@
* @property {ShareRoleEnum} role - Derived role label shown in the UI.
* @property {'keep'|'remove'|'change'|'new'} _op - Pending local operation.
* @property {string|null} [expires_at] - YYYY-MM-DD expiry date string, or null for no expiry.
* @property {string} [_displayName] - Optional human-readable label (set for group subjects so the row can show the group name; user subjects resolve their name via `createUserVignette`).
* @property {boolean} [_isVirtual] - True when this row's subject is a virtual (system-managed) group, so the vignette renders with the virtual-group icon.
*/
/**
@@ -456,3 +465,32 @@
* @property {string|null} expires_at - ISO-8601 date string or null.
*/
// ------------------- ReBAC subject groups
/**
* Mirrors `GroupDto` on the server (`subject_group_handler.rs::GroupDto`).
* @typedef {Object} GroupItem
* @property {string} id
* @property {string} name
* @property {string|null} [description]
* @property {boolean} is_virtual
* @property {string} created_at - ISO-8601
* @property {string} updated_at - ISO-8601
* @property {boolean} can_manage - True if the current caller may rename / delete / curate the membership.
* @property {number} member_count - Direct-member count (users + nested groups, one level). The
* `/groups/search` endpoint emits 0 to skip a per-row COUNT(*);
* list/get/create/update return the real value.
*/
/**
* Response from `GET /api/groups` — paginated list of groups.
* @typedef {Object} GroupListResponse
* @property {GroupItem[]} items
* @property {number} total
*/
/**
* One direct member of a group (tagged union: user or nested group).
* @typedef {{kind: 'user', id: string} | {kind: 'group', id: string}} GroupMemberItem
*/
static/js/model/groups.js
+248
View File
@@ -0,0 +1,248 @@
// @ts-check
/**
* @import {GroupItem, GroupListResponse, GroupMemberItem} from '../core/types.js'
*/
/**
* Thin API client for ReBAC subject groups (`/api/groups/*`).
*
* Uses the global `fetch` (intercepted in `core/fetchWrapper.js` for
* 401-refresh-retry and `ApiError` translation) and `getCsrfHeaders()` for
* mutating verbs.
*
* v1: most endpoints are admin-only on the backend; `/api/groups/search` is
* authenticated-only and powers the share-dialog recipient autocomplete.
* v2 will relax the admin guard to per-group `Manage` permissions — every
* caller here will keep working unchanged, but a non-admin may start
* receiving 403s on `get`/`listMembers` for groups they can't see.
*/
import { getCsrfHeaders } from '../core/csrf.js';
/** Well-known UUID of the predefined Internal virtual group (matches the
* Rust constant `INTERNAL_GROUP_ID` in `src/domain/entities/subject_group.rs`). */
const INTERNAL_GROUP_ID = '00000000-0000-0000-0000-000000000001';
const groups = {
/**
* Paginated list. Admin-only on the server today.
* @param {{limit?: number, offset?: number, q?: string|null}} [opts]
* @returns {Promise<GroupListResponse>}
*/
async list({ limit = 50, offset = 0, q = null } = {}) {
const params = new URLSearchParams();
params.set('limit', String(limit));
params.set('offset', String(offset));
if (q) params.set('q', q);
const res = await fetch(`/api/groups?${params}`);
if (!res.ok) throw await _err(res, 'list groups');
return res.json();
},
/**
* Search up to ~8 non-virtual groups whose name matches `q`.
* Authenticated (not admin-gated) — used by the share-dialog autocomplete.
* @param {string} q
* @param {number} [limit=8]
* @returns {Promise<GroupItem[]>}
*/
async search(q, limit = 8) {
const params = new URLSearchParams({ q, limit: String(limit) });
const res = await fetch(`/api/groups/search?${params}`);
if (!res.ok) throw await _err(res, 'search groups');
return res.json();
},
/**
* Resolve a set of group IDs to full `GroupItem` records. Used after
* loading grants (which only carry `subject_id`) so the UI can render
* the group's name and pick a virtual-aware icon.
*
* Strategy: a single `/api/groups/search` call with empty `q` and a
* generous limit covers any caller (admin or not) without needing the
* admin-gated `GET /api/groups/{id}`. Virtual groups are now returned
* by the search endpoint, so no special-casing is needed here.
*
* Unresolved IDs (deleted groups, or beyond the search limit) get a
* synthetic stub so call sites never have to handle missing entries.
*
* @param {Iterable<string>} ids
* @returns {Promise<Record<string, GroupItem>>}
*/
async resolveGroups(ids) {
const wanted = new Set(ids);
/** @type {Record<string, GroupItem>} */
const out = {};
if (wanted.size === 0) return out;
try {
const items = await this.search('', 200);
for (const g of items) {
if (wanted.has(g.id)) out[g.id] = g;
}
} catch {
// Network / auth failure — fall through to the stub fallback below.
}
// Anything still unresolved → readable stub so the UI never shows a
// raw UUID. `is_virtual: false` matches the safer (more restrictive)
// visual treatment when in doubt.
const now = new Date().toISOString();
for (const id of wanted) {
if (!(id in out)) {
out[id] = {
id,
name: `Group ${id.slice(0, 8)}…`,
description: null,
is_virtual: false,
created_at: now,
updated_at: now,
can_manage: false,
member_count: 0
};
}
}
return out;
},
/**
* @param {string} id
* @returns {Promise<GroupItem>}
*/
async get(id) {
const res = await fetch(`/api/groups/${encodeURIComponent(id)}`);
if (!res.ok) throw await _err(res, 'get group');
return res.json();
},
/**
* @param {{name: string, description?: string|null}} body
* @returns {Promise<GroupItem>}
*/
async create(body) {
const res = await fetch('/api/groups', {
method: 'POST',
headers: { 'Content-Type': 'application/json', ...getCsrfHeaders() },
body: JSON.stringify(body)
});
if (!res.ok) throw await _err(res, 'create group');
return res.json();
},
/**
* @param {string} id
* @param {string} newName
* @returns {Promise<GroupItem>}
*/
async rename(id, newName) {
const res = await fetch(`/api/groups/${encodeURIComponent(id)}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json', ...getCsrfHeaders() },
body: JSON.stringify({ name: newName })
});
if (!res.ok) throw await _err(res, 'rename group');
return res.json();
},
/**
* @param {string} id
* @returns {Promise<void>}
*/
async deleteGroup(id) {
const res = await fetch(`/api/groups/${encodeURIComponent(id)}`, {
method: 'DELETE',
headers: getCsrfHeaders()
});
if (!res.ok) throw await _err(res, 'delete group');
},
/**
* Direct members (one level only, not transitive).
* @param {string} id
* @returns {Promise<GroupMemberItem[]>}
*/
async listMembers(id) {
const res = await fetch(`/api/groups/${encodeURIComponent(id)}/members`);
if (!res.ok) throw await _err(res, 'list members');
return res.json();
},
/**
* Add a user as a member.
* @param {string} groupId
* @param {string} userId
* @returns {Promise<void>}
*/
async addUserMember(groupId, userId) {
const res = await fetch(`/api/groups/${encodeURIComponent(groupId)}/members`, {
method: 'POST',
headers: { 'Content-Type': 'application/json', ...getCsrfHeaders() },
body: JSON.stringify({ user_id: userId })
});
if (!res.ok) throw await _err(res, 'add user member');
},
/**
* Add another group as a nested member.
* Backend runs the cycle + depth checks at write time.
* @param {string} groupId
* @param {string} memberGroupId
* @returns {Promise<void>}
*/
async addGroupMember(groupId, memberGroupId) {
const res = await fetch(`/api/groups/${encodeURIComponent(groupId)}/members`, {
method: 'POST',
headers: { 'Content-Type': 'application/json', ...getCsrfHeaders() },
body: JSON.stringify({ group_id: memberGroupId })
});
if (!res.ok) throw await _err(res, 'add group member');
},
/**
* @param {string} groupId
* @param {string} userId
* @returns {Promise<void>}
*/
async removeUserMember(groupId, userId) {
const res = await fetch(`/api/groups/${encodeURIComponent(groupId)}/members/user/${encodeURIComponent(userId)}`, {
method: 'DELETE',
headers: getCsrfHeaders()
});
if (!res.ok) throw await _err(res, 'remove user member');
},
/**
* @param {string} groupId
* @param {string} memberGroupId
* @returns {Promise<void>}
*/
async removeGroupMember(groupId, memberGroupId) {
const res = await fetch(`/api/groups/${encodeURIComponent(groupId)}/members/group/${encodeURIComponent(memberGroupId)}`, {
method: 'DELETE',
headers: getCsrfHeaders()
});
if (!res.ok) throw await _err(res, 'remove group member');
}
};
/**
* Build a thrown Error from a non-OK Response. The fetch interceptor turns
* structured API errors into `ApiError`, so anything that lands here is
* either a network failure or an error the interceptor already enriched.
* @param {Response} res
* @param {string} context
* @returns {Promise<Error>}
*/
async function _err(res, context) {
let detail = `${res.status} ${res.statusText}`;
try {
const body = await res.text();
if (body) detail += `: ${body}`;
} catch {
// body unreadable — fall through with status only.
}
return new Error(`${context} failed: ${detail}`);
}
export { groups, INTERNAL_GROUP_ID };
static/js/views/groups/groupsView.js
+825
View File
@@ -0,0 +1,825 @@
// @ts-check
/**
* Subject-group management view.
*
* Reached from the user-menu "Manage groups" entry. Opens a `Modal.openPanel`
* with a two-state UI:
*
* list — paginated list of groups + Create button
* detail — single-group editor: members, add/remove, rename, delete
*
* Mutations commit immediately (POST/DELETE per click). The two states are
* rendered into the same panel body — `_renderListInto()` and
* `_renderDetailInto()` swap the body element, the modal frame stays open.
*
* Action buttons (Create, Rename, Delete, Add/Remove member) read
* `group.can_manage` from the backend DTO and are hidden/disabled when
* `false`. v1 returns `can_manage = (role === "admin")`; v2 will return it
* from per-group `Manage` grants — no JS change required at that point.
*/
import { groupDisplayName, groupIconClass } from '../../components/groupDisplay.js';
import { createGroupVignette } from '../../components/groupVignette.js';
import { Modal } from '../../components/modal.js';
import { createUserVignette } from '../../components/userVignette.js';
import { escapeHtml } from '../../core/formatters.js';
import { i18n } from '../../core/i18n.js';
import { addressBook, SYSTEM_BOOK_ID } from '../../model/addressBook.js';
import { groups } from '../../model/groups.js';
/**
* @import {ContactItem, GroupItem, GroupMemberItem} from '../../core/types.js'
*/
const PAGE_SIZE = 50;
/**
* Localised "(N members)" label for a group list row. The project's i18n
* helper is key→string with no built-in pluralisation, so we branch on the
* three forms named by the plan and substitute `{count}` ourselves.
*
* @param {number} count
* @returns {string}
*/
function _memberCountLabel(count) {
if (count === 0) return i18n.t('groups.member_count_zero', 'no members');
if (count === 1) return i18n.t('groups.member_count_one', '1 member');
return i18n.t('groups.member_count_other', '{count} members').replace('{count}', String(count));
}
const groupsView = {
// ── State ─────────────────────────────────────────────────────────────
/** @type {HTMLElement|null} — current panel body container */
_bodyEl: null,
/** @type {GroupItem|null} — populated when in detail state */
_currentGroup: null,
/** @type {GroupMemberItem[]} — direct members of the current group */
_members: [],
/** @type {GroupItem[]} — most recent list page */
_items: [],
_nextOffset: 0,
_hasMore: false,
// ── Public entry ──────────────────────────────────────────────────────
/** Open the management modal at the list view. */
async open() {
this._currentGroup = null;
this._members = [];
this._items = [];
this._nextOffset = 0;
this._hasMore = false;
this._bodyEl = document.createElement('div');
this._bodyEl.className = 'groups-modal';
Modal.openPanel({
title: i18n.t('groups.title', 'Manage groups'),
icon: 'fa-user-group',
content: this._bodyEl,
confirmText: i18n.t('actions.close', 'Close'),
cancelText: '',
onConfirm: null
});
await this._renderListInto(this._bodyEl);
},
// ── List view ─────────────────────────────────────────────────────────
/** @param {HTMLElement} root */
async _renderListInto(root) {
root.replaceChildren();
const header = document.createElement('div');
header.className = 'groups-modal__header';
const subtitle = document.createElement('div');
subtitle.className = 'groups-modal__subtitle';
subtitle.textContent = i18n.t('groups.title', 'Manage groups');
const createBtn = document.createElement('button');
createBtn.type = 'button';
createBtn.className = 'btn btn-primary groups-modal__create-btn';
createBtn.innerHTML = `<i class="fas fa-plus"></i> ${escapeHtml(i18n.t('groups.create_button', 'Create group'))}`;
createBtn.addEventListener('click', () => this._promptCreate());
header.appendChild(subtitle);
header.appendChild(createBtn);
root.appendChild(header);
const list = document.createElement('div');
list.className = 'groups-modal__list';
root.appendChild(list);
const status = document.createElement('div');
status.className = 'groups-modal__status';
status.textContent = i18n.t('groups.loading', 'Loading…');
list.appendChild(status);
try {
const page = await groups.list({ limit: PAGE_SIZE, offset: 0 });
this._items = page.items;
this._nextOffset = page.items.length;
this._hasMore = page.items.length < page.total;
list.replaceChildren();
if (page.items.length === 0) {
const empty = document.createElement('div');
empty.className = 'groups-modal__empty';
empty.innerHTML = `<i class="fas fa-user-group groups-modal__empty-icon"></i><p>${escapeHtml(i18n.t('groups.empty_state', 'No groups yet.'))}</p>`;
list.appendChild(empty);
return;
}
for (const g of page.items) {
list.appendChild(this._buildListRow(g));
}
if (this._hasMore) {
const more = document.createElement('button');
more.type = 'button';
more.className = 'btn btn-ghost groups-modal__load-more';
more.textContent = i18n.t('groups.load_more', 'Load more');
more.addEventListener('click', async () => {
more.disabled = true;
const next = await groups.list({ limit: PAGE_SIZE, offset: this._nextOffset });
more.remove();
for (const g of next.items) list.appendChild(this._buildListRow(g));
this._items = [...this._items, ...next.items];
this._nextOffset += next.items.length;
this._hasMore = this._items.length < next.total;
if (this._hasMore) list.appendChild(more);
});
list.appendChild(more);
}
} catch (err) {
list.replaceChildren();
const errEl = document.createElement('div');
errEl.className = 'groups-modal__error';
errEl.textContent = /** @type {Error} */ (err).message;
list.appendChild(errEl);
}
},
/**
* @param {GroupItem} g
* @returns {HTMLElement}
*/
_buildListRow(g) {
const row = document.createElement('div');
row.className = 'groups-modal__row';
row.tabIndex = 0;
// Vignette + meta
const main = document.createElement('div');
main.className = 'groups-modal__row-main';
main.appendChild(createGroupVignette(groupDisplayName(g), 'md', { icon: groupIconClass(g) }));
if (g.description) {
const desc = document.createElement('div');
desc.className = 'groups-modal__row-desc';
desc.textContent = g.description;
main.appendChild(desc);
}
if (g.is_virtual) {
const badge = document.createElement('span');
badge.className = 'groups-modal__row-badge';
badge.textContent = i18n.t('groups.virtual_badge', 'System');
main.appendChild(badge);
}
// Virtual groups (Internal, future Everyone, …) have no direct members
// by construction — membership is computed implicitly by the engine —
// so a literal "no members" chip would be misleading. Skip it.
if (!g.is_virtual) {
const memberChip = document.createElement('span');
memberChip.className = 'groups-modal__row-count';
memberChip.textContent = _memberCountLabel(g.member_count);
main.appendChild(memberChip);
}
row.appendChild(main);
// Click row → open detail. Virtual groups are read-only but can still
// be inspected.
const openDetail = () => this._showDetail(g.id);
row.addEventListener('click', openDetail);
row.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
openDetail();
}
});
return row;
},
/**
* Render an inline name-entry form into the panel body. The Modal is a
* singleton — calling `Modal.prompt()` from inside an open `openPanel()`
* mutates the same overlay and doesn't surface a usable input field, so
* we keep the create / rename flows inside this view's own body.
* @param {HTMLElement} root
*/
_renderCreateInto(root) {
root.replaceChildren();
const header = document.createElement('div');
header.className = 'groups-modal__detail-header';
const back = document.createElement('button');
back.type = 'button';
back.className = 'btn btn-ghost groups-modal__back-btn';
back.setAttribute('aria-label', i18n.t('groups.back_to_list', 'Back'));
back.innerHTML = '<i class="fas fa-arrow-left"></i>';
back.addEventListener('click', () => this._renderListInto(root));
header.appendChild(back);
const title = document.createElement('div');
title.className = 'groups-modal__subtitle';
title.textContent = i18n.t('groups.create_dialog_title', 'New group');
header.appendChild(title);
root.appendChild(header);
const form = document.createElement('div');
form.className = 'groups-modal__form';
const label = document.createElement('label');
label.className = 'groups-modal__form-label';
label.textContent = i18n.t('groups.name_label', 'Name');
form.appendChild(label);
const input = document.createElement('input');
input.type = 'text';
input.className = 'groups-modal__add-input';
input.placeholder = i18n.t('groups.name_placeholder', 'engineering');
input.autocomplete = 'off';
label.appendChild(input);
const err = document.createElement('div');
err.className = 'groups-modal__inline-error hidden';
form.appendChild(err);
const actions = document.createElement('div');
actions.className = 'groups-modal__form-actions';
const cancel = document.createElement('button');
cancel.type = 'button';
cancel.className = 'btn btn-ghost';
cancel.textContent = i18n.t('actions.cancel', 'Cancel');
cancel.addEventListener('click', () => this._renderListInto(root));
const save = document.createElement('button');
save.type = 'button';
save.className = 'btn btn-primary';
save.textContent = i18n.t('actions.create', 'Create');
const submit = async () => {
const value = input.value.trim();
if (!value) {
err.textContent = i18n.t('errors.group_name_invalid', 'Invalid name.');
err.classList.remove('hidden');
input.focus();
return;
}
save.disabled = true;
try {
await groups.create({ name: value });
await this._renderListInto(root);
} catch (e) {
err.textContent = /** @type {Error} */ (e).message;
err.classList.remove('hidden');
save.disabled = false;
}
};
save.addEventListener('click', submit);
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
submit();
} else if (e.key === 'Escape') {
e.preventDefault();
this._renderListInto(root);
}
});
actions.appendChild(cancel);
actions.appendChild(save);
form.appendChild(actions);
root.appendChild(form);
// Focus the input on next tick so the panel finishes rendering first.
setTimeout(() => input.focus(), 0);
},
_promptCreate() {
if (this._bodyEl) this._renderCreateInto(this._bodyEl);
},
// ── Detail view ───────────────────────────────────────────────────────
/** @param {string} groupId */
async _showDetail(groupId) {
if (!this._bodyEl) return;
try {
const [group, members] = await Promise.all([groups.get(groupId), groups.listMembers(groupId)]);
this._currentGroup = group;
this._members = members;
this._renderDetailInto(this._bodyEl);
} catch (err) {
this._showFatalError(/** @type {Error} */ (err).message);
}
},
/** @param {HTMLElement} root */
_renderDetailInto(root) {
const group = this._currentGroup;
if (!group) return;
root.replaceChildren();
// ── Header (back arrow + name + meta) ─────────────────────────────
const header = document.createElement('div');
header.className = 'groups-modal__detail-header';
const back = document.createElement('button');
back.type = 'button';
back.className = 'btn btn-ghost groups-modal__back-btn';
back.setAttribute('aria-label', i18n.t('groups.back_to_list', 'Back'));
back.innerHTML = '<i class="fas fa-arrow-left"></i>';
back.addEventListener('click', () => this._renderListInto(root));
header.appendChild(back);
const titleWrap = document.createElement('div');
titleWrap.className = 'groups-modal__detail-title-wrap';
titleWrap.appendChild(createGroupVignette(groupDisplayName(group), 'md', { icon: groupIconClass(group) }));
if (group.is_virtual) {
const badge = document.createElement('span');
badge.className = 'groups-modal__row-badge';
badge.textContent = i18n.t('groups.virtual_badge', 'System');
titleWrap.appendChild(badge);
}
header.appendChild(titleWrap);
if (group.can_manage && !group.is_virtual) {
const rename = document.createElement('button');
rename.type = 'button';
rename.className = 'btn btn-ghost';
rename.innerHTML = `<i class="fas fa-pen"></i>`;
rename.title = i18n.t('actions.rename', 'Rename');
rename.addEventListener('click', () => this._promptRename(group));
header.appendChild(rename);
}
root.appendChild(header);
// ── Members section ───────────────────────────────────────────────
const membersSection = document.createElement('div');
membersSection.className = 'groups-modal__members';
const membersHeader = document.createElement('div');
membersHeader.className = 'groups-modal__section-title';
membersHeader.textContent = i18n.t('groups.members_section', 'Members');
membersSection.appendChild(membersHeader);
if (this._members.length === 0) {
const empty = document.createElement('div');
empty.className = 'groups-modal__empty-line';
empty.textContent = i18n.t('groups.no_members', 'No members yet.');
membersSection.appendChild(empty);
} else {
for (const m of this._members) {
membersSection.appendChild(this._buildMemberRow(m));
}
}
root.appendChild(membersSection);
// ── Add-member row (only if can_manage) ───────────────────────────
if (group.can_manage && !group.is_virtual) {
root.appendChild(this._buildAddMemberRow());
}
// ── Delete group (destructive footer) ─────────────────────────────
if (group.can_manage && !group.is_virtual) {
const footer = document.createElement('div');
footer.className = 'groups-modal__footer';
const del = document.createElement('button');
del.type = 'button';
del.className = 'btn btn-danger';
del.innerHTML = `<i class="fas fa-trash"></i> ${escapeHtml(i18n.t('groups.delete_group', 'Delete group'))}`;
del.addEventListener('click', () => this._confirmDelete(group));
footer.appendChild(del);
root.appendChild(footer);
}
},
/**
* @param {GroupMemberItem} m
* @returns {HTMLElement}
*/
_buildMemberRow(m) {
const row = document.createElement('div');
row.className = 'groups-modal__member-row';
if (m.kind === 'user') {
row.appendChild(createUserVignette(m.id, 'sm', { showEmail: true }));
} else {
// Nested group — show the vignette. We don't pre-load the name
// (it's just the id from the API). To get the name we'd need an
// extra fetch; for v1, show the id-as-name (small UX cost) and
// upgrade once `list_direct_members` returns enriched rows.
row.appendChild(createGroupVignette(m.id, 'sm'));
}
if (this._currentGroup?.can_manage && !this._currentGroup?.is_virtual) {
const rm = document.createElement('button');
rm.type = 'button';
rm.className = 'btn btn-ghost groups-modal__member-remove';
rm.innerHTML = '&times;';
rm.title = i18n.t('groups.remove_member', 'Remove');
rm.addEventListener('click', () => this._removeMember(m));
row.appendChild(rm);
}
return row;
},
_buildAddMemberRow() {
const group = this._currentGroup;
if (!group) return document.createElement('div');
const wrap = document.createElement('div');
wrap.className = 'groups-modal__add-row';
const input = document.createElement('input');
input.type = 'text';
input.className = 'groups-modal__add-input';
input.placeholder = i18n.t('groups.add_member_placeholder', 'Add a user or group…');
const dropdown = document.createElement('div');
dropdown.className = 'groups-modal__add-dropdown hidden';
/** @type {ReturnType<typeof setTimeout>|null} */
let debounce = null;
/** @param {GroupMemberItem} m */
const knownMemberKey = (m) => `${m.kind}:${m.id}`;
const seen = new Set(this._members.map(knownMemberKey));
input.addEventListener('input', () => {
if (debounce) clearTimeout(debounce);
const q = input.value.trim();
if (!q) {
dropdown.classList.add('hidden');
dropdown.replaceChildren();
return;
}
debounce = setTimeout(async () => {
try {
const [contacts, groupResults] = await Promise.all([addressBook.searchContacts(q, [SYSTEM_BOOK_ID]), groups.search(q)]);
// Filter out the current group itself + already-members.
const userHits = contacts.filter((c) => !seen.has(`user:${c.id}`)).slice(0, 5);
const groupHits = groupResults.filter((g) => g.id !== group.id && !seen.has(`group:${g.id}`)).slice(0, 5);
this._renderAddSuggestions(dropdown, userHits, groupHits);
} catch (err) {
dropdown.replaceChildren();
const e = document.createElement('div');
e.className = 'groups-modal__error';
e.textContent = /** @type {Error} */ (err).message;
dropdown.appendChild(e);
dropdown.classList.remove('hidden');
}
}, 200);
});
document.addEventListener(
'click',
(e) => {
if (!wrap.contains(/** @type {Node} */ (e.target))) {
dropdown.classList.add('hidden');
}
},
{ once: false }
);
wrap.appendChild(input);
wrap.appendChild(dropdown);
return wrap;
},
/**
* @param {HTMLElement} dropdown
* @param {ContactItem[]} userHits
* @param {GroupItem[]} groupHits
*/
_renderAddSuggestions(dropdown, userHits, groupHits) {
dropdown.replaceChildren();
if (userHits.length === 0 && groupHits.length === 0) {
dropdown.classList.add('hidden');
return;
}
const group = this._currentGroup;
if (!group) return;
for (const g of groupHits) {
const item = document.createElement('div');
item.className = 'groups-modal__add-item';
item.tabIndex = 0;
item.appendChild(createGroupVignette(groupDisplayName(g), 'sm', { icon: groupIconClass(g) }));
item.addEventListener('click', async () => {
dropdown.classList.add('hidden');
await this._addGroupMember(g.id);
});
dropdown.appendChild(item);
}
for (const c of userHits) {
const item = document.createElement('div');
item.className = 'groups-modal__add-item';
item.tabIndex = 0;
item.appendChild(createUserVignette(c.id, 'sm', { showEmail: true }));
item.addEventListener('click', async () => {
dropdown.classList.add('hidden');
await this._addUserMember(c.id);
});
dropdown.appendChild(item);
}
dropdown.classList.remove('hidden');
},
/**
* Inline rename form. Replaces the detail view body. Same singleton-modal
* constraint as `_renderCreateInto` — we keep all forms inside the panel.
* @param {GroupItem} group
*/
_promptRename(group) {
if (!this._bodyEl) return;
const root = this._bodyEl;
root.replaceChildren();
const header = document.createElement('div');
header.className = 'groups-modal__detail-header';
const back = document.createElement('button');
back.type = 'button';
back.className = 'btn btn-ghost groups-modal__back-btn';
back.setAttribute('aria-label', i18n.t('groups.back_to_list', 'Back'));
back.innerHTML = '<i class="fas fa-arrow-left"></i>';
back.addEventListener('click', () => this._renderDetailInto(root));
header.appendChild(back);
const title = document.createElement('div');
title.className = 'groups-modal__subtitle';
title.textContent = i18n.t('groups.edit_dialog_title', 'Rename group');
header.appendChild(title);
root.appendChild(header);
const form = document.createElement('div');
form.className = 'groups-modal__form';
const label = document.createElement('label');
label.className = 'groups-modal__form-label';
label.textContent = i18n.t('groups.name_label', 'Name');
form.appendChild(label);
const input = document.createElement('input');
input.type = 'text';
input.className = 'groups-modal__add-input';
input.value = group.name;
input.autocomplete = 'off';
label.appendChild(input);
const err = document.createElement('div');
err.className = 'groups-modal__inline-error hidden';
form.appendChild(err);
const actions = document.createElement('div');
actions.className = 'groups-modal__form-actions';
const cancel = document.createElement('button');
cancel.type = 'button';
cancel.className = 'btn btn-ghost';
cancel.textContent = i18n.t('actions.cancel', 'Cancel');
cancel.addEventListener('click', () => this._renderDetailInto(root));
const save = document.createElement('button');
save.type = 'button';
save.className = 'btn btn-primary';
save.textContent = i18n.t('actions.rename', 'Rename');
const submit = async () => {
const value = input.value.trim();
if (!value || value === group.name) {
this._renderDetailInto(root);
return;
}
save.disabled = true;
try {
const updated = await groups.rename(group.id, value);
this._currentGroup = updated;
this._renderDetailInto(root);
} catch (e) {
err.textContent = /** @type {Error} */ (e).message;
err.classList.remove('hidden');
save.disabled = false;
}
};
save.addEventListener('click', submit);
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
submit();
} else if (e.key === 'Escape') {
e.preventDefault();
this._renderDetailInto(root);
}
});
actions.appendChild(cancel);
actions.appendChild(save);
form.appendChild(actions);
root.appendChild(form);
setTimeout(() => {
input.focus();
input.select();
}, 0);
},
/**
* Inline confirmation form for group deletion. Requires the user to type
* the group name (safer than DELETE keyword — name is visible above).
* @param {GroupItem} group
*/
_confirmDelete(group) {
if (!this._bodyEl) return;
const root = this._bodyEl;
root.replaceChildren();
const header = document.createElement('div');
header.className = 'groups-modal__detail-header';
const back = document.createElement('button');
back.type = 'button';
back.className = 'btn btn-ghost groups-modal__back-btn';
back.setAttribute('aria-label', i18n.t('groups.back_to_list', 'Back'));
back.innerHTML = '<i class="fas fa-arrow-left"></i>';
back.addEventListener('click', () => this._renderDetailInto(root));
header.appendChild(back);
const title = document.createElement('div');
title.className = 'groups-modal__subtitle';
title.textContent = i18n.t('groups.delete_group', 'Delete group');
header.appendChild(title);
root.appendChild(header);
const form = document.createElement('div');
form.className = 'groups-modal__form';
const warning = document.createElement('div');
warning.className = 'groups-modal__inline-error';
warning.textContent = i18n.t('groups.delete_confirm', 'Delete the group "{name}"?').replace('{name}', group.name);
form.appendChild(warning);
const label = document.createElement('label');
label.className = 'groups-modal__form-label';
label.textContent = i18n.t('groups.delete_confirm_label', 'Type the group name to confirm:');
form.appendChild(label);
const input = document.createElement('input');
input.type = 'text';
input.className = 'groups-modal__add-input';
input.autocomplete = 'off';
input.placeholder = group.name;
label.appendChild(input);
const err = document.createElement('div');
err.className = 'groups-modal__inline-error hidden';
form.appendChild(err);
const actions = document.createElement('div');
actions.className = 'groups-modal__form-actions';
const cancel = document.createElement('button');
cancel.type = 'button';
cancel.className = 'btn btn-ghost';
cancel.textContent = i18n.t('actions.cancel', 'Cancel');
cancel.addEventListener('click', () => this._renderDetailInto(root));
const del = document.createElement('button');
del.type = 'button';
del.className = 'btn btn-danger';
del.textContent = i18n.t('actions.delete', 'Delete');
const submit = async () => {
if (input.value !== group.name) {
err.textContent = i18n.t('groups.delete_confirm_mismatch', 'Type the group name exactly to confirm.');
err.classList.remove('hidden');
input.focus();
return;
}
del.disabled = true;
try {
await groups.deleteGroup(group.id);
this._currentGroup = null;
this._members = [];
this._renderListInto(root);
} catch (e) {
err.textContent = /** @type {Error} */ (e).message;
err.classList.remove('hidden');
del.disabled = false;
}
};
del.addEventListener('click', submit);
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
submit();
} else if (e.key === 'Escape') {
e.preventDefault();
this._renderDetailInto(root);
}
});
actions.appendChild(cancel);
actions.appendChild(del);
form.appendChild(actions);
root.appendChild(form);
setTimeout(() => input.focus(), 0);
},
/** @param {string} userId */
async _addUserMember(userId) {
const group = this._currentGroup;
if (!group || !this._bodyEl) return;
try {
await groups.addUserMember(group.id, userId);
this._members = await groups.listMembers(group.id);
this._renderDetailInto(this._bodyEl);
} catch (err) {
this._showInlineError(/** @type {Error} */ (err).message);
}
},
/** @param {string} groupId */
async _addGroupMember(groupId) {
const group = this._currentGroup;
if (!group || !this._bodyEl) return;
try {
await groups.addGroupMember(group.id, groupId);
this._members = await groups.listMembers(group.id);
this._renderDetailInto(this._bodyEl);
} catch (err) {
this._showInlineError(/** @type {Error} */ (err).message);
}
},
/** @param {GroupMemberItem} m */
async _removeMember(m) {
const group = this._currentGroup;
if (!group || !this._bodyEl) return;
try {
if (m.kind === 'user') {
await groups.removeUserMember(group.id, m.id);
} else {
await groups.removeGroupMember(group.id, m.id);
}
this._members = await groups.listMembers(group.id);
this._renderDetailInto(this._bodyEl);
} catch (err) {
this._showInlineError(/** @type {Error} */ (err).message);
}
},
/** @param {string} message */
_showInlineError(message) {
if (!this._bodyEl) return;
const existing = this._bodyEl.querySelector('.groups-modal__inline-error');
if (existing) existing.remove();
const el = document.createElement('div');
el.className = 'groups-modal__inline-error';
el.textContent = message;
this._bodyEl.prepend(el);
setTimeout(() => el.remove(), 5000);
},
/** @param {string} message */
_showFatalError(message) {
if (!this._bodyEl) return;
this._bodyEl.replaceChildren();
const el = document.createElement('div');
el.className = 'groups-modal__error';
el.textContent = message;
this._bodyEl.appendChild(el);
}
};
export { groupsView };
static/js/views/myShares/mySharesView.js
+28 -1
View File
@@ -12,12 +12,13 @@
*/
import { ui } from '../../app/ui.js';
import { MySharesList } from '../../components/mySharesList.js';
import { collectGroupSubjectIds, MySharesList } from '../../components/mySharesList.js';
import { shareModal } from '../../components/shareModal.js';
import { i18n } from '../../core/i18n.js';
import * as viewPrefs from '../../core/viewPrefs.js';
import * as itemTooltip from '../../features/itemTooltip.js';
import { grants } from '../../model/grants.js';
import { groups } from '../../model/groups.js';
/** @import {FileItem, FolderItem} from '../../core/types.js' */
@@ -69,6 +70,14 @@ const mySharesView = {
/** @type {MySharesList|null} */
_component: null,
/**
* Cumulative id→GroupItem map of every group subject seen so far in this
* session. Each `_loadPage()` merges newly resolved entries so subsequent
* pages don't re-resolve already-known groups.
* @type {Record<string, import('../../core/types.js').GroupItem>}
*/
_knownGroupMeta: {},
/** @type {string} */
_groupBy: '',
@@ -188,6 +197,24 @@ const mySharesView = {
return;
}
// Resolve full GroupItem records for any group-subject grants on
// this page so lane headers and identity rows render the localised
// name + virtual-aware icon. Cheap — one search call shared across
// every group visible on the page.
if (this._component) {
const groupIds = collectGroupSubjectIds(data.items);
if (groupIds.size > 0) {
try {
const resolved = await groups.resolveGroups(groupIds);
const merged = { ...this._knownGroupMeta, ...resolved };
this._component.setGroupMeta(merged);
this._knownGroupMeta = merged;
} catch (err) {
console.warn('mySharesView: failed to resolve group names', err);
}
}
}
if (isFirstPage) {
this._component?.render(data.items, mode.viewMode);
} else {