kempo 4.2.9 → 4.2.11

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

@@ -0,0 +1,541 @@
+<!--
+	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>