added token storage in a store, and improved layout on mobile

src/pages/ChatPage.vue

@@ -50,9 +50,8 @@ function scrollToBottom() {
 .chat-page {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  max-width: 720px;
-  margin: 0 auto;
+  height: 95%;
+  width: 90%;
   padding: 15px;
   border: 1px solid var(--border);
   border-radius: var(--radius);

src/pages/LoginPage.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useAuthStore } from "../stores/auth";
+import { login } from '../stores/auth.ts'
 import { useRouter } from "vue-router";
 
 const email = ref("");
-const username = ref("");
 const password = ref("");
+const errorMessage = ref("");
 
-const auth = useAuthStore();
 const router = useRouter();
 
 async function submit() {
-  await auth.login(email.value, username.value, password.value);
-  router.push("/");
+  errorMessage.value = "";
+  try {
+    await login(email.value, "", password.value);
+    router.push("/");
+  } catch (err: any) {
+    errorMessage.value = err?.message || "An unknown error occurred";
+  }
 }
 </script>
 
@@ -25,6 +29,8 @@ async function submit() {
       <input v-model="password" type="password" placeholder="password" />
 
       <button type="submit">Login</button>
+
+      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
     </form>
   </div>
 </template>
@@ -55,4 +61,11 @@ async function submit() {
   margin-bottom: 0.5rem;
   text-align: center;
 }
+
+.error-message {
+  color: red;
+  font-size: 0.9rem;
+  text-align: center;
+  margin-top: 0.5rem;
+}
 </style>

src/pages/RoomsPage.vue

@@ -17,14 +17,14 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { useAuthStore } from '../stores/auth'
+import { initAuth } from '../stores/auth.ts'
 import { fetchRooms } from '../api/rooms'
 import type { Room } from '../types/api'
 
-const auth = useAuthStore()
 const rooms = ref<Room[]>([])
 
 onMounted(async () => {
+  const auth = await initAuth()
   rooms.value = await fetchRooms(auth.uuid!)
 })
 </script>