kempo 4.2.3 → 4.2.5

package/dist/admin/accounts/users/[id]/index.page.html

@@ -0,0 +1,314 @@
+<!--
+	locked: true
+-->
+<page title="User - Admin"><content><script type="module" src="/kempo-ui/components/Toggle.js"></script><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/GroupDeleteSelected.js"></script><script type="module" src="/admin/components/AddGroupControl.js"></script><script type="module" src="/admin/components/ClearExpiredSessionsControl.js"></script><script type="module" src="/admin/components/TableRowLink.js"></script><div class="d-f"><div><a href="/admin/accounts/users" class="no-link mb"><button class="mbh"><k-icon name="arrow" direction="left"></k-icon>Users</button></a></div><div class="flex"></div><div><button id="deleteUserBtn" class="danger mb mrh" style="display:none;">Delete User</button> <button id="saveBtn" class="primary mb" disabled="disabled" style="display:none;"><k-icon name="save"></k-icon>Save</button></div></div><h1 id="pageTitle">User</h1><div id="loading">Loading user...</div><div id="notFound" style="display: none;"><p>User not found.</p><a href="/admin/accounts/users">Back to Users</a></div><div id="content" style="display: none;"><div class="card"><h2>Information</h2><div class="d-f mb" style="align-items: center; gap: var(--spacer);"><label for="userName" style="min-width: 120px;"><strong>Name</strong></label> <input id="userName" style="max-width: 400px;"></div><div class="d-f mb" style="align-items: center; gap: var(--spacer);"><label for="userEmail" style="min-width: 120px;"><strong>Email</strong></label> <input type="email" id="userEmail" style="max-width: 400px;"></div><div class="d-f mb" style="align-items: center; gap: var(--spacer);"><label style="min-width: 120px;"><strong>Verified</strong></label><k-toggle id="emailVerified"></k-toggle></div><div class="d-f mb" style="align-items: center; gap: var(--spacer);"><label style="min-width: 120px;"><strong>Created</strong></label> <span id="userCreatedAt"></span></div></div><div class="card"><h2>Groups</h2><k-table id="groupsTable" request-delete placeholder="Not a member of any groups."><admin-table-row-link slot="before" url-pattern="/admin/accounts/groups/{name}" field-name="name"></admin-table-row-link><k-tc-delete-record slot="after"></k-tc-delete-record><div slot="top" id="groupsTableTop" class="d-f full" style="display:none; align-items: center;"><div><admin-group-delete-selected></admin-group-delete-selected></div><div class="flex"></div><div><admin-add-group-control id="addGroupBtn"></admin-add-group-control></div></div></k-table></div><div class="card"><h2>Sessions</h2><k-table id="sessionsTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No active sessions."><k-tc-delete-record slot="after"></k-tc-delete-record><div slot="top" class="d-f full" style="align-items: center;"><div><k-tc-delete-selected></k-tc-delete-selected></div><div class="flex"></div><div><admin-clear-expired-sessions id="clearExpiredBtn" style="display:none;"></admin-clear-expired-sessions></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></div></div><script type="module">import {
+				getSession, getUser, updateUser, deleteUsers,
+				getUserSessions, deleteUserSession, deleteExpiredUserSessions,
+				getUserGroups, addUserToGroup, removeUserFromGroup,
+				listGroups, 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';
+
+			const userid = window.location.pathname.split('/admin/accounts/users/')[1]?.replace(/\/$/, '');
+
+			if(!userid){
+				document.getElementById('loading').style.display = 'none';
+				document.getElementById('notFound').style.display = '';
+			}
+
+			/*
+				Permission checks
+			*/
+
+			const [[, permResult], [, sessionData]] = await Promise.all([
+				getAllCurrentUserPermissions(),
+				getSession()
+			]);
+			const myPerms = new Set(permResult?.permissions ?? []);
+			const currentUserId = sessionData?.user?.id;
+			const canEdit = myPerms.has('system:user:update');
+			const canDelete = myPerms.has('system:user:delete');
+			const canEditGroups = myPerms.has('system:group:update');
+			const canReadGroups = myPerms.has('system:group:read');
+
+			/*
+				Load user
+			*/
+
+			const [userError, userData] = await getUser(userid);
+
+			document.getElementById('loading').style.display = 'none';
+
+			if(userError){
+				document.getElementById('notFound').style.display = '';
+			} else {
+				document.getElementById('content').style.display = '';
+				document.getElementById('pageTitle').textContent = `User: ${userData.name}`;
+				document.title = `${userData.name} - Admin`;
+
+				await customElements.whenDefined('k-toggle');
+
+				const $userName = document.getElementById('userName');
+				const $userEmail = document.getElementById('userEmail');
+				const $emailVerified = document.getElementById('emailVerified');
+				const $userCreatedAt = document.getElementById('userCreatedAt');
+				const $deleteBtn = document.getElementById('deleteUserBtn');
+
+				$userName.value = userData.name;
+				$userEmail.value = userData.email;
+				$emailVerified.value = userData.emailVerified;
+				$userCreatedAt.textContent = new Date(userData.createdAt).toLocaleString();
+
+				const isSelf = userData.id === currentUserId;
+
+				if(!canEdit){
+					$userName.readOnly = true;
+					$userEmail.readOnly = true;
+					$emailVerified.setAttribute('disabled', '');
+				}
+
+				if(!canDelete || isSelf){
+					$deleteBtn.style.display = 'none';
+				} else {
+					$deleteBtn.style.display = '';
+				}
+
+				/*
+					Save user fields
+				*/
+
+				if(canEdit){
+					const $saveBtn = document.getElementById('saveBtn');
+					$saveBtn.style.display = '';
+
+					const origName = userData.name;
+					const origEmail = userData.email;
+					const origVerified = userData.emailVerified;
+
+					const handleBeforeUnload = e => { e.preventDefault(); e.returnValue = ''; };
+
+					const checkDirty = () => {
+						const dirty = $userName.value !== origName
+							|| $userEmail.value !== origEmail
+							|| $emailVerified.value !== origVerified;
+						$saveBtn.disabled = !dirty;
+						if(dirty){
+							window.addEventListener('beforeunload', handleBeforeUnload);
+						} else {
+							window.removeEventListener('beforeunload', handleBeforeUnload);
+						}
+					};
+
+					$userName.addEventListener('input', checkDirty);
+					$userEmail.addEventListener('input', checkDirty);
+					$emailVerified.addEventListener('change', checkDirty);
+
+					$saveBtn.addEventListener('click', async () => {
+						const [error] = await updateUser({
+							id: userData.id,
+							name: $userName.value,
+							email: $userEmail.value,
+							emailVerified: $emailVerified.value
+						});
+						if(error){
+							Toast.error(error.msg || 'Failed to save');
+							return;
+						}
+						window.removeEventListener('beforeunload', handleBeforeUnload);
+						document.getElementById('pageTitle').textContent = `User: ${$userName.value}`;
+						document.title = `${$userName.value} - Admin`;
+						$saveBtn.disabled = true;
+						Toast.success('User saved');
+					});
+				}
+
+				/*
+					Delete user
+				*/
+
+				$deleteBtn.addEventListener('click', () => {
+					if(isSelf) return;
+					Dialog.confirm('Are you sure you want to delete this user? This action cannot be undone.', async (confirmed) => {
+						if(!confirmed) return;
+						const [error] = await deleteUsers([userData.id]);
+
+						if(error){
+							Toast.error(error.msg || 'Failed to delete user');
+							return;
+						}
+
+						Toast.success('User deleted');
+						window.location.href = '/admin/accounts/users';
+					});
+				});
+
+				/*
+					Groups
+				*/
+
+				await customElements.whenDefined('k-table');
+				const $groupsTable = document.getElementById('groupsTable');
+
+				if(canEditGroups){
+					$groupsTable.setAttribute('enable-selection', '');
+					document.getElementById('groupsTableTop').style.display = '';
+				}
+
+				$groupsTable.addEventListener('requestDelete', ({ detail: { records, approve, reject } }) => {
+					if(records[0].name === 'system:Users') { reject(); return; }
+					Dialog.confirm(`Remove from "${records[0].name}"?`, async (confirmed) => {
+						if(!confirmed){ reject(); return; }
+						const [error] = await removeUserFromGroup(userid, records[0].name);
+						if(error){
+							reject();
+							Toast.error(error.msg || 'Failed to remove from group');
+							return;
+						}
+						approve();
+						Toast.success(`Removed from ${records[0].name}`);
+						loadGroups();
+					});
+				});
+
+				$groupsTable.addEventListener('groupRemoveSelected', ({ detail: { records, systemUsersSkipped } }) => {
+					const count = records.length;
+					const note = systemUsersSkipped ? '<p><small><em>Note: The user cannot be removed from system:Users, but will be removed from the other selected groups.</em></small></p>' : '';
+					Dialog.confirm(`<div class="p"><p>Remove from ${count} group${count !== 1 ? 's' : ''}?</p>${note}</div>`, async (confirmed) => {
+						if(!confirmed) return;
+						const errors = [];
+						for(const record of records){
+							const [error] = await removeUserFromGroup(userid, record.name);
+							if(error) errors.push(error.msg);
+						}
+						if(errors.length){
+							Toast.error(errors[0] || 'Failed to remove from group');
+							return;
+						}
+						Toast.success(`Removed from ${count} group${count !== 1 ? 's' : ''}`);
+						loadGroups();
+					});
+				});
+
+				const loadGroups = async () => {
+					const [error, data] = await getUserGroups(userid);
+					if(error){
+						Toast.error(error.msg || 'Failed to load groups');
+						return;
+					}
+					$groupsTable.setData({
+						records: data.groups,
+						fields: [{ name: 'name', label: 'Name' }]
+					});
+					$groupsTable.setupFetchRecords(data.total, async (start, count) => {
+						const [err, d] = await getUserGroups(userid, { limit: count, offset: start });
+						if(err) return [];
+						return d.groups;
+					});
+				};
+
+				document.getElementById('addGroupBtn').addEventListener('click', async () => {
+					const [error, data] = await listGroups({ limit: 1000 });
+					if(error){ Toast.error(error.msg || 'Failed to load groups'); return; }
+
+					const userGroupNames = new Set($groupsTable.records.map(g => g.name));
+					const available = data.groups.filter(g => !userGroupNames.has(g.name));
+
+					const $dialog = Dialog.create(html`
+						<div class="p">
+							<select id="dlg-group">
+								<option value="">Select a group...</option>
+								${available.map(g => html`<option value=${g.name}>${g.name}</option>`)}
+							</select>
+						</div>
+					`, {
+						title: 'Add to Group',
+						confirmText: 'Add',
+						confirmAction: async () => {
+							const groupName = $dialog.querySelector('#dlg-group').value;
+							if(!groupName) return;
+							const [err] = await addUserToGroup(userid, groupName);
+							if(err){ Toast.error(err.msg || 'Failed to add to group'); return; }
+							Toast.success(`Added to ${groupName}`);
+							loadGroups();
+						},
+						cancelText: 'Cancel'
+					});
+				});
+
+				loadGroups();
+
+				/*
+					Sessions
+				*/
+
+				const $sessionsTable = document.getElementById('sessionsTable');
+
+				if(canEdit){
+					$sessionsTable.setAttribute('request-delete', '');
+					$sessionsTable.setAttribute('enable-selection', '');
+					const $clearExpiredBtn = document.getElementById('clearExpiredBtn');
+					$clearExpiredBtn.style.display = '';
+					$clearExpiredBtn.addEventListener('click', async () => {
+						const [error, result] = await deleteExpiredUserSessions(userid);
+						if(error){
+							Toast.error(error.msg || 'Failed to clear expired sessions');
+							return;
+						}
+						Toast.success(`Cleared ${result.deleted} expired session${result.deleted !== 1 ? 's' : ''}`);
+						loadSessions();
+					});
+				}
+
+				$sessionsTable.addEventListener('requestDelete', async ({ detail: { records, approve, reject } }) => {
+					const errors = [];
+					for(const record of records){
+						const [error] = await deleteUserSession(userid, record.token);
+						if(error) errors.push(error.msg);
+					}
+					if(errors.length){
+						reject();
+						Toast.error(errors[0] || 'Failed to revoke session');
+						return;
+					}
+					approve();
+					Toast.success(records.length === 1 ? 'Session revoked' : `${records.length} sessions revoked`);
+				});
+
+				const loadSessions = async () => {
+					const [error, data] = await getUserSessions(userid);
+					if(error){
+						Toast.error(error.msg || 'Failed to load sessions');
+						return;
+					}
+					const now = new Date();
+					$sessionsTable.setData({
+						records: data.sessions,
+						fields: [
+							{
+								name: 'createdAt',
+								label: 'Created',
+								formatter: v => new Date(v).toLocaleString()
+							},
+							{
+								name: 'expiresAt',
+								label: 'Expires',
+								formatter: v => {
+									const date = new Date(v);
+									return `${date.toLocaleString()}${date < now ? ' (expired)' : ''}`;
+								}
+							},
+							{ name: 'ipAddress', label: 'IP' },
+							{ name: 'userAgent', label: 'User Agent' }
+						]
+					});
+					$sessionsTable.setupFetchRecords(data.total, async (start, count) => {
+						const [err, d] = await getUserSessions(userid, { limit: count, offset: start });
+						if(err) return [];
+						return d.sessions;
+					});
+				};
+
+				loadSessions();
+			}</script></content></page>

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

@@ -0,0 +1,160 @@
+<!--
+	locked: true
+-->
+<page title="Users - 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/Toggle.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;"><h1 class="flex mb0">Users</h1><k-permission has="system:user:create"><button id="createUserBtn" class="primary">Create User</button></k-permission></div><k-table id="usersTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No users found." filtered-placeholder="No users match your search."><admin-table-row-link slot="before" url-pattern="/admin/accounts/users/{id}" field-name="id"></admin-table-row-link><div slot="top" class="d-f full" style="align-items: center;"><div><k-permission has="system:user: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><script type="module">import { getUsers, createUser, updateUser, deleteUsers, 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 $table = document.getElementById('usersTable');
+
+	const [, permData] = await getAllCurrentUserPermissions();
+	const myPerms = new Set(permData?.permissions ?? []);
+
+	if (myPerms.has('system:user:update')) {
+		$table.setAttribute('request-edit', '');
+		const edit = document.createElement('k-tc-edit');
+		edit.setAttribute('slot', 'after');
+		$table.appendChild(edit);
+	}
+
+	if (myPerms.has('system:user:delete')) {
+		$table.setAttribute('request-delete', '');
+		$table.setAttribute('enable-selection', '');
+		const del = document.createElement('k-tc-delete-record');
+		del.setAttribute('slot', 'after');
+		$table.appendChild(del);
+	}
+
+	const loadUsers = async () => {
+		const [error, data] = await getUsers({ limit: 10, offset: 0 });
+		if (error) return;
+		$table.setData({
+			records: data.users,
+			fields: [
+				{ name: 'name', label: 'Name', size: 352, editable: true },
+				{ name: 'email', label: 'Email', size: 352, editable: true },
+				{
+					name: 'emailVerified',
+					label: 'Verified',
+					formatter: v => v ? 'Yes' : 'No',
+					editor: v => {
+						const $sel = document.createElement('select');
+						$sel.innerHTML = '<option value="true">Yes</option><option value="false">No</option>';
+						$sel.value = v ? 'true' : 'false';
+						return $sel;
+					},
+					size: 80,
+					editable: true
+				},
+				{
+					name: 'createdAt',
+					label: 'Created',
+					formatter: v => new Date(v).toLocaleString(),
+					size: 208,
+					editable: false
+				}
+			]
+		});
+		$table.setupFetchRecords(data.total, async (start, count) => {
+			const [err, d] = await getUsers({ limit: count, offset: start });
+			if (err) return [];
+			return d.users;
+		});
+	};
+
+	await loadUsers();
+
+	$table.addEventListener('requestSave', async ({ detail: { record, newData, approve, reject } }) => {
+		if('emailVerified' in newData) newData.emailVerified = newData.emailVerified === 'true';
+		const [error] = await updateUser({
+			id: record.id,
+			...newData
+		});
+		if (error) {
+			reject();
+			Toast.error(error.msg || 'Failed to update user');
+			return;
+		}
+		approve();
+		Toast.success('User updated');
+	});
+
+	$table.addEventListener('requestDelete', ({ detail: { records, approve, reject } }) => {
+		const count = records.length;
+		const msg = count === 1
+			? `Delete "${records[0].name}"? This action cannot be undone.`
+			: `Delete ${count} users? This action cannot be undone.`;
+		Dialog.confirm(msg, async (confirmed) => {
+			if (!confirmed) { reject(); return; }
+			const ids = records.map(r => r.id);
+			const [error] = await deleteUsers(ids);
+			if (error) {
+				reject();
+				Toast.error(error.msg || 'Failed to delete');
+				return;
+			}
+			approve();
+			Toast.success(count === 1 ? 'User deleted' : `${count} users deleted`);
+		});
+	});
+
+	if (myPerms.has('system:user:create')) {
+		document.getElementById('createUserBtn').addEventListener('click', async () => {
+			await customElements.whenDefined('k-toggle');
+			let autoPw = true;
+			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 class="mb">
+								<label class="d-b mb-sm">Email</label>
+								<input type="email" id="dlg-email" class="full" required>
+							</div>
+							<div class="mb">
+								<k-toggle id="dlg-autopw" value="true" @change=${e => {
+					autoPw = e.target.value;
+					const $pwField = $dialog.querySelector('#dlg-pwfield');
+					const $pwInput = $dialog.querySelector('#dlg-password');
+					$pwField.style.display = autoPw ? 'none' : '';
+					$pwInput.required = !autoPw;
+				}}>Auto-generate password</k-toggle>
+							</div>
+							<div id="dlg-pwfield" class="mb" style="display:none">
+								<label class="d-b mb-sm">Password</label>
+								<input type="password" id="dlg-password" class="full">
+							</div>
+							<div>
+								<k-toggle id="dlg-verified" value="true">Mark email as verified</k-toggle>
+							</div>
+						</div>
+					`, {
+				title: 'Create User',
+				confirmText: 'Create',
+				confirmAction: async () => {
+					const name = $dialog.querySelector('#dlg-name').value.trim();
+					const email = $dialog.querySelector('#dlg-email').value.trim();
+					if (!name || !email) {
+						Toast.error('Name and email are required');
+						return;
+					}
+					const password = autoPw ? undefined : $dialog.querySelector('#dlg-password').value;
+					const emailVerified = $dialog.querySelector('#dlg-verified').value;
+					const [error, result] = await createUser({ name, email, password, emailVerified });
+					if (error) {
+						Toast.error(error.msg || 'Failed to create user');
+						return;
+					}
+					if (result.generatedPassword) {
+						Toast.success(`User created. Generated password: ${result.generatedPassword}`, { duration: 10000 });
+					} else {
+						Toast.success('User created');
+					}
+					loadUsers();
+				},
+				cancelText: 'Cancel'
+			});
+		});
+	}</script></content></page>

package/dist/admin/components/AddGroupControl.js

@@ -0,0 +1,6 @@
+import TableControl from"/kempo-ui/components/tableControls/TableControl.js";import{html}from"/kempo-ui/lit-all.min.js";import"/kempo-ui/components/Icon.js";export default class AddGroupControl extends TableControl{render(){return html`
+      <button class="no-btn icon-btn" title="Add to Group">
+        <k-icon name="add"></k-icon>
+      </button>
+    `}}customElements.define("admin-add-group-control",AddGroupControl);
+//# sourceMappingURL=AddGroupControl.js.map

package/dist/admin/components/AddGroupControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src/admin/components/AddGroupControl.js","names":["TableControl","html","AddGroupControl","render","customElements","define"],"sources":["0"],"sourcesContent":["import TableControl from '/kempo-ui/components/tableControls/TableControl.js';\nimport { html } from '/kempo-ui/lit-all.min.js';\nimport '/kempo-ui/components/Icon.js';\n\nexport default class AddGroupControl extends TableControl {\n  render() {\n    return html`\n      <button class=\"no-btn icon-btn\" title=\"Add to Group\">\n        <k-icon name=\"add\"></k-icon>\n      </button>\n    `;\n  }\n}\n\ncustomElements.define('admin-add-group-control', AddGroupControl);\n"],"mappings":"OAAOA,iBAAkB,4DAChBC,SAAY,iCACd,8CAEQ,MAAMC,wBAAwBF,aAC3C,MAAAG,GACE,OAAOF,IAAI;;;;KAKb,EAGFG,eAAeC,OAAO,0BAA2BH","ignoreList":[]}

package/dist/admin/components/ClearExpiredSessionsControl.js

@@ -0,0 +1,6 @@
+import TableControl from"/kempo-ui/components/tableControls/TableControl.js";import{html}from"/kempo-ui/lit-all.min.js";import"/kempo-ui/components/Icon.js";export default class ClearExpiredSessionsControl extends TableControl{render(){return html`
+      <button class="no-btn icon-btn" title="Clear Expired Sessions">
+        <k-icon name="timer_off"></k-icon>
+      </button>
+    `}}customElements.define("admin-clear-expired-sessions",ClearExpiredSessionsControl);
+//# sourceMappingURL=ClearExpiredSessionsControl.js.map

package/dist/admin/components/ClearExpiredSessionsControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src/admin/components/ClearExpiredSessionsControl.js","names":["TableControl","html","ClearExpiredSessionsControl","render","customElements","define"],"sources":["0"],"sourcesContent":["import TableControl from '/kempo-ui/components/tableControls/TableControl.js';\nimport { html } from '/kempo-ui/lit-all.min.js';\nimport '/kempo-ui/components/Icon.js';\n\nexport default class ClearExpiredSessionsControl extends TableControl {\n  render() {\n    return html`\n      <button class=\"no-btn icon-btn\" title=\"Clear Expired Sessions\">\n        <k-icon name=\"timer_off\"></k-icon>\n      </button>\n    `;\n  }\n}\n\ncustomElements.define('admin-clear-expired-sessions', ClearExpiredSessionsControl);\n"],"mappings":"OAAOA,iBAAkB,4DAChBC,SAAY,iCACd,8CAEQ,MAAMC,oCAAoCF,aACvD,MAAAG,GACE,OAAOF,IAAI;;;;KAKb,EAGFG,eAAeC,OAAO,+BAAgCH","ignoreList":[]}

package/dist/admin/components/FragmentEditor.js

@@ -0,0 +1,101 @@
+import ShadowComponent from"/kempo-ui/components/ShadowComponent.js";import{html}from"/kempo-ui/lit-all.min.js";import{getFragment,updateFragment,deleteFragments,moveFragment,listDirectories}from"/kempo/sdk.js";import Dialog from"/kempo-ui/components/Dialog.js";import Toast from"/kempo-ui/components/Toast.js";import"/kempo-ui/components/Icon.js";import"/kempo-ui/components/Accordion.js";import"/kempo-ui/components/CodeEditor.js";export default class FragmentEditor extends ShadowComponent{static properties={loading:{state:!0},error:{state:!0},saving:{state:!0},fragment:{state:!0}};constructor(){super(),this.loading=!0,this.error=!1,this.saving=!1,this.fragment=null,this.file=""}async connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown);const e=new URLSearchParams(window.location.search).get("fragment");if(this.file=e?e+".fragment.html":"",!this.file)return this.loading=!1,void(this.error=!0);const[t,a]=await getFragment(this.file);this.loading=!1,t?this.error=!0:(this.fragment=a,document.title=`Edit: ${a.name} - Admin`)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown)}getFormState(){const e=this.shadowRoot;return{name:e.querySelector("#metaName")?.value??this.fragment.name,markup:e.querySelector("k-code-editor")?.getValue()??this.fragment.markup}}handleKeyDown=e=>{(e.ctrlKey||e.metaKey)&&"s"===e.key&&(e.preventDefault(),this.saving||this.fragment?.locked||this.handleSave())};handleDelete=()=>{Dialog.confirm("Delete this fragment? This action cannot be undone.",async e=>{if(!e)return;const[t]=await deleteFragments([this.file]);t?Toast.error(t.msg||"Failed to delete fragment"):(Toast.success("Fragment deleted"),setTimeout(()=>{window.location.href="/admin/content/fragments"},1e3))})};handleMove=async()=>{const[,e]=await listDirectories(),t=e?.directories||["."],a=this.file.replace(/\.fragment\.html$/,"").split("/"),n=a.pop(),i=a.join("/")||".",r=e=>(e||"/").replace(/^\//,"").replace(/\/$/,"")||".",s="."===i?"/":"/"+i,o=Dialog.create(html`
+      <div class="p">
+        <div class="mb">
+          <label class="d-b mb-sm"><strong>Location</strong></label>
+          <input type="text" id="dlg-move-dir" class="full" list="dlg-move-dir-list" .value="${s}" placeholder="/">
+          <datalist id="dlg-move-dir-list">
+            ${t.map(e=>html`<option value="${"."===e?"/":"/"+e}">`)}
+          </datalist>
+        </div>
+        <div>
+          <label class="d-b mb-sm"><strong>Fragment Name</strong></label>
+          <input type="text" id="dlg-move-name" class="full" .value="${n}">
+          <p class="mt-sm muted"><small id="dlg-move-preview"></small></p>
+        </div>
+      </div>
+    `,{title:"Move Fragment",confirmText:"Save and Move Fragment",confirmAction:async()=>{const e=o.querySelector("#dlg-move-dir").value.trim()||"/",t=o.querySelector("#dlg-move-name").value.trim();if(!t)return void Toast.error("Fragment name is required");if(!/^\/[a-zA-Z0-9_\-\[\]\/]*$/.test(a=e)||a.includes("..")||a.includes("//"))return void Toast.error("Invalid directory path");var a;const n=r(e),i="."===n?`${t}.fragment.html`:`${n}/${t}.fragment.html`;this.saving=!0;const[s]=await updateFragment({file:this.file,markup:this.getFormState().markup});if(this.saving=!1,s)return void Toast.error(s.msg||"Failed to save fragment");const[l,m]=await moveFragment({file:this.file,newFile:i});if(l)return void Toast.error(l.msg||"Failed to move fragment");Toast.success("Fragment saved and moved");const d=m.file.replace(/\.fragment\.html$/,"");setTimeout(()=>{window.location.href=`/admin/content/fragments/edit?fragment=${encodeURIComponent(d)}`},1e3)},cancelText:"Cancel"}),l=()=>{const e=r(o.querySelector("#dlg-move-dir").value||"/"),t=o.querySelector("#dlg-move-name").value,a="."===e?"/":"/"+e+"/";o.querySelector("#dlg-move-preview").textContent=t?a+t:""};o.querySelector("#dlg-move-dir").addEventListener("input",l),o.querySelector("#dlg-move-name").addEventListener("input",l),l()};handleReset=()=>{Dialog.confirm("Reset this fragment? Any unsaved changes will be lost.",e=>{e&&(this.fragment={...this.fragment})})};handleSave=async()=>{this.saving=!0;const e=this.getFormState(),[t,a]=await updateFragment({file:this.file,markup:e.markup});if(this.saving=!1,t)return void Toast.error(t.msg||"Failed to save fragment");this.fragment={...this.fragment,markup:e.markup,updatedAt:a.updatedAt};const n=this.file.replace(/\.fragment\.html$/,"").split("/"),i=n.pop(),r=n.join("/"),s=e.name.toLowerCase().trim().replace(/[^\w\s-]/g,"").replace(/[\s_]+/g,"-").replace(/-+/g,"-").replace(/^-|-$/g,"");if(s&&s!==i){const e=r?`${r}/${s}.fragment.html`:`${s}.fragment.html`,[t,a]=await moveFragment({file:this.file,newFile:e});if(t)return void Toast.error(t.msg||"Failed to rename fragment file");Toast.success("Fragment saved and renamed");const n=a.file.replace(/\.fragment\.html$/,"");return void setTimeout(()=>{window.location.href=`/admin/content/fragments/edit?fragment=${encodeURIComponent(n)}`},1e3)}document.title=`Edit: ${this.fragment.name} - Admin`,Toast.success("Fragment saved")};render(){if(this.loading)return html`<div>Loading fragment...</div>`;if(this.error)return html`
+      <div>
+        <p>Fragment not found.</p>
+        <a href="/admin/content/fragments">Back to Fragments</a>
+      </div>
+    `;const{fragment:e}=this,t="custom"===e.owner,a=e.locked;return html`
+      ${a?html`
+        <div class="p r mb bc-warning tc-warning">
+          <k-icon name="lock"></k-icon> This fragment is locked and cannot be edited. It is managed by ${t?"an extension":"the system"}.
+        </div>
+      `:""}
+      <div class="d-f mb">
+        <div class="btn-grp mrh mb">
+          <a href="/admin/content/fragments" class="btn">
+            <k-icon name="arrow" direction="left"></k-icon> Fragments
+          </a>
+        </div>
+        <div class="flex"></div>
+        ${t&&!a?html`
+          <div class="btn-grp mrh mb">
+            <button class="danger" @click="${this.handleDelete}"><k-icon name="delete"></k-icon> Delete</button>
+            <button @click="${this.handleMove}"><k-icon name="drive_file_move"></k-icon> Move Fragment</button>
+          </div>
+        `:""}
+        ${a?"":html`
+          <div class="btn-grp mrh mb">
+            <button @click="${this.handleReset}"><k-icon name="restart_alt"></k-icon> Reset</button>
+            <button id="saveBtn" class="primary" ?disabled="${this.saving}" @click="${this.handleSave}">
+              <k-icon name="save"></k-icon> Save
+            </button>
+          </div>
+        `}
+      </div>
+
+      <h1 class="mb">Fragment: ${e.name}</h1>
+
+      <k-accordion>
+        <k-accordion-header for-panel="metadata">Metadata</k-accordion-header>
+        <k-accordion-panel name="metadata">
+          <div class="p">
+            <div class="d-f mb" style="align-items: center; gap: var(--spacer);">
+              <label style="min-width: 120px;"><strong>Name</strong></label>
+              <input type="text" id="metaName" class="flex" .value="${e.name||""}" ?disabled="${!t||a}">
+            </div>
+            <div class="d-f mb" style="align-items: center; gap: var(--spacer);">
+              <label style="min-width: 120px;"><strong>Directory</strong></label>
+              <span class="muted">${(()=>{const e=this.file.replace(/\.fragment\.html$/,"").split("/");return e.pop(),e.length?e.join("/"):"/"})()}</span>
+              ${t&&!a?html`
+                <button class="icon-btn no-btn ph" title="Move Fragment" @click="${this.handleMove}"><k-icon name="drive_file_move"></k-icon></button>
+              `:""}
+            </div>
+            ${e.author?html`
+              <div class="d-f mb" style="align-items: center; gap: var(--spacer);">
+                <label style="min-width: 120px;"><strong>Author</strong></label>
+                <span class="muted">${e.author}</span>
+              </div>
+            `:""}
+            <div class="d-f mb" style="align-items: center; gap: var(--spacer);">
+              <label style="min-width: 120px;"><strong>Owner</strong></label>
+              <span class="muted">${e.owner||""}</span>
+            </div>
+            <div class="d-f mb" style="align-items: center; gap: var(--spacer);">
+              <label style="min-width: 120px;"><strong>Created</strong></label>
+              <span class="muted">${e.createdAt?new Date(e.createdAt).toLocaleString():""}</span>
+            </div>
+            <div class="d-f" style="align-items: center; gap: var(--spacer);">
+              <label style="min-width: 120px;"><strong>Updated</strong></label>
+              <span class="muted">${e.updatedAt?new Date(e.updatedAt).toLocaleString():""}</span>
+            </div>
+          </div>
+        </k-accordion-panel>
+        <k-accordion-header for-panel="fragment" active>Fragment</k-accordion-header>
+        <k-accordion-panel name="fragment" active>
+          <div class="p">
+            <k-code-editor
+              class="r b"
+              language="html"
+              .value="${e.markup||""}"
+              style="height: 500px;"
+              ?disabled="${a}"
+            ></k-code-editor>
+          </div>
+        </k-accordion-panel>
+      </k-accordion>
+    `}}customElements.define("admin-fragment-editor",FragmentEditor);
+//# sourceMappingURL=FragmentEditor.js.map