chore: remove unused styles

app.vue

@@ -1,3 +1,19 @@
 <template>
-  <NuxtLayout />
+  <NuxtPage />
 </template>
+
+<style>
+html,
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  box-sizing: border-box;
+  color: rgb(190, 190, 190);
+  background-color: rgb(30, 30, 30);
+  height: 100%;
+  margin: 0;
+}
+
+a {
+  color: aquamarine;
+}
+</style>

assets/img/check-mark.svg

@@ -0,0 +1 @@
+<svg style="height: 512px; width: 512px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 0h512v512H0z" fill="#000" fill-opacity="1"></path><g class="" style="" transform="translate(0,0)"><path d="M17.47 250.9C88.82 328.1 158 397.6 224.5 485.5c72.3-143.8 146.3-288.1 268.4-444.37L460 26.06C356.9 135.4 276.8 238.9 207.2 361.9c-48.4-43.6-126.62-105.3-174.38-137z" fill="#fff" fill-opacity="1"></path></g></svg>

layouts/auth.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="main-container">
+    <div id="auth-form-container">
+      <slot />
+    </div>
+    <div v-if="accessToken">
+      You're logged in!
+      <button @click="logout">Log out</button>
+    </div>
+    <div v-if="res">
+      Response:
+      <p>
+        {{ res }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const apiVersion = useRuntimeConfig().public.apiVersion;
+
+const accessToken = useCookie("access_token");
+
+const res = ref();
+
+async function logout(e: Event) {
+  e.preventDefault();
+  accessToken.value = null;
+  useCookie("refresh_token").value = null;
+  res.value = await $fetch(`/api/v${apiVersion}/auth/revoke`, { credentials: "include" });
+}
+
+</script>
+
+<style>
+#main-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#auth-form-container,
+#auth-form-container form {
+  display: flex;
+  width: 50dvw;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
+}
+
+#auth-form-container form {
+  text-align: left;
+  margin-top: 10dvh;
+}
+</style>

layouts/client.vue

@@ -1,17 +1,18 @@
 <template>
 	<div id="client-root">
-		<div id="home">
+		<div id="home" class=".homebar-item">
 			<NuxtLink href="/web">
 				<img src="~/assets/img/house.svg" alt="Home">
 			</NuxtLink>
 		</div>
-		<div id="current-channel">
+		<div id="current-channel" class=".homebar-item">
 			main bar
 		</div>
-		<div id="test">test</div>
+		<div id="test" class=".homebar-item">test</div>
+		<div id="test2" class=".homebar-item">test2</div>
 		<div id="servers-list">
 			<NuxtLink v-for="server of servers" :href="'web' + server.url">
-				<img src="~/assets/img/server.svg" :alt="server.name" width="1%">
+				<img src="~/assets/img/server.svg" :alt="server.name">
 			</NuxtLink>
 		</div>
 		<div id="channels-list" class="main-grid-row">
@@ -20,6 +21,9 @@
 		<div id="message-history" class="main-grid-row">
 			<Message v-for="message of messages" :img="pfp" :username="message.author.username" :text="message.text"
 				:timestamp="message.timestamp" format="12" />
+			<div id="message-box" class="main-grid-row">
+				<input type="text" name="message-box-input" id="message-box-input">
+			</div>
 		</div>
 		<div id="members-list">
 			<div class="member-item" v-for="member of members">
@@ -28,6 +32,7 @@
 			</div>
 		</div>
 	</div>
+	<NuxtPage />
 </template>
 
 <script lang="ts" setup>
@@ -149,12 +154,12 @@ const channels = [
 	/* border: 1px solid white; */
 	height: 100%;
 	display: grid;
-	grid-template-columns: 1fr 18fr 4fr;
+	grid-template-columns: 1fr 4fr 18fr 4fr;
 	grid-template-rows: 8dvh auto;
 	text-align: center;
 }
 
-#client-root > div:nth-child(-n+3) {
+#client-root>div:nth-child(-n+4) {
 	border-bottom: 1px solid rgb(70, 70, 70);
 }
 
@@ -162,8 +167,7 @@ const channels = [
 	/* border: 1px solid cyan; */
 }
 
-#main-bar {
+#main-bar {}
-}
 
 #__nuxt {
 	display: flex;
@@ -242,6 +246,12 @@ const channels = [
 	/* border: 1px solid cyan; */
 }
 
-#main-bar {
+#main-bar {}
+
+#servers-list,
+#channels-list,
+#message-history,
+#members-list {
+	margin-top: 3dvh;
 }
 </style>

layouts/default.vue

@@ -1,19 +0,0 @@
-<template>
-  <NuxtPage />
-</template>
-
-<script lang="ts" setup>
-
-</script>
-
-<style>
-html,
-body {
-  font-family: Arial, Helvetica, sans-serif;
-  box-sizing: border-box;
-  color: rgb(190, 190, 190);
-  background-color: rgb(30, 30, 30);
-  height: 100%;
-  margin: 0;
-}
-</style>

nuxt.config.ts

@@ -2,5 +2,18 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
   devtools: { enabled: true },
-  modules: ['@nuxt/eslint']
+  modules: ['@nuxt/eslint', '@nuxt/image', "@pinia/nuxt"],
+  app: {
+    /*
+      Defines what prefix the client runs on
+      E.g.: baseURL set to "/web" would host at https://gorb.app/web
+      Default is "/" (aka root), which hosts at https://gorb.app/
+    */
+    baseURL: "/",
+  },
+  runtimeConfig: {
+    public: {
+      apiVersion: 1
+    }
+  }
 })

package.json

@@ -11,13 +11,19 @@
   },
   "dependencies": {
     "@nuxt/eslint": "^1.3.0",
+    "@nuxt/image": "1.10.0",
+    "@pinia/nuxt": "0.11.0",
     "nuxt": "^3.17.0",
+    "pinia": "^3.0.2",
+    "pinia-plugin-persistedstate": "^4.2.0",
+    "typescript": "^5.8.3",
     "vue": "^3.5.13",
     "vue-router": "^4.5.1"
   },
   "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
   "license": "MIT",
   "devDependencies": {
+    "@types/node": "^22.15.3",
     "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-prettier": "^5.2.6"
   }

pages/index.vue

@@ -1,16 +1,268 @@
 <template>
-  <div id="main">
+	<div id="client-root">
-    <h1 class="center">Welcome to Gorb, the best chat app in the WORLD!!!</h1>
+		<div id="home" class=".homebar-item">
-    <a href="/web" class="center">Go to web client</a>
+			<NuxtLink href="/web">
-  </div>
+				<img src="~/assets/img/house.svg" alt="Home">
+			</NuxtLink>
+		</div>
+		<div id="current-channel" class=".homebar-item">
+			main bar
+		</div>
+		<div id="test" class=".homebar-item">test</div>
+		<div id="test2" class=".homebar-item">test2</div>
+		<div id="servers-list">
+			<NuxtLink v-for="server of servers" :href="'web' + server.url">
+				<img src="~/assets/img/server.svg" :alt="server.name">
+			</NuxtLink>
+		</div>
+		<div id="channels-list" class="main-grid-row">
+			<Channel v-for="channel of channels" :name="channel.name" :href="`${useRoute().path}/${channel.id}`" />
+		</div>
+		<div id="message-history" class="main-grid-row">
+			<div id="messages">
+				<Message v-for="message of messages" :img="pfp" :username="message.author.username" :text="message.text"
+					:timestamp="message.timestamp" format="12" />
+			</div>
+			<div id="message-box" class="main-grid-row">
+				<form @submit="sendMessage">
+					<input type="text" name="message-box-input" id="message-box-input">
+					<button type="submit">
+						<img :src="checkmark" alt="Send" width="20">
+					</button>
+				</form>
+			</div>
+		</div>
+		<div id="members-list">
+			<div class="member-item" v-for="member of members">
+				<img src="~/assets/img/tiger-head.svg" :alt="member.displayName" width="30dvw">
+				<span class="member-display-name">{{ member.displayName }}</span>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
 
+import pfp from "~/assets/img/tiger-head.svg";
+import checkmark from "~/assets/img/check-mark.png";
+
+const servers = [
+	{
+		name: "Test",
+		url: "/servers/284103257435"
+	},
+	{
+		name: "Test",
+		url: "/servers/284103257435"
+	},
+	{
+		name: "Test",
+		url: "/servers/284103257435"
+	}
+];
+
+const members = [
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	}
+];
+
+const messages = [
+	{
+		author: {
+			id: "3287484395",
+			username: "SauceyRed",
+			avatar: "~/assets/img/tiger-head.svg"
+		},
+		text: "hello gamers!",
+		timestamp: 1745948498000
+	},
+	{
+		author: {
+			id: "3287484395",
+			username: "SauceyRed",
+			avatar: "~/assets/img/tiger-head.svg"
+		},
+		text: "yo what's up!",
+		timestamp: 1745948498000
+	},
+	{
+		author: {
+			id: "3287484395",
+			username: "SauceyRed",
+			avatar: "~/assets/img/tiger-head.svg"
+		},
+		text: "how are you guys?",
+		timestamp: 1745948498000
+	},
+	{
+		author: {
+			id: "3287484395",
+			username: "SauceyRed",
+			avatar: "~/assets/img/tiger-head.svg"
+		},
+		text: "im doing well",
+		timestamp: 1745948498000
+	}
+]
+
+const channels = [
+	{
+		name: "#super-cool-channel",
+		id: "8gh9548rg44"
+	},
+	{
+		name: "#super-lame-channel",
+		id: "hgff45387hy"
+	},
+	{
+		name: "#secret-channel",
+		id: "g8f734h87gt"
+	},
+]
+
+function sendMessage(e: Event) {
+	e.preventDefault();
+	const textInput = document.getElementById("message-box-input") as HTMLInputElement;
+	const text = textInput.value;
+	console.log("MESSAGE SENT!!!");
+	console.log("text:", text);
+}
+
 </script>
 
 <style>
-#main {
+#client-root {
-  text-align: center;
+	/* border: 1px solid white; */
+	height: 100%;
+	display: grid;
+	grid-template-columns: 1fr 4fr 18fr 4fr;
+	grid-template-rows: 8dvh auto;
+	text-align: center;
+}
+
+#client-root>div:nth-child(-n+4) {
+	border-bottom: 1px solid rgb(70, 70, 70);
+}
+
+#__nuxt {
+	display: flex;
+	flex-flow: column;
+	height: 100%;
+}
+
+.grid-column {
+	padding-top: 1dvh;
+}
+
+#home {
+	grid-column: 1;
+	grid-row: 1;
+}
+
+#current-info {
+	grid-column: 2;
+	grid-row: 1;
+}
+
+#test {
+	grid-column: 3;
+	grid-row: 1;
+}
+
+#utilities {
+	display: flex;
+	flex-direction: row;
+	margin-bottom: 3dvh;
+	justify-content: center;
+}
+
+#left-sidebar-container,
+#right-sidebar-container {
+	text-align: center;
+}
+
+.member-item {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.bottom-border {
+	border-bottom: 1px solid rgb(70, 70, 70);
+}
+
+.left-border {
+	border-left: 1px solid rgb(70, 70, 70);
+}
+
+.right-border {
+	border-right: 1px solid rgb(70, 70, 70);
+}
+
+#main-content {
+	display: grid;
+	grid-template-rows: 1fr 15fr 30fr 2fr;
+	text-align: center;
+	margin-left: 1dvw;
+}
+
+#message-box {
+	border: 1px solid rgb(70, 70, 70);
+	width: 100%;
+	margin-bottom: 1dvh;
+	height: 5%;
+	text-align: center;
+}
+
+#message-box-input {
+	width: 80%;
+	height: 100%;
+}
+
+#servers-list,
+#channels-list,
+#message-history,
+#members-list {
+	margin-top: 3dvh;
+}
+
+#message-history {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 }
 </style>

pages/login.vue

@@ -0,0 +1,84 @@
+<template>
+  <NuxtLayout>
+    <form @submit="login">
+      <div>
+        <label for="username">Username/Email</label>
+        <br>
+        <input type="text" name="username" id="username" v-model="form.username">
+      </div>
+      <div>
+        <label for="password">Password</label>
+        <br>
+        <input type="password" name="password" id="password" v-model="form.password">
+      </div>
+      <div>
+        <button type="submit">Login</button>
+      </div>
+    </form>
+    <div>
+      Don't have an account? <NuxtLink href="/register">Register</NuxtLink> one!
+    </div>
+    <div v-if="response">
+      Response:
+      <p>
+        {{ response }}
+      </p>
+    </div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+
+definePageMeta({
+  layout: "auth"
+})
+
+const form = reactive({
+  username: "",
+  password: "",
+});
+
+const response = ref();
+
+//const authStore = useAuthStore();
+const accessToken = useCookie("access_token");
+const refreshToken = useCookie("refresh_token");
+const redirectTo = useRoute().query.redirect_to;
+
+console.log("access token:", accessToken.value);
+console.log("refresh token:", refreshToken.value);
+
+onMounted(() => {
+  console.log("accessToken:", accessToken.value);
+  console.log("refreshToken:", refreshToken.value);
+
+  if (accessToken.value) {
+    //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
+  }
+});
+
+const apiVersion = useRuntimeConfig().public.apiVersion;
+
+async function login(e: Event) {
+  e.preventDefault();
+  console.log("Sending login data");
+  const hashedPass = await hashPassword(form.password);
+  console.log("hashedPass:", hashedPass);
+  //authStore.setAccessToken(accessToken);
+  const res = await $fetch(`/api/v${apiVersion}/auth/login`, {
+    method: "POST", body:
+    {
+      username: form.username, password: hashedPass
+    }
+  }) as { access_token: string, refresh_token: string };
+  response.value = res;
+  accessToken.value = res.access_token;
+  console.log("set access token:", accessToken.value);
+  const refreshToken = useCookie("refresh_token", { secure: true, httpOnly: false });
+  refreshToken.value = res.refresh_token;
+  //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
+}
+
+</script>
+
+<style></style>

pages/register.vue

@@ -0,0 +1,156 @@
+<template>
+  <NuxtLayout>
+    <form @submit="register">
+      <div>
+        <!--
+        <span class="form-error" v-if="errors.username.length > 0">
+          <p v-for="error of errors.username">
+            {{ error }}
+          </p>
+        </span>
+        -->
+        <label for="username">Username</label>
+        <br>
+        <input type="text" name="username" id="username" v-model="form.username">
+      </div>
+      <div>
+        <label for="email">Email</label>
+        <br>
+        <input type="email" name="email" id="email" v-model="form.email">
+      </div>
+      <div>
+        <label for="password">Password</label>
+        <br>
+        <input type="password" name="password" id="password" v-model="form.password">
+      </div>
+      <div>
+        <label for="repeat-password">Password</label>
+        <br>
+        <input type="password" name="repeat-password" id="repeat-password" v-model="form.repeatPassword">
+      </div>
+      <div>
+        <button type="submit">Register</button>
+      </div>
+    </form>
+    <div>
+      Already have an account? <NuxtLink href="/login">Log in</NuxtLink>!
+    </div>
+    <div v-if="response">
+      Response:
+      <p>
+        {{ response }}
+      </p>
+    </div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+
+definePageMeta({
+  layout: "auth"
+})
+
+const form = reactive({
+  username: "",
+  email: "",
+  password: "",
+  repeatPassword: ""
+});
+
+const response = ref();
+
+/*
+const errorMessages = reactive({
+  username: {
+    invalidChars: "Username contains invalid characters!",
+    tooShort: "Username must be at least 2 characters long!",
+    tooLong: "Username must be at most 32 characters long!",
+    empty: "Username must not be empty!"
+  },
+  email: {
+    invalidChars: "Email contains invalid characters!",
+    empty: "Email must not be empty!"
+  },
+  password: {
+    tooShort: "Password must be at least 8 characters long!",
+    missingSpecialChars: "Password must contain at least 1 special character!",
+    empty: "Password must not be empty!"
+  },
+  repeatPassword: [] as { id: string, message: string }[],
+});
+*/
+
+//const authStore = useAuthStore();
+const accessToken = useCookie("access_token");
+const refreshToken = useCookie("refresh_token");
+const redirectTo = useRoute().query.redirect_to;
+
+console.log("access token:", accessToken.value);
+console.log("refresh token:", refreshToken.value);
+
+onMounted(() => {
+  console.log("accessToken:", accessToken.value);
+  console.log("refreshToken:", refreshToken.value);
+
+  if (accessToken.value) {
+    //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
+  }
+});
+
+/*
+watch(() => form.username, (newValue) => {
+  console.log("username change:", newValue);
+  if (!validateUsername(newValue)) {
+    errors.username.push({ id: "invalidCharacters", message: "!" });
+  }
+  if (newValue.length < 2) {
+    errors.username.push({ id: "tooShort", message: "" });
+  } else if (newValue.length > 32) {
+    errors.username.push({ id: "tooLong", message: "" });
+  } else {
+    for (const error of Object.entries(errors.username)) {
+      console.log("error:", error);
+      if (["tooShort", "tooLong"].includes(error[1].id)) {
+        errors.username.splice(parseInt(error[0]), 1);
+      }
+    }
+  }
+});
+*/
+
+watch(() => form.email, (newValue) => {
+  console.log("email change:", newValue);
+});
+
+watch(() => form.password, (newValue) => {
+  console.log("password change:", newValue);
+})
+
+watch(() => form.repeatPassword, (newValue) => {
+  console.log("repeat password change:", newValue);
+})
+
+const apiVersion = useRuntimeConfig().public.apiVersion;
+
+async function register(e: Event) {
+  e.preventDefault();
+  console.log("Sending registration data");
+  const hashedPass = await hashPassword(form.password);
+  const res = await $fetch(`/api/v${apiVersion}/auth/register`, {
+    method: "POST", body:
+    {
+      email: form.email, username: form.username, password: hashedPass
+    }
+  }) as { access_token: string, refresh_token: string };
+  response.value = res;
+  //authStore.setAccessToken(accessToken);
+  accessToken.value = res.access_token;
+  console.log("set access token:", accessToken.value);
+  const refreshToken = useCookie("refresh_token", { secure: true, httpOnly: false });
+  refreshToken.value = res.refresh_token;
+  //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
+}
+
+</script>
+
+<style></style>

pages/web/index.vue

@@ -1,249 +0,0 @@
-<template>
-	<div id="client-root">
-		<div id="grid-container">
-			<div id="left-sidebar-container" class="grid-column right-border">
-				<div id="home" class="bottom-border">
-					<NuxtLink href="web">
-						<img src="~/assets/img/house.svg" alt="Home" width="70%">
-					</NuxtLink>
-				</div>
-				<div id="servers-list" v-for="server of servers">
-					<NuxtLink :href="'web' + server.url">
-						<img src="~/assets/img/server.svg" :alt="server.name" width="70%">
-					</NuxtLink>
-				</div>
-			</div>
-			<div id="main-content" class="grid-column">
-				<div id="main-bar" class="main-grid-row bottom-border">
-					main bar
-				</div>
-				<div id="channels-list" class="main-grid-row">
-					<Channel v-for="channel of channels" :name="channel.name" :href="`${useRoute().path}/${channel.id}`" />
-				</div>
-				<div id="message-history" class="main-grid-row">
-					<Message v-for="message of messages" :img="pfp" :username="message.author.username" :text="message.text"
-						:timestamp="message.timestamp" format="12" />
-				</div>
-				<div id="message-box" class="main-grid-row">
-					<input type="text" name="message-box-input" id="message-box-input">
-				</div>
-			</div>
-			<div id="right-sidebar-container" class="grid-column left-border">
-				<div id="utilities" class="bottom-border">
-					<div>
-						<NuxtLink>
-							<img src="~/assets/img/envelope.svg" alt="Inbox" width="30dvw">
-						</NuxtLink>
-					</div>
-				</div>
-				<div id="members-list">
-					<div class="member-item" v-for="member of members">
-						<img src="~/assets/img/tiger-head.svg" :alt="member.displayName" width="30dvw">
-						<span class="member-display-name">{{ member.displayName }}</span>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-
-import pfp from "~/assets/img/tiger-head.svg";
-
-const servers = [
-	{
-		name: "Test",
-		url: "/servers/284103257435"
-	},
-	{
-		name: "Test",
-		url: "/servers/284103257435"
-	},
-	{
-		name: "Test",
-		url: "/servers/284103257435"
-	}
-];
-
-const members = [
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	}
-];
-
-const messages = [
-	{
-		author: {
-			id: "3287484395",
-			username: "SauceyRed",
-			avatar: "~/assets/img/tiger-head.svg"
-		},
-		text: "hello gamers!",
-		timestamp: 1745948498000
-	},
-	{
-		author: {
-			id: "3287484395",
-			username: "SauceyRed",
-			avatar: "~/assets/img/tiger-head.svg"
-		},
-		text: "yo what's up!",
-		timestamp: 1745948498000
-	},
-	{
-		author: {
-			id: "3287484395",
-			username: "SauceyRed",
-			avatar: "~/assets/img/tiger-head.svg"
-		},
-		text: "how are you guys?",
-		timestamp: 1745948498000
-	},
-	{
-		author: {
-			id: "3287484395",
-			username: "SauceyRed",
-			avatar: "~/assets/img/tiger-head.svg"
-		},
-		text: "im doing well",
-		timestamp: 1745948498000
-	}
-]
-
-const channels = [
-	{
-		name: "#super-cool-channel",
-		id: "8gh9548rg44"
-	},
-	{
-		name: "#super-lame-channel",
-		id: "hgff45387hy"
-	},
-	{
-		name: "#secret-channel",
-		id: "g8f734h87gt"
-	},
-]
-
-</script>
-
-<style>
-#client-root {
-	/* border: 1px solid white; */
-	height: 100%;
-}
-
-#client-root div {
-	/* border: 1px solid cyan; */
-}
-
-#__nuxt {
-	display: flex;
-	flex-flow: column;
-	height: 100%;
-}
-
-#grid-container {
-	display: grid;
-	grid-template-columns: 1fr 18fr 4fr;
-	height: 100%;
-}
-
-.grid-column {
-	padding-top: 1dvh;
-}
-
-#home {
-	margin-bottom: 3dvh;
-}
-
-#utilities {
-	display: flex;
-	flex-direction: row;
-	margin-bottom: 3dvh;
-	justify-content: center;
-}
-
-#left-sidebar-container,
-#right-sidebar-container {
-	text-align: center;
-}
-
-.member-item {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.bottom-border {
-	border-bottom: 1px solid rgb(70, 70, 70);
-}
-
-.left-border {
-	border-left: 1px solid rgb(70, 70, 70);
-}
-
-.right-border {
-	border-right: 1px solid rgb(70, 70, 70);
-}
-
-#main-content {
-	display: grid;
-	grid-template-rows: 1fr 15fr 30fr 2fr;
-	text-align: center;
-	margin-left: 1dvw;
-}
-
-#message-box {
-	border: 1px solid rgb(70, 70, 70);
-	width: 100%;
-	margin-bottom: 1dvh;
-}
-
-#message-box-input {
-	width: 80%;
-	height: 100%;
-}
-
-.main-grid-row {
-	/* border: 1px solid cyan; */
-}
-
-#main-bar {
-	margin-bottom: 2dvh;
-}
-</style>

pages/web/test.vue

@@ -1,15 +0,0 @@
-<template>
-  <div>
-    
-  </div>
-</template>
-
-<script lang="ts" setup>
-definePageMeta({
-	layout: "client"
-});
-</script>
-
-<style>
-
-</style>

pnpm-workspace.yaml

@@ -1,4 +1,5 @@
 onlyBuiltDependencies:
   - '@parcel/watcher'
   - esbuild
+  - sharp
   - unrs-resolver

stores/auth.ts

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+
+export const useAuthStore = defineStore("auth", {
+  state: () => ({
+    accessToken: null as string | null
+  }),
+  getters: {
+    getAccessToken: (state) => {
+      return state.accessToken;
+    }
+  },
+  actions: {
+    setAccessToken(value: string) {
+      this.accessToken = value;
+    }
+  }
+})

utils/hashing.ts

@@ -0,0 +1,7 @@
+export async function hashPassword(password: string) {
+  const encodedPass = new TextEncoder().encode(password);
+  const hashBuffer = await crypto.subtle.digest("SHA-384", encodedPass);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashedPass = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
+  return hashedPass;
+}

utils/validation.ts

@@ -0,0 +1,3 @@
+export function validateUsername(username: string) {
+  return /^[\w.-]+$/.test(username);
+}