@axium/server 0.7.6 → 0.8.0

package/web/lib/FormDialog.svelte

@@ -1,35 +1,74 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
 	import Dialog from './Dialog.svelte';
 	import './styles.css';
 
-	let { children, active = $bindable(null), form, submitText = 'Submit', oncancel = () => {}, action = '', pageMode = false, ...rest } = $props();
+	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('/');
+				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.js';
+import { getSessionAndUser } from '@axium/server/auth.js';
+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

@@ -13,17 +13,15 @@
 	<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

@@ -15,7 +15,7 @@ body {
 	gap: 1em;
 }
 
-div:has(form.main) {
+div:not(.main):has(form.main) {
 	position: absolute;
 	inset: 0;
 	display: flex;
@@ -83,3 +83,14 @@ 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;
+}

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.js';
+
+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.js';
+
+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,224 @@
+<script lang="ts">
+	import FormDialog from '$lib/FormDialog.svelte';
+	import Icon from '$lib/icons/Icon.svelte';
+	import {
+		currentSession,
+		deletePasskey,
+		getPasskeys,
+		sendVerificationEmail,
+		updatePasskey,
+		updateUser,
+		createPasskey,
+		deleteUser,
+	} from '@axium/client/user';
+	import type { Passkey } from '@axium/core/api';
+	import { getUserImage, type User } from '@axium/core/user';
+
+	const dialogs = $state<Record<string, HTMLDialogElement>>({});
+
+	let verificationSent = $state(false);
+	let user = $state<User>();
+
+	async function ready() {
+		const session = await currentSession();
+		user = session.user;
+
+		passkeys = await getPasskeys(user.id);
+	}
+
+	let passkeys = $state<Passkey[]>([]);
+
+	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"
+		style:cursor="pointer"
+		onclick={() => {
+			dialogs[name].showModal();
+		}}
+	>
+		<Icon {i} />
+	</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">
+			<div class="item">
+				<span class="subtle">Name</span>
+				<span>{user.name}</span>
+				{@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">
+				<span class="subtle">Email</span>
+				<span>
+					{user.email}
+					{#if user.emailVerified}
+						<dfn title="Email verified on {new Date(user.emailVerified).toLocaleDateString()}">
+							<Icon i="regular/circle-check" />
+						</dfn>
+					{:else}
+						<button onclick={() => sendVerificationEmail(user.id).then(() => (verificationSent = true))}>
+							{verificationSent ? 'Verification email sent' : 'Verify'}
+						</button>
+					{/if}
+				</span>
+				{@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">
+				<p class="subtle">User ID <dfn title="This is your UUID."><Icon i="regular/circle-info" /></dfn></p>
+				<p>{user.id}</p>
+			</div>
+			<span>
+				<a class="signout" href="/logout"><button>Sign out</button></a>
+				<button style:cursor="pointer" onclick={() => dialogs.delete.showModal()} style:width="fit-content" class="danger"
+					>Delete Account</button
+				>
+				<FormDialog bind:dialog={dialogs.delete} submit={() => deleteUser(user.id)} 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="passkey">
+					<dfn title={passkey.deviceType == 'multiDevice' ? 'Multiple devices' : 'Single device'}>
+						<Icon i={passkey.deviceType == 'multiDevice' ? 'laptop-mobile' : 'mobile'} />
+					</dfn>
+					<dfn title="This passkey is {passkey.backedUp ? '' : 'not '}backed up">
+						<Icon i={passkey.backedUp ? 'circle-check' : 'circle-xmark'} />
+					</dfn>
+					<p>Created {new Date(passkey.createdAt).toLocaleString()}</p>
+					{#if passkey.name}
+						<p>{passkey.name}</p>
+					{:else}
+						<p class="subtle"><i>Unnamed</i></p>
+					{/if}
+					{@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" />
+						</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}
+			<button onclick={() => createPasskey(user.id).then(passkeys.push.bind(passkeys))}><Icon i="plus" /> Create</button>
+		</div>
+	</div>
+{:catch error}
+	<div class="error">
+		<h3>Failed to load your 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;
+		grid-template-columns: 10em 1fr 2em;
+		align-items: center;
+		width: 100%;
+		gap: 1em;
+		text-wrap: nowrap;
+		padding-bottom: 1em;
+
+		> :first-child {
+			margin-left: 1em;
+		}
+	}
+
+	.passkey {
+		display: grid;
+		grid-template-columns: 1em 1em 1fr 1fr 1em 1em;
+		border-top: 1px solid #8888;
+		align-items: center;
+		width: 100%;
+		gap: 1em;
+		text-wrap: nowrap;
+		padding-bottom: 1em;
+
+		dfn {
+			cursor: help;
+		}
+
+		dfn.disabled {
+			cursor: not-allowed;
+		}
+	}
+</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.js';
+import { config } from '@axium/server/config.js';
+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>

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import FormDialog from '$lib/FormDialog.svelte';
+	import { register } from '@axium/client/user';
+
+	let { dialog = $bindable(), pageMode = true } = $props();
+</script>
+
+<svelte:head>
+	<title>Sign Up</title>
+</svelte:head>
+
+<FormDialog bind:dialog submitText="Register" submit={register} {pageMode}>
+	<div>
+		<label for="name">Display Name</label>
+		<input name="name" type="text" required />
+	</div>
+	<div>
+		<label for="email">Email</label>
+		<input name="email" type="email" required />
+	</div>
+</FormDialog>

package/web/tsconfig.json

@@ -1,7 +1,8 @@
 {
 	"extends": "../.svelte-kit/tsconfig.json",
 	"compilerOptions": {
-		"target": "ES2021"
+		"target": "ES2021",
+		"lib": ["ESNext", "DOM", "DOM.Iterable"]
 	},
 	"include": ["**/*.ts", "**/*.svelte"]
 }

package/web/utils.ts

@@ -1,21 +1,15 @@
-import type { Session } from '@auth/sveltekit';
 import type { ActionFailure, RequestEvent } from '@sveltejs/kit';
-import { fail, redirect } from '@sveltejs/kit';
-import type * as z from 'zod';
-import { fromError } from 'zod-validation-error';
-import config from '../dist/config.js';
-
-export async function loadSession(event: RequestEvent): Promise<{ session: Session }> {
-	const session = await event.locals.auth();
-	if (!session) redirect(307, '/auth/signin');
-	if (!session.user.name && event.url.pathname != config.web.prefix + '/name') redirect(307, config.web.prefix + '/name');
-	return { session };
-}
+import { fail } from '@sveltejs/kit';
+import z from 'zod/v4';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface FormFail<S extends z.AnyZodObject, E extends object = object> extends ActionFailure<z.infer<S> & { error: string } & E> {}
+export interface FormFail<S extends z.ZodType, E extends object = object> extends ActionFailure<z.infer<S> & { error: string } & E> {}
 
-export async function parseForm<S extends z.AnyZodObject, E extends object = object>(event: RequestEvent, schema: S, errorData?: E): Promise<[z.infer<S>, FormFail<S, E> | null]> {
+export async function parseForm<S extends z.ZodObject, E extends object = object>(
+	event: RequestEvent,
+	schema: S,
+	errorData?: E
+): Promise<[z.infer<S>, FormFail<S, E> | null]> {
 	const formData = Object.fromEntries(await event.request.formData());
 	const { data, error, success } = schema.safeParse(formData);
 
@@ -26,7 +20,7 @@ export async function parseForm<S extends z.AnyZodObject, E extends object = obj
 		fail(400, {
 			...data,
 			...errorData,
-			error: fromError(error, { prefix: null }).toString(),
+			error: z.prettifyError(error),
 		}),
 	];
 }