Add create account functionality

assets/global.css

@@ -60,6 +60,7 @@ button {
 
 fieldset {
 	padding-inline: 0.5rem;
+	width: fit-content;
 }
 
 label {
@@ -70,7 +71,7 @@ label>* {
 	margin-inline-start: 0.5rem;
 }
 
-p + p {
+:is(p, form, fieldset, pre) + :is(p, form, fieldset, pre) {
 	margin-block-start: 0.5rem;
 }
 

components/Header.vue

@@ -8,11 +8,11 @@
 		</nav>
 		<div class="account">
 			<template v-if="session?.account">
-				{{ session.account.name || "anonymous" }}
+				{{ session.account.name }}
 				(s:{{ session.id }} a:{{ session.account.id }}{{ session.push ? " push" : null }})
 				{{ session.account.type }}
 				<NuxtLink to="/account/settings">Settings</NuxtLink>
-				<LogOutButton />
+				<LogOutButton v-if="session.account.type !== 'anonymous'"/>
 			</template>
 			<template v-else>
 				<NuxtLink to="/login">Log In</NuxtLink>

pages/account/settings.vue

@@ -1,7 +1,9 @@
 <template>
 	<main>
 		<h1>Account Settings</h1>
-		<p>Name: {{ session?.account.name }}</p>
+		<p v-if="session?.account.type !== 'anonymous'">
+			Name: {{ session?.account.name }}
+		</p>
 		<p>Access: {{ session?.account.type }}</p>
 		<p>
 			<PushNotification />
@@ -37,9 +39,3 @@ async function deleteAccount() {
 	}
 }
 </script>
-
-<style scoped>
-fieldset {
-	width: fit-content;
-}
-</style>

pages/login.vue

@@ -5,6 +5,25 @@
 			<input v-model="name" type="text" placeholder="Name" required>
 			<button type="submit">Log In</button>
 		</form>
+		<h2 id="create-account">Create Account</h2>
+		<p>If you don't have an account you may create one</p>
+		<form @submit.prevent="createAccount">
+			<fieldset>
+				<legend>Regular Account</legend>
+				<label>
+					Name:
+					<input v-model="createName" type="text" placeholder="Name" required />
+				</label>
+				<button type="submit">Create account</button>
+			</fieldset>
+		</form>
+		<p>
+			If you do not wish to deal with logins you may create an anonymous account tied to this device.
+		</p>
+		<fieldset>
+			<legend>Anonymous Account</legend>
+			<button type="button" @click="createAnonymousAccount">Create anonymous account</button>
+		</fieldset>
 		<pre><code>{{ result }}</code></pre>
 		<pre><code>Session: {{ session }}</code></pre>
 	</main>
@@ -36,4 +55,41 @@ async function logIn() {
 		result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
 	}
 }
+
+const createName = ref("");
+async function createAccount() {
+	try {
+		const res = await $fetch.raw("/api/account", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/x-www-form-urlencoded",
+			},
+			body: new URLSearchParams({ name: createName.value })
+		});
+		result.value = `Server replied: ${res.status} ${res.statusText}`;
+		await sessionRefresh();
+
+	} catch (err: any) {
+		console.log(err);
+		console.log(err.data);
+		result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
+	}
+}
+async function createAnonymousAccount() {
+	try {
+		const res = await $fetch.raw("/api/account", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/x-www-form-urlencoded",
+			},
+		});
+		result.value = `Server replied: ${res.status} ${res.statusText}`;
+		await sessionRefresh();
+
+	} catch (err: any) {
+		console.log(err);
+		console.log(err.data);
+		result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
+	}
+}
 </script>

pages/schedule.vue

@@ -5,9 +5,10 @@
 			Study carefully, we only hold these events once a year.
 		</p>
 		<p v-if="!session">
-			<NuxtLink to="/login">Login</NuxtLink> to get notified about updates to the schedule.
+			<NuxtLink to="/login">Login</NuxtLink> or <NuxtLink to="/login#create-account">Create an account</NuxtLink>
+			to get notified about updates to the schedule.
 		</p>
-		<p>
+		<p v-else>
 			Check out your <NuxtLink to="/account/settings">Account Setting</NuxtLink> to set up notifications for changes to schedule.
 		</p>
 		<h2>Schedule</h2>

server/api/account.post.ts

@@ -0,0 +1,53 @@
+import { readAccounts, writeAccounts, nextAccountId } from "~/server/database";
+import { Account } from "~/shared/types/account";
+
+export default defineEventHandler(async (event) => {
+	let session = await getAccountSession(event);
+	if (session) {
+		throw createError({
+			status: 409,
+			message: "Cannot create account while having an active session."
+		});
+	}
+
+	const formData = await readFormData(event);
+	const name = formData.get("name");
+
+	const accounts = await readAccounts();
+	let account: Account;
+	if (typeof name === "string") {
+		if (name === "") {
+			throw createError({
+				status: 400,
+				message: "Name cannot be blank",
+			});
+		}
+		if (accounts.some(account => account.name && account.name.toLowerCase() === name.toLowerCase())) {
+			throw createError({
+				status: 409,
+				message: "User already exists",
+			});
+		}
+
+		account = {
+			id: await nextAccountId(),
+			type: "regular",
+			name,
+		};
+
+	} else if (name === null) {
+		account = {
+			id: await nextAccountId(),
+			type: "anonymous",
+		};
+	} else {
+		throw createError({
+			status: 400,
+			message: "Invalid name",
+		});
+	}
+
+	accounts.push(account);
+	await writeAccounts(accounts);
+	await setAccountSession(event, account.id);
+})

server/api/auth/session.delete.ts

@@ -1,3 +1,19 @@
+import { readAccounts } from "~/server/database";
+
 export default defineEventHandler(async (event) => {
+	const session = await getAccountSession(event);
+	if (session) {
+		const accounts = await readAccounts();
+		const account = accounts.find(
+			account => account.id === session.accountId
+		);
+		if (account && account.type === "anonymous") {
+			throw createError({
+				status: 409,
+				message: "Cannot log out of an anonymous account",
+			});
+		}
+	}
+
 	await clearAccountSession(event);
 })

server/database.ts

@@ -9,6 +9,7 @@ import { generateDemoSchedule, generateDemoAccounts } from "./generate-demo-sche
 const schedulePath = "data/schedule.json";
 const subscriptionsPath = "data/subscriptions.json";
 const accountsPath = "data/accounts.json";
+const nextAccountIdPath = "data/next-account-id.json";
 const sessionsPath = "data/sessions.json";
 const nextSessionIdPath = "data/next-session-id.json";
 
@@ -45,6 +46,15 @@ export async function writeSubscriptions(subscriptions: Subscription[]) {
 	await writeFile(subscriptionsPath, JSON.stringify(subscriptions, undefined, "\t") + "\n", "utf-8");
 }
 
+export async function nextAccountId() {
+	let nextId = await readJson(nextAccountIdPath, 0);
+	if (nextId === 0) {
+		nextId = Math.max(...(await readAccounts()).map(account => account.id), -1) + 1;
+	}
+	await writeFile(nextAccountIdPath, String(nextId + 1), "utf-8");
+	return nextId;
+}
+
 export async function readAccounts() {
 	return await readJson(accountsPath, generateDemoAccounts);
 }