Add create account functionality

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>