@axium/server 0.0.1 → 0.0.3

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

@@ -0,0 +1,35 @@
+import { Name } from '@axium/core/schemas';
+import { fail, redirect, type Actions } from '@sveltejs/kit';
+import { adapter } from '../../../../src/auth';
+import type { PageServerLoadEvent } from './$types';
+
+export async function load(event: PageServerLoadEvent) {
+	const session = await event.locals.auth();
+	if (!session) redirect(307, '/auth/signin');
+	return { session };
+}
+
+export const actions = {
+	async default(event) {
+		const session = await event.locals.auth();
+
+		const rawName = (await event.request.formData()).get('name');
+		const { data: name, success, error } = Name.safeParse(rawName);
+
+		if (!success)
+			return fail(400, {
+				name,
+				error: error.flatten().formErrors[0] || Object.values(error.flatten().fieldErrors).flat()[0],
+			});
+
+		const user = await adapter.getUserByEmail(session.user.email);
+		if (!user) return fail(500, { name, error: 'User does not exist' });
+
+		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 });
+		}
+		redirect(303, '/');
+	},
+} satisfies Actions;

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { page } from '$app/state';
+	const { user } = page.data.session;
+	let { form } = $props();
+</script>
+
+<svelte:head>
+	<title>Edit Name</title>
+</svelte:head>
+
+<div>
+	<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>

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

@@ -0,0 +1,33 @@
+import { Registration } from '@axium/core/schemas';
+import { fail, redirect } from '@sveltejs/kit';
+import * as auth from '../../../src/auth.js';
+import * as config from '../../../src/config.js';
+import type { Actions } from './$types';
+
+export function load() {
+	if (!config.auth.credentials) return redirect(307, '/auth/signin');
+}
+
+export const actions = {
+	async default(event) {
+		const { data, success, error } = Registration.safeParse(Object.fromEntries(await event.request.formData()));
+
+		if (!success)
+			return fail(400, {
+				...data,
+				error: error.flatten().formErrors[0] || Object.values(error.flatten().fieldErrors).flat()[0],
+			});
+
+		try {
+			const { session } = await auth.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 });
+		}
+	},
+} satisfies Actions;

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	let { form } = $props();
+</script>
+
+<div>
+	<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>

package/web/static/axium.css

@@ -0,0 +1,67 @@
+body {
+	position: fixed;
+	inset: 0;
+	font-family: sans-serif;
+	font-size: 16px;
+	background-color: #222;
+	color: #bbb;
+	accent-color: #bbb;
+}
+
+.main {
+	padding: 2em;
+	border-radius: 1em;
+	background-color: #111;
+	display: flex;
+	flex-direction: column;
+	gap: 1em;
+}
+
+div:has(form.main) {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+form.main {
+	width: max-content;
+	height: max-content;
+}
+
+form {
+	div {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+	}
+}
+
+input,
+button {
+	border-radius: 0.5em;
+	border: 1px solid #aaa;
+	background-color: #222;
+}
+
+input {
+	padding: 0.5em 1em;
+	outline: none;
+}
+
+button {
+	padding: 0.5em 1em;
+	cursor: pointer;
+}
+
+button:hover {
+	background-color: #334;
+}
+
+.error {
+	padding: 1em;
+	border-radius: 0.5em;
+	background-color: #733;
+	color: #ccc;
+}

package/web/tsconfig.json

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