From cae724f2d6ba5841317adb57b60f70194e8ed900 Mon Sep 17 00:00:00 2001
From: Veljko Tosic <veljkotosic6@gmail.com>
Date: Wed, 18 Feb 2026 20:24:27 +0100
Subject: [PATCH] Added creating new whiteboards from home screen, refactoring

---
 .../src/components/RecentWhiteboardsList.vue  |  4 +--
 .../src/components/WhiteboardHistoryList.vue  |  4 +--
 front/src/router/index.ts                     |  5 +++-
 front/src/services/api.ts                     |  4 ---
 front/src/services/whiteboardService.ts       | 12 ++++++--
 front/src/stores/auth.ts                      |  4 +--
 front/src/stores/whiteboards.ts               | 22 +++++++++++++-
 front/src/views/HomeView.vue                  | 30 ++++++++++++++++++-
 front/src/views/WhiteboardView.vue            |  7 +++--
 front/vite.config.ts                          |  2 +-
 10 files changed, 76 insertions(+), 18 deletions(-)

diff --git a/front/src/components/RecentWhiteboardsList.vue b/front/src/components/RecentWhiteboardsList.vue
index ef287d0..0b4d38d 100644
--- a/front/src/components/RecentWhiteboardsList.vue
+++ b/front/src/components/RecentWhiteboardsList.vue
@@ -2,11 +2,11 @@
 
 import { onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { useWhiteboardStore } from '@/stores/whiteboards'
+import { useWhiteboardsStore } from '@/stores/whiteboards'
 import RecentWhiteboardsItem from './RecentWhiteboardsItem.vue'
 
 const router = useRouter()
-const store = useWhiteboardStore()
+const store = useWhiteboardsStore()
 
 onMounted(() => {
   if (store.recentWhiteboards.length === 0) store.getRecentWhiteboards()
diff --git a/front/src/components/WhiteboardHistoryList.vue b/front/src/components/WhiteboardHistoryList.vue
index 08cf636..5097d4a 100644
--- a/front/src/components/WhiteboardHistoryList.vue
+++ b/front/src/components/WhiteboardHistoryList.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { useWhiteboardStore } from '@/stores/whiteboards'
+import { useWhiteboardsStore } from '@/stores/whiteboards'
 import WhiteboardHistoryItem from './WhiteboardHistoryItem.vue'
 
 const router = useRouter()
-const store = useWhiteboardStore()
+const store = useWhiteboardsStore()
 
 onMounted(() => {
   if (store.ownedWhiteboards.length === 0) store.getWhiteboardHistory()
diff --git a/front/src/router/index.ts b/front/src/router/index.ts
index 71145fe..250c74e 100644
--- a/front/src/router/index.ts
+++ b/front/src/router/index.ts
@@ -52,7 +52,10 @@ router.beforeEach((to) => {
   }
 
   if (to.meta.requiresAuth && !auth.isAuthenticated) {
-    return '/login'
+    return {
+      name: 'login',
+      query: { redirect: to.fullPath }
+    }
   }
 })
 
diff --git a/front/src/services/api.ts b/front/src/services/api.ts
index cc3068e..407ca75 100644
--- a/front/src/services/api.ts
+++ b/front/src/services/api.ts
@@ -1,6 +1,3 @@
-// A small fetch-based HTTP client with automatic token attach and refresh-on-401.
-// This avoids circular imports by reading/writing tokens directly from localStorage.
-
 const ACCESS_TOKEN = 'auth_token'
 const REFRESH_TOKEN = 'refresh_token'
 
@@ -9,7 +6,6 @@ async function parseJsonOrThrow(res: Response) {
   try {
     return text ? JSON.parse(text) : undefined
   } catch (e) {
-    // non-JSON response
     return text
   }
 }
diff --git a/front/src/services/whiteboardService.ts b/front/src/services/whiteboardService.ts
index 9a161a1..4b78ba9 100644
--- a/front/src/services/whiteboardService.ts
+++ b/front/src/services/whiteboardService.ts
@@ -1,5 +1,5 @@
-import type { Whiteboard } from "@/types";
-import { api } from './api'
+import type {Whiteboard} from "@/types";
+import {api} from './api'
 
 export const whiteboardService = {
   async getWhiteboardHistory(): Promise<Whiteboard[]> {
@@ -10,6 +10,14 @@ export const whiteboardService = {
   async getRecentWhiteboards(): Promise<Whiteboard[]> {
     const raw = await api.get<any[]>('/api/Whiteboard/recent')
     return raw.map(mapWhiteboard)
+  },
+
+  async createNewWhiteboard(title: string): Promise<string> {
+    return await api.post<string>('/api/Whiteboard', { title: title, maxParticipants: 10, joinPolicy: 0})
+  },
+
+  async getWhiteboardById(id: string): Promise<Whiteboard> {
+    return await api.get<any>(`/api/Whiteboard/${id}`).then(mapWhiteboard)
   }
 }
 
diff --git a/front/src/stores/auth.ts b/front/src/stores/auth.ts
index 1201c35..52042f4 100644
--- a/front/src/stores/auth.ts
+++ b/front/src/stores/auth.ts
@@ -1,7 +1,7 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import type { User, LoginCredentials, SignupCredentials, AuthResponse } from '@/types'
-import { useWhiteboardStore } from '@/stores/whiteboards'
+import { useWhiteboardsStore } from '@/stores/whiteboards'
 import { authService } from '@/services/authService'
 
 const ACCESS_TOKEN = 'auth_token'
@@ -129,7 +129,7 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function logout(allDevices = false) {
-    const whiteboardStore = useWhiteboardStore()
+    const whiteboardStore = useWhiteboardsStore()
     isLoading.value = true
     error.value = null
     try {
diff --git a/front/src/stores/whiteboards.ts b/front/src/stores/whiteboards.ts
index 46ed9d5..cfc9008 100644
--- a/front/src/stores/whiteboards.ts
+++ b/front/src/stores/whiteboards.ts
@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import type { Whiteboard } from '@/types'
 import { whiteboardService } from '@/services/whiteboardService'
 
-export const useWhiteboardStore = defineStore('whiteboards', () => {
+export const useWhiteboardsStore = defineStore('whiteboards', () => {
   const ownedWhiteboards = ref<Whiteboard[]>([])
   const recentWhiteboards = ref<Whiteboard[]>([])
   const isLoading = ref(false)
@@ -33,6 +33,25 @@ export const useWhiteboardStore = defineStore('whiteboards', () => {
     }
   }
 
+  async function createNewWhiteboard(title: string): Promise<string> {
+    let newWhiteboard: Whiteboard;
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const newId = await whiteboardService.createNewWhiteboard(title)
+      newWhiteboard = await whiteboardService.getWhiteboardById(newId)
+    } catch (err: any) {
+      error.value = err.message ?? 'Failed to create whiteboard'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+
+    ownedWhiteboards.value.push(newWhiteboard)
+    return newWhiteboard.id;
+  }
+
   function clearWhiteboards() {
     ownedWhiteboards.value = []
     recentWhiteboards.value = []
@@ -45,6 +64,7 @@ export const useWhiteboardStore = defineStore('whiteboards', () => {
     error,
     getWhiteboardHistory: getWhiteboardHistory,
     getRecentWhiteboards: getRecentWhiteboards,
+    createNewWhiteboard: createNewWhiteboard,
     clearWhiteboards: clearWhiteboards
   }
 })
diff --git a/front/src/views/HomeView.vue b/front/src/views/HomeView.vue
index e31ac27..1d4d6a1 100644
--- a/front/src/views/HomeView.vue
+++ b/front/src/views/HomeView.vue
@@ -1,13 +1,38 @@
 <script setup lang="ts">
+
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import WhiteboardHistorySidebar from '@/components/WhiteboardHistorySidebar.vue'
 import RecentWhiteboardsPanel from '@/components/RecentWhiteboardsPanel.vue'
 import { useAuthStore } from '@/stores/auth'
+import { useWhiteboardsStore } from "@/stores/whiteboards.ts";
 
 const auth = useAuthStore()
+const whiteboards = useWhiteboardsStore()
+const router = useRouter()
+
 const joinCode = ref('')
 const whiteboardTitle = ref('')
 const showCreateModal = ref(false)
+
+async function handleCreateNewWhiteboard() {
+  if (!whiteboardTitle.value.trim()) {
+    alert('Please enter a title for the whiteboard.')
+    return
+  }
+
+  try {
+    const newWhiteboardId = await whiteboards.createNewWhiteboard(whiteboardTitle.value.trim())
+
+    showCreateModal.value = false
+    whiteboardTitle.value = ''
+
+    await router.push({ name: 'whiteboard', params: { id: newWhiteboardId } })
+  } catch (e) {
+    console.error('Failed to create new whiteboard', e)
+  }
+}
+
 </script>
 
 <template>
@@ -80,7 +105,10 @@ const showCreateModal = ref(false)
         </div>
         <div class="modal-footer border-secondary">
           <button type="button" class="btn btn-secondary" @click="showCreateModal = false">Cancel</button>
-          <button type="button" class="btn btn-primary">Create</button>
+          <button type="button" class="btn btn-primary" @click="handleCreateNewWhiteboard">
+            <span v-if="whiteboards.isLoading" class="spinner-border spinner-border-sm me-2"></span>
+            Create
+          </button>
         </div>
       </div>
     </div>
diff --git a/front/src/views/WhiteboardView.vue b/front/src/views/WhiteboardView.vue
index d4d2537..d4a36cb 100644
--- a/front/src/views/WhiteboardView.vue
+++ b/front/src/views/WhiteboardView.vue
@@ -26,10 +26,13 @@ async function handleLeave() {
 </script>
 
 <template>
-  <div v-if="store.isLoading" class="d-flex justify-content-center align-items-center vh-100">
-    <div class="spinner-border text-primary" role="status">
+  <div v-if="store.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>
+    <p class="text-muted fs-5 text-center">
+      Please wait while your whiteboard is loading...
+    </p>
   </div>
 
   <div v-else-if="store.error" class="d-flex justify-content-center align-items-center vh-100">
diff --git a/front/vite.config.ts b/front/vite.config.ts
index 14b3282..c0f5190 100644
--- a/front/vite.config.ts
+++ b/front/vite.config.ts
@@ -22,7 +22,7 @@ export default defineConfig({
         target: 'http://localhost:5266',
         changeOrigin: true
       },
-      '/hubs/': {
+      '/hubs': {
         target: 'http://localhost:5039',
         changeOrigin: true,
         ws: true