added decline action for friend requests and room invites

src/api/client.ts

@@ -25,10 +25,22 @@ export async function apiFetch<T>(
     throw new Error("Session expired")
   }
 
+  // Handle error responses
   if (!res.ok) {
     const text = await res.text()
     throw new Error(text || res.statusText)
   }
 
-  return res.json() as Promise<T>
+  // Get the response as text first
+  const responseText = await res.text()
+
+  if (!responseText) {
+    return {} as T
+  }
+
+  try {
+    return JSON.parse(responseText) as T
+  } catch (e) {
+    return responseText as unknown as T
+  }
 }

src/api/friends.ts

@@ -22,3 +22,10 @@ export function acceptFriendRequest(senderUuid: string) {
     body: JSON.stringify({ sender_uuid: senderUuid }),
   })
 }
+
+export function declineFriendRequest(senderUuid: string) {
+  return apiFetch<void>('/friends/decline', {
+    method: 'POST',
+    body: JSON.stringify({ sender_uuid: senderUuid }),
+  })
+}

src/api/rooms.ts

@@ -33,3 +33,10 @@ export function acceptRoomInvite(senderUuid: string, roomUuid: string) {
     body: JSON.stringify({ sender_uuid: senderUuid, room_uuid: roomUuid }),
   })
 }
+
+export function declineRoomInvite(senderUuid: string, roomUuid: string) {
+  return apiFetch<void>('/rooms/decline', {
+    method: 'POST',
+    body: JSON.stringify({ sender_uuid: senderUuid, room_uuid: roomUuid }),
+  })
+}

src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/ChatWindow.vue

@@ -9,6 +9,8 @@
   </div>
 
   <div v-else class="chat-container">
+    <!-- <h2 class="room-name">{{ currentRoom?.name }}</h2> -->
+
     <div class="messages-container" ref="messageListRef" @scroll="handleScroll">
       <MessageList :messages="messages" />
     </div>
@@ -218,6 +220,11 @@ onUnmounted(async () => {
   flex: 1;
 }
 
+/* .room-name { */
+/*   margin: 15px 0; */
+/*   text-align: center; */
+/* } */
+
 .loading-more {
   text-align: center;
   padding: 10px;

src/locales/en.ftl

@@ -53,10 +53,13 @@ notifications-room-invites = Room Invites
 notifications-no-requests = No pending requests
 notifications-no-invites = No pending invites
 notifications-accept = Accept
+notifications-decline = Decline
 notifications-join = Join
 notifications-invite-from = from: {$user}
-notifications-error-friend = An error occurred while accepting the request.
-notifications-error-room = An error occurred while accepting the invite.
+notifications-error-friend-accept = An error occurred while accepting the request.
+notifications-error-friend-decline = An error occurred while declining the request.
+notifications-error-room-accept = An error occurred while accepting the invite.
+notifications-error-room-decline = An error occurred while declining the invite.
 
 ## Settings page
 settings-title = Settings

src/locales/fr.ftl

@@ -53,10 +53,13 @@ notifications-room-invites = Invitations
 notifications-no-requests = Aucune demande en attente
 notifications-no-invites = Aucune invitation en attente
 notifications-accept = Accepter
+notifications-decline = Refuser
 notifications-join = Rejoindre
 notifications-invite-from = de : {$user}
-notifications-error-friend = Erreur lors de l'acceptation de la demande.
-notifications-error-room = Erreur lors de l'acceptation de l'invitation.
+notifications-error-friend-accept = Erreur lors de l'acceptation de la demande.
+notifications-error-friend-decline = Erreur lors du refus de la demande.
+notifications-error-room-accept = Erreur lors de l'acceptation de l'invitation.
+notifications-error-room-decline = Erreur lors du refus de l'invitation.
 
 ## Settings page
 settings-title = Paramètres

src/pages/NotificationsPage.vue

@@ -9,7 +9,11 @@
       <ul v-if="requests.length">
         <li v-for="req in requests" :key="req.sender_uuid">
           <span>{{ req.sender_username }}</span>
-          <button @click="acceptFriend(req.sender_uuid)">{{ $t('notifications-accept') }}</button>
+          <div class="actions">
+            <button @click="acceptFriend(req.sender_uuid)">{{ $t('notifications-accept') }}</button>
+            <button class="decline-btn" @click="declineFriend(req.sender_uuid)">{{ $t('notifications-decline')
+            }}</button>
+          </div>
         </li>
       </ul>
       <p v-else>{{ $t('notifications-no-requests') }}</p>
@@ -22,7 +26,11 @@
         <li v-for="inv in invites" :key="inv.sender_uuid">
           <span>{{ inv.room_name }}</span>
           <span>{{ $t('notifications-invite-from', { user: inv.sender_username }) }}</span>
-          <button @click="acceptRoom(inv.sender_uuid, inv.room_uuid)">{{ $t('notifications-join') }}</button>
+          <div class="actions">
+            <button @click="acceptRoom(inv.sender_uuid, inv.room_uuid)">{{ $t('notifications-join') }}</button>
+            <button class="decline-btn" @click="declineRoom(inv.sender_uuid, inv.room_uuid)">{{
+              $t('notifications-decline') }}</button>
+          </div>
         </li>
       </ul>
       <p v-else>{{ $t('notifications-no-invites') }}</p>
@@ -32,8 +40,8 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { fetchFriendRequests, acceptFriendRequest } from '../api/friends'
-import { fetchRoomInvites, acceptRoomInvite } from '../api/rooms.ts'
+import { fetchFriendRequests, acceptFriendRequest, declineFriendRequest } from '../api/friends'
+import { fetchRoomInvites, acceptRoomInvite, declineRoomInvite } from '../api/rooms.ts'
 import { useNotifications } from '../store'
 import { useFluent } from 'fluent-vue';
 
@@ -54,7 +62,17 @@ async function acceptFriend(senderUuid: string) {
     requests.value = requests.value.filter(r => r.sender_uuid !== senderUuid)
     // fetchFriends().then(f => (friends.value = f))
   } catch (err) {
-    errorMessage.value = $t('notifications-error-friend') // TODO: handle this case
+    errorMessage.value = $t('notifications-error-friend-accept')
+  }
+}
+
+async function declineFriend(senderUuid: string) {
+  try {
+    await declineFriendRequest(senderUuid)
+    requests.value = requests.value.filter(r => r.sender_uuid !== senderUuid)
+    // fetchFriends().then(f => (friends.value = f))
+  } catch (err) {
+    errorMessage.value = $t('notifications-error-friend-decline')
   }
 }
 
@@ -62,9 +80,18 @@ async function acceptRoom(senderUuid: string, roomUuid: string) {
   try {
     await acceptRoomInvite(senderUuid, roomUuid)
     invites.value = invites.value.filter(r => r.room_uuid !== roomUuid)
-    // fetchFriends().then(f => (friends.value = f))
   } catch (err) {
-    errorMessage.value = $t('notifications-error-room') // TODO: handle this case
+    errorMessage.value = $t('notifications-error-room-accept')
+    throw err
+  }
+}
+
+async function declineRoom(senderUuid: string, roomUuid: string) {
+  try {
+    await declineRoomInvite(senderUuid, roomUuid)
+    invites.value = invites.value.filter(r => r.room_uuid !== roomUuid)
+  } catch (err) {
+    errorMessage.value = $t('notifications-error-room-decline')
     throw err
   }
 }
@@ -144,6 +171,17 @@ async function acceptRoom(senderUuid: string, roomUuid: string) {
   margin-bottom: 1rem;
 }
 
+.decline-btn {
+  color: var(--text);
+  background-color: transparent;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+}
+
+.decline-btn:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
 @media (max-width: 720px) {
   .friend-requests-container {
     flex-direction: column;

src/pages/SettingsPage.vue

@@ -1,34 +1,35 @@
 <template>
-  <div class="settings-page">
-    <h1>{{ $t('settings-title') }}</h1>
+    <div class="settings-page">
+        <h1>{{ $t('settings-title') }}</h1>
 
-    <UpdateAccountModal v-if="showUpdateModal" :user="user" @close="showUpdateModal = false" @updated="fetchUserData" />
+        <UpdateAccountModal v-if="showUpdateModal" :user="user" @close="showUpdateModal = false"
+            @updated="fetchUserData" />
 
-    <h2>{{ $t('settings-account') }}</h2>
-    <div v-if="user" class="info-card">
-      <button class="update-btn" @click="showUpdateModal = true">{{ $t('settings-update-btn') }}</button>
-      <p><strong>{{ $t('settings-label-username') }}</strong> {{ user.username }}</p>
-      <p><strong>{{ $t('settings-label-email') }}</strong> {{ user.email }}</p>
-    </div>
-    <div v-else class="loading-state">
-      <p>{{ $t('settings-loading') }}</p>
-    </div>
+        <h2>{{ $t('settings-account') }}</h2>
+        <div v-if="user" class="info-card">
+            <button class="update-btn" @click="showUpdateModal = true">{{ $t('settings-update-btn') }}</button>
+            <p><strong>{{ $t('settings-label-username') }}</strong> {{ user.username }}</p>
+            <p><strong>{{ $t('settings-label-email') }}</strong> {{ user.email }}</p>
+        </div>
+        <div v-else class="loading-state">
+            <p>{{ $t('settings-loading') }}</p>
+        </div>
 
-    <h2>{{ $t('settings-language') }}</h2>
-    <div class="input-group">
-      <div class="lang-grid">
-        <button v-for="lang in languages" :key="lang.code" class="lang-btn"
-          :class="{ active: currentLang === lang.code }" @click="changeLanguage(lang.code)">
-          {{ lang.name }}
+        <h2>{{ $t('settings-language') }}</h2>
+        <div class="input-group">
+            <div class="lang-grid">
+                <button v-for="lang in languages" :key="lang.code" class="lang-btn"
+                    :class="{ active: currentLang === lang.code }" @click="changeLanguage(lang.code)">
+                    {{ lang.name }}
+                </button>
+            </div>
+        </div>
+
+        <button class="logout-btn" @click="logout">
+            <i class="fa-solid fa-right-from-bracket"></i>
+            <span>{{ $t('settings-logout-btn') }}</span>
         </button>
-      </div>
     </div>
-
-    <button class="logout-btn" @click="logout">
-      <i class="fa-solid fa-right-from-bracket"></i>
-      <span>{{ $t('settings-logout-btn') }}</span>
-    </button>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -51,112 +52,112 @@ const currentLang = ref('')
 const languages = computed(() => getSupportedLanguagesMetadata())
 
 async function fetchUserData() {
-  try {
-    const auth = await getAuthData()
-    user.value = auth.user
-  } catch (err) {
-    console.error("Failed to load user data:", err)
-  }
+    try {
+        const auth = await getAuthData()
+        user.value = auth.user
+    } catch (err) {
+        console.error("Failed to load user data:", err)
+    }
 }
 
 onMounted(async () => {
-  const pref = await getLocalePreference()
-  // Synchronize the UI state with the actual active language
-  currentLang.value = pref || (navigator.language.split('-')[0])
+    const pref = await getLocalePreference()
+    // Synchronize the UI state with the actual active language
+    currentLang.value = pref || (navigator.language.split('-')[0])
 
-  fetchUserData()
+    fetchUserData()
 })
 
 async function changeLanguage(code: string) {
-  const actual = setLanguage(code)
-  currentLang.value = actual
-  await saveLocalePreference(actual)
+    const actual = setLanguage(code)
+    currentLang.value = actual
+    await saveLocalePreference(actual)
 }
 
 function logout() {
-  authLogout()
-  router.push('/login')
+    authLogout()
+    router.push('/login')
 }
 </script>
 
 <style scoped>
 .settings-page {
-  max-width: 720px;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+    max-width: 720px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
 
 h2 {
-  margin-top: 20px;
+    margin-top: 20px;
 }
 
 .info-card {
-  position: relative;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1rem;
+    position: relative;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem;
 }
 
 .update-btn {
-  position: absolute;
-  right: 10px;
-  top: 10px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
 }
 
 .lang-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 0.5rem;
-  margin-top: 0.5rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 0.5rem;
+    margin-top: 0.5rem;
 }
 
 .lang-btn {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  color: var(--text);
-  margin: 0;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    color: var(--text);
+    margin: 0;
 }
 
 .lang-btn.active {
-  background: var(--accent);
-  color: #000;
-  border-color: var(--accent);
+    background: var(--accent);
+    color: #000;
+    border-color: var(--accent);
 }
 
 .logout-btn {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-top: 30px;
-  padding: 10px 20px;
-  color: var(--text);
-  background-color: transparent;
-  border: 1px solid #ff5050;
-  border-radius: 8px;
-  width: fit-content;
-  transition: all 0.2s ease;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 30px;
+    padding: 10px 20px;
+    color: var(--text);
+    background-color: transparent;
+    border: 1px solid var(--error);
+    border-radius: var(--radius);
+    width: fit-content;
+    transition: all 0.2s ease;
 }
 
 .logout-btn:hover {
-  color: rgba(255, 80, 80, 0.8);
+    color: rgba(255, 80, 80, 0.8);
 }
 
 .logout-btn:hover i {
-  color: rgba(255, 80, 80, 0.8);
+    color: rgba(255, 80, 80, 0.8);
 }
 
 .logout-btn i {
-  font-size: 1.25rem;
+    font-size: 1.25rem;
 }
 
 .loading-state {
-  padding: 2rem;
-  text-align: center;
-  color: var(--muted);
+    padding: 2rem;
+    text-align: center;
+    color: var(--muted);
 }
 </style>