@axium/server 0.4.7 → 0.5.0

package/dist/cli.js

@@ -45,12 +45,7 @@ axiumDB
     .addOption(opts.force)
     .option('-s, --skip', 'Skip existing database and/or user')
     .action(async (opt) => {
-    await db.init(opt).catch((e) => {
-        if (typeof e == 'number')
-            process.exit(e);
-        else
-            exit(e);
-    });
+    await db.init(opt).catch(handleError);
 });
 axiumDB
     .command('status')

package/dist/database.js

@@ -108,6 +108,7 @@ export async function init(opt) {
         }
         const _sql = (command, message) => run(opt, message, `sudo -u postgres psql -c "${command}"`);
         const relationExists = someWarnings(opt.output, [/relation "\w+" already exists/, 'already exists.']);
+        const done = () => opt.output('done');
         await _sql('CREATE DATABASE axium', 'Creating database').catch(async (error) => {
             if (error != 'database "axium" already exists')
                 throw error;
@@ -143,8 +144,8 @@ export async function init(opt) {
             .addColumn('salt', 'text')
             .addColumn('preferences', 'jsonb', col => col.notNull().defaultTo(sql `'{}'::jsonb`))
             .execute()
+            .then(done)
             .catch(relationExists);
-        opt.output('done');
         opt.output('start', 'Creating table Account');
         await db.schema
             .createTable('Account')
@@ -161,11 +162,10 @@ export async function init(opt) {
             .addColumn('id_token', 'text')
             .addColumn('session_state', 'text')
             .execute()
+            .then(done)
             .catch(relationExists);
-        opt.output('done');
         opt.output('start', 'Creating index for Account.userId');
-        await db.schema.createIndex('Account_userId_index').on('Account').column('userId').execute().catch(relationExists);
-        opt.output('done');
+        await db.schema.createIndex('Account_userId_index').on('Account').column('userId').execute().then(done).catch(relationExists);
         opt.output('start', 'Creating table Session');
         await db.schema
             .createTable('Session')
@@ -174,11 +174,10 @@ export async function init(opt) {
             .addColumn('sessionToken', 'text', col => col.notNull().unique())
             .addColumn('expires', 'timestamptz', col => col.notNull())
             .execute()
+            .then(done)
             .catch(relationExists);
-        opt.output('done');
         opt.output('start', 'Creating index for Session.userId');
-        await db.schema.createIndex('Session_userId_index').on('Session').column('userId').execute().catch(relationExists);
-        opt.output('done');
+        await db.schema.createIndex('Session_userId_index').on('Session').column('userId').execute().then(done).catch(relationExists);
         opt.output('start', 'Creating table VerificationToken');
         await db.schema
             .createTable('VerificationToken')
@@ -186,8 +185,8 @@ export async function init(opt) {
             .addColumn('token', 'text', col => col.notNull().unique())
             .addColumn('expires', 'timestamptz', col => col.notNull())
             .execute()
+            .then(done)
             .catch(relationExists);
-        opt.output('done');
         opt.output('start', 'Creating table Authenticator');
         await db.schema
             .createTable('Authenticator')
@@ -200,11 +199,10 @@ export async function init(opt) {
             .addColumn('credentialBackedUp', 'boolean', col => col.notNull())
             .addColumn('transports', 'text')
             .execute()
+            .then(done)
             .catch(relationExists);
-        opt.output('done');
         opt.output('start', 'Creating index for Authenticator.credentialID');
-        await db.schema.createIndex('Authenticator_credentialID_key').on('Authenticator').column('credentialID').execute().catch(relationExists);
-        opt.output('done');
+        await db.schema.createIndex('Authenticator_credentialID_key').on('Authenticator').column('credentialID').execute().then(done).catch(relationExists);
         return config.db;
     }
     catch (e_1) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/server",
-	"version": "0.4.7",
+	"version": "0.5.0",
 	"author": "James Prevett <axium@jamespre.dev> (https://jamespre.dev)",
 	"funding": {
 		"type": "individual",

package/web/actions.ts

@@ -1,14 +1,14 @@
 import { Registration, User } from '@axium/core/schemas';
 import type { RequestEvent } from '@sveltejs/kit';
-import { fail, redirect } from '@sveltejs/kit';
+import { fail } from '@sveltejs/kit';
 import { adapter, register } from '../dist/auth.js';
-import { web } from '../dist/config.js';
 import { parseForm } from './utils.js';
 
 export async function editEmail(event: RequestEvent) {
 	const session = await event.locals.auth();
+	if (!session) return fail(401, { error: 'You are not signed in' });
 
-	const [{ email }, error] = await parseForm(event, User.pick({ email: true }));
+	const [{ email } = {}, error] = await parseForm(event, User.pick({ email: true }));
 	if (error) return error;
 
 	const user = await adapter.getUserByEmail(session.user.email);
@@ -19,13 +19,14 @@ export async function editEmail(event: RequestEvent) {
 	} catch (error: any) {
 		return fail(400, { email, error: typeof error === 'string' ? error : error.message });
 	}
-	redirect(303, web.prefix);
+	return { success: true };
 }
 
 export async function editName(event: RequestEvent) {
 	const session = await event.locals.auth();
+	if (!session) return fail(401, { error: 'You are not signed in' });
 
-	const [{ name }, error] = await parseForm(event, User.pick({ name: true }));
+	const [{ name } = {}, error] = await parseForm(event, User.pick({ name: true }));
 	if (error) return error;
 
 	const user = await adapter.getUserByEmail(session.user.email);
@@ -36,7 +37,7 @@ export async function editName(event: RequestEvent) {
 	} catch (error: any) {
 		return fail(400, { name, error: typeof error === 'string' ? error : error.message });
 	}
-	redirect(303, web.prefix);
+	return { success: true };
 }
 
 export async function signup(event: RequestEvent) {

package/web/index.ts

@@ -1,4 +1 @@
-export { default as Icon } from './lib/Icon.svelte';
-export { default as Account } from './routes/+page.svelte';
-export { default as EditName } from './routes/name/+page.svelte';
-export { default as EditEmail } from './routes/email/+page.svelte';
+export * from './lib/index.js';

package/web/lib/Account.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getUserImage } from '@axium/core';
+	import './account.css';
+	import FormDialog from './FormDialog.svelte';
+	import Icon from './Icon.svelte';
+	import './styles.css';
+
+	const { data, children = () => {}, form } = $props();
+
+	const user = $derived(data.user);
+
+	$effect(() => {
+		if (!user) goto('/auth/signin');
+	});
+
+	const image = $derived(getUserImage(user));
+
+	let changeEmail = $state(false);
+	let changeName = $state(false);
+</script>
+
+<div class="Account flex-content">
+	<img class="pfp" src={image} alt="User profile" />
+	<p class="greeting">Welcome, {user.name}</p>
+	<div class="account-section main">
+		<div class="account-item">
+			<p class="subtle">Name</p>
+			<p>{user.name}</p>
+			<button style:display="contents" class="change" onclick={() => (changeName = true)}><Icon i="chevron-right" /></button>
+		</div>
+		<div class="account-item">
+			<p class="subtle">Email</p>
+			<p>{user.email}</p>
+			<button style:display="contents" class="change" onclick={() => (changeEmail = true)}><Icon i="chevron-right" /></button>
+		</div>
+		<div class="account-item">
+			<p class="subtle">User ID <dfn title="This is your UUID."><Icon i="regular/circle-info" /></dfn></p>
+			<p>{user.id}</p>
+		</div>
+		<a class="signout" href="/auth/signout"><button>Sign out</button></a>
+	</div>
+	{@render children()}
+</div>
+
+<FormDialog bind:active={changeEmail} {form} submitText="Change" action="?/email">
+	<div>
+		<label for="email">Email Address</label>
+		<input name="email" type="email" value={form?.email || user.email || ''} required />
+	</div>
+</FormDialog>
+
+<FormDialog bind:active={changeName} {form} submitText="Change" action="?/name">
+	<div>
+		<label for="name">What do you want to be called?</label>
+		<input name="name" type="text" value={form?.name || user.name || ''} required />
+	</div>
+</FormDialog>
+
+<style>
+	.pfp {
+		width: 100px;
+		height: 100px;
+		border-radius: 50%;
+		border: 1px solid #8888;
+		margin-top: 3em;
+	}
+
+	.greeting {
+		font-size: 2em;
+	}
+
+	.signout {
+		margin-top: 2em;
+	}
+</style>

package/web/lib/Dialog.svelte

@@ -0,0 +1,55 @@
+<script>
+	let { show, children, onclose = () => (show = false), ...rest } = $props();
+
+	let dialog = $state();
+	$effect(() => show && dialog.showModal());
+	$effect(() => !show && dialog.close());
+</script>
+
+<dialog bind:this={dialog} {onclose} {...rest}>
+	{@render children()}
+</dialog>
+
+<!-- svelte-ignore css_unused_selector -->
+<style>
+	dialog {
+		border-radius: 1em;
+		background: #111;
+		border: 1px solid #8888;
+		padding: 1em;
+
+		form {
+			display: contents;
+		}
+	}
+
+	dialog::backdrop {
+		background: #0003;
+	}
+
+	dialog[open] {
+		animation: zoom 0.25s cubic-bezier(0.35, 1.55, 0.65, 1);
+	}
+
+	@keyframes zoom {
+		from {
+			transform: scale(0.95);
+		}
+		to {
+			transform: scale(1);
+		}
+	}
+
+	dialog[open]::backdrop {
+		animation: fade 0.25s ease-out;
+	}
+
+	@keyframes fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>

package/web/lib/FormDialog.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import Dialog from './Dialog.svelte';
+	import './styles.css';
+
+	let { children, active = $bindable(null), form, submitText = 'Submit', oncancel = () => {}, action = '', pageMode = false, ...rest } = $props();
+
+	$effect(() => {
+		if (form?.success) active = null;
+	});
+
+	const show = $derived(!!active || pageMode);
+
+	function onclick(e: MouseEvent) {
+		e.preventDefault();
+		active = null;
+		oncancel(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>
+		{/if}
+		{@render children()}
+		{#if pageMode}
+			<button type="submit" class="submit">{submitText}</button>
+		{:else}
+			<div class="actions">
+				<button type="button" {onclick}>Cancel</button>
+				<button type="submit" class="submit">{submitText}</button>
+			</div>
+		{/if}
+	</form>
+</Dialog>
+
+<style>
+	.actions {
+		display: flex;
+		gap: 1em;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+</style>

package/web/lib/SignUp.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import FormDialog from './FormDialog.svelte';
+	import './styles.css';
+	let { form } = $props();
+</script>
+
+<FormDialog pageMode={true} {form} submitText="Sign Up">
+	<div>
+		<label for="name">Display Name</label>
+		<input name="name" type="text" value={form?.name || ''} required />
+	</div>
+	<div>
+		<label for="email">Email</label>
+		<input name="email" type="email" value={form?.email || ''} required />
+	</div>
+	<div>
+		<label for="password">Password</label>
+		<input name="password" type="password" />
+	</div>
+</FormDialog>

package/web/lib/index.ts

@@ -0,0 +1,5 @@
+export { default as Account } from './Account.svelte';
+export { default as Dialog } from './Dialog.svelte';
+export { default as FormDialog } from './FormDialog.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as SignUp } from './SignUp.svelte';

package/web/routes/+page.server.ts

@@ -1,10 +1,16 @@
+import type { Actions } from '@sveltejs/kit';
 import { adapter } from '../../dist/auth.js';
-import { web } from '../../dist/config.js';
+import { editEmail, editName } from '../actions.js';
 import { loadSession } from '../utils.js';
 import type { PageServerLoadEvent } from './$types.js';
 
 export async function load(event: PageServerLoadEvent) {
 	const { session } = await loadSession(event);
 	const user = await adapter.getUserByEmail(session.user.email);
-	return { session, user, prefix: web.prefix };
+	return { session, user };
 }
+
+export const actions = {
+	email: editEmail,
+	name: editName,
+} satisfies Actions;

package/web/routes/+page.svelte

@@ -1,60 +1,10 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { getUserImage } from '@axium/core';
-	import '../lib/account.css';
-	import Icon from '../lib/Icon.svelte';
-	import '../lib/styles.css';
-	import type { PageData } from './$types.js';
-
-	const { data, children = () => {} }: { data: PageData; children?: () => any } = $props();
-
-	const { user } = data;
-	if (!user) goto('/auth/signin');
-
-	const image = getUserImage(user);
+	import Account from '../lib/Account.svelte';
+	const { data, form } = $props();
 </script>
 
 <svelte:head>
 	<title>Account</title>
 </svelte:head>
 
-<div class="Account flex-content">
-	<img class="pfp" src={image} alt="User profile" />
-	<p class="greeting">Welcome, {user.name}</p>
-	<div class="account-section main">
-		<div class="account-item">
-			<p class="subtle">Name</p>
-			<p>{user.name}</p>
-			<a class="change" href="{data.prefix}/name"><Icon i="chevron-right" /></a>
-		</div>
-		<div class="account-item">
-			<p class="subtle">Email</p>
-			<p>{user.email}</p>
-			<a class="change" href="{data.prefix}/email"><Icon i="chevron-right" /></a>
-		</div>
-		<div class="account-item">
-			<p class="subtle">User ID <dfn title="This is your UUID."><Icon i="regular/circle-info" /></dfn></p>
-			<p>{user.id}</p>
-		</div>
-		<a class="signout" href="/auth/signout"><button>Sign out</button></a>
-	</div>
-	{@render children()}
-</div>
-
-<style>
-	.pfp {
-		width: 100px;
-		height: 100px;
-		border-radius: 50%;
-		border: 1px solid #8888;
-		margin-top: 3em;
-	}
-
-	.greeting {
-		font-size: 2em;
-	}
-
-	.signout {
-		margin-top: 2em;
-	}
-</style>
+<Account {data} {form}></Account>

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

@@ -1,25 +1,20 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
+	import FormDialog from '../../lib/FormDialog.svelte';
 	import '../../lib/styles.css';
 	let { form, data } = $props();
-	const { user } = data.session;
+	$effect(() => {
+		if (form?.success) goto('/');
+	});
 </script>
 
 <svelte:head>
 	<title>Edit Name</title>
 </svelte:head>
 
-<div class="EditName">
-	<form method="POST" class="main" use:enhance>
-		{#if form?.error}
-			<div class="error">
-				{typeof form.error === 'string' ? form.error : JSON.stringify(form.error)}
-			</div>
-		{/if}
-		<div>
-			<label for="name">What do you want to be called?</label>
-			<input name="name" type="text" value={form?.name || user.name || ''} required />
-		</div>
-		<button type="submit">Continue</button>
-	</form>
-</div>
+<FormDialog pageMode={true} {form} submitText="Change">
+	<div>
+		<label for="name">What do you want to be called?</label>
+		<input name="name" type="text" value={form?.name || data.session.user.name || ''} required />
+	</div>
+</FormDialog>

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

@@ -1,28 +1,15 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
+	import SignUp from '../../lib/SignUp.svelte';
 	import '../../lib/styles.css';
 	let { form } = $props();
+	$effect(() => {
+		if (form?.success) goto('/');
+	});
 </script>
 
-<div class="Signup">
-	<form method="POST" class="main" use:enhance>
-		{#if form?.error}
-			<div class="error">
-				{typeof form.error === 'string' ? form.error : JSON.stringify(form.error)}
-			</div>
-		{/if}
-		<div>
-			<label for="name">Display Name</label>
-			<input name="name" type="text" value={form?.name || ''} required />
-		</div>
-		<div>
-			<label for="email">Email</label>
-			<input name="email" type="email" value={form?.email || ''} required />
-		</div>
-		<div>
-			<label for="password">Password</label>
-			<input name="password" type="password" />
-		</div>
-		<button type="submit">Register</button>
-	</form>
-</div>
+<svelte:head>
+	<title>Sign Up</title>
+</svelte:head>
+
+<SignUp {form} />

package/web/routes/email/+page.server.ts

@@ -1,5 +0,0 @@
-import type { Actions } from '@sveltejs/kit';
-import { editEmail } from '../../actions.js';
-
-export { loadSession as load } from '../../utils.js';
-export const actions = { default: editEmail } satisfies Actions;

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

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-	import '../../lib/styles.css';
-	let { form, data } = $props();
-</script>
-
-<svelte:head>
-	<title>Edit Email</title>
-</svelte:head>
-
-<div class="EditEmail">
-	<form method="POST" class="main" use:enhance>
-		{#if form?.error}
-			<div class="error">
-				{typeof form.error === 'string' ? form.error : JSON.stringify(form.error)}
-			</div>
-		{/if}
-		<div>
-			<label for="email">Email Address</label>
-			<input name="email" type="email" value={form?.email || data.session.user.email || ''} required />
-		</div>
-		<button type="submit">Continue</button>
-	</form>
-</div>