fixes

front/src/services/authService.ts

@@ -37,6 +37,6 @@ export const authService = {
     const userId = raw?.userId ?? ''
     const username = raw?.userName ?? raw?.UserName ?? raw?.username ?? raw?.name ?? ''
     const email = raw?.email ?? raw?.Email ?? ''
-    return { userId, username, email }
+    return { userId: userId, username, email }
   },
 }

front/src/services/whiteboardHubService.ts

@@ -1,5 +1,6 @@
 import { SignalRService } from '@/services/signalr.ts'
 import type { Arrow, Line, MoveShapeCommand, Rectangle, TextShape, Whiteboard } from '@/types/whiteboard.ts'
+import type {User} from "@/types";
 
 const client = new SignalRService(`/hubs/whiteboard`)
 
@@ -80,8 +81,8 @@ export const whiteboardHubService = {
     client.on<string>('WaitingForApproval', callback)
   },
 
-  onUserWaitingForApproval(callback: (userId: string) => void) {
-    client.on<string>('UserWaitingForApproval', callback)
+  onUserWaitingForApproval(callback: (user: User) => void) {
+    client.on<User>('UserWaitingForApproval', callback)
   },
 
   onAccepted(callback: () => void) {

front/src/stores/whiteboard.ts

@@ -4,10 +4,11 @@ import type { Arrow, Line, Rectangle, Shape, ShapeTool, ShapeType, TextShape, Wh
 import { whiteboardHubService } from '@/services/whiteboardHubService.ts'
 import {useWhiteboardsStore} from "@/stores/whiteboards.ts";
 import router from "@/router";
+import type {User} from "@/types";
 
 export const useWhiteboardStore = defineStore('whiteboard', () => {
   const whiteboard = ref<Whiteboard | null>(null)
-  const pendingUsers = ref<string[]>([])
+  const pendingUsers = ref<User[]>([])
 
   const selectedTool = ref<ShapeTool>('hand')
   const isConnected = ref(false)
@@ -88,9 +89,9 @@ export const useWhiteboardStore = defineStore('whiteboard', () => {
       infoStore.startWaitingToJoin()
     })
 
-    whiteboardHubService.onUserWaitingForApproval((userId) => {
-      if (!pendingUsers.value.includes(userId)) {
-        pendingUsers.value.push(userId)
+    whiteboardHubService.onUserWaitingForApproval((user) => {
+      if (!pendingUsers.value.includes(user)) {
+        pendingUsers.value.push(user)
       }
     })
 
@@ -105,18 +106,18 @@ export const useWhiteboardStore = defineStore('whiteboard', () => {
     })
 
     whiteboardHubService.onUserCanceledJoinRequest((userId) => {
-      pendingUsers.value = pendingUsers.value.filter(id => id !== userId)
+      pendingUsers.value = pendingUsers.value.filter(user => user.userId !== userId)
     })
   }
 
   async function approveUser(userId: string) {
     await whiteboardHubService.acceptUser(userId)
-    pendingUsers.value = pendingUsers.value.filter(id => id !== userId)
+    pendingUsers.value = pendingUsers.value.filter(user => user.userId !== userId)
   }
 
   async function rejectUser(userId: string) {
     await whiteboardHubService.rejectUser(userId)
-    pendingUsers.value = pendingUsers.value.filter(id => id !== userId)
+    pendingUsers.value = pendingUsers.value.filter(user => user.userId !== userId)
   }
 
   async function cancelJoinRequest() {

front/src/views/WhiteboardView.vue

@@ -80,12 +80,12 @@ async function handleLeave() {
          style="z-index: 1050; width: 300px;">
       <h6 class="text-primary mb-3">Pending Join Requests ({{ sessionStore.pendingUsers.length }})</h6>
       <div class="list-group list-group-flush bg-transparent">
-        <div v-for="userId in sessionStore.pendingUsers" :key="userId"
+        <div v-for="user in sessionStore.pendingUsers" :key="user.userId"
              class="list-group-item bg-transparent text-light border-secondary d-flex justify-content-between align-items-center px-0">
-          <small class="text-truncate" :title="userId">{{ userId }}</small>
+          <small class="text-truncate" :title="user.username">{{ user.username }}</small>
           <div class="btn-group btn-group-sm">
-            <button class="btn btn-success" @click="sessionStore.approveUser(userId)">✓</button>
-            <button class="btn btn-danger" @click="sessionStore.rejectUser(userId)">✕</button>
+            <button class="btn btn-success" @click="sessionStore.approveUser(user.userId)">✓</button>
+            <button class="btn btn-danger" @click="sessionStore.rejectUser(user.userId)">✕</button>
           </div>
         </div>
       </div>