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.

pages/admin/index.vue

@@ -0,0 +1,115 @@
+<!--
+	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
+	SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<main>
+		<h1>Admin</h1>
+		<Tabs
+			:tabs
+			default="users"
+		>
+			<template #users>
+				<TableUsers />
+			</template>
+			<template #database>
+				<p>
+					To backup the database you can create and download a
+					database snapshot. This will export all schedule and user
+					data stored on the server into a single JSON file that can
+					then later be used to replace the exsting content of the
+					database to restore the system to the state it was in when
+					the snapshot was created.
+				</p>
+				<form
+					action="/api/admin/database-export"
+					method="post"
+				>
+					<p>
+						<button type="submit">
+							Download snapshot
+						</button>
+					</p>
+				</form>
+				<fieldset>
+					<legend>Restore Database</legend>
+					<p>
+						To restore the system to a previous state you can load a
+						database snapshot obtained from previously running the
+						database snapshot tool above. This will delete all
+						changes including new events, shifts, users and user
+						data that has created since the snapshot was created.
+					</p>
+					<form
+						action="/api/admin/database-import"
+						enctype="multipart/form-data"
+						method="post"
+					>
+						<p>
+							<label>
+								Database snapshot:
+								<input name="snapshot" type="file">
+							</label>
+						</p>
+						<p>
+							<button type="submit">
+								Restore database
+							</button>
+						</p>
+					</form>
+				</fieldset>
+				<fieldset>
+					<legend>Danger Zone</legend>
+					<p>
+						If you wish to start over with the schedule, you can use
+						this button to delete the current schedule.
+					</p>
+					<form
+						action="/api/admin/delete-schedule"
+						method="post"
+					>
+						<p>
+							<button type="submit">
+								Delete schedule
+							</button>
+						</p>
+					</form>
+					<p>
+						If you wish to see a demo of how the system can be used
+						you can replace the existing schedule with a generated
+						demo schedule that shows off all the features. <b>This
+						will delete all existing data including users!</b>
+					</p>
+					<form
+						action="/api/admin/database-import-demo"
+						method="post"
+					>
+						<p>
+							<button type="submit">
+								Replace with demo
+							</button>
+						</p>
+					</form>
+				</fieldset>
+			</template>
+		</Tabs>
+	</main>
+</template>
+
+<script lang="ts" setup>
+useHead({
+	title: "Admin",
+});
+
+const usersStore = useUsersStore();
+await usersStore.fetch();
+
+const tabs = [
+	{ id: "users", title: "Users" },
+	{ id: "database", title: "Database" },
+];
+</script>
+
+<style>
+
+</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>