Create a per-user admin page to inspect users

Add page to allow admins to inspect all of the details stored on the
server of a user account.  For now this is just the UserDetails, but
in the future this is planned to be expanded to also show sessions
and logs.

components/TableUsers.vue

@@ -17,7 +17,12 @@
 			<tr v-for="user in usersStore.users.values()">
 				<td>{{ user.id }}</td>
 				<td>
-					{{ user.name }}
+					<NuxtLink :to="`/admin/users/${user.id}`">
+						<template v-if="user.name">
+							{{ user.name }}
+						</template>
+						<i v-else>(empty)</i>
+					</NuxtLink>
 				</td>
 				<td>
 					<select
@@ -39,7 +44,7 @@
 					<button
 						v-if="user.isModified()"
 						type="button"
-						@click="saveUser(user);"
+						@click="usersStore.saveUser(user);"
 					>Save</button>
 					<button
 						v-if="user.isModified()"
@@ -55,18 +60,6 @@
 <script lang="ts" setup>
 useEventSource();
 const usersStore = useUsersStore();
-
-async function saveUser(user: ClientUser) {
-	try {
-		await $fetch("/api/admin/user", {
-			method: "PATCH",
-			body: user.toApi(),
-		});
-	} catch (err: any) {
-		console.error(err);
-		alert(err?.data?.message ?? err.message);
-	}
-}
 </script>
 
 <style>

pages/admin/users/[id].vue

@@ -0,0 +1,94 @@
+<template>
+	<main v-if="userDetails.deleted">
+		<h1>Deleted user {{ id }}</h1>
+	</main>
+	<main v-else>
+		<h1>User {{ user.name }}</h1>
+		<dl>
+			<dt>
+				<label for="user-type">
+					Type
+				</label>
+			</dt>
+			<dd>
+				<select
+					v-if='user.type !== "anonymous"'
+					v-model="user.type"
+				>
+					<option value="regular">Regular</option>
+					<option value="crew">Crew</option>
+					<option value="admin">Admin</option>
+				</select>
+				<template v-else>
+					{{ user.type }}
+				</template>
+			</dd>
+			<dt>Interested Events:</dt>
+			<dd>{{ userDetails.interestedEventIds }}</dd>
+			<dt>Interested Slots:</dt>
+			<dd>{{ userDetails.interestedEventSlotIds }}</dd>
+			<dt>Timezone:</dt>
+			<dd>{{ userDetails.timezone }}</dd>
+			<dt>Locale:</dt>
+			<dd>{{ userDetails.locale }}</dd>
+		</dl>
+		<button
+			:disabled="!user.isModified()"
+			type="button"
+			@click="usersStore.saveUser(user);"
+		>Save</button>
+		<button
+			:disabled="!user.isModified()"
+			type="button"
+			@click="user.discard()"
+		>Discard</button>
+	</main>
+</template>
+
+<script lang="ts" setup>
+import type { ApiTombstone, ApiUserDetails } from '~/shared/types/api';
+
+useHead({
+	title: "Admin",
+});
+
+useEventSource();
+const route = useRoute();
+const usersStore = useUsersStore();
+await usersStore.fetch();
+
+const id = computed(() => {
+	const id = queryToNumber(route.params.id);
+	if (id === undefined) {
+		throw createError({
+			statusCode: 400,
+			statusMessage: "Bad Request",
+			message: "User id required",
+		});
+	}
+	return id;
+});
+const user = computed(() => {
+	const user =  usersStore.users.get(id.value);
+	if (user === undefined) {
+		throw createError({
+			statusCode: 404,
+			statusMessage: "Not Found",
+			message: "User not found",
+		});
+	}
+	return user;
+});
+
+const { pending, data, error } = await useFetch(() => `/api/users/${id.value}/details`);
+const userDetails = data as Ref<ApiUserDetails | ApiTombstone>;
+</script>
+
+<style>
+dl {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	column-gap: 0.5rem;
+}
+
+</style>

server/api/users/[id]/details.get.ts

@@ -0,0 +1,34 @@
+import { z } from "zod/v4-mini";
+import { readUsers } from "~/server/database";
+import { serverUserToApiDetails } from "~/server/utils/user";
+
+const integerStringSchema = z.pipe(
+	z.string().check(z.regex(/^\d+/)),
+	z.transform(Number)
+);
+
+const detailsSchema = z.object({
+	id: integerStringSchema,
+});
+
+export default defineEventHandler(async (event) => {
+	await requireServerSessionWithAdmin(event);
+	const users = await readUsers();
+	const { success, error, data: params } = detailsSchema.safeParse(getRouterParams(event));
+	if (!success) {
+		throw createError({
+			status: 400,
+			statusText: "Bad Request",
+			message: z.prettifyError(error),
+		});
+	}
+	const user = users.find(user => user.id === params.id);
+	if (!user) {
+		throw createError({
+			statusCode: 404,
+			statusMessage: "Not found",
+		});
+	}
+
+	return serverUserToApiDetails(user);
+})

server/utils/user.ts

@@ -3,7 +3,7 @@
 	SPDX-License-Identifier: AGPL-3.0-or-later
 */
 import type { ServerUser } from "~/server/database"
-import type { ApiTombstone, ApiUser } from "~/shared/types/api";
+import type { ApiTombstone, ApiUser, ApiUserDetails } from "~/shared/types/api";
 
 export function serverUserToApi(user: ServerUser): ApiUser | ApiTombstone {
 	if (user.deleted) {
@@ -20,3 +20,21 @@ export function serverUserToApi(user: ServerUser): ApiUser | ApiTombstone {
 		name: user.name,
 	}
 }
+
+export function serverUserToApiDetails(user: ServerUser): ApiUserDetails | ApiTombstone {
+	if (user.deleted) {
+		return {
+			id: user.id,
+			updatedAt: user.updatedAt,
+			deleted: true,
+		}
+	}
+	return {
+		id: user.id,
+		updatedAt: user.updatedAt,
+		interestedEventIds: user.interestedEventIds,
+		interestedEventSlotIds: user.interestedEventSlotIds,
+		timezone: user.timezone,
+		locale: user.locale,
+	}
+}

shared/types/api.ts

@@ -35,17 +35,7 @@ export const apiUserTypeSchema = z.union([
 ])
 export type ApiUserType = z.infer<typeof apiUserTypeSchema>;
 
-export interface ApiAccount {
+export type ApiAccount = ApiUser & ApiUserDetails
-	id: Id,
-	updatedAt: string,
-	type: ApiUserType,
-	/** Name of the account. Not present on anonymous accounts */
-	name?: string,
-	interestedEventIds?: number[],
-	interestedEventSlotIds?: number[],
-	timezone?: string,
-	locale?: string,
-}
 
 export const apiAccountPatchSchema = z.object({
 	name: z.optional(z.string()),
@@ -151,6 +141,16 @@ export const apiUserPatchSchema = z.object({
 });
 export type ApiUserPatch = z.infer<typeof apiUserPatchSchema>;
 
+export interface ApiUserDetails {
+	id: Id,
+	updatedAt: string,
+	deleted?: false,
+	interestedEventIds?: number[],
+	interestedEventSlotIds?: number[],
+	timezone?: string,
+	locale?: string,
+}
+
 export interface ApiAccountUpdate {
 	type: "account-update",
 	data: ApiAccount,

stores/users.ts

@@ -62,6 +62,17 @@ export const useUsersStore = defineStore("users", () => {
 			state.fetched.value = false;
 			await actions.fetch();
 		},
+		async saveUser(user: ClientUser) {
+			try {
+				await $fetch("/api/admin/user", {
+					method: "PATCH",
+					body: user.toApi(),
+				});
+			} catch (err: any) {
+				console.error(err);
+				alert(err?.data?.message ?? err.message);
+			}
+		},
 	}
 
 	appEventSource?.addEventListener("update", (event) => {