enabled registration

src/pages/LoginPage.vue

@@ -31,6 +31,10 @@ async function submit() {
       <button type="submit">Login</button>
 
       <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
+
+      <p class="register-link">
+        Don't have an account? <router-link to="/register">Register</router-link>
+      </p>
     </form>
   </div>
 </template>
@@ -62,6 +66,17 @@ async function submit() {
   text-align: center;
 }
 
+.register-link {
+  font-size: 0.9rem;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.register-link a {
+  color: var(--accent);
+  margin-left: 5px;
+}
+
 .error-message {
   color: red;
   font-size: 0.9rem;

src/pages/RegisterPage.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="login-page">
+    <form class="login-card" @submit.prevent="submit">
+      <h1>Register</h1>
+
+      <input v-model="email" type="email" placeholder="email" required />
+      <input v-model="username" placeholder="username" required />
+      <input v-model="password" type="password" placeholder="password" required />
+
+      <button type="submit">Create Account</button>
+
+      <p class="login-link">
+        Already have an account? <router-link to="/login">Login</router-link>
+      </p>
+
+      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { register } from '../store.ts'
+import { useRouter } from "vue-router";
+
+const email = ref("");
+const username = ref("");
+const password = ref("");
+const errorMessage = ref("");
+
+const router = useRouter();
+
+async function submit() {
+  errorMessage.value = "";
+  try {
+    await register(email.value, username.value, password.value);
+
+    router.push("/");
+  } catch (err: any) {
+    errorMessage.value = err?.message || "An unknown error occurred";
+  }
+}
+</script>
+
+<style scoped>
+.login-page {
+  height: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.login-card {
+  width: 100%;
+  max-width: 360px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.login-card h1 {
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+
+.error-message {
+  color: red;
+  font-size: 0.9rem;
+  text-align: center;
+  margin-top: 0.5rem;
+}
+
+
+.login-link {
+  font-size: 0.9rem;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.login-link a {
+  color: var(--accent);
+  margin-left: 5px;
+}
+</style>

src/router.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { initAuth, getLastRoom, setLastRoom } from './store'
 
 import LoginPage from './pages/LoginPage.vue'
+import RegisterPage from './pages/RegisterPage.vue'
 import ChatPage from './pages/ChatPage.vue'
 import FriendListPage from './pages/FriendListPage.vue'
 import NofificationsPage from './pages/NotificationsPage.vue'
@@ -16,6 +17,12 @@ const router = createRouter({
       component: LoginPage,
       meta: { hideNavbar: true }
     },
+    {
+      path: '/register',
+      name: 'register',
+      component: RegisterPage,
+      meta: { hideNavbar: true }
+    },
     {
       path: '/rooms/:uuid',
       name: 'chat',
@@ -28,7 +35,7 @@ const router = createRouter({
 })
 
 router.beforeEach(async (to) => {
-  if (to.path === '/login') return true
+  if (to.path === '/login' || to.path === '/register') return true
 
   const auth = await initAuth()
   if (!auth.isAuthenticated) {

src/store.ts

@@ -41,6 +41,17 @@ export async function validateToken(): Promise<boolean> {
   }
 }
 
+export async function register(email: string, username: string, password: string) {
+  const response: LoginResponse = await apiFetch('/register', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, username, password })
+  });
+
+  await login(email, username, password)
+  return response;
+}
+
 const requests = ref<FriendRequest[]>([])
 const invites = ref<RoomInvite[]>([])
 
@@ -48,6 +59,11 @@ export function useNotifications() {
   const totalCount = computed(() => requests.value.length + invites.value.length)
 
   async function refreshNotifications() {
+    const auth = await authStore.getAuthData()
+    if (!auth.token) {
+      return
+    }
+
     try {
       const [fReqs, rInvs] = await Promise.all([
         fetchFriendRequests(),