added timestamps to messages

src/api/client.ts

@@ -1,6 +1,6 @@
 import { initAuth } from '../stores/auth.ts'
 
-const BASE_URL = 'http://192.168.1.183:8081'
+const BASE_URL = 'http://localhost:8080'
 
 export async function apiFetch<T>(
   path: string,

src/components/MessageList.vue

@@ -6,7 +6,7 @@ defineProps<{ messages: Message[] }>()
 <template>
   <ul>
     <li v-for="(m, i) in messages" :key="i" class="message">
-      <div class="sender">{{ m.sender }}</div>
+      <div class="sender">{{ m.sender }} <span class="timestamp">{{ m.sent_at }}</span></div>
       <div class="message-content">{{ m.content }}</div>
     </li>
   </ul>
@@ -20,14 +20,25 @@ ul {
 }
 
 .message {
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.2);
+  padding: 10px;
+  border-radius: var(--radius);
 }
 
 .sender {
   font-weight: bold;
+  font-size: 1.1rem;
   margin-bottom: 0.25rem;
 }
 
+.sender .timestamp {
+  font-weight: normal;
+  opacity: 0.7;
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
 .message-content {
   padding-left: 1rem;
   white-space: pre-wrap;

src/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { initAuth } from '../stores/auth.ts'
+import { initAuth, validateToken } from '../stores/auth.ts'
 
 import LoginPage from '../pages/LoginPage.vue'
 import RoomsPage from '../pages/RoomsPage.vue'
@@ -16,9 +16,15 @@ const router = createRouter({
 
 router.beforeEach(async (to) => {
   const auth = await initAuth()
+
   if (!auth.isAuthenticated && to.path !== '/login') {
     return '/login'
   }
+
+  if (auth.isAuthenticated) {
+    const valid = await validateToken()
+    if (!valid) return '/login'
+  }
 })
 
 export default router

src/stores/auth.ts

@@ -6,7 +6,7 @@ let store: Store | null = null
 
 async function getStore() {
   if (!store) {
-    store = await load('store.json', { autoSave: false })
+    store = await load('store.json')
   }
   return store
 }
@@ -39,3 +39,21 @@ export async function logout() {
   await s.save()
   return { token: null, uuid: null, isAuthenticated: false }
 }
+
+export async function validateToken(): Promise<boolean> {
+  const auth = await initAuth()
+  if (!auth.token) return false
+
+  try {
+    await apiFetch('/validate-token', {
+      method: 'GET',
+    })
+    return true
+  } catch (e) {
+    console.log(e);
+
+    await logout()
+    return false
+  }
+}
+

src/types/api.ts

@@ -13,5 +13,6 @@ export interface Message {
   sender: string
   message_type: 'text'
   content: string
+  sent_at: string
 }