front

front/src/enums/index.ts

@@ -9,3 +9,14 @@ export enum WhiteboardState {
   Inactive,
   Deleted
 }
+
+export enum MembershipStatus {
+  Pending,
+  Accepted,
+  Rejected,
+  Active,
+  Inactive,
+  Cancelled,
+  Kicked,
+  Banned
+}

front/src/services/whiteboardHubService.ts

@@ -76,6 +76,38 @@ export const whiteboardHubService = {
     client.on<string>('Leaved', callback)
   },
 
+  onWaitingForApproval(callback: (userId: string) => void) {
+    client.on<string>('WaitingForApproval', callback)
+  },
+
+  onUserWaitingForApproval(callback: (userId: string) => void) {
+    client.on<string>('UserWaitingForApproval', callback)
+  },
+
+  onAccepted(callback: () => void) {
+    client.on('Accepted', callback)
+  },
+
+  onRejected(callback: () => void) {
+    client.on('Rejected', callback)
+  },
+
+  onUserCanceledJoinRequest(callback: (userId: string) => void) {
+    client.on<string>('UserCanceledJoinRequest', callback)
+  },
+
+  async acceptUser(userId: string) {
+    await client.invoke('AcceptUser', userId)
+  },
+
+  async rejectUser(userId: string) {
+    await client.invoke('RejectUser', userId)
+  },
+
+  async cancelJoinRequest() {
+    await client.invoke('CancelJoinRequest')
+  },
+
   offAll() {
     client.off('InitWhiteboard')
     client.off('AddedRectangle')
@@ -85,5 +117,10 @@ export const whiteboardHubService = {
     client.off('MovedShape')
     client.off('Joined')
     client.off('Leaved')
+    client.off('WaitingForApproval')
+    client.off('UserWaitingForApproval')
+    client.off('Accepted')
+    client.off('Rejected')
+    client.off('UserCanceledJoinRequest')
   },
 }

front/src/services/whiteboardService.ts

@@ -1,4 +1,4 @@
-import type {Whiteboard} from "@/types";
+import type {JoinResult, Whiteboard} from "@/types";
 import {api} from './api'
 
 export const whiteboardService = {
@@ -22,6 +22,14 @@ export const whiteboardService = {
 
   async deleteWhiteboard(id: string): Promise<void> {
     await api.delete(`/api/Whiteboard/${id}`)
+  },
+
+  async joinWhiteboard(code: string): Promise<JoinResult> {
+    const raw = await api.post<any>(`/api/Whiteboard/join`, {code: code})
+    return {
+      whiteboardId: raw.whiteboardId,
+      status: raw.status
+    }
   }
 }
 

front/src/stores/whiteboard.ts

@@ -2,9 +2,13 @@ import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import type { Arrow, Line, Rectangle, Shape, ShapeTool, ShapeType, TextShape, Whiteboard } from '@/types/whiteboard.ts'
 import { whiteboardHubService } from '@/services/whiteboardHubService.ts'
+import {useWhiteboardsStore} from "@/stores/whiteboards.ts";
+import router from "@/router";
 
 export const useWhiteboardStore = defineStore('whiteboard', () => {
   const whiteboard = ref<Whiteboard | null>(null)
+  const pendingUsers = ref<string[]>([])
+
   const selectedTool = ref<ShapeTool>('hand')
   const isConnected = ref(false)
   const isLoading = ref(false)
@@ -27,6 +31,98 @@ export const useWhiteboardStore = defineStore('whiteboard', () => {
     }
   })
 
+  async function initializeSession(id: string) {
+    isLoading.value = true;
+    error.value = null;
+
+    try{
+      await whiteboardHubService.connect()
+      isConnected.value = true;
+
+      registerHubEvents()
+
+      await whiteboardHubService.joinWhiteboard(id)
+    } catch (e: any) {
+      error.value = e?.message ?? 'Failed to join whiteboard'
+      isLoading.value = false
+    }
+  }
+
+  function registerHubEvents() {
+    whiteboardHubService.onInitWhiteboard((wb) => {
+      whiteboard.value = wb
+      isLoading.value = false
+    })
+
+    whiteboardHubService.onAddedRectangle((rectangle) => {
+      whiteboard.value?.rectangles.push(rectangle)
+    })
+
+    whiteboardHubService.onAddedArrow((arrow) => {
+      whiteboard.value?.arrows.push(arrow)
+    })
+
+    whiteboardHubService.onAddedLine((line) => {
+      whiteboard.value?.lines.push(line)
+    })
+
+    whiteboardHubService.onAddedTextShape((textShape) => {
+      whiteboard.value?.textShapes.push(textShape)
+    })
+
+    whiteboardHubService.onMovedShape((command) => {
+      applyMoveShape(command.shapeId, command.newPositionX, command.newPositionY)
+    })
+
+    whiteboardHubService.onJoined((userId) => {
+      console.log('User joined:', userId)
+    })
+
+    whiteboardHubService.onLeaved((userId) => {
+      console.log('User left:', userId)
+    })
+
+    whiteboardHubService.onWaitingForApproval(() => {
+      const infoStore = useWhiteboardsStore()
+      infoStore.startWaitingToJoin()
+    })
+
+    whiteboardHubService.onUserWaitingForApproval((userId) => {
+      if (!pendingUsers.value.includes(userId)) {
+        pendingUsers.value.push(userId)
+      }
+    })
+
+    whiteboardHubService.onAccepted(() => {
+      const infoStore = useWhiteboardsStore()
+      infoStore.stopWaitingToJoin()
+    })
+
+    whiteboardHubService.onRejected(() => {
+      router.push('/')
+      alert('Your request to join was rejected.')
+    })
+
+    whiteboardHubService.onUserCanceledJoinRequest((userId) => {
+      pendingUsers.value = pendingUsers.value.filter(id => id !== userId)
+    })
+  }
+
+  async function approveUser(userId: string) {
+    await whiteboardHubService.acceptUser(userId)
+    pendingUsers.value = pendingUsers.value.filter(id => id !== userId)
+  }
+
+  async function rejectUser(userId: string) {
+    await whiteboardHubService.rejectUser(userId)
+    pendingUsers.value = pendingUsers.value.filter(id => id !== userId)
+  }
+
+  async function cancelJoinRequest() {
+    await whiteboardHubService.cancelJoinRequest()
+    whiteboard.value = null
+  }
+
   async function joinWhiteboard(id: string) {
     isLoading.value = true
     error.value = null
@@ -35,38 +131,7 @@ export const useWhiteboardStore = defineStore('whiteboard', () => {
       await whiteboardHubService.connect()
       isConnected.value = true
 
-      whiteboardHubService.onInitWhiteboard((wb) => {
+      registerHubEvents()
-        whiteboard.value = wb
-        isLoading.value = false
-      })
-
-      whiteboardHubService.onAddedRectangle((rectangle) => {
-        whiteboard.value?.rectangles.push(rectangle)
-      })
-
-      whiteboardHubService.onAddedArrow((arrow) => {
-        whiteboard.value?.arrows.push(arrow)
-      })
-
-      whiteboardHubService.onAddedLine((line) => {
-        whiteboard.value?.lines.push(line)
-      })
-
-      whiteboardHubService.onAddedTextShape((textShape) => {
-        whiteboard.value?.textShapes.push(textShape)
-      })
-
-      whiteboardHubService.onMovedShape((command) => {
-        applyMoveShape(command.shapeId, command.newPositionX, command.newPositionY)
-      })
-
-      whiteboardHubService.onJoined((userId) => {
-        console.log('User joined:', userId)
-      })
-
-      whiteboardHubService.onLeaved((userId) => {
-        console.log('User left:', userId)
-      })
 
       await whiteboardHubService.joinWhiteboard(id)
     } catch (e: any) {
@@ -183,6 +248,10 @@ export const useWhiteboardStore = defineStore('whiteboard', () => {
     toolColor,
     toolThickness,
     toolTextSize,
+    pendingUsers,
+    approveUser,
+    rejectUser,
+    cancelJoinRequest,
     joinWhiteboard,
     leaveWhiteboard,
     addRectangle,

front/src/stores/whiteboards.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import type { Whiteboard } from '@/types'
+import type {JoinResult, Whiteboard} from '@/types'
 import { whiteboardService } from '@/services/whiteboardService'
 
 export const useWhiteboardsStore = defineStore('whiteboards', () => {
@@ -8,6 +8,7 @@ export const useWhiteboardsStore = defineStore('whiteboards', () => {
   const recentWhiteboards = ref<Whiteboard[]>([])
   const currentWhiteboard = ref<Whiteboard | null>(null)
   const isLoading = ref(false)
+  const isWaitingToJoin = ref(false)
   const error = ref<string | null>(null)
 
   async function getWhiteboardHistory() {
@@ -53,6 +54,27 @@ export const useWhiteboardsStore = defineStore('whiteboards', () => {
     return newWhiteboard.id;
   }
 
+  async function joinWhiteboardWithCode(code: string): Promise<JoinResult> {
+    isLoading.value = true;
+
+    try {
+      return await whiteboardService.joinWhiteboard(code);
+    } catch (err: any) {
+      error.value = err.message ?? 'Failed to join whiteboard';
+      throw err;
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  function startWaitingToJoin() {
+    isWaitingToJoin.value = true;
+  }
+
+  function stopWaitingToJoin() {
+    isWaitingToJoin.value = false;
+  }
+
   async function deleteWhiteboard(id: string): Promise<void> {
     isLoading.value = true
     error.value = null
@@ -92,10 +114,14 @@ export const useWhiteboardsStore = defineStore('whiteboards', () => {
     ownedWhiteboards: ownedWhiteboards,
     recentWhiteboards: recentWhiteboards,
     isLoading,
+    isWaitingToJoin,
     error,
     getWhiteboardHistory: getWhiteboardHistory,
     getRecentWhiteboards: getRecentWhiteboards,
     createNewWhiteboard: createNewWhiteboard,
+    joinWhiteboardWithCode: joinWhiteboardWithCode,
+    startWaitingToJoin: startWaitingToJoin,
+    stopWaitingToJoin: stopWaitingToJoin,
     deleteWhiteboard: deleteWhiteboard,
     getCurrentWhiteboard: getCurrentWhiteboard,
     selectWhiteboard: selectWhiteboard,

front/src/types/index.ts

@@ -1,4 +1,4 @@
-import {type WhiteboardJoinPolicy, WhiteboardState} from "@/enums";
+import {MembershipStatus, type WhiteboardJoinPolicy, WhiteboardState} from "@/enums";
 
 export interface User {
   userId: string
@@ -22,6 +22,11 @@ export interface AuthResponse {
   refreshToken: string
 }
 
+export interface JoinResult {
+  whiteboardId: string
+  status: MembershipStatus
+}
+
 export interface Whiteboard {
   id: string
   ownerId: string

front/src/views/HomeView.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 
-import { ref } from 'vue'
+import {ref} from 'vue'
-import { useRouter } from 'vue-router'
+import {useRouter} from 'vue-router'
 import WhiteboardHistorySidebar from '@/components/WhiteboardHistorySidebar.vue'
 import RecentWhiteboardsPanel from '@/components/RecentWhiteboardsPanel.vue'
-import { useAuthStore } from '@/stores/auth'
+import {useAuthStore} from '@/stores/auth'
-import { useWhiteboardsStore } from "@/stores/whiteboards.ts";
+import {useWhiteboardsStore} from "@/stores/whiteboards.ts";
+import {MembershipStatus} from "@/enums";
 
 const auth = useAuthStore()
 const whiteboards = useWhiteboardsStore()
@@ -33,6 +34,27 @@ async function handleCreateNewWhiteboard() {
   }
 }
 
+async function joinWithCode() {
+  if (joinCode.value.length !== 8) {
+    alert('Please enter a valid 8-digit code.')
+    return
+  }
+
+  try {
+    const joinResult = await whiteboards.joinWhiteboardWithCode(joinCode.value)
+
+    if (joinResult.status === MembershipStatus.Pending) {
+      whiteboards.startWaitingToJoin()
+    } else {
+      whiteboards.stopWaitingToJoin()
+    }
+
+    await router.push({ name: 'whiteboard', params: { id: joinResult.whiteboardId } })
+  } catch (err: any) {
+    console.error(err)
+  }
+}
+
 </script>
 
 <template>
@@ -80,7 +102,7 @@ async function handleCreateNewWhiteboard() {
         pattern="[0-9]*"
         @input="joinCode = joinCode.replace(/\D/g, '')"
       />
-      <button class="btn btn-primary w-75 mt-2 d-block mx-auto">Join with code</button>
+      <button class="btn btn-primary w-75 mt-2 d-block mx-auto" @click="joinWithCode">Join with code</button>
       <div class="text-center">
         <small class="text-muted my-4 d-inline-block">or</small>
       </div>

front/src/views/WhiteboardView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, onBeforeMount, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth.ts'
 import { useWhiteboardStore } from '@/stores/whiteboard.ts'
 import { useWhiteboardsStore } from "@/stores/whiteboards.ts";
 import WhiteboardToolbar from '@/components/whiteboard/WhiteboardToolbar.vue'
@@ -8,6 +9,7 @@ import WhiteboardCanvas from '@/components/whiteboard/WhiteboardCanvas.vue'
 
 const route = useRoute()
 const router = useRouter()
+const authStore = useAuthStore()
 const sessionStore = useWhiteboardStore()
 const infoStore = useWhiteboardsStore()
 
@@ -30,13 +32,31 @@ onUnmounted(() => {
 })
 
 async function handleLeave() {
-  await sessionStore.leaveWhiteboard()
+  if (infoStore.isWaitingToJoin) {
+    await sessionStore.cancelJoinRequest()
+  } else {
+    await sessionStore.leaveWhiteboard()
+  }
   router.back()
 }
 </script>
 
 <template>
-  <div v-if="sessionStore.isLoading" class="d-flex flex-column justify-content-center align-items-center vh-100">
+  <div v-if="infoStore.isWaitingToJoin"
+       class="d-flex flex-column justify-content-center align-items-center vh-100 text-center">
+    <div class="spinner-border text-primary mb-4" role="status">
+      <span class="visually-hidden">Waiting...</span>
+    </div>
+
+    <h5 class="mb-3">Waiting for owner's approval</h5>
+
+    <button class="btn btn-outline-danger"
+            @click="handleLeave">
+      Cancel
+    </button>
+  </div>
+
+  <div v-else-if="sessionStore.isLoading" class="d-flex flex-column justify-content-center align-items-center vh-100">
     <div class="spinner-border text-primary mb-3" role="status">
       <span class="visually-hidden">Loading...</span>
     </div>
@@ -54,5 +74,21 @@ async function handleLeave() {
   <div v-else class="d-flex vh-100">
     <WhiteboardToolbar @leave="handleLeave" />
     <WhiteboardCanvas />
+
+    <div v-if="sessionStore.whiteboard?.ownerId === authStore.user?.userId && sessionStore.pendingUsers.length > 0"
+         class="position-fixed top-0 end-0 m-4 p-3 bg-dark border border-primary rounded shadow-lg"
+         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"
+             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>
+          <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>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>

front/vite.config.ts

@@ -17,6 +17,9 @@ export default defineConfig({
   },
 
   server: {
+    host: true,
+    strictPort: false,
+    allowedHosts: ['.ngrok-free.app'],
     proxy: {
       '/api': {
         target: 'http://localhost:5266',