kempo 4.2.4 → 4.2.7

package/dist/admin/accounts/groups/[name]/index.page.html

@@ -0,0 +1,286 @@
+<!--
+	locked: true
+-->
+<page title="Group - Admin"><content><script type="module" src="/kempo-ui/components/Icon.js"></script><script type="module" src="/kempo-ui/components/Table.js"></script><script type="module" src="/kempo-ui/components/tableControls/FirstPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PrevPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/NextPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/LastPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSelect.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSize.js"></script><script type="module" src="/kempo-ui/components/tableControls/DeleteRecord.js"></script><script type="module" src="/kempo-ui/components/tableControls/DeleteSelected.js"></script><script type="module" src="/admin/components/tableControls/AddMember.js"></script><script type="module" src="/admin/components/tableControls/AddPermission.js"></script><script type="module" src="/admin/components/TableRowLink.js"></script><div class="mb d-f" style="align-items: flex-start; justify-content: space-between;"><div><a href="/admin/accounts/groups" class="no-link"><button class="mbh"><k-icon name="arrow" direction="left"></k-icon>Groups</button></a><h1 class="mb0" id="pageTitle">Group</h1></div><button id="saveBtn" class="primary" disabled="disabled" style="display:none;"><k-icon name="save"></k-icon>Save</button></div><div id="loading">Loading group...</div><div id="notFound" style="display: none;"><p>Group not found.</p><a href="/admin/accounts/groups">Back to Groups</a></div><div id="content" style="display: none;"><div class="card"><h2>Information</h2><div class="d-f mb"><label style="min-width: 120px;"><strong>Owner</strong></label> <span id="groupOwner"></span></div><div class="d-f mb"><label for="groupNameInput" style="min-width: 120px;"><strong>Name</strong></label> <input id="groupNameInput" style="max-width: 400px;"></div><div class="d-f mb"><label for="groupDescription" style="min-width: 120px;"><strong>Description</strong></label> <input id="groupDescription" style="max-width: 400px;"></div><div class="d-f mb"><label style="min-width: 120px;"><strong>Created</strong></label> <span id="groupCreatedAt"></span></div><div class="d-f mb"><label style="min-width: 120px;"><strong>Updated</strong></label> <span id="groupUpdatedAt"></span></div></div><div class="card"><h2>Members</h2><p id="usersMembersMsg" style="display:none">All users are automatically members of this group.</p><k-table id="membersTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="This group has no members."><admin-table-row-link slot="before" url-pattern="/admin/accounts/users/{id}" field-name="id"></admin-table-row-link><k-tc-delete-selected id="tcDeleteSelected" slot="top" style="display:none;"></k-tc-delete-selected><admin-add-member id="tcAddMember" slot="top" style="display:none;"></admin-add-member><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table></div><div class="card"><h2>Permissions</h2><p id="adminPermsMsg" style="display:none">Members of this group automatically have all permissions.</p><k-table id="permissionsTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No permissions assigned to this group."><k-tc-delete-selected id="tcDeleteSelectedPerm" slot="top" style="display:none;"></k-tc-delete-selected><admin-add-permission id="tcAddPermission" slot="top" style="display:none;"></admin-add-permission><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table></div></div><script type="module">import {
+				getGroup, updateGroup, deleteGroups, getGroupMembers,
+					removeMemberFromGroup, getGroupPermissions, removePermissionFromGroup,
+				getAllCurrentUserPermissions
+			} from '/kempo/sdk.js';
+			import Toast from '/kempo-ui/components/Toast.js';
+			import Dialog from '/kempo-ui/components/Dialog.js';
+
+			const groupName = decodeURIComponent(
+				window.location.pathname.split('/admin/accounts/groups/')[1]?.replace(/\/$/, '') || ''
+			);
+
+			if(!groupName){
+				document.getElementById('loading').style.display = 'none';
+				document.getElementById('notFound').style.display = '';
+			}
+
+			/*
+				Permission checks
+			*/
+
+			const [, permResult] = await getAllCurrentUserPermissions();
+			const myPerms = new Set(permResult?.permissions ?? []);
+			const canEdit = myPerms.has('system:group:update');
+			const canDelete = myPerms.has('system:group:delete');
+			const canReadPerms = myPerms.has('system:permissions:read');
+
+			/*
+				Load group
+			*/
+
+			const [groupError, groupData] = await getGroup(groupName);
+
+			document.getElementById('loading').style.display = 'none';
+
+			if(groupError){
+				document.getElementById('notFound').style.display = '';
+			} else {
+				document.getElementById('content').style.display = '';
+				const displayName = groupName.includes(':') ? groupName.split(':').slice(1).join(':') : groupName;
+				document.getElementById('pageTitle').textContent = `Group: ${displayName}`;
+				document.title = `${displayName} - Admin`;
+
+				const owner = groupName.includes(':') ? groupName.split(':')[0] : '';
+				const isAdmin = owner === 'admin' || !owner;
+
+				await customElements.whenDefined('k-table');
+
+				/*
+					Group Information
+				*/
+
+				const isCustom = owner === 'custom';
+				const $saveBtn = document.getElementById('saveBtn');
+				const $groupOwner = document.getElementById('groupOwner');
+				const $groupNameInput = document.getElementById('groupNameInput');
+				const $groupDescription = document.getElementById('groupDescription');
+
+					$groupOwner.textContent = owner || '(none)';
+				$groupNameInput.value = displayName;
+				$groupDescription.value = groupData.description || '';
+				document.getElementById('groupCreatedAt').textContent = new Date(groupData.createdAt).toLocaleString();
+					document.getElementById('groupUpdatedAt').textContent = groupData.updatedAt ? new Date(groupData.updatedAt).toLocaleString() : 'Never';
+				if(!canEdit || !isCustom){
+					$groupNameInput.readOnly = true;
+					$groupDescription.readOnly = true;
+				} else {
+					$saveBtn.style.display = '';
+
+					const origName = displayName;
+					const origDescription = groupData.description || '';
+
+					const handleBeforeUnload = e => { e.preventDefault(); e.returnValue = ''; };
+
+					const checkDirty = () => {
+						const dirty = $groupNameInput.value !== origName || $groupDescription.value !== origDescription;
+						$saveBtn.disabled = !dirty;
+						if(dirty){
+							window.addEventListener('beforeunload', handleBeforeUnload);
+						} else {
+							window.removeEventListener('beforeunload', handleBeforeUnload);
+						}
+					};
+
+					$groupNameInput.addEventListener('input', checkDirty);
+					$groupDescription.addEventListener('input', checkDirty);
+
+					$saveBtn.addEventListener('click', async () => {
+						const newDisplayName = $groupNameInput.value.trim();
+						if(!newDisplayName){
+							Toast.error('Name is required');
+							return;
+						}
+						const newFullName = `${owner}:${newDisplayName}`;
+						const patch = { name: groupName, description: $groupDescription.value };
+						if(newFullName !== groupName) patch.newName = newFullName;
+						const [error] = await updateGroup(patch);
+						if(error){
+							Toast.error(error.msg || 'Failed to save group');
+							return;
+						}
+						window.removeEventListener('beforeunload', handleBeforeUnload);
+						Toast.success('Group saved');
+						if(newFullName !== groupName){
+							window.location.href = `/admin/accounts/groups/${encodeURIComponent(newFullName)}`;
+						} else {
+							$saveBtn.disabled = true;
+							document.getElementById('groupUpdatedAt').textContent = new Date().toLocaleString();
+						}
+					});
+				}
+
+				/*
+					Members
+				*/
+
+				const $membersTable = document.getElementById('membersTable');
+
+				if(groupName === 'system:Users'){
+					document.getElementById('usersMembersMsg').style.display = '';
+					$membersTable.style.display = 'none';
+				} else {
+					const $tcDeleteSelected = document.getElementById('tcDeleteSelected');
+					const $tcAddMember = document.getElementById('tcAddMember');
+					$tcAddMember.groupName = groupName;
+
+					if(canEdit){
+						$membersTable.setAttribute('request-delete', '');
+						$membersTable.setAttribute('enable-selection', '');
+						$tcDeleteSelected.style.display = '';
+						$tcAddMember.style.display = '';
+
+						const del = document.createElement('k-tc-delete-record');
+						del.setAttribute('slot', 'after');
+						$membersTable.appendChild(del);
+					}
+
+					$membersTable.addEventListener('memberAdded', e => loadMembers());
+
+					$membersTable.addEventListener('requestDelete', ({ detail: { records, approve, reject } }) => {
+						const count = records.length;
+						const msg = count === 1
+							? `<div class="p"><p>Remove "${records[0].name}" from this group?</p></div>`
+							: `<div class="p"><p>Remove ${count} members from this group?</p></div>`;
+						Dialog.confirm(msg, async (confirmed) => {
+							if(!confirmed){ reject(); return; }
+							const errors = [];
+							for(const record of records){
+								const [error] = await removeMemberFromGroup(groupName, record.id);
+								if(error) errors.push(error.msg);
+							}
+							if(errors.length){
+								reject();
+								Toast.error(errors[0] || 'Failed to remove member');
+								return;
+							}
+							approve();
+							Toast.success(count === 1 ? 'Member removed' : `${count} members removed`);
+							loadMembers();
+						});
+					});
+
+					const loadMembers = async () => {
+						const [error, data] = await getGroupMembers(groupName);
+						if(error){
+							Toast.error(error.msg || 'Failed to load members');
+							return;
+						}
+						$membersTable.setData({
+							records: data.members,
+							fields: [
+								{ name: 'name', label: 'Name' },
+								{ name: 'email', label: 'Email' },
+								{
+									name: 'createdAt',
+									label: 'Joined',
+									formatter: v => new Date(v).toLocaleString()
+								}
+							]
+						});
+						$membersTable.setupFetchRecords(data.total, async (start, count) => {
+							const [err, d] = await getGroupMembers(groupName, { limit: count, offset: start });
+							if(err) return [];
+							return d.members;
+						});
+					};
+
+					loadMembers();
+				}
+
+				/*
+					Permissions
+				*/
+
+				const $permissionsTable = document.getElementById('permissionsTable');
+
+				if(groupName === 'system:Administrators'){
+					document.getElementById('adminPermsMsg').style.display = '';
+					$permissionsTable.style.display = 'none';
+				} else if(canReadPerms){
+					if(canEdit){
+						$permissionsTable.setAttribute('request-delete', '');
+						$permissionsTable.setAttribute('enable-selection', '');
+
+						const $tcDeleteSelectedPerm = document.getElementById('tcDeleteSelectedPerm');
+						$tcDeleteSelectedPerm.style.display = '';
+
+						const $tcAddPermission = document.getElementById('tcAddPermission');
+						$tcAddPermission.groupName = groupName;
+						$tcAddPermission.style.display = '';
+
+						const delPerm = document.createElement('k-tc-delete-record');
+						delPerm.setAttribute('slot', 'after');
+						$permissionsTable.appendChild(delPerm);
+
+						$permissionsTable.addEventListener('permissionAdded', e => loadPermissions());
+
+						$permissionsTable.addEventListener('requestDelete', ({ detail: { records, approve, reject } }) => {
+							const count = records.length;
+							const msg = count === 1
+								? `<div class="p"><p>Remove permission "${records[0].name}" from this group?</p></div>`
+								: `<div class="p"><p>Remove ${count} permissions from this group?</p></div>`;
+							Dialog.confirm(msg, async (confirmed) => {
+								if(!confirmed){ reject(); return; }
+								const errors = [];
+								for(const record of records){
+									const [error] = await removePermissionFromGroup(groupName, record.name);
+									if(error) errors.push(error.msg);
+								}
+								if(errors.length){
+									reject();
+									Toast.error(errors[0] || 'Failed to remove permission');
+									return;
+								}
+								approve();
+								Toast.success(count === 1 ? 'Permission removed' : `${count} permissions removed`);
+								loadPermissions();
+							});
+						});
+					}
+
+					const loadPermissions = async () => {
+						const [error, data] = await getGroupPermissions(groupName);
+						if(error){
+							Toast.error(error.msg || 'Failed to load permissions');
+							return;
+						}
+						$permissionsTable.setData({
+							records: data.permissions.map(name => ({ name })),
+							fields: [
+								{
+									name: 'owner',
+									label: 'Owner',
+									size: 120,
+									calculator: r => r.name.includes(':') ? r.name.split(':')[0] : ''
+								},
+								{
+									name: 'resource',
+									label: 'Resource',
+									size: 180,
+									calculator: r => {
+										const parts = r.name.split(':');
+										return parts.length >= 3 ? parts[1] : parts.length === 2 ? parts[1] : '';
+									}
+								},
+								{
+									name: 'action',
+									label: 'Action',
+									size: 140,
+									calculator: r => {
+										const parts = r.name.split(':');
+										return parts.length >= 3 ? parts.slice(2).join(':') : '';
+									}
+								}
+							]
+						});
+					};
+
+					loadPermissions();
+				} else {
+					$permissionsTable.closest('.card').style.display = 'none';
+				}
+			}</script></content></page>

package/dist/admin/accounts/groups/index.page.html

@@ -0,0 +1,171 @@
+<!--
+	locked: true
+-->
+<page title="Groups - Admin"><content><script type="module" src="/kempo-ui/components/Table.js"></script><script type="module" src="/kempo-ui/components/tableControls/FirstPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PrevPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/NextPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/LastPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSelect.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSize.js"></script><script type="module" src="/kempo-ui/components/tableControls/Edit.js"></script><script type="module" src="/kempo-ui/components/tableControls/DeleteRecord.js"></script><script type="module" src="/kempo-ui/components/tableControls/DeleteSelected.js"></script><script type="module" src="/admin/components/TableRowLink.js"></script><script type="module" src="/kempo/components/Permission.js"></script><div class="d-f mb" style="align-items: center; gap: var(--spacer);"><h1 class="flex mb0">Groups</h1><k-permission has="system:group:create"><button id="createGroupBtn" class="primary">Create Group</button></k-permission></div><h2>Custom Groups</h2><k-table id="customTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No custom groups have been created yet."><admin-table-row-link slot="before" url-pattern="/admin/accounts/groups/{name}" field-name="name"></admin-table-row-link><div slot="top" class="d-f full" style="align-items: center;"><div><k-permission has="system:group:delete"><k-tc-delete-selected></k-tc-delete-selected></k-permission></div></div><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><h2>Extension Groups</h2><k-table id="extensionTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No extension groups found."><admin-table-row-link slot="before" url-pattern="/admin/accounts/groups/{name}" field-name="name"></admin-table-row-link><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><h2>System Groups</h2><k-table id="systemTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No system groups found."><admin-table-row-link slot="before" url-pattern="/admin/accounts/groups/{name}" field-name="name"></admin-table-row-link><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><script type="module">import { listGroups, createGroup, updateGroup, deleteGroups, getAllCurrentUserPermissions } from '/kempo/sdk.js';
+			import { html } from '/kempo-ui/lit-all.min.js';
+			import Toast from '/kempo-ui/components/Toast.js';
+			import Dialog from '/kempo-ui/components/Dialog.js';
+
+			await window.customElements.whenDefined('k-table');
+
+			const [, permData] = await getAllCurrentUserPermissions();
+			const myPerms = new Set(permData?.permissions ?? []);
+			const canEdit = myPerms.has('system:group:update');
+			const canDelete = myPerms.has('system:group:delete');
+
+			const fields = [
+				{
+					name: 'groupName',
+					label: 'Name',
+					size: 300,
+					editable: false,
+					calculator: r => r.name.includes(':') ? r.name.split(':').slice(1).join(':') : r.name
+				},
+				{ name: 'description', label: 'Description', editable: canEdit },
+				{
+					name: 'createdAt',
+					label: 'Created',
+					formatter: v => new Date(v).toLocaleString(),
+					size: 208,
+					editable: false
+				}
+			];
+
+			const customFields = [
+				{ name: 'groupName', label: 'Name', size: 300, editable: canEdit },
+				{ name: 'description', label: 'Description', editable: canEdit },
+				{
+					name: 'createdAt',
+					label: 'Created',
+					formatter: v => new Date(v).toLocaleString(),
+					size: 208,
+					editable: false
+				}
+			];
+
+			const addGroupName = r => ({ ...r, groupName: r.name.includes(':') ? r.name.split(':').slice(1).join(':') : r.name });
+
+			const setupTable = ($table, owner, loadFn) => {
+				if(canEdit && owner !== 'system') { // Prevent editor control for system groups
+					$table.setAttribute('request-edit', '');
+					const edit = document.createElement('k-tc-edit');
+					edit.setAttribute('slot', 'after');
+					$table.appendChild(edit);
+				}
+
+				if(canDelete && owner === 'custom'){
+					$table.setAttribute('request-delete', '');
+					$table.setAttribute('enable-selection', '');
+					const del = document.createElement('k-tc-delete-record');
+					del.setAttribute('slot', 'after');
+					$table.appendChild(del);
+				}
+
+				$table.addEventListener('requestSave', async ({ detail: { record, newData, approve, reject } }) => {
+					const patch = { name: record.name, description: newData.description };
+					if(owner === 'custom' && newData.groupName !== undefined && newData.groupName !== record.groupName){
+						patch.newName = `custom:${newData.groupName}`;
+					}
+					const [error] = await updateGroup(patch);
+					if(error){
+						reject();
+						Toast.error(error.msg || 'Failed to update group');
+						return;
+					}
+					approve();
+					if(patch.newName) loadFn();
+					Toast.success('Group updated');
+				});
+
+				if(owner === 'custom'){
+					$table.addEventListener('requestDelete', ({ detail: { records, approve, reject } }) => {
+						const displayName = r => r.name.includes(':') ? r.name.split(':').slice(1).join(':') : r.name;
+						const count = records.length;
+						const msg = count === 1
+							? `<div class="p"><p>Delete "${displayName(records[0])}"? This action cannot be undone.</p></div>`
+							: `<div class="p"><p>Delete ${count} groups? This action cannot be undone.</p></div>`;
+						Dialog.confirm(msg, async (confirmed) => {
+							if(!confirmed){ reject(); return; }
+							const [error] = await deleteGroups(records.map(r => r.name));
+							if(error){
+								reject();
+								Toast.error(error.msg || 'Failed to delete');
+								return;
+							}
+							approve();
+							Toast.success(count === 1 ? 'Group deleted' : `${count} groups deleted`);
+							loadFn();
+						});
+					});
+				}
+			};
+
+			const loadTable = async ($table, owner) => {
+				const [error, data] = await listGroups({ owner });
+				if(error){
+					Toast.error(error.msg || 'Failed to load groups');
+					return;
+				}
+				const isCustom = owner === 'custom';
+				const records = isCustom ? data.groups.map(addGroupName) : data.groups;
+				$table.setData({ records, fields: isCustom ? customFields : fields });
+				$table.setupFetchRecords(data.total, async (start, count) => {
+					const [err, d] = await listGroups({ limit: count, offset: start, owner });
+					if(err) return [];
+					return isCustom ? d.groups.map(addGroupName) : d.groups;
+				});
+			};
+
+			const $customTable = document.getElementById('customTable');
+			const $extensionTable = document.getElementById('extensionTable');
+			const $systemTable = document.getElementById('systemTable');
+
+			setupTable($customTable, 'custom', () => loadTable($customTable, 'custom'));
+			setupTable($extensionTable, 'extension', () => loadTable($extensionTable, 'extension'));
+			setupTable($systemTable, 'system', () => loadTable($systemTable, 'system'));
+
+			await Promise.all([
+				loadTable($customTable, 'custom'),
+				loadTable($extensionTable, 'extension'),
+				loadTable($systemTable, 'system')
+			]);
+
+			if(myPerms.has('system:group:create')){
+				document.getElementById('createGroupBtn').addEventListener('click', () => {
+					const $dialog = Dialog.create(html`
+						<div class="p">
+							<div class="mb">
+								<label class="d-b mb-sm">Name</label>
+								<input type="text" id="dlg-name" class="full" required>
+							</div>
+							<div>
+								<label class="d-b mb-sm">Description</label>
+								<input type="text" id="dlg-description" class="full">
+							</div>
+						</div>
+					`, {
+						title: 'Create Group',
+						confirmText: 'Create',
+						confirmAction: async () => {
+							const name = $dialog.querySelector('#dlg-name').value.trim();
+							const description = $dialog.querySelector('#dlg-description').value.trim();
+							if(!name){
+								Toast.error('Group name is required');
+								return;
+							}
+							if(name.includes(':')){
+								Toast.error('Group name cannot contain ":"');
+								return;
+							}
+							const [error] = await createGroup({ name, description });
+							if(error){
+								Toast.error(error.msg || 'Failed to create group');
+								return;
+							}
+							Toast.success('Group created');
+							loadTable($customTable, 'custom');
+						},
+						cancelText: 'Cancel'
+					});
+				});
+			}</script></content></page>

package/dist/admin/accounts/permissions/index.page.html

@@ -0,0 +1,193 @@
+<!--
+	locked: true
+-->
+<page title="Permissions - Admin"><content><script type="module" src="/kempo-ui/components/Table.js"></script><script type="module" src="/kempo-ui/components/tableControls/FirstPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PrevPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/NextPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/LastPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSelect.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSize.js"></script><script type="module" src="/kempo-ui/components/tableControls/Edit.js"></script><script type="module" src="/kempo-ui/components/tableControls/DeleteRecord.js"></script><script type="module" src="/kempo-ui/components/tableControls/DeleteSelected.js"></script><script type="module" src="/kempo-ui/components/Tags.js"></script><script type="module" src="/kempo/components/Permission.js"></script><div class="d-f mb" style="align-items: center; gap: var(--spacer);"><h1 class="flex mb0">Permissions</h1><k-permission has="system:permissions:manage"><button id="createPermBtn" class="primary">Create Permissions</button></k-permission></div><h2>Custom Permissions</h2><k-table id="customTable" enable-pages page-size="25" page-size-options="[10,25,50,100]" placeholder="No custom permissions have been created yet."><div slot="top" class="d-f full" style="align-items: center;"><div><k-permission has="system:permissions:manage"><k-tc-delete-selected></k-tc-delete-selected></k-permission></div></div><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><h2>Extension Permissions</h2><k-table id="extensionTable" enable-pages page-size="25" page-size-options="[10,25,50,100]" placeholder="No extension permissions installed."><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><h2>System Permissions</h2><k-table id="systemTable" enable-pages page-size="25" page-size-options="[10,25,50,100]" placeholder="No system permissions found."><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><script type="module">import { listPermissions, createPermissions, updatePermission, deletePermissions, getAllCurrentUserPermissions } from '/kempo/sdk.js';
+			import { html } from '/kempo-ui/lit-all.min.js';
+			import Toast from '/kempo-ui/components/Toast.js';
+			import Dialog from '/kempo-ui/components/Dialog.js';
+
+			await window.customElements.whenDefined('k-table');
+
+			const [, permData] = await getAllCurrentUserPermissions();
+			const myPerms = new Set(permData?.permissions ?? []);
+			const canManage = myPerms.has('system:permissions:manage');
+
+			const fields = [
+				{
+					name: 'resource',
+					label: 'Resource',
+					size: 180,
+					editable: false,
+					calculator: r => {
+						const parts = r.name.split(':');
+						return parts.length >= 3 ? parts[1] : parts.length === 2 ? parts[1] : '';
+					}
+				},
+				{
+					name: 'action',
+					label: 'Action',
+					size: 140,
+					editable: false,
+					calculator: r => {
+						const parts = r.name.split(':');
+						return parts.length >= 3 ? parts.slice(2).join(':') : '';
+					}
+				},
+				{ name: 'description', label: 'Description', size: 360, editable: canManage },
+				{
+					name: 'createdAt',
+					label: 'Created',
+					formatter: v => new Date(v).toLocaleString(),
+					size: 208,
+					editable: false
+				}
+			];
+
+			const systemFields = fields.map(f => f.name === 'description' ? { ...f, editable: false } : f);
+
+			const setupTable = ($table, owner, loadFn) => {
+				if(canManage && owner !== 'system'){
+					$table.setAttribute('request-edit', '');
+					const edit = document.createElement('k-tc-edit');
+					edit.setAttribute('slot', 'after');
+					$table.appendChild(edit);
+				}
+
+				if(canManage && owner === 'custom'){
+					$table.setAttribute('request-delete', '');
+					$table.setAttribute('enable-selection', '');
+					const del = document.createElement('k-tc-delete-record');
+					del.setAttribute('slot', 'after');
+					$table.appendChild(del);
+				}
+
+				$table.addEventListener('requestSave', async ({ detail: { record, newData, approve, reject } }) => {
+					const [error] = await updatePermission({ name: record.name, ...newData });
+					if(error){
+						reject();
+						Toast.error(error.msg || 'Failed to update permission');
+						return;
+					}
+					approve();
+					Toast.success('Permission updated');
+				});
+
+				if(owner === 'custom'){
+					$table.addEventListener('requestDelete', ({ detail: { records, approve, reject } }) => {
+						const displayName = r => r.name.includes(':') ? r.name.split(':').slice(1).join(':') : r.name;
+						const count = records.length;
+						const msg = count === 1
+							? `<div class="p"><p>Delete "${displayName(records[0])}"? This action cannot be undone.</p></div>`
+							: `<div class="p"><p>Delete ${count} permissions? This action cannot be undone.</p></div>`;
+						Dialog.confirm(msg, async (confirmed) => {
+							if(!confirmed){ reject(); return; }
+							const [error] = await deletePermissions(records.map(r => r.name));
+							if(error){
+								reject();
+								Toast.error(error.msg || 'Failed to delete');
+								return;
+							}
+							approve();
+							Toast.success(count === 1 ? 'Permission deleted' : `${count} permissions deleted`);
+							loadFn();
+						});
+					});
+				}
+			};
+
+			const loadTable = async ($table, owner) => {
+				const [error, data] = await listPermissions({ owner });
+				if(error){
+					Toast.error(error.msg || 'Failed to load permissions');
+					return;
+				}
+				$table.setData({ records: data.permissions, fields: owner === 'system' ? systemFields : fields });
+				$table.setupFetchRecords(data.total, async (start, count) => {
+					const [err, d] = await listPermissions({ limit: count, offset: start, owner });
+					if(err) return [];
+					return d.permissions;
+				});
+			};
+
+			const $customTable = document.getElementById('customTable');
+			const $extensionTable = document.getElementById('extensionTable');
+			const $systemTable = document.getElementById('systemTable');
+
+			setupTable($customTable, 'custom', () => loadTable($customTable, 'custom'));
+			setupTable($extensionTable, 'extension', () => loadTable($extensionTable, 'extension'));
+			setupTable($systemTable, 'system', () => loadTable($systemTable, 'system'));
+
+			await Promise.all([
+				loadTable($customTable, 'custom'),
+				loadTable($extensionTable, 'extension'),
+				loadTable($systemTable, 'system')
+			]);
+
+			if(canManage){
+				document.getElementById('createPermBtn').addEventListener('click', async () => {
+					await customElements.whenDefined('k-tags');
+					const $dialog = Dialog.create(html`
+						<div class="p">
+							<div class="mb">
+								<label class="d-b mb-sm">Resource Name</label>
+								<input type="text" id="dlg-resource" class="full" placeholder="e.g. posts, comments, media" required>
+							</div>
+							<div class="mb">
+								<label class="d-b mb-sm">Actions</label>
+								<k-tags id="dlg-actions" value="create,read,update,delete" @addtag=${e => {
+									if(e.detail.tag.includes(':')){
+										e.target.removeTag(e.detail.tag);
+										Toast.error('Action cannot contain ":"');
+									}
+								}}></k-tags>
+							</div>
+							<div>
+								<label class="d-b mb-sm">Description (applied to all)</label>
+								<input type="text" id="dlg-description" class="full">
+							</div>
+						</div>
+					`, {
+						title: 'Create Permissions',
+						confirmText: 'Create',
+						confirmAction: async () => {
+							const resource = $dialog.querySelector('#dlg-resource').value.trim().toLowerCase();
+							if(!resource){
+								Toast.error('Resource name is required');
+								return;
+							}
+							if(resource.includes(':')){
+								Toast.error('Resource name cannot contain ":"');
+								return;
+							}
+
+							const actions = $dialog.querySelector('#dlg-actions').value.split(',').map(s => s.trim().toLowerCase()).filter(Boolean);
+							if(!actions.length){
+								Toast.error('At least one action is required');
+								return;
+							}
+
+							const description = $dialog.querySelector('#dlg-description').value.trim();
+							const permissions = actions.map(action => ({
+								resource,
+								action,
+								description: description || `${action} ${resource}`
+							}));
+
+							const [error, result] = await createPermissions(permissions);
+							if(error){
+								Toast.error(error.msg || 'Failed to create permissions');
+								return;
+							}
+							const created = result.created?.length ?? permissions.length;
+							const errs = result.errors?.length ?? 0;
+							if(errs){
+								Toast.warning(`${created} created, ${errs} failed (may already exist)`);
+							} else {
+								Toast.success(`${created} permission${created !== 1 ? 's' : ''} created`);
+							}
+							loadTable($customTable, 'custom');
+						},
+						cancelText: 'Cancel'
+					});
+				});
+			}</script></content></page>