@axium/client 0.4.9 → 0.6.0

package/assets/styles.css

@@ -65,6 +65,27 @@ textarea {
 	outline: none;
 }
 
+select,
+::picker(select) {
+	appearance: base-select;
+}
+
+::picker(select) {
+	border: 1px solid var(--border-accent);
+	padding: 1em;
+	border-radius: 0.5em;
+	background-color: var(--bg-menu);
+}
+
+option {
+	padding: 0.25em 0;
+	border-radius: 0.5em;
+}
+
+option:hover {
+	background-color: var(--bg-alt);
+}
+
 button {
 	cursor: pointer;
 }
@@ -73,6 +94,13 @@ button:hover {
 	background-color: hsl(var(--hue) 15 calc(var(--bg-light) + (var(--light-step) * 2)));
 }
 
+code,
+pre {
+	background-color: var(--bg-menu);
+	padding: 1em;
+	border-radius: 0.5em;
+}
+
 .error {
 	padding: 1em;
 	border-radius: 0.5em;

package/axium-client.service

@@ -0,0 +1,22 @@
+[Unit]
+Description=Axium Client Daemon
+Wants=network-online.target
+After=network-online.target
+RequiresMountsFor=%Y
+StartLimitIntervalSec=1min
+StartLimitBurst=5
+StartLimitAction=none
+FailureAction=none
+
+[Service]
+Type=simple
+ExecStartPre=/usr/bin/env cd "%Y/../../.."
+ExecStart=/usr/bin/env npx --prefix "%Y/../../.." axium-client run
+ExecReload=kill -HUP $MAINPID
+SyslogIdentifier=axium-client
+Restart=on-failure
+RestartSec=3s
+TimeoutStopSec=15s
+
+[Install]
+WantedBy=default.target

package/dist/cli/config.d.ts

@@ -0,0 +1,23 @@
+export declare const configDir: string;
+export declare function session(): {
+    id: string;
+    userId: string;
+    expires: Date;
+    created: Date;
+    elevated: boolean;
+    user: {
+        id: string;
+        name: string;
+        email: string;
+        preferences: Record<string, any>;
+        roles: string[];
+        registeredAt: Date;
+        isAdmin: boolean;
+        emailVerified?: Date | null | undefined;
+        image?: string | null | undefined;
+    };
+};
+export declare function loadConfig(safe: boolean): Promise<void>;
+export declare function saveConfig(): void;
+export declare const _dayMs: number;
+export declare function updateCache(force: boolean): Promise<void>;

package/dist/cli/config.js

@@ -0,0 +1,52 @@
+import * as io from '@axium/core/node/io';
+import { loadPlugin } from '@axium/core/node/plugins';
+import { mkdirSync, readFileSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { join } from 'node:path/posix';
+import * as z from 'zod';
+import { fetchAPI, setPrefix, setToken } from '../requests.js';
+import { getCurrentSession } from '../user.js';
+import { ClientConfig, config } from '../config.js';
+export const configDir = join(homedir(), '.config/axium');
+mkdirSync(configDir, { recursive: true });
+const axcConfig = join(configDir, 'config.json');
+export function session() {
+    if (!config.token)
+        io.exit('Not logged in.', 4);
+    if (!config.cache)
+        io.exit('No session data available.', 3);
+    return config.cache.session;
+}
+export async function loadConfig(safe) {
+    try {
+        Object.assign(config, ClientConfig.parse(JSON.parse(readFileSync(axcConfig, 'utf-8'))));
+        if (config.server)
+            setPrefix(config.server);
+        if (config.token)
+            setToken(config.token);
+        for (const plugin of config.plugins ?? [])
+            await loadPlugin('client', plugin, axcConfig, safe);
+    }
+    catch (e) {
+        io.warn('Failed to load config: ' + (e instanceof z.core.$ZodError ? z.prettifyError(e) : io._debugOutput ? e.stack : e.message));
+    }
+}
+export function saveConfig() {
+    io.writeJSON(axcConfig, config);
+    io.debug('Saved config to ' + axcConfig);
+}
+export const _dayMs = 24 * 3600_000;
+export async function updateCache(force) {
+    if (!force && config.cache && config.cache.fetched + _dayMs > Date.now())
+        return;
+    io.start('Fetching metadata');
+    const [session, apps] = await Promise.all([getCurrentSession(), fetchAPI('GET', 'apps')]).catch(err => io.exit(err.message));
+    try {
+        config.cache = { fetched: Date.now(), session, apps };
+        saveConfig();
+        io.done();
+    }
+    catch {
+        return;
+    }
+}

package/dist/cli/index.d.ts

@@ -0,0 +1,2 @@
+#! /usr/bin/env node
+export {};

package/dist/cli/index.js

@@ -0,0 +1,244 @@
+#! /usr/bin/env node
+var __addDisposableResource = (this && this.__addDisposableResource) || function (env, value, async) {
+    if (value !== null && value !== void 0) {
+        if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
+        var dispose, inner;
+        if (async) {
+            if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
+            dispose = value[Symbol.asyncDispose];
+        }
+        if (dispose === void 0) {
+            if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
+            dispose = value[Symbol.dispose];
+            if (async) inner = dispose;
+        }
+        if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
+        if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };
+        env.stack.push({ value: value, dispose: dispose, async: async });
+    }
+    else if (async) {
+        env.stack.push({ async: true });
+    }
+    return value;
+};
+var __disposeResources = (this && this.__disposeResources) || (function (SuppressedError) {
+    return function (env) {
+        function fail(e) {
+            env.error = env.hasError ? new SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
+            env.hasError = true;
+        }
+        var r, s = 0;
+        function next() {
+            while (r = env.stack.pop()) {
+                try {
+                    if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);
+                    if (r.dispose) {
+                        var result = r.dispose.call(r.value);
+                        if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
+                    }
+                    else s |= 1;
+                }
+                catch (e) {
+                    fail(e);
+                }
+            }
+            if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();
+            if (env.hasError) throw env.error;
+        }
+        return next();
+    };
+})(typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+});
+import { outputDaemonStatus, io, pluginText } from '@axium/core/node';
+import { _findPlugin, plugins } from '@axium/core/plugins';
+import { program } from 'commander';
+import { createServer } from 'node:http';
+import { createInterface } from 'node:readline/promises';
+import { styleText } from 'node:util';
+import * as z from 'zod';
+import $pkg from '../../package.json' with { type: 'json' };
+import { config, resolveServerURL } from '../config.js';
+import { prefix, setPrefix, setToken } from '../requests.js';
+import { getCurrentSession, logout } from '../user.js';
+import { loadConfig, saveConfig, updateCache } from './config.js';
+const safe = z.stringbool().default(false).parse(process.env.SAFE?.toLowerCase()) || process.argv.includes('--safe');
+await loadConfig(safe);
+process.on('SIGHUP', () => {
+    io.info('Reloading configuration due to SIGHUP.');
+    void loadConfig(safe);
+});
+var rl, axiumPlugin;
+const env_1 = { stack: [], error: void 0, hasError: false };
+try {
+    rl = __addDisposableResource(env_1, createInterface({
+        input: process.stdin,
+        output: process.stdout,
+    }), false);
+    rl.on('SIGINT', () => io.exit('Aborted.', 7));
+    program
+        .version($pkg.version)
+        .name('axium-client')
+        .alias('axc')
+        .description('Axium client CLI')
+        .configureHelp({ showGlobalOptions: true })
+        .option('--debug', 'override debug mode')
+        .option('--no-debug', 'override debug mode')
+        .option('--refresh-session', 'Force a refresh of session and user metadata from server')
+        .option('--cache-only', 'Run entirely from local cache, even if it is expired.')
+        .option('--safe', 'do not execute code from plugins');
+    program.on('option:debug', () => io._setDebugOutput(true));
+    program.hook('preAction', async (_, action) => {
+        const opt = action.optsWithGlobals();
+        if (!config.token)
+            return;
+        if (!opt.cacheOnly)
+            await updateCache(opt.refreshSession);
+    });
+    program
+        .command('login')
+        .description('Log in to your account on an Axium server')
+        .argument('[server]', 'Axium server URL')
+        .action(async (url) => {
+        if (prefix[0] != '/')
+            url ||= prefix;
+        url ||= await rl.question('Axium server URL: ');
+        url = resolveServerURL(url);
+        setPrefix(url);
+        const sessionReady = Promise.withResolvers();
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        const server = createServer(async (req, res) => {
+            res.setHeader('access-control-allow-origin', '*');
+            res.setHeader('access-control-allow-methods', '*');
+            res.setHeader('access-control-allow-headers', '*');
+            if (req.method == 'HEAD' || req.method == 'OPTIONS') {
+                res.writeHead(200).end();
+                return;
+            }
+            if (!req.headers['content-type']?.endsWith('/json')) {
+                res.writeHead(415).end('Unexpected content type');
+                return;
+            }
+            if (req.method !== 'POST') {
+                res.writeHead(405).end('Unexpected request method');
+                return;
+            }
+            const { promise: bodyReady, resolve, reject } = Promise.withResolvers();
+            let body = '';
+            req.on('data', chunk => (body += chunk.toString()));
+            req.on('end', resolve);
+            req.on('error', reject);
+            try {
+                await bodyReady;
+                sessionReady.resolve(JSON.parse(body));
+                res.writeHead(200).end();
+            }
+            catch (e) {
+                res.statusCode = 500;
+                res.end('Internal server error: ' + e.message);
+                sessionReady.reject(e.message);
+            }
+        });
+        const serverReady = Promise.withResolvers();
+        server.listen(() => {
+            const { port } = server.address();
+            serverReady.resolve(port);
+        });
+        server.on('error', e => io.exit('Failed to start local callback server: ' + e.message, 5));
+        const port = await serverReady.promise;
+        const authURL = new URL('/login/client?port=' + port, url).href;
+        console.log('Authenticate by visiting this URL in your browser: ' + styleText('underline', authURL));
+        const { token } = await sessionReady.promise.catch(e => io.exit('Failed to obtain session: ' + e, 6));
+        setToken(token);
+        server.close();
+        io.start('Verifying session');
+        const session = await getCurrentSession().catch(e => io.exit(e.message, 6));
+        io.done();
+        io.debug('Session UUID: ' + session.id);
+        console.log(`Welcome ${session.user.name}! Your session is valid until ${session.expires.toLocaleDateString()}.`);
+        config.token = token;
+        config.server = url;
+        saveConfig();
+        await updateCache(true);
+    });
+    program.command('logout').action(async () => {
+        if (!config.token)
+            io.exit('Not logged in.', 4);
+        if (!config.cache)
+            io.exit('No session data available.', 3);
+        await logout(config.cache.session.userId, config.cache.session.id);
+    });
+    program.command('status').action(() => {
+        if (!config.token)
+            return console.log('Not logged in.');
+        if (!config.cache)
+            return console.log('No session data available.');
+        console.log('Logged in to', new URL(prefix).host);
+        console.log(styleText('whiteBright', 'Session ID:'), config.cache.session.id);
+        const { user } = config.cache.session;
+        console.log(styleText('whiteBright', 'User:'), user.name, `<${user.email}>`, styleText('dim', `(${user.id})`));
+        outputDaemonStatus('axium-client');
+    });
+    program
+        .command('run')
+        .argument('[plugin]', 'The plugin to run')
+        .action(async (name) => {
+        if (name) {
+            const plugin = _findPlugin(name);
+            await plugin._client?.run();
+            return;
+        }
+        for (const plugin of plugins.values())
+            await plugin._client?.run();
+    });
+    axiumPlugin = program.command('plugin').alias('plugins').description('Manage plugins');
+    axiumPlugin
+        .command('list')
+        .alias('ls')
+        .description('List loaded plugins')
+        .option('-l, --long', 'use the long listing format')
+        .option('--no-versions', 'do not show plugin versions')
+        .action((opt) => {
+        if (!plugins.size) {
+            console.log('No plugins loaded.');
+            return;
+        }
+        if (!opt.long) {
+            console.log(Array.from(plugins.keys()).join(', '));
+            return;
+        }
+        console.log(styleText('whiteBright', plugins.size + ' plugin(s) loaded:'));
+        for (const plugin of plugins.values()) {
+            console.log(plugin.name, opt.versions ? plugin.version : '');
+        }
+    });
+    axiumPlugin
+        .command('info')
+        .description('Get information about a plugin')
+        .argument('<plugin>', 'the plugin to get information about')
+        .action((search) => {
+        const plugin = _findPlugin(search);
+        for (const line of pluginText(plugin))
+            console.log(line);
+    });
+    axiumPlugin
+        .command('remove')
+        .alias('rm')
+        .description('Remove a plugin')
+        .argument('<plugin>', 'the plugin to remove')
+        .action((search) => {
+        const plugin = _findPlugin(search);
+        config.plugins = config.plugins.filter(p => p !== plugin.specifier);
+        plugins.delete(plugin.name);
+        saveConfig();
+    });
+    await program.parseAsync();
+}
+catch (e_1) {
+    env_1.error = e_1;
+    env_1.hasError = true;
+}
+finally {
+    __disposeResources(env_1);
+}

package/dist/config.d.ts

@@ -0,0 +1,37 @@
+import * as z from 'zod';
+export declare const ClientConfig: z.ZodObject<{
+    token: z.ZodOptional<z.ZodNullable<z.ZodBase64>>;
+    server: z.ZodOptional<z.ZodNullable<z.ZodURL>>;
+    cache: z.ZodOptional<z.ZodNullable<z.ZodObject<{
+        fetched: z.ZodInt;
+        session: z.ZodObject<{
+            id: z.ZodUUID;
+            userId: z.ZodUUID;
+            expires: z.ZodCoercedDate<unknown>;
+            created: z.ZodCoercedDate<unknown>;
+            elevated: z.ZodBoolean;
+            user: z.ZodObject<{
+                id: z.ZodUUID;
+                name: z.ZodString;
+                email: z.ZodEmail;
+                emailVerified: z.ZodOptional<z.ZodNullable<z.ZodDate>>;
+                image: z.ZodOptional<z.ZodNullable<z.ZodURL>>;
+                preferences: z.ZodRecord<z.ZodString, z.ZodAny>;
+                roles: z.ZodArray<z.ZodString>;
+                registeredAt: z.ZodCoercedDate<unknown>;
+                isAdmin: z.ZodBoolean;
+            }, z.core.$strip>;
+        }, z.core.$strip>;
+        apps: z.ZodArray<z.ZodObject<{
+            id: z.ZodString;
+            name: z.ZodOptional<z.ZodString>;
+            image: z.ZodOptional<z.ZodString>;
+            icon: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+    }, z.core.$loose>>>;
+    plugins: z.ZodDefault<z.ZodArray<z.ZodString>>;
+}, z.core.$loose>;
+export interface ClientConfig extends z.infer<typeof ClientConfig> {
+}
+export declare const config: ClientConfig;
+export declare function resolveServerURL(server: string): string;

package/dist/config.js

@@ -0,0 +1,33 @@
+import { debug, warn } from '@axium/core/io';
+import { App, Session, User } from '@axium/core';
+import * as z from 'zod';
+export const ClientConfig = z.looseObject({
+    token: z.base64().nullish(),
+    server: z.url().nullish(),
+    // Cache to reduce server load:
+    cache: z
+        .looseObject({
+        fetched: z.int(),
+        session: Session.extend({ user: User }),
+        apps: App.array(),
+    })
+        .nullish(),
+    plugins: z.string().array().default([]),
+});
+export const config = {
+    plugins: [],
+};
+export function resolveServerURL(server) {
+    if (!server.startsWith('http://') && !server.startsWith('https://'))
+        server = 'https://' + server;
+    const url = new URL(server);
+    if (url.pathname.endsWith('/api'))
+        url.pathname += '/';
+    else if (url.pathname.at(-1) == '/' && !url.pathname.endsWith('/api/'))
+        url.pathname += 'api/';
+    if (url.pathname != '/api/')
+        warn('Resolved server URL is not at the top level: ' + url.href);
+    else
+        debug('Resolved server URL: ' + url.href);
+    return url.href;
+}

package/dist/requests.js

@@ -16,6 +16,9 @@ export async function fetchAPI(method, endpoint, data, ...params) {
     };
     if (method !== 'GET' && method !== 'HEAD')
         options.body = JSON.stringify(data);
+    const search = method != 'GET' || typeof data != 'object' || data == null || !Object.keys(data).length
+        ? ''
+        : '?' + new URLSearchParams(data).toString();
     if (token)
         options.headers.Authorization = 'Bearer ' + token;
     const parts = [];
@@ -29,7 +32,7 @@ export async function fetchAPI(method, endpoint, data, ...params) {
             throw new Error(`Missing parameter "${part.slice(1)}"`);
         parts.push(value);
     }
-    const response = await fetch(prefix + parts.join('/'), options);
+    const response = await fetch(prefix + parts.join('/') + search, options);
     if (!response.headers.get('Content-Type')?.includes('application/json')) {
         throw new Error(`Unexpected response type: ${response.headers.get('Content-Type')}`);
     }

package/dist/user.d.ts

@@ -13,7 +13,7 @@ export declare function getSessions(userId: string): Promise<Session[]>;
 export declare function logout(userId: string, ...sessionId: string[]): Promise<Session[]>;
 export declare function logoutAll(userId: string): Promise<Session[]>;
 export declare function logoutCurrentSession(): Promise<Session>;
-export declare function register(_data: Record<string, FormDataEntryValue>): Promise<void>;
+export declare function register(_data: Record<string, unknown>): Promise<void>;
 export declare function userInfo(userId: string): Promise<UserPublic & Partial<User>>;
 export declare function updateUser(userId: string, data: Record<string, FormDataEntryValue>): Promise<User>;
 export declare function fullUserInfo(userId: string): Promise<User & {

package/lib/AccessControlDialog.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import FormDialog from './FormDialog.svelte';
+	import type { User } from '@axium/core';
 	import { permissionNames, type AccessControllable } from '@axium/core/access';
 	import type { Entries } from 'utilium';
+	import FormDialog from './FormDialog.svelte';
 	import UserCard from './UserCard.svelte';
-	import type { Permission, AccessControl } from '@axium/core/access';
-	import type { User } from '@axium/core';
 
 	let {
 		item = $bindable(),

package/lib/FormDialog.svelte

@@ -1,14 +1,6 @@
 <script lang="ts">
 	import Dialog from './Dialog.svelte';
 
-	function resolveRedirectAfter() {
-		const url = new URL(location.href);
-		const maybe = url.searchParams.get('after');
-		if (!maybe || maybe == url.pathname) return '/';
-		for (const prefix of ['/api/']) if (maybe.startsWith(prefix)) return '/';
-		return maybe || '/';
-	}
-
 	let {
 		children,
 		dialog = $bindable(),
@@ -52,8 +44,7 @@
 		const data = Object.fromEntries(new FormData(e.currentTarget));
 		submit(data)
 			.then(result => {
-				if (pageMode) window.location.href = resolveRedirectAfter();
-				else dialog!.close();
+				if (!pageMode) dialog!.close();
 			})
 			.catch((e: any) => {
 				if (!e) error = 'An unknown error occurred';

package/lib/Login.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
 	import { loginByEmail } from '@axium/client/user';
 	import FormDialog from './FormDialog.svelte';
+	import redirectAfter from './auth_redirect.js';
 
 	let { dialog = $bindable(), fullPage = false }: { dialog?: HTMLDialogElement; fullPage?: boolean } = $props();
 
-	function submit(data: { email: string }) {
+	async function submit(data: { email: string }) {
 		if (typeof data.email != 'string') {
 			throw 'Tried to upload a file for an email. Huh?!';
 		}
 
-		return loginByEmail(data.email);
+		await loginByEmail(data.email);
+		if (fullPage && redirectAfter) location.href = redirectAfter;
 	}
 </script>
 

package/lib/NumberBar.svelte

@@ -3,7 +3,9 @@
 </script>
 
 <div class="Bar">
-	<div class="fill" style="width: {((value - min) / (max - min)) * 100}%"></div>
+	{#if max}
+		<div class="fill" style="width: {((value - min) / (max - min)) * 100}%"></div>
+	{/if}
 	{#if text}<span class="text">{text}</span>{/if}
 </div>
 

package/lib/Register.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
 	import { register } from '@axium/client/user';
 	import FormDialog from './FormDialog.svelte';
+	import redirectAfter from './auth_redirect.js';
 
 	let { dialog = $bindable(), fullPage = false }: { dialog?: HTMLDialogElement; fullPage?: boolean } = $props();
+
+	async function submit(data: Record<string, FormDataEntryValue>) {
+		await register(data);
+		if (fullPage && redirectAfter) location.href = redirectAfter;
+	}
 </script>
 
-<FormDialog bind:dialog submitText="Register" submit={register} pageMode={fullPage}>
+<FormDialog bind:dialog submitText="Register" {submit} pageMode={fullPage}>
 	<div>
 		<label for="name">Display Name</label>
 		<input name="name" type="text" required />

package/lib/SessionList.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { logout, logoutAll } from '@axium/client/user';
+	import type { Session, User } from '@axium/core';
+	import FormDialog from './FormDialog.svelte';
+	import Icon from './Icon.svelte';
+
+	let {
+		sessions = $bindable(),
+		currentSession,
+		user,
+		redirectAfterLogoutAll = false,
+	}: { sessions: Session[]; currentSession?: Session; user: User; redirectAfterLogoutAll?: boolean } = $props();
+
+	const dialogs = $state<Record<string, HTMLDialogElement>>({});
+</script>
+
+{#each sessions as session}
+	<div class="item session">
+		<p>
+			{session.id.slice(0, 4)}...{session.id.slice(-4)}
+			{#if session.id == currentSession?.id}
+				<span class="current">Current</span>
+			{/if}
+			{#if session.elevated}
+				<span class="elevated">Elevated</span>
+			{/if}
+		</p>
+		<p>Created {session.created.toLocaleString()}</p>
+		<p>Expires {session.expires.toLocaleString()}</p>
+		<button style:display="contents" onclick={() => dialogs['logout#' + session.id].showModal()}>
+			<Icon i="right-from-bracket" --size="16px" />
+		</button>
+	</div>
+	<FormDialog
+		bind:dialog={dialogs['logout#' + session.id]}
+		submit={async () => {
+			await logout(user.id, session.id);
+			dialogs['logout#' + session.id].remove();
+			sessions.splice(sessions.indexOf(session), 1);
+			if (session.id == currentSession?.id) window.location.href = '/';
+		}}
+		submitText="Logout"
+	>
+		<p>Are you sure you want to log out this session?</p>
+	</FormDialog>
+{/each}
+<span>
+	<button onclick={() => dialogs.logout_all.showModal()} class="danger">Logout All</button>
+</span>
+<FormDialog
+	bind:dialog={dialogs.logout_all}
+	submit={() => logoutAll(user.id).then(() => (redirectAfterLogoutAll ? (window.location.href = '/') : null))}
+	submitText="Logout All Sessions"
+	submitDanger
+>
+	<p>Are you sure you want to log out all sessions?</p>
+</FormDialog>

package/lib/UserMenu.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { User } from '@axium/core/user';
+	import { getUserImage } from '@axium/core';
+	import { fetchAPI } from '@axium/client/requests';
+	import Icon from './Icon.svelte';
+	import Popover from './Popover.svelte';
+	import Logout from './Logout.svelte';
+
+	const { user }: { user: Partial<User> } = $props();
+
+	let logout = $state<HTMLDialogElement>()!;
+</script>
+
+<Popover>
+	{#snippet toggle()}
+		<div style:display="contents">
+			<img src={getUserImage(user)} alt={user.name} />
+			{user.name}
+		</div>
+	{/snippet}
+
+	<a class="menu-item" href="/account">
+		<Icon i="user" --size="1.5em" />
+		<span>Your Account</span>
+	</a>
+
+	{#if user.isAdmin}
+		<a class="menu-item" href="/admin">
+			<Icon i="gear-complex" --size="1.5em" />
+			<span>Administration</span>
+		</a>
+	{/if}
+
+	{#await fetchAPI('GET', 'apps')}
+		<i>Loading...</i>
+	{:then apps}
+		{#each apps as app}
+			<a class="menu-item" href="/{app.id}">
+				{#if app.image}
+					<img src={app.image} alt={app.name} width="1em" height="1em" />
+				{:else if app.icon}
+					<Icon i={app.icon} --size="1.5em" />
+				{:else}
+					<Icon i="image-circle-xmark" --size="1.5em" />
+				{/if}
+				<span>{app.name}</span>
+			</a>
+		{:else}
+			<i>No apps available.</i>
+		{/each}
+	{:catch}
+		<i>Couldn't load apps.</i>
+	{/await}
+
+	<span class="menu-item logout" onclick={() => logout.showModal()}>
+		<Icon i="right-from-bracket" --size="1.5em" --fill="hsl(0 33 var(--fg-light))" />
+		<span>Logout</span>
+	</span>
+</Popover>
+
+<Logout bind:dialog={logout} />
+
+<style>
+	img {
+		width: 2em;
+		height: 2em;
+		border-radius: 50%;
+		vertical-align: middle;
+		margin-right: 0.5em;
+	}
+
+	span.logout > span {
+		color: hsl(0 33 var(--fg-light));
+	}
+</style>

package/lib/auth_redirect.ts

@@ -0,0 +1,28 @@
+import { getCurrentSession } from '@axium/client/user';
+
+function resolveRedirect(): string | false {
+	const url = new URL(location.href);
+	const maybe = url.searchParams.get('after');
+	if (!['/login', '/register'].includes(url.pathname)) return false;
+	if (!maybe || maybe == url.pathname) return '/';
+
+	if (maybe[0] != '/' || maybe[1] == '/') {
+		console.error('Ignoring potentially malicious redirect:', maybe);
+		return false;
+	}
+
+	const redirect = new URL(maybe, location.origin);
+
+	return redirect.pathname + redirect.search || '/';
+}
+
+const redirect = resolveRedirect();
+
+try {
+	if (!redirect) throw 'No redirect';
+	// Auto-redirect if already logged in.
+	const session = await getCurrentSession();
+	if (session) location.href = redirect;
+} catch {}
+
+export default redirect;

package/lib/index.ts

@@ -11,7 +11,9 @@ export { default as Popover } from './Popover.svelte';
 export { default as Preference } from './Preference.svelte';
 export { default as Preferences } from './Preferences.svelte';
 export { default as Register } from './Register.svelte';
+export { default as SessionList } from './SessionList.svelte';
 export { default as Toast } from './Toast.svelte';
 export { default as Upload } from './Upload.svelte';
 export { default as UserCard } from './UserCard.svelte';
+export { default as UserMenu } from './UserMenu.svelte';
 export { default as WithContextMenu } from './WithContextMenu.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.4.9",
+	"version": "0.6.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -15,25 +15,32 @@
 	"bugs": {
 		"url": "https://github.com/james-pre/axium/issues"
 	},
+	"bin": {
+		"axium-client": "dist/cli/index.js",
+		"axc": "dist/cli/index.js"
+	},
 	"type": "module",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"files": [
 		"assets",
 		"dist",
-		"lib"
+		"lib",
+		"styles",
+		"axium-client.service"
 	],
 	"exports": {
 		".": "./dist/index.js",
 		"./*": "./dist/*.js",
 		"./components": "./lib/index.js",
-		"./components/*": "./lib/*.svelte"
+		"./components/*": "./lib/*.svelte",
+		"./styles/*": "./styles/*.css"
 	},
 	"scripts": {
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/core": ">=0.6.0",
+		"@axium/core": ">=0.9.0",
 		"utilium": "^2.3.8",
 		"zod": "^4.0.5",
 		"svelte": "^5.36.0"

package/styles/account.css

@@ -0,0 +1,57 @@
+.section {
+	width: 50%;
+	padding-top: 4em;
+
+	/* This is causing duplicate separators when removing sessions/passkeys
+		> div:has(+ div) {
+			border-bottom: 1px solid #8888;
+		}
+		*/
+}
+
+.section .item {
+	display: grid;
+	align-items: center;
+	width: 100%;
+	gap: 1em;
+	text-wrap: nowrap;
+	border-top: 1px solid #8888;
+	padding-bottom: 1em;
+}
+
+.info {
+	grid-template-columns: 10em 1fr 2em;
+
+	> :first-child {
+		margin-left: 1em;
+	}
+
+	> :nth-child(2) {
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+}
+
+.passkey {
+	grid-template-columns: 1em 1em 1fr 1fr 1em 1em;
+
+	dfn:not(.disabled) {
+		cursor: help;
+	}
+}
+
+.session {
+	grid-template-columns: 1fr 1fr 1fr 1em;
+
+	.current {
+		border-radius: 2em;
+		padding: 0 0.5em;
+		background-color: #337;
+	}
+
+	.elevated {
+		border-radius: 2em;
+		padding: 0 0.5em;
+		background-color: #733;
+	}
+}

package/styles/list.css

@@ -0,0 +1,61 @@
+.list-container {
+	overflow-x: hidden;
+	overflow-y: scroll;
+
+	.list {
+		height: 100%;
+	}
+}
+
+.list {
+	display: flex;
+	flex-direction: column;
+	padding: 0.5em;
+}
+
+.list-header {
+	font-weight: bold;
+	border-bottom: 1.5px solid var(--fg-accent);
+	position: sticky;
+	top: 0em;
+}
+
+.list-item-container {
+	text-decoration: none;
+	color: inherit;
+}
+
+.list-item {
+	display: grid;
+	grid-template-columns: 1em 4fr 15em 5em repeat(3, 1em);
+	align-items: center;
+	gap: 1em;
+	padding: 0.5em;
+	overflow: hidden;
+	text-wrap: nowrap;
+}
+
+.list-item:not(.list-header, :first-child) {
+	border-top: 1px solid var(--fg-accent);
+}
+
+.list-item:not(.list-header):hover {
+	background-color: var(--bg-alt);
+	cursor: pointer;
+}
+
+p.list-empty {
+	text-align: center;
+	color: #888;
+	margin-top: 1em;
+	font-style: italic;
+}
+
+.list-item .action {
+	visibility: hidden;
+}
+
+.list-item:hover .action {
+	visibility: visible;
+	cursor: pointer;
+}