1 files changed, 22 insertions, 49 deletions

diff --git a/front-end/src/bootstrap/index.ts b/front-end/src/bootstrap/index.ts
index ead41e1..343def6 100644
--- a/front-end/src/bootstrap/index.ts
+++ b/front-end/src/bootstrap/index.ts
@@ -1,47 +1,25 @@
 import App from '../App.vue'
 import Notifications, { notify } from '@kyvg/vue3-notification'
 import { configureNotifier } from '@vnuge/vnlib.browser'
-import { createApp as vueCreateApp, ref } from "vue";
+import { CreateAppFunction, createApp as vueCreateApp } from "vue";
 import { useDark } from "@vueuse/core";
+import { createPinia, type Pinia } from "pinia";
 
 //Font awesome support
 import { Library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faBars, faLightbulb, faTimes } from '@fortawesome/free-solid-svg-icons'
 
-
-//Required global state elements for app components
-export const headerRoutes = ref<string[]>([]);
-export const authRoutes = ref<string[]>([]);
-export const siteTitle = ref<string>("");
-export const showCookieWarning = ref<boolean>(false);
-
-
 export interface AppConfig {
     /**
-     * Routes to be displayed in the header when the user is not logged in
-     */
-    headerRoutes: string[];
-
-    /**
-     * Routes to be displayed in the header when the user is logged in
-     */
-    authRoutes: string[];
-
-    /**
-     * The title of the site, used in the title bar
-     */
-    siteTitle: string;
-
-    /**
      * Enables dark mode support
      */
-    useDarkMode: boolean;
+    useDarkMode?: boolean;
 
     /**
      * The element to mount the app to
      */
-    mountElement: string;
+    mountElement: string | Element;
 
     /**
      * library instance for adding required icons
@@ -49,16 +27,19 @@ export interface AppConfig {
     faLibrary: Library;
 
     /**
-     * If true, the cookie warning will not be displayed
+     * Called when the app is created for you to add custom elements 
+     * and configure the app
+     * @param app The app instance
+     * @param store The pinia store instance
      */
-    hideCookieWarning?: boolean;
+    onCreate(app: any, piniaStore: Pinia): void;
 
     /**
-     * Called when the app is created for you to add custom elements 
-     * and configure the app
+     * Allows the user to override the createApp function
      * @param app The app instance
+     * @returns The app instance
      */
-    onCreate: (app: any) => void;
+    createApp?: CreateAppFunction<Element>
 }
 
 /**
@@ -66,13 +47,12 @@ export interface AppConfig {
  * @param config The configuration for the app
  * @returns The app instance
  */
-export const createVnApp = (config: AppConfig, createApp?: (app: any) => any) => {
-    headerRoutes.value = config.headerRoutes;
-    authRoutes.value = config.authRoutes;
-    siteTitle.value = config.siteTitle;
+export const createVnApp = (config: AppConfig) => {
+    
+    const store = createPinia();
 
     //Allow the user to override the createApp function
-    createApp = createApp || vueCreateApp;
+    config.createApp ??= vueCreateApp;
 
     //Enable dark mode support
     if (config.useDarkMode) {
@@ -83,25 +63,18 @@ export const createVnApp = (config: AppConfig, createApp?: (app: any) => any) =>
         });
     }
 
-    if (!config.hideCookieWarning) {
-        //Configure the cookie warning to be displayed cookies are not enabled
-        showCookieWarning.value = navigator?.cookieEnabled === false;
-    }
-
     //Add required icons to library
     config.faLibrary.add(faBars, faLightbulb, faTimes);
 
     //create the vue app
-    const app = createApp(App)
-
-    //Add the library to the app
-    app.component('fa-icon', FontAwesomeIcon)
-
-    //Add the notification and router to the app
-    app.use(Notifications);
+    const app = config.createApp(App)
+    
+    app.use(Notifications)  //Add the notification component to the app
+        .use(store)         //Add pinia to the app
+        .component('fa-icon', FontAwesomeIcon) //Add the font awesome icon component to the app
 
     //Call the onCreate callback
-    config.onCreate(app);
+    config.onCreate(app, store);
 
     //Mount the app
     app.mount(config.mountElement);