@axium/server 0.8.0 → 0.9.0

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

@@ -1,32 +1,47 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import ClipboardCopy from '$lib/ClipboardCopy.svelte';
 	import FormDialog from '$lib/FormDialog.svelte';
 	import Icon from '$lib/icons/Icon.svelte';
 	import {
-		currentSession,
+		createPasskey,
 		deletePasskey,
+		deleteUser,
+		emailVerificationEnabled,
+		getCurrentSession,
 		getPasskeys,
+		getSessions,
+		logout,
+		logoutAll,
 		sendVerificationEmail,
 		updatePasskey,
 		updateUser,
-		createPasskey,
-		deleteUser,
 	} from '@axium/client/user';
-	import type { Passkey } from '@axium/core/api';
+	import type { Passkey, Session } from '@axium/core/api';
 	import { getUserImage, type User } from '@axium/core/user';
 
 	const dialogs = $state<Record<string, HTMLDialogElement>>({});
 
 	let verificationSent = $state(false);
+	let currentSession = $state<Session & { user: User }>();
 	let user = $state<User>();
+	let canVerify = $state(false);
+	let passkeys = $state<Passkey[]>([]);
+	let sessions = $state<Session[]>([]);
 
 	async function ready() {
-		const session = await currentSession();
-		user = session.user;
+		currentSession = await getCurrentSession().catch(() => {
+			goto('/login?after=/account');
+			return null;
+		})!;
+		user = currentSession.user;
 
 		passkeys = await getPasskeys(user.id);
-	}
 
-	let passkeys = $state<Passkey[]>([]);
+		sessions = await getSessions(user.id);
+
+		canVerify = await emailVerificationEnabled(user.id);
+	}
 
 	async function _editUser(data) {
 		const result = await updateUser(user.id, data);
@@ -39,14 +54,8 @@
 </svelte:head>
 
 {#snippet action(name: string, i: string = 'pen')}
-	<button
-		style:display="contents"
-		style:cursor="pointer"
-		onclick={() => {
-			dialogs[name].showModal();
-		}}
-	>
-		<Icon {i} />
+	<button style:display="contents" onclick={() => dialogs[name].showModal()}>
+		<Icon {i} --size="16px" />
 	</button>
 {/snippet}
 
@@ -56,9 +65,10 @@
 		<p class="greeting">Welcome, {user.name}</p>
 
 		<div class="section main">
-			<div class="item">
-				<span class="subtle">Name</span>
-				<span>{user.name}</span>
+			<h3>Personal Information</h3>
+			<div class="item info">
+				<p class="subtle">Name</p>
+				<p>{user.name}</p>
 				{@render action('edit_name')}
 			</div>
 			<FormDialog bind:dialog={dialogs.edit_name} submit={_editUser} submitText="Change">
@@ -67,20 +77,20 @@
 					<input name="name" type="text" value={user.name || ''} required />
 				</div>
 			</FormDialog>
-			<div class="item">
-				<span class="subtle">Email</span>
-				<span>
+			<div class="item info">
+				<p class="subtle">Email</p>
+				<p>
 					{user.email}
 					{#if user.emailVerified}
-						<dfn title="Email verified on {new Date(user.emailVerified).toLocaleDateString()}">
+						<dfn title="Email verified on {user.emailVerified.toLocaleDateString()}">
 							<Icon i="regular/circle-check" />
 						</dfn>
-					{:else}
+					{:else if canVerify}
 						<button onclick={() => sendVerificationEmail(user.id).then(() => (verificationSent = true))}>
 							{verificationSent ? 'Verification email sent' : 'Verify'}
 						</button>
 					{/if}
-				</span>
+				</p>
 				{@render action('edit_email')}
 			</div>
 			<FormDialog bind:dialog={dialogs.edit_email} submit={_editUser} submitText="Change">
@@ -90,16 +100,20 @@
 				</div>
 			</FormDialog>
 
-			<div class="item">
-				<p class="subtle">User ID <dfn title="This is your UUID."><Icon i="regular/circle-info" /></dfn></p>
+			<div class="item info">
+				<p class="subtle">User ID <dfn title="This is your UUID. It can't be changed."><Icon i="regular/circle-info" /></dfn></p>
 				<p>{user.id}</p>
+				<ClipboardCopy value={user.id} --size="16px" />
 			</div>
 			<span>
 				<a class="signout" href="/logout"><button>Sign out</button></a>
-				<button style:cursor="pointer" onclick={() => dialogs.delete.showModal()} style:width="fit-content" class="danger"
-					>Delete Account</button
+				<button style:cursor="pointer" onclick={() => dialogs.delete.showModal()} class="danger">Delete Account</button>
+				<FormDialog
+					bind:dialog={dialogs.delete}
+					submit={() => deleteUser(user.id).then(() => goto('/'))}
+					submitText="Delete Account"
+					submitDanger
 				>
-				<FormDialog bind:dialog={dialogs.delete} submit={() => deleteUser(user.id)} submitText="Delete Account" submitDanger>
 					<p>Are you sure you want to delete your account?<br />This action can't be undone.</p>
 				</FormDialog>
 			</span>
@@ -108,25 +122,25 @@
 		<div class="section main">
 			<h3>Passkeys</h3>
 			{#each passkeys as passkey}
-				<div class="passkey">
+				<div class="item passkey">
 					<dfn title={passkey.deviceType == 'multiDevice' ? 'Multiple devices' : 'Single device'}>
-						<Icon i={passkey.deviceType == 'multiDevice' ? 'laptop-mobile' : 'mobile'} />
+						<Icon i={passkey.deviceType == 'multiDevice' ? 'laptop-mobile' : 'mobile'} --size="16px" />
 					</dfn>
 					<dfn title="This passkey is {passkey.backedUp ? '' : 'not '}backed up">
-						<Icon i={passkey.backedUp ? 'circle-check' : 'circle-xmark'} />
+						<Icon i={passkey.backedUp ? 'circle-check' : 'circle-xmark'} --size="16px" />
 					</dfn>
-					<p>Created {new Date(passkey.createdAt).toLocaleString()}</p>
 					{#if passkey.name}
 						<p>{passkey.name}</p>
 					{:else}
 						<p class="subtle"><i>Unnamed</i></p>
 					{/if}
+					<p>Created {passkey.createdAt.toLocaleString()}</p>
 					{@render action('edit_passkey#' + passkey.id)}
 					{#if passkeys.length > 1}
 						{@render action('delete_passkey#' + passkey.id, 'trash')}
 					{:else}
 						<dfn title="You must have at least one passkey" class="disabled">
-							<Icon i="trash-slash" --fill="#888" />
+							<Icon i="trash-slash" --fill="#888" --size="16px" />
 						</dfn>
 					{/if}
 				</div>
@@ -153,12 +167,56 @@
 					<p>Are you sure you want to delete this passkey?<br />This action can't be undone.</p>
 				</FormDialog>
 			{/each}
-			<button onclick={() => createPasskey(user.id).then(passkeys.push.bind(passkeys))}><Icon i="plus" /> Create</button>
+			<span>
+				<button onclick={() => createPasskey(user.id).then(passkeys.push.bind(passkeys))}><Icon i="plus" /> Create</button>
+			</span>
+		</div>
+
+		<div class="section main">
+			<h3>Sessions</h3>
+			{#each sessions as session}
+				<div class="item session">
+					<p>
+						{session.id.slice(0, 4)}...{session.id.slice(-4)}
+						{#if session.id == currentSession.id}
+							<span class="current">Current</span>
+						{/if}
+						{#if session.elevated}
+							<span class="elevated">Elevated</span>
+						{/if}
+					</p>
+					<p>Created {session.created.toLocaleString()}</p>
+					<p>Expires {session.expires.toLocaleString()}</p>
+					{@render action('logout#' + session.id, 'right-from-bracket')}
+				</div>
+				<FormDialog
+					bind:dialog={dialogs['logout#' + session.id]}
+					submit={() =>
+						logout(user.id, session.id).then(() => {
+							if (session.id == currentSession.id) goto('/');
+							else sessions.splice(sessions.indexOf(session), 1);
+						})}
+					submitText="Logout"
+				>
+					<p>Are you sure you want to log out this session?</p>
+				</FormDialog>
+			{/each}
+			<span>
+				<button onclick={() => dialogs.logout_all.showModal()} class="danger">Logout All</button>
+			</span>
+			<FormDialog
+				bind:dialog={dialogs['logout_all']}
+				submit={() => logoutAll(user.id).then(() => goto('/'))}
+				submitText="Logout All Sessions"
+				submitDanger
+			>
+				<p>Are you sure you want to log out all sessions?</p>
+			</FormDialog>
 		</div>
 	</div>
 {:catch error}
 	<div class="error">
-		<h3>Failed to load your account</h3>
+		<h3>Failed to load account</h3>
 		<p>{'message' in error ? error.message : error}</p>
 	</div>
 {/await}
@@ -191,12 +249,16 @@
 
 	.section .item {
 		display: grid;
-		grid-template-columns: 10em 1fr 2em;
 		align-items: center;
 		width: 100%;
 		gap: 1em;
 		text-wrap: nowrap;
+		border-top: 1px solid #8888;
 		padding-bottom: 1em;
+	}
+
+	.info {
+		grid-template-columns: 10em 1fr 2em;
 
 		> :first-child {
 			margin-left: 1em;
@@ -204,21 +266,26 @@
 	}
 
 	.passkey {
-		display: grid;
 		grid-template-columns: 1em 1em 1fr 1fr 1em 1em;
-		border-top: 1px solid #8888;
-		align-items: center;
-		width: 100%;
-		gap: 1em;
-		text-wrap: nowrap;
-		padding-bottom: 1em;
 
-		dfn {
+		dfn:not(.disabled) {
 			cursor: help;
 		}
+	}
+
+	.session {
+		grid-template-columns: 1fr 1fr 1fr 1em;
+
+		.current {
+			border-radius: 2em;
+			padding: 0 0.5em;
+			background-color: #337;
+		}
 
-		dfn.disabled {
-			cursor: not-allowed;
+		.elevated {
+			border-radius: 2em;
+			padding: 0 0.5em;
+			background-color: #733;
 		}
 	}
 </style>

package/web/routes/api/[...path]/+server.ts

@@ -1,6 +1,6 @@
 import type { RequestMethod } from '@axium/core/requests';
-import { resolveRoute } from '@axium/server/routes.js';
-import { config } from '@axium/server/config.js';
+import { resolveRoute } from '@axium/server/routes';
+import { config } from '@axium/server/config';
 import { error, json, type RequestEvent, type RequestHandler } from '@sveltejs/kit';
 import z from 'zod/v4';