@axium/server 0.7.6 → 0.9.0

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),
 		}),
 	];
 }

package/web/actions.ts

@@ -1,58 +0,0 @@
-import { Registration, User } from '@axium/core/schemas';
-import type { RequestEvent } from '@sveltejs/kit';
-import { fail } from '@sveltejs/kit';
-import { adapter, register } from '../dist/auth.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 }));
-	if (error) return error;
-
-	const user = await adapter.getUserByEmail(session.user.email);
-	if (!user) return fail(401, { email, error: 'You are not signed in' });
-
-	try {
-		await adapter.updateUser({ id: user.id, email, image: user.image });
-	} catch (error: any) {
-		return fail(400, { email, error: typeof error === 'string' ? error : error.message });
-	}
-	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 }));
-	if (error) return error;
-
-	const user = await adapter.getUserByEmail(session.user.email);
-	if (!user) return fail(401, { name, error: 'You are not signed in' });
-
-	try {
-		await adapter.updateUser({ id: user.id, name, image: user.image });
-	} catch (error: any) {
-		return fail(400, { name, error: typeof error === 'string' ? error : error.message });
-	}
-	return { success: true };
-}
-
-export async function signup(event: RequestEvent) {
-	const [data, error] = await parseForm(event, Registration);
-	if (error) return error;
-
-	try {
-		const { session } = await register(data);
-		event.cookies.set('session', session.sessionToken, {
-			path: '/',
-			expires: session.expires,
-			httpOnly: true,
-		});
-		return { ...data, success: true, data: session.sessionToken };
-	} catch (error: any) {
-		return fail(400, { ...data, error: typeof error === 'string' ? error : error.message });
-	}
-}

package/web/lib/Account.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import { getUserImage } from '@axium/core';
-	import './account.css';
-	import FormDialog from './FormDialog.svelte';
-	import Icon from './icons/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/SignUp.svelte

@@ -1,20 +0,0 @@
-<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/account.css

@@ -1,36 +0,0 @@
-.account-section {
-	width: 50%;
-	padding-top: 4em;
-
-	> div:has(+ div) {
-		border-bottom: 1px solid #8888;
-	}
-}
-
-.account-section .account-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: 0 5em 0 1em;
-		grid-column: 1;
-	}
-
-	> :nth-child(2) {
-		margin: 0;
-		grid-column: 2;
-	}
-
-	> :last-child:nth-child(3) {
-		margin: 0;
-		display: inline;
-		grid-column: 3;
-		font-size: 0.75em;
-		cursor: pointer;
-	}
-}

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

@@ -1,16 +0,0 @@
-import type { Actions } from '@sveltejs/kit';
-import { adapter } from '../../dist/auth.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 };
-}
-
-export const actions = {
-	email: editEmail,
-	name: editName,
-} satisfies Actions;

package/web/routes/+page.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-	import Account from '../lib/Account.svelte';
-	const { data, form } = $props();
-</script>
-
-<svelte:head>
-	<title>Account</title>
-</svelte:head>
-
-<Account {data} {form}></Account>

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

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

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

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import FormDialog from '../../lib/FormDialog.svelte';
-	import '../../lib/styles.css';
-	let { form, data } = $props();
-	$effect(() => {
-		if (form?.success) goto('/');
-	});
-</script>
-
-<svelte:head>
-	<title>Edit Name</title>
-</svelte:head>
-
-<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.server.ts

@@ -1,10 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-import config from '../../../dist/config.js';
-import { signup } from '../../actions.js';
-import type { Actions } from './$types.js';
-
-export function load() {
-	if (!config.auth.credentials) return redirect(307, '/auth/signin');
-}
-
-export const actions = { default: signup } satisfies Actions;

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

@@ -1,15 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import SignUp from '../../lib/SignUp.svelte';
-	import '../../lib/styles.css';
-	let { form } = $props();
-	$effect(() => {
-		if (form?.success) goto('/');
-	});
-</script>
-
-<svelte:head>
-	<title>Sign Up</title>
-</svelte:head>
-
-<SignUp {form} />