@axium/server 0.4.8 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/server",
-	"version": "0.4.8",
+	"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>