kempo 4.2.16 → 4.2.18

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

@@ -1,541 +0,0 @@
-<!--
-	owner: system
-	locked: true
-	name: 
-	author: 
-	created: 
-	updated: 
--->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="icon" type="image/png" sizes="48x48" href="/media/icon48.png">
-	<link rel="manifest" href="/manifest.json">
-	<title>User - Admin</title>
-	<link rel="stylesheet" href="/kempo-css/kempo.min.css">
-	<script src="/admin/init.js"></script>
-	
-</head>
-<body>
-	<!--
-	locked: true
--->
-
-	<k-aside
-		main="push"
-		state="expanded"
-		style="--aside_padding: 0;"
-		persistent-id="admin-nav"
-	>
-		<k-aside-toggle>
-			<h3 class="m0">Kempo Admin</h3>
-		</k-aside-toggle>
-		<k-aside-item
-			icon="preview"
-			href="/"
-			no-expand
-		>Site</k-aside-item>
-		<k-aside-item
-			icon="cards"
-			href="/admin"
-			no-expand
-		>Dashboard</k-aside-item>
-		<k-aside-menu
-			icon="manage-accounts"
-			label="Accounts"
-		>
-			<k-aside-item
-				icon="person"
-				href="/admin/accounts/users"
-				no-expand
-			>Users</k-aside-item>
-			<k-aside-item
-				icon="group"
-				href="/admin/accounts/groups"
-				no-expand
-			>Groups</k-aside-item>
-			<k-aside-item
-				icon="lock"
-				href="/admin/accounts/permissions"
-				no-expand
-			>Permissions</k-aside-item>
-		</k-aside-menu>
-		<k-aside-menu
-			icon="cards_stack"
-			label="Content"
-		>
-			<k-aside-item
-				icon="browse"
-				href="/admin/content/templates"
-			>Templates</k-aside-item>
-			<k-aside-item
-				icon="docs"
-				href="/admin/content/pages"
-			>Pages</k-aside-item>
-			<k-aside-item
-				icon="content"
-				href="/admin/content/fragments"
-			>Fragments</k-aside-item>
-			<k-aside-item
-				icon="globe"
-				href="/admin/content/globals"
-			>Global Content</k-aside-item>
-		</k-aside-menu>
-		<k-aside-item
-			icon="settings"
-			href="/admin/settings"
-			no-expand
-		>Settings</k-aside-item>
-		<k-aside-item
-			icon="extension"
-			href="/admin/extensions"
-			no-expand
-		>Extensions</k-aside-item>
-		<hr>
-		<k-aside-spacer></k-aside-spacer>
-		<k-theme-switcher
-			labels
-			style="--padding:var(--spacer_h);margin:var(--spacer_h) auto"
-		></k-theme-switcher>
-	</k-aside>
-	<script type="module">
-		import '/kempo-ui/components/ThemeSwitcher.js';
-		const items = document.querySelectorAll('k-aside-item');
-		const currentPath = window.location.pathname;
-
-		items.forEach(item => {
-			const href = item.getAttribute('href');
-			if (!href) return;
-			const isExact = href === '/admin' || href === '/';
-			const match = isExact
-				? (currentPath === href || currentPath === href + '/')
-				: (currentPath === href || currentPath.startsWith(href + '/'));
-			if (match) {
-				item.setAttribute('active', '');
-				const menu = item.closest('k-aside-menu');
-				if (menu) menu.setAttribute('open', '');
-			}
-		});
-	</script>
-
-	<k-main>
-		
-<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 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;">
-
-			<!-- User Information -->
-			<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 type="text" 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>
-
-			<!-- Groups -->
-			<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>
-
-			<!-- Sessions -->
-			<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>
-
-
-	</k-main>
-	
-</body>
-</html>