@axium/server 0.37.1 → 0.38.0

package/routes/admin/+page.svelte

@@ -1,40 +1,45 @@
-<script>
+<script lang="ts">
+	import { text } from '@axium/client';
 	import { Version } from '@axium/client/components';
 	import { Severity } from '@axium/core';
-	import { capitalize } from 'utilium';
+	import { getPackage } from '@axium/core/packages';
+	import { _throw, capitalize } from 'utilium';
 
 	const { data } = $props();
+	const packages = ['server', 'core', 'client'] as const;
 </script>
 
 <svelte:head>
-	<title>Admin — Dashboard</title>
+	<title>{text('page.admin.dashboard.title')}</title>
 </svelte:head>
 
-<h2>Administration</h2>
+<h2>{text('page.admin.heading')}</h2>
 
-{#each ['server', 'core', 'client'] as name}
-	{@const info = data.versions[name]}
-	<p>Axium {capitalize(name)} <Version v={info.version} latest={info.latest} /></p>
+{#each packages as name}
+	<p>
+		Axium {capitalize(name)}
+		<Version v={data.versions[name]} latest={getPackage('@axium/' + name).then(pkg => pkg?._latest || _throw(null))} />
+	</p>
 {/each}
 
-<h3><a href="/admin/users">Users</a></h3>
+<h3><a href="/admin/users">{text('page.admin.dashboard.users_link')}</a></h3>
 
-<p>{data.users} users, {data.sessions} sessions, {data.passkeys} passkeys.</p>
+<p>{text('page.admin.dashboard.stats', { users: data.users, sessions: data.sessions, passkeys: data.passkeys })}</p>
 
-<h3><a href="/admin/config">Configuration</a></h3>
+<h3><a href="/admin/config">{text('page.admin.dashboard.config_link')}</a></h3>
 
-<p>{data.configFiles} files loaded.</p>
+<p>{text('page.admin.dashboard.config_files', { count: data.configFiles })}</p>
 
-<h3><a href="/admin/plugins">Plugins</a></h3>
+<h3><a href="/admin/plugins">{text('page.admin.dashboard.plugins_link')}</a></h3>
 
-<p>{data.plugins} plugins loaded.</p>
+<p>{text('page.admin.dashboard.plugins_loaded', { count: data.plugins })}</p>
 
-<h3><a href="/admin/audit">Audit Log</a></h3>
+<h3><a href="/admin/audit">{text('page.admin.audit.heading')}</a></h3>
 
 <p>
-	{Object.entries(data.auditEvents)
-		.filter(([, count]) => count)
-		.map(([severity, count]) => `${count} ${Severity[severity].toUpperCase()} events`)
+	{data.auditEvents
+		.map((count, severity) => count && `${count} ${Severity[severity].toUpperCase()} events`)
+		.filter(v => v)
 		.join(', ')}.
 </p>
 

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { Icon } from '@axium/client/components';
 	import '@axium/client/styles/list';
 	import './styles.css';
@@ -9,14 +10,14 @@
 </script>
 
 <svelte:head>
-	<title>Admin — Audit Log</title>
+	<title>{text('page.admin.audit.title')}</title>
 </svelte:head>
 
-<h2>Audit Log</h2>
+<h2>{text('page.admin.audit.heading')}</h2>
 
 {#if data.filterError}
 	<div class="error">
-		<strong>Invalid Filter:</strong>
+		<strong>{text('page.admin.audit.invalid_filter')}</strong>
 		{#each data.filterError.split('\n') as line}
 			<p>{line}</p>
 		{/each}
@@ -24,10 +25,10 @@
 {/if}
 
 <form id="filter" method="dialog">
-	<h4>Filters</h4>
+	<h4>{text('page.admin.audit.filters')}</h4>
 
 	<div class="filter-field">
-		<span>Minimum Severity:</span>
+		<span>{text('page.admin.audit.filter.severity')}</span>
 		<select name="severity" value={data.filter.severity}>
 			{#each severityNames as value}
 				<option {value} selected={value == 'info'}>{capitalize(value)}</option>
@@ -36,25 +37,25 @@
 	</div>
 
 	<div class="filter-field">
-		<span>Since:</span>
+		<span>{text('page.admin.audit.filter.since')}</span>
 		<input type="date" name="since" value={data.filter.since} />
 	</div>
 
 	<div class="filter-field">
-		<span>Until:</span>
+		<span>{text('page.admin.audit.filter.until')}</span>
 		<input type="date" name="until" value={data.filter.until} />
 	</div>
 
 	<div class="filter-field">
-		<span>Tags:</span>
+		<span>{text('page.admin.audit.filter.tags')}</span>
 		<input type="text" name="tags" value={data.filter.tags} />
 	</div>
 
 	<div class="filter-field">
-		<span>Event Name:</span>
+		<span>{text('page.admin.audit.filter.event')}</span>
 		{#if data.configured}
 			<select name="event">
-				<option value="">Any</option>
+				<option value="">{text('page.admin.audit.any')}</option>
 				{#each data.configured.name as name}
 					<option value={name} selected={data.filter.event == name}>{name}</option>
 				{/each}
@@ -65,10 +66,10 @@
 	</div>
 
 	<div class="filter-field">
-		<span>Source:</span>
+		<span>{text('page.admin.audit.filter.source')}</span>
 		{#if data.configured}
 			<select name="source">
-				<option value="">Any</option>
+				<option value="">{text('page.admin.audit.any')}</option>
 				{#each data.configured.source as source}
 					<option value={source} selected={data.filter.source == source}>{source}</option>
 				{/each}
@@ -79,7 +80,7 @@
 	</div>
 
 	<div class="filter-field">
-		<span>User UUID:</span>
+		<span>{text('page.admin.audit.filter.user')}</span>
 		<input type="text" name="user" size="36" value={data.filter.user} />
 	</div>
 
@@ -112,14 +113,14 @@
 					}
 				}
 				location.search = params ? '?' + params.toString() : '';
-			}}>Apply</button
+			}}>{text('page.admin.audit.apply')}</button
 		>
 		<button
 			class="inline-button"
 			onclick={e => {
 				e.preventDefault();
 				location.search = '';
-			}}>Reset</button
+			}}>{text('page.admin.audit.reset')}</button
 		>
 	</div>
 </form>
@@ -127,17 +128,17 @@
 <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>
+			<span>{text('page.admin.audit.timestamp')}</span>
+			<span>{text('page.admin.audit.severity')}</span>
+			<span>{text('page.admin.audit.source')}</span>
+			<span>{text('page.admin.audit.name')}</span>
+			<span>{text('page.admin.audit.tags')}</span>
+			<span>{text('page.admin.audit.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>{event.timestamp.toLocaleString()}</span>
 				<span class="severity--{Severity[event.severity].toLowerCase()}">{Severity[event.severity]}</span>
 				<span>{event.source}</span>
 				<span>{event.name}</span>
@@ -148,12 +149,12 @@
 						{#if event.userId === data.session?.userId}<span class="subtle">(You)</span>{/if}
 					</a>
 				{:else}
-					<i>Unknown</i>
+					<i>{text('generic.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>
+			<p class="list-empty">{text('page.admin.audit.no_events')}</p>
 		{/each}
 	</div>
 </div>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { Severity } from '@axium/core/audit';
 	import '../styles.css';
 	import UserCard from '@axium/client/components/UserCard';
@@ -8,40 +9,40 @@
 </script>
 
 <svelte:head>
-	<title>Admin — Audit Log Event #{event.id}</title>
+	<title>{text('page.admin.audit.event_title', { id: event.id })}</title>
 </svelte:head>
 
-<h2>Audit Event</h2>
+<h2>{text('page.admin.audit.event_heading')}</h2>
 
-<h4>UUID</h4>
+<h4>{text('page.admin.audit.uuid')}</h4>
 <p>{event.id}</p>
 
-<h4>Severity</h4>
+<h4>{text('page.admin.audit.severity')}</h4>
 <p class="severity--{Severity[event.severity].toLowerCase()}">{Severity[event.severity]}</p>
 
-<h4>Name</h4>
+<h4>{text('page.admin.audit.name')}</h4>
 <p>{event.name}</p>
 
-<h4>Timestamp</h4>
-<p>{new Date(event.timestamp).toLocaleString()}</p>
+<h4>{text('page.admin.audit.timestamp')}</h4>
+<p>{event.timestamp.toLocaleString()}</p>
 
-<h4>Source</h4>
+<h4>{text('page.admin.audit.source')}</h4>
 <p>{event.source}</p>
 
-<h4>Tags</h4>
+<h4>{text('page.admin.audit.tags')}</h4>
 <p>{event.tags.join(', ')}</p>
 
-<h4>User</h4>
+<h4>{text('page.admin.audit.user')}</h4>
 {#if event.user}
 	<UserCard user={event.user} href="/admin/users/{event.user.id}" />
 {:else}
-	<i>Unknown</i>
+	<i>{text('generic.unknown')}</i>
 {/if}
 
-<h4>Extra Data</h4>
+<h4>{text('page.admin.audit.extra_data')}</h4>
 
 {#if event.name == 'response_error'}
-	<h5>Error Stack</h5>
+	<h5>{text('page.admin.audit.error_stack')}</h5>
 	<pre>{event.extra.stack}</pre>
 {:else}
 	<pre>{JSON.stringify(event.extra, null, 4)}</pre>

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

@@ -1,16 +1,17 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	const { data } = $props();
 </script>
 
 <svelte:head>
-	<title>Admin — Configuration</title>
+	<title>{text('page.admin.config.title')}</title>
 </svelte:head>
 
-<h2>Active Configuration</h2>
+<h2>{text('page.admin.config.active')}</h2>
 
 <pre>{JSON.stringify(data.config, null, 4)}</pre>
 
-<h2 id="files">Loaded Files</h2>
+<h2 id="files">{text('page.admin.config.loaded_files')}</h2>
 
 {#each Object.entries(data.files) as [path, config]}
 	<details>

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

@@ -1,23 +1,31 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { Version, ZodForm } from '@axium/client/components';
 	import { fetchAPI } from '@axium/client/requests';
 	import { serverConfigs } from '@axium/core';
+	import { getPackage } from '@axium/core/packages';
+	import { _throw } from 'utilium';
 
 	const { data } = $props();
 </script>
 
 <svelte:head>
-	<title>Admin — Plugins</title>
+	<title>{text('page.admin.plugins.title')}</title>
 </svelte:head>
 
-<h2>Plugins</h2>
+<h2>{text('page.admin.plugins.heading')}</h2>
 
 {#each data.plugins as plugin}
 	{@const cfg = serverConfigs.get(plugin.name)}
 	<div class="plugin">
-		<h3>{plugin.name}<Version v={plugin.version} latest={plugin.latest} /></h3>
+		<h3>
+			{plugin.name}<Version
+				v={plugin.version}
+				latest={plugin.update_checks ? getPackage(plugin.name).then(p => p?._latest || _throw(null)) : null}
+			/>
+		</h3>
 		<p>
-			<strong>Loaded from</strong>
+			<strong>{text('page.admin.plugins.loaded_from')}</strong>
 			{#if plugin.path.endsWith('/package.json')}
 				<span class="path plugin-path">{plugin.path.slice(0, -13)}</span>
 			{:else}
@@ -28,18 +36,18 @@
 				<a class="path" href="/admin/config#{plugin.loadedBy}">{plugin.loadedBy}</a>
 			{/if}
 		</p>
-		<p><strong>Author:</strong> {plugin.author}</p>
+		<p><strong>{text('page.admin.plugins.author')}</strong> {plugin.author}</p>
 		<p class="apps">
-			<strong>Provided apps:</strong>
+			<strong>{text('page.admin.plugins.provided_apps')}</strong>
 			{#if plugin.apps?.length}
 				{#each plugin.apps as app, i}
 					<a href="/{app.id}">{app.name}</a>{i != plugin.apps.length - 1 ? ', ' : ''}
 				{/each}
-			{:else}<i>None</i>{/if}
+			{:else}<i>{text('generic.none')}</i>{/if}
 		</p>
 		<p>{plugin.description}</p>
 		{#if cfg && plugin.config}
-			<h4>Configuration</h4>
+			<h4>{text('page.admin.plugins.configuration')}</h4>
 			{@const { schema, labels } = cfg}
 			<ZodForm
 				rootValue={plugin.config}
@@ -51,7 +59,7 @@
 		{/if}
 	</div>
 {:else}
-	<i>No plugins loaded.</i>
+	<i>{text('page.admin.plugins.none')}</i>
 {/each}
 
 <style>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { FormDialog, Icon, URLText } from '@axium/client/components';
 	import { fetchAPI } from '@axium/client/requests';
 	import '@axium/client/styles/list';
@@ -13,10 +14,10 @@
 </script>
 
 <svelte:head>
-	<title>Admin — Users</title>
+	<title>{text('page.admin.users.title')}</title>
 </svelte:head>
 
-<h2>Users</h2>
+<h2>{text('page.admin.users.heading')}</h2>
 
 {#snippet attr(i: string, text: string, color: string = colorHashRGB(text))}
 	<span class="attribute" style:background-color={color}><Icon {i} />{text}</span>
@@ -24,12 +25,12 @@
 
 <button command="show-modal" commandfor="create-user" class="icon-text">
 	<Icon i="plus" />
-	Create User
+	{text('page.admin.users.create')}
 </button>
 
 <FormDialog
 	id="create-user"
-	submitText="Create"
+	submitText={text('generic.create')}
 	submit={(data: { email: string; name: string }) =>
 		fetchAPI('PUT', 'admin/users', data).then(res => {
 			verification = res.verification;
@@ -38,30 +39,30 @@
 		})}
 >
 	<div>
-		<label for="email">Email</label>
+		<label for="email">{text('generic.email')}</label>
 		<input name="email" type="email" required />
 	</div>
 	<div>
-		<label for="name">Name</label>
+		<label for="name">{text('generic.username')}</label>
 		<input name="name" type="text" required />
 	</div>
 </FormDialog>
 
 <dialog bind:this={createdUserDialog} id="created-user-verification">
-	<h3>New User Created</h3>
+	<h3>{text('page.admin.users.created_title')}</h3>
 
-	<p>They can log in using this URL:</p>
+	<p>{text('page.admin.users.created_url')}</p>
 
 	<URLText url="/login/token?user={verification?.userId}&token={verification?.token}" />
 
-	<button onclick={() => createdUserDialog?.close()}>Okay</button>
+	<button onclick={() => createdUserDialog?.close()}>{text('generic.ok')}</button>
 </dialog>
 
 <div id="user-list" class="list">
 	<div class="list-item list-header">
-		<span>Name</span>
-		<span>Email</span>
-		<span>Attributes</span>
+		<span>{text('generic.username')}</span>
+		<span>{text('generic.email')}</span>
+		<span>{text('page.admin.users.attributes')}</span>
 	</div>
 	{#each users as user}
 		<div class="user list-item" onclick={e => e.currentTarget === e.target && (location.href = '/admin/users/' + user.id)}>
@@ -69,7 +70,7 @@
 			<span>{user.email}</span>
 			<span class="mobile-hide">
 				{#if user.isAdmin}
-					{@render attr('crown', 'Admin', '#710')}
+					{@render attr('crown', text('page.admin.users.admin_tag'), '#710')}
 				{/if}
 				{#each user.tags as tag}
 					{@render attr('hashtag', tag)}
@@ -80,15 +81,15 @@
 			</span>
 			<a class="icon-text mobile-button" href="/admin/audit?user={user.id}">
 				<Icon i="file-shield" />
-				<span class="mobile-only">Audit</span>
+				<span class="mobile-only">{text('page.admin.users.audit')}</span>
 			</a>
 			<a class="icon-text mobile-button" href="/admin/users/{user.id}">
 				<Icon i="chevron-right" />
-				<span class="mobile-only">Manage</span>
+				<span class="mobile-only">{text('page.admin.users.manage')}</span>
 			</a>
 		</div>
 	{:else}
-		<div class="error">No users!</div>
+		<div class="error">{text('page.admin.users.none')}</div>
 	{/each}
 </div>
 

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { ClipboardCopy, FormDialog, Icon, SessionList, ZodForm, ZodInput } from '@axium/client/components';
 	import { fetchAPI } from '@axium/client/requests';
 	import '@axium/client/styles/account';
@@ -19,108 +20,110 @@
 </script>
 
 <svelte:head>
-	<title>Admin — User Management</title>
+	<title>{text('page.admin.users.manage_title')}</title>
 </svelte:head>
 
 <a href="/admin/users">
 	<button class="icon-text">
-		<Icon i="up-left" /> Back to all users
+		<Icon i="up-left" />
+		{text('page.admin.users.back')}
 	</button>
 </a>
 
-<h2>User Management</h2>
+<h2>{text('page.admin.users.manage_heading')}</h2>
 
 <div id="info" class="section main">
 	<div class="item info">
-		<p>UUID</p>
+		<p>{text('page.admin.users.uuid')}</p>
 		<p>{user.id}</p>
 		<ClipboardCopy value={user.id} --size="16px" />
 	</div>
 
 	<div class="item info">
-		<p>Display Name</p>
+		<p>{text('page.admin.users.display_name')}</p>
 		<p>{user.name}</p>
 		<ClipboardCopy value={user.name} --size="16px" />
 	</div>
 
 	<div class="item info">
-		<p>Email</p>
+		<p>{text('generic.email')}</p>
 		<p>
 			<a href="mailto:{user.email}">{user.email}</a>, {user.emailVerified
-				? 'verified ' + user.emailVerified.toLocaleString()
-				: 'not verified'}
+				? text('page.admin.users.email_verified', { date: user.emailVerified.toLocaleString() })
+				: text('page.admin.users.email_not_verified')}
 		</p>
 		<ClipboardCopy value={user.email} --size="16px" />
 	</div>
 
 	<div class="item info">
-		<p>Registered</p>
+		<p>{text('page.admin.users.registered')}</p>
 		<p>{formatDateRange(user.registeredAt)}</p>
 		<ClipboardCopy value={user.registeredAt.toISOString()} --size="16px" />
 	</div>
 	<div class="item info">
-		<p>Administrator</p>
+		<p>{text('page.admin.users.administrator')}</p>
 		{#if user.isAdmin}
-			<strong>Yes</strong>
+			<strong>{text('generic.yes')}</strong>
 		{:else}
-			<p>No</p>
+			<p>{text('generic.no')}</p>
 		{/if}
 		<p></p>
 	</div>
 	<div class="item info">
-		<p>Suspended</p>
+		<p>{text('page.admin.users.suspended')}</p>
 		{#if user.isSuspended}
-			<strong>Yes</strong>
+			<strong>{text('generic.yes')}</strong>
 		{:else}
-			<p>No</p>
+			<p>{text('generic.no')}</p>
 		{/if}
 		<button
 			onclick={async () => {
 				const { isSuspended } = await fetchAPI('PATCH', 'admin/users', { isSuspended: !user.isSuspended, id: user.id });
 				user.isSuspended = isSuspended;
-			}}>{user.isSuspended ? 'Unsuspend' : 'Suspend'}</button
+			}}>{user.isSuspended ? text('page.admin.users.unsuspend') : text('page.admin.users.suspend')}</button
 		>
 	</div>
 	<div class="item info">
-		<p>Profile Image</p>
+		<p>{text('page.admin.users.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>
+			<i>{text('page.admin.users.default_image')}</i>
 			<p></p>
 		{/if}
 	</div>
 	<div class="item info">
-		<p>Roles</p>
+		<p>{text('page.admin.users.roles')}</p>
 		<ZodInput bind:rootValue={user} path="roles" schema={User.shape.roles} {updateValue} noLabel />
 	</div>
 	<div class="item info">
-		<p>Tags</p>
+		<p>{text('page.admin.users.tags')}</p>
 		<ZodInput bind:rootValue={user} path="tags" schema={User.shape.tags} {updateValue} noLabel />
 	</div>
 
 	<button class="inline-button icon-text danger" command="show-modal" commandfor="delete-user">
-		<Icon i="trash" /> Delete User
+		<Icon i="trash" />
+		{text('page.admin.users.delete_user')}
 	</button>
 
 	<FormDialog
 		id="delete-user"
 		submit={() => deleteUser(user.id, session?.userId).then(() => (window.location.href = '/admin/users'))}
-		submitText="Delete User"
+		submitText={text('page.admin.users.delete_user')}
 		submitDanger
 	>
-		<p>Are you sure you want to delete this user?<br />This action can't be undone.</p>
+		<p>{text('page.admin.users.delete_confirm')}<br />{text('generic.action_irreversible')}</p>
 	</FormDialog>
 </div>
 
 <div id="sessions" class="section main">
-	<h3>Sessions</h3>
+	<h3>{text('generic.sessions')}</h3>
 	<SessionList {sessions} {user} />
 </div>
 
 <div id="preferences" class="section main">
-	<h3>Preferences</h3>
+	<h3>{text('generic.preferences')}</h3>
 	<ZodForm
 		bind:rootValue={user.preferences}
 		schema={Preferences}

package/routes/login/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import Login from '@axium/client/components/Login';
 </script>
 
 <svelte:head>
-	<title>Login</title>
+	<title>{text('generic.login')}</title>
 </svelte:head>
 
 <Login fullPage />

package/routes/login/client/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import Icon from '@axium/client/components/Icon';
 	import { fetchAPI } from '@axium/client/requests';
 	import { startAuthentication } from '@simplewebauthn/browser';
@@ -28,7 +29,7 @@
 </script>
 
 <svelte:head>
-	<title>Local Client Login</title>
+	<title>{text('page.login.client.title')}</title>
 </svelte:head>
 
 {#if error}
@@ -36,15 +37,15 @@
 {:else if authDone}
 	<div class="center success">
 		<h1><Icon i="check" /></h1>
-		<p>Login successful! You can close this tab.</p>
+		<p>{text('page.login.client.success')}</p>
 	</div>
 {:else}
 	<div id="local-login" class="center">
-		<h2>Local Client Login</h2>
-		<p>Are you sure you want to log in to this local client?</p>
+		<h2>{text('page.login.client.title')}</h2>
+		<p>{text('page.login.client.confirm')}</p>
 		<div>
-			<button>Cancel</button>
-			<button class="danger" {onclick}>Authorize</button>
+			<button>{text('generic.cancel')}</button>
+			<button class="danger" {onclick}>{text('page.login.client.authorize')}</button>
 		</div>
 	</div>
 {/if}
@@ -67,6 +68,6 @@
 
 	#local-login {
 		background-color: var(--bg-menu);
-		border: 1px solid var(--border-accent);
+		border: var(--border-accent);
 	}
 </style>