@axium/server 0.24.1 → 0.25.0

package/routes/admin/audit/+page.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { Icon } from '@axium/client/components';
+	import '@axium/client/styles/list';
+	import './styles.css';
+	import { Severity, severityNames } from '@axium/core';
+	import { capitalize } from 'utilium';
+
+	const { data } = $props();
+</script>
+
+<svelte:head>
+	<title>Admin — Audit Log</title>
+</svelte:head>
+
+<h2>Audit Log</h2>
+
+{#if data.filterError}
+	<div class="error">
+		<strong>Invalid Filter:</strong>
+		{#each data.filterError.split('\n') as line}
+			<p>{line}</p>
+		{/each}
+	</div>
+{/if}
+
+<form id="filter" method="dialog">
+	<h4>Filters</h4>
+	<span>Minimum Severity:</span>
+	<select name="severity" value={data.filter.severity}>
+		{#each severityNames as value}
+			<option {value} selected={value == 'info'}>{capitalize(value)}</option>
+		{/each}
+	</select>
+	<span>Since:</span>
+	<input type="date" name="since" value={data.filter.since} />
+
+	<span>Until:</span>
+	<input type="date" name="until" value={data.filter.until} />
+
+	<span>Tags:</span>
+	<input type="text" name="tags" value={data.filter.tags} />
+
+	<span>Event Name:</span>
+	<input type="text" name="event" value={data.filter.event} />
+
+	<span>Source:</span>
+	<input type="text" name="source" value={data.filter.source} />
+
+	<span>User UUID:</span>
+	<input type="text" name="user" size="36" value={data.filter.user} />
+	<button
+		onclick={e => {
+			e.preventDefault();
+			const fd = new FormData(e.currentTarget.form!);
+			const params = new URLSearchParams();
+			for (let [key, value] of fd.entries()) {
+				if (!value) continue;
+				switch (key) {
+					case 'since':
+					case 'until':
+						params.set(key, new Date(value as string).toISOString());
+						break;
+					case 'tags':
+						for (const tag of value
+							.toString()
+							.split(',')
+							.map(t => t.trim()))
+							params.append(key, tag);
+						break;
+					default:
+						params.set(key, value as string);
+				}
+			}
+			location.search = params ? '?' + params.toString() : '';
+		}}>Apply</button
+	>
+	<button
+		onclick={e => {
+			e.preventDefault();
+			location.search = '';
+		}}>Reset</button
+	>
+</form>
+
+<div class="list-container">
+	<div class="list">
+		<div class="list-item list-header">
+			<span>Timestamp</span>
+			<span>Severity</span>
+			<span>Source</span>
+			<span>Name</span>
+			<span>Tags</span>
+			<span>User</span>
+		</div>
+
+		{#each data.events as event}
+			<div class="list-item" onclick={e => e.currentTarget === e.target && (location.href = '/admin/audit/' + event.id)}>
+				<span>{new Date(event.timestamp).toLocaleString()}</span>
+				<span class="severity--{Severity[event.severity].toLowerCase()}">{Severity[event.severity]}</span>
+				<span>{event.source}</span>
+				<span>{event.name}</span>
+				<span>{event.tags.join(', ')}</span>
+				{#if event.user}
+					<a href="/admin/users/{event.userId}">
+						{event.user.name}
+						{#if event.userId === data.session?.userId}<span class="subtle">(You)</span>{/if}
+					</a>
+				{:else}
+					<i>Unknown</i>
+				{/if}
+				<a href="/admin/audit/{event.id}"><Icon i="chevron-right" /></a>
+			</div>
+		{:else}
+			<p class="list-empty">No audit log events found</p>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.list-item {
+		grid-template-columns: 15em 10em 10em 1fr 1fr 10em repeat(1, 2em);
+	}
+
+	#filter {
+		background-color: var(--bg-menu);
+		padding: 1em;
+		border-radius: 0.5em;
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 0.25em;
+		width: fit-content;
+
+		h4 {
+			grid-column: 1 / span 2;
+		}
+	}
+</style>

package/routes/admin/audit/+page.ts

@@ -0,0 +1,20 @@
+import { fetchAPI } from '@axium/client/requests';
+import { AuditFilter, Severity } from '@axium/core';
+import { prettifyError, type input } from 'zod';
+
+export const ssr = false;
+
+export async function load({ url }) {
+	let filterError = null;
+	try {
+		AuditFilter.parse(Object.fromEntries(url.searchParams));
+	} catch (e: any) {
+		filterError = prettifyError(e);
+	}
+
+	const filter: input<typeof AuditFilter> = filterError ? {} : Object.fromEntries(url.searchParams);
+
+	const events = await fetchAPI('GET', 'admin/audit/events', filter);
+
+	return { events, filterError, filter };
+}

package/routes/admin/audit/[id]/+page.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Severity } from '@axium/core/audit';
+	import '../styles.css';
+	import UserCard from '@axium/client/components/UserCard';
+
+	const { data } = $props();
+	const { event } = data;
+</script>
+
+<svelte:head>
+	<title>Admin — Audit Log Event #{event.id}</title>
+</svelte:head>
+
+<h2>Audit Event</h2>
+
+<h4>UUID</h4>
+<p>{event.id}</p>
+
+<h4>Severity</h4>
+<p class="severity--{Severity[event.severity].toLowerCase()}">{Severity[event.severity]}</p>
+
+<h4>Name</h4>
+<p>{event.name}</p>
+
+<h4>Timestamp</h4>
+<p>{new Date(event.timestamp).toLocaleString()}</p>
+
+<h4>Source</h4>
+<p>{event.source}</p>
+
+<h4>Tags</h4>
+<p>{event.tags.join(', ')}</p>
+
+<h4>User</h4>
+{#if event.user}
+	<UserCard user={event.user} href="/admin/users/{event.user.id}" />
+{:else}
+	<i>Unknown</i>
+{/if}
+
+<h4>Extra Data</h4>
+
+<pre>{JSON.stringify(event.extra, null, 4)}</pre>

package/routes/admin/audit/[id]/+page.ts

@@ -0,0 +1,9 @@
+import { fetchAPI } from '@axium/client/requests';
+
+export const ssr = false;
+
+export async function load({ params }) {
+	const event = await fetchAPI('GET', 'admin/audit/:eventId', null, params.id);
+
+	return { event };
+}

package/routes/admin/audit/styles.css

@@ -0,0 +1,31 @@
+.severity--emergency {
+	background-color: red;
+	color: white;
+	text-decoration: underline;
+}
+
+.severity--alert {
+	background-color: red;
+	color: white;
+}
+
+.severity--critical {
+	font-weight: bold;
+	color: red;
+}
+
+.severity--error {
+	color: red;
+}
+
+.severity--warning {
+	color: yellow;
+}
+
+.severity--notice {
+	color: cyan;
+}
+
+.severity--debug {
+	opacity: 0.7;
+}

package/routes/admin/config/+page.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	const { data } = $props();
+</script>
+
+<svelte:head>
+	<title>Admin — Configuration</title>
+</svelte:head>
+
+<h2>Active Configuration</h2>
+
+<pre>{JSON.stringify(data.config, null, 4)}</pre>
+
+<h2>Loaded Files</h2>
+
+{#each Object.entries(data.files) as [path, config]}
+	<details>
+		<summary>{path}</summary>
+		<pre>{JSON.stringify(config, null, 4)}</pre>
+	</details>
+{/each}
+
+<style>
+	summary {
+		cursor: pointer;
+		padding: 1em 0;
+		font-size: large;
+	}
+</style>

package/routes/admin/config/+page.ts

@@ -0,0 +1,9 @@
+import { fetchAPI } from '@axium/client/requests';
+
+export const ssr = false;
+
+export async function load() {
+	const result = await fetchAPI('GET', 'admin/config');
+
+	return result;
+}

package/routes/admin/plugins/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	const { data } = $props();
+</script>
+
+<svelte:head>
+	<title>Admin — Plugins</title>
+</svelte:head>
+
+<h2>Plugins</h2>
+
+{#each data.plugins as plugin}
+	<h4>{plugin.name}</h4>
+	<p><strong>Loaded from</strong> {plugin.path} by {plugin._loadedBy ?? '<unknown>'}</p>
+	<p><strong>Version:</strong> {plugin.version}</p>
+	<p><strong>Author:</strong> {plugin.author}</p>
+	<p>
+		<strong>Provided apps:</strong>
+		{#if plugin.apps?.length}{plugin.apps?.map(a => a.name).join(', ')}{:else}<i>None</i>{/if}
+	</p>
+	<p>{plugin.description}</p>
+{:else}
+	<i>No plugins loaded.</i>
+{/each}

package/routes/admin/plugins/+page.ts

@@ -0,0 +1,7 @@
+import { fetchAPI } from '@axium/client/requests';
+
+export async function load() {
+	return {
+		plugins: await fetchAPI('GET', 'admin/plugins'),
+	};
+}

package/routes/admin/users/+page.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import Icon from '@axium/client/components/Icon';
+	import '@axium/client/styles/list';
+	import { colorHash } from '@axium/core/color';
+
+	const { data } = $props();
+</script>
+
+<svelte:head>
+	<title>Admin - Users</title>
+</svelte:head>
+
+<h2>Users</h2>
+
+{#snippet attr(i: string, text: string, color: string = colorHash(text))}
+	<span class="attribute" style:background-color={color}><Icon {i} />{text}</span>
+{/snippet}
+
+<div id="user-list" class="list">
+	<div class="list-item list-header">
+		<span>Name</span>
+		<span>Email</span>
+		<span>Attributes</span>
+	</div>
+	{#each data.users as user}
+		<div class="user list-item" onclick={e => e.currentTarget === e.target && (location.href = '/admin/users/' + user.id)}>
+			<span>{user.name}</span>
+			<span>{user.email}</span>
+			<span>
+				{#if user.isAdmin}
+					{@render attr('crown', 'Admin', '#710')}
+				{/if}
+				{#each user.tags as tag}
+					{@render attr('hashtag', tag)}
+				{/each}
+				{#each user.roles as role}
+					{@render attr('at', role)}
+				{/each}
+			</span>
+			<a href="/admin/audit?user={user.id}"><Icon i="file-shield" /></a>
+			<a href="/admin/users/{user.id}"><Icon i="chevron-right" /></a>
+		</div>
+	{:else}
+		<div class="error">No users!</div>
+	{/each}
+</div>
+
+<style>
+	.list-item {
+		grid-template-columns: 1fr 1fr 3fr repeat(2, 2em);
+	}
+
+	.attribute {
+		border-radius: 1em;
+		padding: 0.25em 0.75em;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25em;
+	}
+</style>

package/routes/admin/users/+page.ts

@@ -0,0 +1,9 @@
+import { fetchAPI } from '@axium/client/requests';
+
+export const ssr = false;
+
+export async function load() {
+	const users = await fetchAPI('GET', 'admin/users/all');
+
+	return { users };
+}

package/routes/admin/users/[id]/+page.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { ClipboardCopy, Preferences, SessionList, Icon } from '@axium/client/components';
+	import '@axium/client/styles/account';
+	import { formatDateRange } from '@axium/core/format';
+
+	const { data } = $props();
+	const { user } = data;
+
+	let sessions = $state(user.sessions);
+</script>
+
+<svelte:head>
+	<title>Admin — User Management</title>
+</svelte:head>
+
+<a href="/admin/users">
+	<button class="icon-text">
+		<Icon i="up-left" /> Back to all users
+	</button>
+</a>
+
+<h2>User Management</h2>
+
+<div class="section main">
+	<div class="item info">
+		<p>UUID</p>
+		<p>{user.id}</p>
+		<ClipboardCopy value={user.id} --size="16px" />
+	</div>
+
+	<div class="item info">
+		<p>Display Name</p>
+		<p>{user.name}</p>
+		<ClipboardCopy value={user.name} --size="16px" />
+	</div>
+
+	<div class="item info">
+		<p>Email</p>
+		<p>
+			<a href="mailto:{user.email}">{user.email}</a>, {user.emailVerified
+				? 'verified ' + user.emailVerified.toLocaleString()
+				: 'not verified'}
+		</p>
+		<ClipboardCopy value={user.email} --size="16px" />
+	</div>
+
+	<div class="item info">
+		<p>Registered</p>
+		<p>{formatDateRange(user.registeredAt)}</p>
+		<ClipboardCopy value={user.registeredAt.toISOString()} --size="16px" />
+	</div>
+	<div class="item info">
+		<p>Administrator</p>
+		{#if user.isAdmin}
+			<strong>Yes</strong>
+		{:else}
+			<p>No</p>
+		{/if}
+		<p></p>
+	</div>
+	<div class="item info">
+		<p>Suspended</p>
+		{#if user.isSuspended}
+			<strong>Yes</strong>
+		{:else}
+			<p>No</p>
+		{/if}
+		<button>{user.isSuspended ? 'Unsuspend' : 'Suspend'}</button>
+	</div>
+	<div class="item info">
+		<p>Profile Image</p>
+		{#if user.image}
+			<a href={user.image} target="_blank" rel="noopener noreferrer">{user.image}</a>
+			<ClipboardCopy value={user.image} --size="16px" />
+		{:else}
+			<i>Default</i>
+			<p></p>
+		{/if}
+	</div>
+	<div class="item info">
+		<p>Roles</p>
+		<p>{user.roles.join(', ')}</p>
+	</div>
+	<div class="item info">
+		<p>Tags</p>
+		<p>{user.tags.join(', ')}</p>
+	</div>
+</div>
+
+<div class="section main">
+	<h3>Sessions</h3>
+	<SessionList {sessions} {user} />
+</div>
+
+<div class="section main">
+	<h3>Preferences</h3>
+	<Preferences userId={user.id} bind:preferences={user.preferences} />
+</div>
+
+<style>
+	div.info {
+		grid-template-columns: 10em 1fr 6em;
+	}
+
+	.section {
+		margin-bottom: 2em;
+	}
+</style>

package/routes/admin/users/[id]/+page.ts

@@ -0,0 +1,17 @@
+import { fetchAPI } from '@axium/client/requests';
+
+export const ssr = false;
+
+export async function load({ params }) {
+	const user = await fetchAPI('GET', 'admin/users/:userId', null, params.id);
+
+	for (const session of user.sessions) {
+		session.created = new Date(session.created);
+		session.expires = new Date(session.expires);
+	}
+
+	user.registeredAt = new Date(user.registeredAt);
+	user.emailVerified = user.emailVerified ? new Date(user.emailVerified) : null;
+
+	return { user };
+}

package/routes/tsconfig.json

@@ -1,4 +1,4 @@
 {
-	"extends": "../web/tsconfig.json",
+	"extends": "../web.tsconfig.json",
 	"include": ["**/*"]
 }

package/svelte.config.js

@@ -1,13 +1,7 @@
-import config from '@axium/server/config';
 import node from '@sveltejs/adapter-node';
 import { join } from 'node:path/posix';
 import { fileURLToPath } from 'node:url';
-
-/**
- * Paths relative to the directory of this file.
- * This allows this file to be imported from other projects and still resolve to the correct paths.
- */
-const fixed = p => join(import.meta.dirname, p);
+import config from '@axium/server/config';
 
 /** @type {import('@sveltejs/kit').Config} */
 export default {
@@ -20,11 +14,11 @@ export default {
 	kit: {
 		adapter: node(),
 		files: {
-			routes: config.web.routes,
 			assets: join(fileURLToPath(new URL(import.meta.resolve('@axium/client'))), '../../assets'),
-			appTemplate: fixed('web/template.html'),
+			appTemplate: join(import.meta.dirname, 'template.html'),
+			routes: config.web.routes,
 			hooks: {
-				server: fixed('web/hooks.server.ts'),
+				universal: '/dev/null',
 			},
 		},
 	},

package/{web/template.html → template.html}

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.svg" type="image/svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="color-scheme" content="dark light" />
 		<link rel="stylesheet" href="%sveltekit.assets%/theme.css" />

package/{web/tsconfig.json → web.tsconfig.json}

@@ -1,9 +1,9 @@
 {
-	"extends": ["../.svelte-kit/tsconfig.json"],
+	"extends": ["./.svelte-kit/tsconfig.json"],
 	"compilerOptions": {
 		"target": "ES2023",
 		"strict": true,
 		"lib": ["ESNext", "DOM", "DOM.Iterable"]
 	},
-	"include": ["./**/*"]
+	"include": []
 }

package/build/client/_app/immutable/chunks/B1E1cVbi.js

@@ -1 +0,0 @@
-import"./DsnmJJEf.js";import{q as p,r as c,p as f,v as d,f as b,a as u}from"./D9TfJrfD.js";import{d as v}from"./Dy1O3iBu.js";import{p as n,i as _}from"./pba7IodQ.js";import{F as h,l as k}from"./DJeR1n-B.js";var w=(t,o)=>{t.preventDefault(),o().close(),history.back()},y=f("<button>Take me back</button>"),L=f("<p>Are you sure you want to log out?</p> <!>",1);function A(t,o){p(o,!0);let a=n(o,"dialog",15),l=n(o,"fullPage",3,!1);h(t,{get pageMode(){return l()},submitText:"Log Out",submit:()=>k().then(()=>window.location.href="/"),get dialog(){return a()},set dialog(r){a(r)},children:(r,P)=>{var i=L(),g=d(b(i),2);{var m=e=>{var s=y();s.__click=[w,a],u(e,s)};_(g,e=>{l()&&e(m)})}u(r,i)},$$slots:{default:!0}}),c()}v(["click"]);export{A as L};