From 5c1f5ab16b152da5f014f25a02ea844b6f43e090 Mon Sep 17 00:00:00 2001
From: eiiko6 <myeiiko6@gmail.com>
Date: Mon, 15 Dec 2025 17:33:13 +0100
Subject: [PATCH] added timestamps to messages

---
 src/api/client.ts              |  2 +-
 src/components/MessageList.vue | 15 +++++++++++++--
 src/router/index.ts            |  8 +++++++-
 src/stores/auth.ts             | 20 +++++++++++++++++++-
 src/types/api.ts               |  1 +
 5 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/api/client.ts b/src/api/client.ts
index bea52a8..d1c186a 100644
--- a/src/api/client.ts
+++ b/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,
diff --git a/src/components/MessageList.vue b/src/components/MessageList.vue
index 3e79d76..8545777 100644
--- a/src/components/MessageList.vue
+++ b/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;
diff --git a/src/router/index.ts b/src/router/index.ts
index 5816d86..346e70a 100644
--- a/src/router/index.ts
+++ b/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
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 02abcab..51cd583 100644
--- a/src/stores/auth.ts
+++ b/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
+  }
+}
+
diff --git a/src/types/api.ts b/src/types/api.ts
index 9dde40e..d5c8280 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -13,5 +13,6 @@ export interface Message {
   sender: string
   message_type: 'text'
   content: string
+  sent_at: string
 }