From 410d0fc5876692ed9b9a434e6c900e887b42e16f Mon Sep 17 00:00:00 2001
From: Branden J Brown <zephyrtronium@gmail.com>
Date: Fri, 2 Feb 2024 08:28:36 -0600
Subject: [PATCH] add register and login to frontend

---
 site/components.d.ts               |  1 +
 site/src/App.vue                   | 34 ++++++++++-
 site/src/components/TheLanding.vue | 97 ++++++++++++------------------
 site/src/components/TheLogin.vue   | 71 ++++++++++++++++++++++
 4 files changed, 144 insertions(+), 59 deletions(-)
 create mode 100644 site/src/components/TheLogin.vue

diff --git a/site/components.d.ts b/site/components.d.ts
index 6eda1f4..2b227d1 100644
--- a/site/components.d.ts
+++ b/site/components.d.ts
@@ -13,5 +13,6 @@ declare module 'vue' {
     PlayerHP: typeof import('./src/components/PlayerHP.vue')['default']
     PlayerItems: typeof import('./src/components/PlayerItems.vue')['default']
     TheLanding: typeof import('./src/components/TheLanding.vue')['default']
+    TheLogin: typeof import('./src/components/TheLogin.vue')['default']
   }
 }
diff --git a/site/src/App.vue b/site/src/App.vue
index 6424e01..fefd170 100644
--- a/site/src/App.vue
+++ b/site/src/App.vue
@@ -7,7 +7,15 @@
 			</template>
 		</v-app-bar>
 		<v-main>
-			<TheLanding v-if="!playing && !loading" @play="clickPlay" />
+			<v-container v-if="!playing && !loading">
+				<TheLanding />
+				<v-row v-if="!loadingMe && !me" class="d-flex justify-center">
+					<TheLogin />
+				</v-row>
+				<v-row v-else-if="!loadingMe" class="d-flex justify-center">
+					<v-btn @click="clickPlay" color="primary">Play</v-btn>
+				</v-row>
+			</v-container>
 			<v-container v-else-if="loading" class="fill-height">
 				<v-row class="d-flex justify-center">
 					<v-progress-circular class="pa-8" indeterminate size="128"></v-progress-circular>
@@ -20,7 +28,7 @@
 
 <script setup lang="ts">
 import { useDark, useToggle } from '@vueuse/core';
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import type { Action, Game } from '@/lib/game';
 
 const dark = useDark();
@@ -54,4 +62,26 @@ const testGame = ref<Game>({
 function action(evt: Action) {
 	console.log(evt);
 }
+
+const loadingMe = ref(true);
+const me = ref<string | null>(null);
+onMounted(async () => {
+	loadingMe.value = true;
+	try {
+		const resp = await fetch('/user/me', {
+			method: 'GET',
+			mode: 'same-origin',
+			credentials: 'same-origin',
+		})
+		loadingMe.value = false;
+		if (!resp.ok) {
+			me.value = null;
+			return;
+		}
+		const { id } = await resp.json();
+		me.value = id as string;
+	} catch {
+		me.value = null;
+	}
+});
 </script>
diff --git a/site/src/components/TheLanding.vue b/site/src/components/TheLanding.vue
index fde08dc..9d0c90c 100644
--- a/site/src/components/TheLanding.vue
+++ b/site/src/components/TheLanding.vue
@@ -1,59 +1,42 @@
 <template>
-	<v-container>
-		<v-row>
-			<v-col>
-				<v-sheet rounded :elevation="5" class="pa-4">
-					This is an experimental PvP reimplementation of <a href="https://mikeklubnika.itch.io/buckshot-roulette" target="_blank">Buckshot Roulette, a computer game by Mike Klubnika</a>.
-					Please play here only if you've bought and played the original.
-				</v-sheet>
-			</v-col>
-		</v-row>
-		<v-row>
-			<v-col>
-				<v-sheet rounded :elevation="5" class="pa-4">
-					When you log in and press PLAY below, you will be randomly matched with an opponent.
-					One player will be assigned as the dealer, and the other will be the challenger.
-					While there are plenty of changes that might improve balance for a PvP version of this game, the current rules are as in the original.
-					The challenger moves first each time the shotgun is loaded, but must win three rounds to win the match.
-					The dealer only needs to win one round.
-				</v-sheet>
-			</v-col>
-		</v-row>
-		<v-row>
-			<v-col>
-				<v-sheet rounded :elevation="5" class="pa-4">
-					There are no niceties in this implementation:
-					<ul>
-						<li>No MMR. Matching is done purely on a first-come, first-served basis.</li>
-						<li>No saves. If you disconnect, or the server goes down for any reason, everything is gone.</li>
-						<li>No pretty. Buckshot Roulette is an incredibly stylish and atmospheric game; this version is not.</li>
-					</ul>
-				</v-sheet>
-			</v-col>
-		</v-row>
-		<v-row>
-			<v-col>
-				<v-sheet rounded :elevation="5" class="pa-4">
-					Similarly, this server is not intended to be robust.
-					It runs on a hand-me-down PC sitting on the floor of my living room, the same computer that runs <a href="https://twitch.tv/robotisbroken" target="_blank">RobotIsBroken</a>.
-					Please don't DoS me. It won't be a challenge.
-				</v-sheet>
-			</v-col>
-		</v-row>
-		<v-row>
-			<v-col width="auto"></v-col>
-			<v-col cols="auto">
-				<v-btn color="primary" @click="emit('play')">Play</v-btn>
-			</v-col>
-			<v-col width="auto"></v-col>
-		</v-row>
-	</v-container>
+	<v-row>
+		<v-col>
+			<v-sheet rounded :elevation="5" class="pa-4">
+				This is an experimental PvP reimplementation of <a href="https://mikeklubnika.itch.io/buckshot-roulette" target="_blank">Buckshot Roulette, a computer game by Mike Klubnika</a>.
+				Please play here only if you've bought and played the original.
+			</v-sheet>
+		</v-col>
+	</v-row>
+	<v-row>
+		<v-col>
+			<v-sheet rounded :elevation="5" class="pa-4">
+				When you log in and press PLAY below, you will be randomly matched with an opponent.
+				One player will be assigned as the dealer, and the other will be the challenger.
+				While there are plenty of changes that might improve balance for a PvP version of this game, the current rules are as in the original.
+				The challenger moves first each time the shotgun is loaded, but must win three rounds to win the match.
+				The dealer only needs to win one round.
+			</v-sheet>
+		</v-col>
+	</v-row>
+	<v-row>
+		<v-col>
+			<v-sheet rounded :elevation="5" class="pa-4">
+				There are no niceties in this implementation:
+				<ul>
+					<li>No MMR. Matching is done purely on a first-come, first-served basis.</li>
+					<li>No saves. If you disconnect, or the server goes down for any reason, everything is gone.</li>
+					<li>No pretty. Buckshot Roulette is an incredibly stylish and atmospheric game; this version is not.</li>
+				</ul>
+			</v-sheet>
+		</v-col>
+	</v-row>
+	<v-row>
+		<v-col>
+			<v-sheet rounded :elevation="5" class="pa-4">
+				Similarly, this server is not intended to be robust.
+				It runs on a hand-me-down PC sitting on the floor of my living room, the same computer that runs <a href="https://twitch.tv/robotisbroken" target="_blank">RobotIsBroken</a>.
+				Please don't DoS me. It won't be a challenge.
+			</v-sheet>
+		</v-col>
+	</v-row>
 </template>
-
-<script setup lang="ts">
-type Emits = {
-	(e: 'play'): void;
-}
-
-const emit = defineEmits<Emits>();
-</script>
diff --git a/site/src/components/TheLogin.vue b/site/src/components/TheLogin.vue
new file mode 100644
index 0000000..d7ccca4
--- /dev/null
+++ b/site/src/components/TheLogin.vue
@@ -0,0 +1,71 @@
+<template>
+    <v-dialog v-model="register" max-width="800">
+        <template #activator="{ props }">
+            <v-btn @click="register = !register" class="mx-4" color="secondary">Register</v-btn>
+        </template>
+        <v-card title="Register for an account">
+            <v-card-text>
+                <p class="text-button">This website uses cookies to provide its basic functionality. By signing up for an account, you agree to these cookies.</p>
+                <p class="text-button mb-8">I strive to collect the least user information possible and will never use it for any purpose except to provide the service.</p>
+                <v-form v-model="valid" action="/user/register" method="post">
+                    <v-text-field v-model="user" label="username" name="user" clearable :rules="userRules"></v-text-field>
+                    <v-text-field v-model="pass" label="password" name="pass" clearable :rules="passRules" type="password"></v-text-field>
+                    <v-row class="mx-4 my-2">
+                        <v-btn variant="tonal" @click="doCancel">Cancel</v-btn>
+                        <v-spacer></v-spacer>
+                        <v-btn variant="tonal" color="success" type="submit" :disabled="!valid">Register</v-btn>
+                    </v-row>
+                </v-form>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+    <v-dialog v-model="login" max-width="800">
+        <template #activator="{ props }">
+            <v-btn @click="login = !login" class="mx-4" color="primary">Log In</v-btn>
+        </template>
+        <v-card title="Log In">
+            <v-card-text>
+                <p class="text-button">This website uses cookies to provide its basic functionality. By signing into your account, you agree to these cookies.</p>
+                <p class="text-button mb-8">I strive to collect the least user information possible and will never use it for any purpose except to provide the service.</p>
+                <v-form v-model="valid" action="/user/login" method="post">
+                    <v-text-field v-model="user" label="username" name="user" clearable :rules="userRules"></v-text-field>
+                    <v-text-field v-model="pass" label="password" name="pass" clearable :rules="passRules" type="password"></v-text-field>
+                    <v-row class="mx-4 my-2">
+                        <v-btn variant="tonal" @click="doCancel">Cancel</v-btn>
+                        <v-spacer></v-spacer>
+                        <v-btn variant="tonal" color="success" type="submit" :disabled="!valid">Log In</v-btn>
+                    </v-row>
+                </v-form>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const valid = ref<boolean | null>(null);
+
+const register = ref(false);
+const login = ref(false);
+
+const user = ref('');
+const pass = ref('');
+
+const userRules = [
+    (v: string) => v.length >= 4 || 'username too short',
+    (v: string) => v.length <= 30 || 'username too long',
+];
+
+const passRules = [
+    (v: string) => v.length >= 8 || 'password too short',
+    (v: string) => v.length <= 256 || 'password too long',
+]
+
+function doCancel() {
+    user.value = '';
+    pass.value = '';
+    register.value = false;
+    login.value = false;
+}
+</script>