@axium/server 0.3.1 → 0.3.3

package/package.json

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

package/web/lib/account.css

@@ -0,0 +1,36 @@
+.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/lib/styles.css

@@ -65,3 +65,8 @@ button:hover {
 	background-color: #733;
 	color: #ccc;
 }
+
+.subtle {
+	color: #bbbb;
+	font-size: 0.9em;
+}

package/web/routes/+page.svelte

@@ -2,6 +2,7 @@
 	import { getUserImage } from '@axium/core';
 	import Icon from '../lib/Icon.svelte';
 	import '../lib/styles.css';
+	import '../lib/account.css';
 	import type { PageData } from './$types.js';
 
 	const {
@@ -27,18 +28,18 @@
 	<img id="pfp" src={image} alt="User profile" />
 	<p id="greeting">Welcome, {user.name}</p>
 	<div class="account-section main">
-		<div>
-			<p>Name</p>
+		<div class="account-item">
+			<p class="subtle">Name</p>
 			<p>{user.name}</p>
-			<a href="{prefix}/name"><Icon id="chevron-right" /></a>
+			<a class="change" href="{prefix}/name"><Icon id="chevron-right" /></a>
 		</div>
-		<div>
-			<p>Email</p>
+		<div class="account-item">
+			<p class="subtle">Email</p>
 			<p>{user.email}</p>
-			<a href="{prefix}/email"><Icon id="chevron-right" /></a>
+			<a class="change" href="{prefix}/email"><Icon id="chevron-right" /></a>
 		</div>
-		<div>
-			<p>User ID <dfn title="This is your UUID."><Icon id="regular/circle-info" /></dfn></p>
+		<div class="account-item">
+			<p class="subtle">User ID <dfn title="This is your UUID."><Icon id="regular/circle-info" /></dfn></p>
 			<p>{user.id}</p>
 		</div>
 		<a id="signout" href="/auth/signout"><button>Sign out</button></a>
@@ -66,45 +67,6 @@
 		font-size: 2em;
 	}
 
-	:global(.account-section) {
-		width: 50%;
-		padding-top: 4em;
-
-		> div:has(+ div) {
-			border-bottom: 1px solid #8888;
-		}
-	}
-
-	:global(.account-section) > div {
-		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;
-			color: #bbbb;
-			font-size: 0.9em;
-			grid-column: 1;
-		}
-
-		> :nth-child(2) {
-			margin: 0;
-			grid-column: 2;
-		}
-
-		> a:last-child {
-			margin: 0;
-			display: inline;
-			grid-column: 3;
-			font-size: 0.75em;
-			cursor: pointer;
-		}
-	}
-
 	#signout {
 		margin-top: 2em;
 	}

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

@@ -1,8 +1,9 @@
 import { fail, redirect, type Actions } from '@sveltejs/kit';
 import * as z from 'zod';
 import { adapter } from '../../../dist/auth.js';
-import type { PageServerLoadEvent } from './$types.js';
 import { web } from '../../../dist/config.js';
+import { tryZod } from '../../utils.js';
+import type { PageServerLoadEvent } from './$types.js';
 
 export async function load(event: PageServerLoadEvent) {
 	const session = await event.locals.auth();
@@ -15,13 +16,8 @@ export const actions = {
 		const session = await event.locals.auth();
 
 		const rawEmail = (await event.request.formData()).get('email');
-		const { data: email, success, error } = z.string().email().safeParse(rawEmail);
-
-		if (!success)
-			return fail(400, {
-				email,
-				error: error.flatten().formErrors[0] || Object.values(error.flatten().fieldErrors).flat()[0],
-			});
+		const [email, error] = tryZod(z.string().email().safeParse(rawEmail));
+		if (error) return error;
 
 		const user = await adapter.getUserByEmail(session.user.email);
 		if (!user) return fail(500, { email, error: 'User does not exist' });

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

@@ -2,6 +2,7 @@ import { Name } from '@axium/core/schemas';
 import { fail, redirect, type Actions } from '@sveltejs/kit';
 import { adapter } from '../../../dist/auth.js';
 import { web } from '../../../dist/config.js';
+import { tryZod } from '../../utils.js';
 import type { PageServerLoadEvent } from './$types.js';
 
 export async function load(event: PageServerLoadEvent) {
@@ -15,13 +16,8 @@ export const actions = {
 		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 [name, error] = tryZod(Name.safeParse(rawName));
+		if (error) error;
 
 		const user = await adapter.getUserByEmail(session.user.email);
 		if (!user) return fail(500, { name, error: 'User does not exist' });

package/web/utils.ts

@@ -0,0 +1,13 @@
+import { fail, type ActionFailure } from '@sveltejs/kit';
+import type * as z from 'zod';
+
+export function failZod(error: z.ZodError): ActionFailure<{ error: string }> {
+	return fail(400, {
+		error: error.flatten().formErrors[0] || Object.values(error.flatten().fieldErrors).flat()[0],
+	});
+}
+
+export function tryZod<Input, Output>(result: z.SafeParseReturnType<Input, Output>): [Output?, ActionFailure<{ error: string }>?] {
+	if (result.success) return [result.data, undefined];
+	return [undefined, failZod(result.error)];
+}