@axium/server 0.7.6 → 0.9.0

package/web/lib/Dialog.svelte

@@ -1,12 +1,9 @@
 <script>
-	let { show, children, onclose = () => (show = false), ...rest } = $props();
-
-	let dialog = $state();
-	$effect(() => show && dialog.showModal());
-	$effect(() => !show && dialog.close());
+	let { children, dialog = $bindable(), ...rest } = $props();
+	import './styles.css';
 </script>
 
-<dialog bind:this={dialog} {onclose} {...rest}>
+<dialog bind:this={dialog} {...rest}>
 	{@render children()}
 </dialog>
 

package/web/lib/FormDialog.svelte

@@ -1,35 +1,82 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
 	import Dialog from './Dialog.svelte';
 	import './styles.css';
 
-	let { children, active = $bindable(null), form, submitText = 'Submit', oncancel = () => {}, action = '', pageMode = false, ...rest } = $props();
+	function resolveRedirectAfter() {
+		const maybe = page.url.searchParams.get('after');
+		if (!maybe || maybe == page.url.pathname) return '/';
+		for (const prefix of ['/api/']) if (maybe.startsWith(prefix)) return '/';
+		return maybe || '/';
+	}
+
+	let {
+		children,
+		dialog = $bindable(),
+		submitText = 'Submit',
+		cancel = () => {},
+		submit = (data: object): Promise<any> => Promise.resolve(),
+		pageMode = false,
+		submitDanger = false,
+		...rest
+	}: {
+		children(): any;
+		dialog?: HTMLDialogElement;
+		/** Change the text displayed for the submit button */
+		submitText?: string;
+		/** Basically a callback for when the dialog is canceled */
+		cancel?(): unknown;
+		/** Called on submission, this should do the actual submission */
+		submit?(data: Record<string, FormDataEntryValue>): Promise<any>;
+		/** Whether to display the dialog as a full-page form */
+		pageMode?: boolean;
+		submitDanger?: boolean;
+	} = $props();
+
+	let error = $state(null);
 
 	$effect(() => {
-		if (form?.success) active = null;
+		if (pageMode) dialog.showModal();
 	});
 
-	const show = $derived(!!active || pageMode);
+	function onclose(e?: MouseEvent) {
+		e.preventDefault();
+		cancel();
+	}
 
-	function onclick(e: MouseEvent) {
+	function onsubmit(e: SubmitEvent & { currentTarget: HTMLFormElement }) {
 		e.preventDefault();
-		active = null;
-		oncancel(e);
+		const data = Object.fromEntries(new FormData(e.currentTarget));
+		submit(data)
+			.then(result => {
+				if (pageMode) goto(resolveRedirectAfter());
+				else dialog.close();
+			})
+			.catch((e: unknown) => {
+				if (!e) error = 'An unknown error occurred';
+				else if (typeof e == 'object' && 'message' in e) error = e.message;
+				else error = e;
+			});
 	}
 </script>
 
-<Dialog {show} onclose={() => (active = null)}>
-	<form method="POST" {action} use:enhance class="main" {...rest}>
-		{#if form?.error}
-			<div class="error">{form.error}</div>
+{#snippet submitButton()}
+	<button type="submit" class={['submit', submitDanger && 'danger']}>{submitText}</button>
+{/snippet}
+
+<Dialog bind:dialog {onclose} {...rest}>
+	<form {onsubmit} class="main" method="dialog">
+		{#if error}
+			<div class="error">{error}</div>
 		{/if}
 		{@render children()}
 		{#if pageMode}
-			<button type="submit" class="submit">{submitText}</button>
+			{@render submitButton()}
 		{:else}
 			<div class="actions">
-				<button type="button" {onclick}>Cancel</button>
-				<button type="submit" class="submit">{submitText}</button>
+				<button type="button" onclick={() => dialog.close()}>Cancel</button>
+				{@render submitButton()}
 			</div>
 		{/if}
 	</form>

package/web/lib/Toast.svelte

@@ -9,7 +9,14 @@
 </script>
 
 {#if show}
-	<div class="Toast" in:fade|global={{ duration }} onintroend={() => (hiding = true)} out:fade|global={{ delay, duration }} onoutroend={() => (hiding = false)} {...rest}>
+	<div
+		class="Toast"
+		in:fade|global={{ duration }}
+		onintroend={() => (hiding = true)}
+		out:fade|global={{ delay, duration }}
+		onoutroend={() => (hiding = false)}
+		{...rest}
+	>
 		{@render children()}
 	</div>
 {/if}

package/web/lib/UserCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { User } from '@axium/core/schemas';
+	import type { User } from '@axium/core/user';
 	import { getUserImage } from '@axium/core';
 
 	const {

package/web/lib/auth.ts

@@ -0,0 +1,12 @@
+import type { SessionInternal, UserInternal } from '@axium/server/auth';
+import { getSessionAndUser } from '@axium/server/auth';
+import type { RequestEvent } from '@sveltejs/kit';
+
+export async function authenticate(event: RequestEvent): Promise<(SessionInternal & { user: UserInternal | null }) | null> {
+	const maybe_header = event.request.headers.get('Authorization');
+	const token = maybe_header?.startsWith('Bearer ') ? maybe_header.slice(7) : event.cookies.get('session_token');
+
+	if (!token) return null;
+
+	return await getSessionAndUser(token).catch(() => null);
+}

package/web/lib/icons/Icon.svelte

@@ -5,25 +5,19 @@
 	const urls = { light, solid, regular };
 	const { i } = $props();
 
-	const [style, id] = i.includes('/') ? i.split('/') : ['solid', i];
-	const url = urls[style];
+	const [style, id] = $derived(i.includes('/') ? i.split('/') : ['solid', i]);
+	const url = $derived(urls[style]);
 </script>
 
-<svelte:head>
-	<link rel="preload" href={url} />
-</svelte:head>
-
-<span>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
-		<use href="{url}#{id}" />
-	</svg>
-</span>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
+	<use href="{url}#{id}" />
+</svg>
 
 <style>
-	span {
+	svg {
 		width: var(--size, 1em);
 		height: var(--size, 1em);
 		display: inline-block;
-		fill: #bbb;
+		fill: var(--fill, #bbb);
 	}
 </style>

package/web/lib/index.ts

@@ -1,7 +1,5 @@
-export { default as Account } from './Account.svelte';
 export { default as Dialog } from './Dialog.svelte';
 export { default as FormDialog } from './FormDialog.svelte';
 export * from './icons/index.js';
-export { default as SignUp } from './SignUp.svelte';
 export { default as Toast } from './Toast.svelte';
 export { default as UserCard } from './UserCard.svelte';

package/web/lib/styles.css

@@ -4,6 +4,7 @@ body {
 	background-color: #222;
 	color: #bbb;
 	accent-color: #bbb;
+	overflow-y: scroll;
 }
 
 .main {
@@ -15,7 +16,7 @@ body {
 	gap: 1em;
 }
 
-div:has(form.main) {
+.main-container:has(form.main) {
 	position: absolute;
 	inset: 0;
 	display: flex;
@@ -83,3 +84,19 @@ button:hover {
 	gap: 1em;
 	overflow-y: scroll;
 }
+
+.danger {
+	border: 1px solid #d99;
+	background-color: #322;
+	color: #dbb;
+	accent-color: #dbb;
+}
+
+.danger:hover {
+	background-color: #633;
+}
+
+:disabled,
+.disabled {
+	cursor: not-allowed;
+}

package/web/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import '../lib/styles.css';
+	import '$lib/styles.css';
 	const { children } = $props();
 </script>
 

package/web/routes/[...path]/+page.server.ts

@@ -0,0 +1,13 @@
+import { error, redirect, type LoadEvent } from '@sveltejs/kit';
+import { resolveRoute } from '@axium/server/routes';
+
+export async function load(event: LoadEvent) {
+	const route = resolveRoute(event);
+
+	if (!route && event.url.pathname === '/') redirect(303, '/_axium/default');
+	if (!route) error(404);
+
+	if (route.server == true) error(409, 'This is a server route, not a page route');
+
+	return await route.load(event);
+}

package/web/routes/[appId]/[...page]/+page.server.ts

@@ -0,0 +1,14 @@
+import { error, type LoadEvent } from '@sveltejs/kit';
+import { apps } from '@axium/server/apps';
+
+export async function load(event: LoadEvent) {
+	const app = apps.get(event.params.appId);
+
+	if (!app) error(404);
+
+	const route = app.resolveRoute(event);
+
+	if (!route) error(404);
+
+	return await route.load(event);
+}

package/web/routes/_axium/default/+page.svelte

@@ -0,0 +1,11 @@
+<div class="main">
+	<h1>It works!</h1>
+	<p>This is the default Axium page. You'll want to change it.</p>
+	<h3>Helpful links</h3>
+	<ul>
+		<li><a href="/register">Register</a></li>
+		<li><a href="/login">Login</a></li>
+		<li><a href="/logout">Logout</a></li>
+		<li><a href="/account">Account</a></li>
+	</ul>
+</div>

package/web/routes/account/+page.svelte

@@ -0,0 +1,291 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import ClipboardCopy from '$lib/ClipboardCopy.svelte';
+	import FormDialog from '$lib/FormDialog.svelte';
+	import Icon from '$lib/icons/Icon.svelte';
+	import {
+		createPasskey,
+		deletePasskey,
+		deleteUser,
+		emailVerificationEnabled,
+		getCurrentSession,
+		getPasskeys,
+		getSessions,
+		logout,
+		logoutAll,
+		sendVerificationEmail,
+		updatePasskey,
+		updateUser,
+	} from '@axium/client/user';
+	import type { Passkey, Session } from '@axium/core/api';
+	import { getUserImage, type User } from '@axium/core/user';
+
+	const dialogs = $state<Record<string, HTMLDialogElement>>({});
+
+	let verificationSent = $state(false);
+	let currentSession = $state<Session & { user: User }>();
+	let user = $state<User>();
+	let canVerify = $state(false);
+	let passkeys = $state<Passkey[]>([]);
+	let sessions = $state<Session[]>([]);
+
+	async function ready() {
+		currentSession = await getCurrentSession().catch(() => {
+			goto('/login?after=/account');
+			return null;
+		})!;
+		user = currentSession.user;
+
+		passkeys = await getPasskeys(user.id);
+
+		sessions = await getSessions(user.id);
+
+		canVerify = await emailVerificationEnabled(user.id);
+	}
+
+	async function _editUser(data) {
+		const result = await updateUser(user.id, data);
+		user = result;
+	}
+</script>
+
+<svelte:head>
+	<title>Account</title>
+</svelte:head>
+
+{#snippet action(name: string, i: string = 'pen')}
+	<button style:display="contents" onclick={() => dialogs[name].showModal()}>
+		<Icon {i} --size="16px" />
+	</button>
+{/snippet}
+
+{#await ready() then}
+	<div class="Account flex-content">
+		<img class="pfp" src={getUserImage(user)} alt="User profile" />
+		<p class="greeting">Welcome, {user.name}</p>
+
+		<div class="section main">
+			<h3>Personal Information</h3>
+			<div class="item info">
+				<p class="subtle">Name</p>
+				<p>{user.name}</p>
+				{@render action('edit_name')}
+			</div>
+			<FormDialog bind:dialog={dialogs.edit_name} submit={_editUser} submitText="Change">
+				<div>
+					<label for="name">What do you want to be called?</label>
+					<input name="name" type="text" value={user.name || ''} required />
+				</div>
+			</FormDialog>
+			<div class="item info">
+				<p class="subtle">Email</p>
+				<p>
+					{user.email}
+					{#if user.emailVerified}
+						<dfn title="Email verified on {user.emailVerified.toLocaleDateString()}">
+							<Icon i="regular/circle-check" />
+						</dfn>
+					{:else if canVerify}
+						<button onclick={() => sendVerificationEmail(user.id).then(() => (verificationSent = true))}>
+							{verificationSent ? 'Verification email sent' : 'Verify'}
+						</button>
+					{/if}
+				</p>
+				{@render action('edit_email')}
+			</div>
+			<FormDialog bind:dialog={dialogs.edit_email} submit={_editUser} submitText="Change">
+				<div>
+					<label for="email">Email Address</label>
+					<input name="email" type="email" value={user.email || ''} required />
+				</div>
+			</FormDialog>
+
+			<div class="item info">
+				<p class="subtle">User ID <dfn title="This is your UUID. It can't be changed."><Icon i="regular/circle-info" /></dfn></p>
+				<p>{user.id}</p>
+				<ClipboardCopy value={user.id} --size="16px" />
+			</div>
+			<span>
+				<a class="signout" href="/logout"><button>Sign out</button></a>
+				<button style:cursor="pointer" onclick={() => dialogs.delete.showModal()} class="danger">Delete Account</button>
+				<FormDialog
+					bind:dialog={dialogs.delete}
+					submit={() => deleteUser(user.id).then(() => goto('/'))}
+					submitText="Delete Account"
+					submitDanger
+				>
+					<p>Are you sure you want to delete your account?<br />This action can't be undone.</p>
+				</FormDialog>
+			</span>
+		</div>
+
+		<div class="section main">
+			<h3>Passkeys</h3>
+			{#each passkeys as passkey}
+				<div class="item passkey">
+					<dfn title={passkey.deviceType == 'multiDevice' ? 'Multiple devices' : 'Single device'}>
+						<Icon i={passkey.deviceType == 'multiDevice' ? 'laptop-mobile' : 'mobile'} --size="16px" />
+					</dfn>
+					<dfn title="This passkey is {passkey.backedUp ? '' : 'not '}backed up">
+						<Icon i={passkey.backedUp ? 'circle-check' : 'circle-xmark'} --size="16px" />
+					</dfn>
+					{#if passkey.name}
+						<p>{passkey.name}</p>
+					{:else}
+						<p class="subtle"><i>Unnamed</i></p>
+					{/if}
+					<p>Created {passkey.createdAt.toLocaleString()}</p>
+					{@render action('edit_passkey#' + passkey.id)}
+					{#if passkeys.length > 1}
+						{@render action('delete_passkey#' + passkey.id, 'trash')}
+					{:else}
+						<dfn title="You must have at least one passkey" class="disabled">
+							<Icon i="trash-slash" --fill="#888" --size="16px" />
+						</dfn>
+					{/if}
+				</div>
+				<FormDialog
+					bind:dialog={dialogs['edit_passkey#' + passkey.id]}
+					submit={data => {
+						if (typeof data.name != 'string') throw 'Passkey name must be a string';
+						passkey.name = data.name;
+						return updatePasskey(passkey.id, data);
+					}}
+					submitText="Change"
+				>
+					<div>
+						<label for="name">Passkey Name</label>
+						<input name="name" type="text" value={passkey.name || ''} />
+					</div>
+				</FormDialog>
+				<FormDialog
+					bind:dialog={dialogs['delete_passkey#' + passkey.id]}
+					submit={() => deletePasskey(passkey.id).then(() => passkeys.splice(passkeys.indexOf(passkey), 1))}
+					submitText="Delete"
+					submitDanger={true}
+				>
+					<p>Are you sure you want to delete this passkey?<br />This action can't be undone.</p>
+				</FormDialog>
+			{/each}
+			<span>
+				<button onclick={() => createPasskey(user.id).then(passkeys.push.bind(passkeys))}><Icon i="plus" /> Create</button>
+			</span>
+		</div>
+
+		<div class="section main">
+			<h3>Sessions</h3>
+			{#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>
+					{@render action('logout#' + session.id, 'right-from-bracket')}
+				</div>
+				<FormDialog
+					bind:dialog={dialogs['logout#' + session.id]}
+					submit={() =>
+						logout(user.id, session.id).then(() => {
+							if (session.id == currentSession.id) goto('/');
+							else sessions.splice(sessions.indexOf(session), 1);
+						})}
+					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(() => goto('/'))}
+				submitText="Logout All Sessions"
+				submitDanger
+			>
+				<p>Are you sure you want to log out all sessions?</p>
+			</FormDialog>
+		</div>
+	</div>
+{:catch error}
+	<div class="error">
+		<h3>Failed to load account</h3>
+		<p>{'message' in error ? error.message : error}</p>
+	</div>
+{/await}
+
+<style>
+	.pfp {
+		width: 100px;
+		height: 100px;
+		border-radius: 50%;
+		border: 1px solid #8888;
+		margin-top: 3em;
+	}
+
+	.greeting {
+		font-size: 2em;
+	}
+
+	.signout {
+		margin-top: 2em;
+	}
+
+	.section {
+		width: 50%;
+		padding-top: 4em;
+
+		> 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;
+		}
+	}
+
+	.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;
+		}
+	}
+</style>

package/web/routes/api/[...path]/+server.ts

@@ -0,0 +1,49 @@
+import type { RequestMethod } from '@axium/core/requests';
+import { resolveRoute } from '@axium/server/routes';
+import { config } from '@axium/server/config';
+import { error, json, type RequestEvent, type RequestHandler } from '@sveltejs/kit';
+import z from 'zod/v4';
+
+function handler(method: RequestMethod): RequestHandler {
+	return async function (event: RequestEvent): Promise<Response> {
+		const _warnings: string[] = [];
+		if (!event.request.headers.get('Accept')?.includes('application/json')) {
+			_warnings.push('Only application/json is supported');
+			event.request.headers.set('Accept', 'application/json');
+		}
+
+		const route = resolveRoute(event);
+
+		if (!route) error(404, 'Route not found');
+		if (!route.server) error(503, 'Route is not a server route');
+
+		if (config.debug) console.log(event.request.method, route.path);
+
+		for (const [key, type] of Object.entries(route.params || {})) {
+			if (!type) continue;
+
+			try {
+				event.params[key] = type.parse(event.params[key]) as any;
+			} catch (e: any) {
+				error(400, `Invalid parameter: ${z.prettifyError(e)}`);
+			}
+		}
+
+		if (typeof route[method] != 'function') error(405, `Method ${method} not allowed for ${route.path}`);
+
+		const result: object & { _warnings?: string[] } = await route[method](event);
+
+		result._warnings ||= [];
+		result._warnings.push(..._warnings);
+
+		return json(result);
+	};
+}
+
+export const HEAD = handler('HEAD');
+export const GET = handler('GET');
+export const POST = handler('POST');
+export const PUT = handler('PUT');
+export const DELETE = handler('DELETE');
+export const PATCH = handler('PATCH');
+export const OPTIONS = handler('OPTIONS');

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import FormDialog from '$lib/FormDialog.svelte';
+	import { loginByEmail } from '@axium/client/user';
+
+	let { dialog = $bindable(), pageMode = true } = $props();
+
+	function submit(data) {
+		if (typeof data.email != 'string') {
+			throw 'Tried to upload a file for an email. Huh?!';
+		}
+
+		return loginByEmail(data.email);
+	}
+</script>
+
+<svelte:head>
+	<title>Login</title>
+</svelte:head>
+
+<FormDialog bind:dialog submitText="Login" {submit} {pageMode}>
+	<div>
+		<label for="email">Email</label>
+		<input name="email" type="email" required />
+	</div>
+</FormDialog>

package/web/routes/logout/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { logoutCurrentSession } from '@axium/client/user';
+</script>
+
+<svelte:head>
+	<title>Logout</title>
+</svelte:head>
+
+<div class="main">
+	<p>Are you sure you want to log out?</p>
+	<button onclick={() => logoutCurrentSession().finally(() => goto('/'))}>Log Out</button>
+</div>