@vc-shell/framework 1.2.3 → 1.2.4-beta.2

package/core/composables/useSettingsMenu/index.test.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect } from "vitest";
+import { defineComponent, h, inject } from "vue";
+import { mount } from "@vue/test-utils";
+import { SettingsMenuServiceKey } from "../../../injection-keys";
+import { provideSettingsMenu, useSettingsMenu } from "./index";
+import { createSettingsMenuService } from "../../services/settings-menu-service";
+
+describe("useSettingsMenu", () => {
+  it("throws InjectionError when no service is provided", () => {
+    const TestComp = defineComponent({
+      setup() {
+        expect(() => useSettingsMenu()).toThrow("SettingsMenuService");
+        return () => h("div");
+      },
+    });
+
+    mount(TestComp);
+  });
+
+  it("returns injected service", () => {
+    const service = createSettingsMenuService();
+
+    const TestComp = defineComponent({
+      setup() {
+        const result = useSettingsMenu();
+        expect(result).toBe(service);
+        return () => h("div");
+      },
+    });
+
+    mount(TestComp, {
+      global: {
+        provide: { [SettingsMenuServiceKey as symbol]: service },
+      },
+    });
+  });
+});
+
+describe("provideSettingsMenu", () => {
+  it("creates and provides a service", () => {
+    let providedService: any;
+    let injectedService: any;
+
+    const Parent = defineComponent({
+      setup() {
+        providedService = provideSettingsMenu();
+        return () => h(Child);
+      },
+    });
+
+    const Child = defineComponent({
+      setup() {
+        injectedService = inject(SettingsMenuServiceKey);
+        return () => h("div");
+      },
+    });
+
+    mount(Parent);
+
+    expect(providedService).toBeDefined();
+    expect(injectedService).toBe(providedService);
+  });
+
+  it("is idempotent — returns existing service if already provided", () => {
+    let firstResult: any;
+    let secondResult: any;
+
+    const GrandParent = defineComponent({
+      setup() {
+        firstResult = provideSettingsMenu();
+        return () => h(Parent);
+      },
+    });
+
+    const Parent = defineComponent({
+      setup() {
+        secondResult = provideSettingsMenu();
+        return () => h("div");
+      },
+    });
+
+    mount(GrandParent);
+
+    expect(firstResult).toBe(secondResult);
+  });
+});

package/core/composables/useSettingsMenu/index.ts

@@ -1,21 +1,36 @@
-import { inject, provide } from "vue";
+import { inject, provide, getCurrentScope, onScopeDispose } from "vue";
 import {
   createSettingsMenuService,
   ISettingsMenuService,
   addSettingsMenuItem,
+  settingsMenuBus,
 } from "../../services/settings-menu-service";
 import { SettingsMenuServiceKey } from "../../../injection-keys";
+import { createLogger, InjectionError } from "../../utilities";
+
+const logger = createLogger("use-settings-menu");
 
 export function provideSettingsMenu(): ISettingsMenuService {
+  const existingService = inject(SettingsMenuServiceKey, null);
+  if (existingService) {
+    return existingService;
+  }
+
   const settingsMenuService = createSettingsMenuService();
   provide(SettingsMenuServiceKey, settingsMenuService);
+
+  if (getCurrentScope()) {
+    onScopeDispose(() => settingsMenuBus.dispose(settingsMenuService));
+  }
+
   return settingsMenuService;
 }
 
 export function useSettingsMenu(): ISettingsMenuService {
   const settingsMenuService = inject(SettingsMenuServiceKey);
   if (!settingsMenuService) {
-    throw new Error("Settings menu service not found");
+    logger.error("Settings menu service not found");
+    throw new InjectionError("SettingsMenuService");
   }
   return settingsMenuService;
 }

package/core/composables/useTheme/index.ts

@@ -3,6 +3,9 @@ import { computed, watchEffect, ref, type Ref } from "vue";
 import { useI18n } from "vue-i18n";
 import * as _ from "lodash-es";
 import { i18n } from "../../plugins/i18n";
+import { createLogger } from "../../utilities";
+
+const logger = createLogger("use-theme");
 
 export interface ThemeDefinition {
   key: string;
@@ -82,7 +85,7 @@ export const useTheme = (): IUseTheme => {
     if (themeKeys.value.includes(themeKey)) {
       state.value = themeKey;
     } else {
-      console.warn(`[useTheme] Attempted to set an unregistered theme: ${themeKey}`);
+      logger.warn(`Attempted to set an unregistered theme: ${themeKey}`);
     }
   }
 

package/core/composables/useToolbar.ts

@@ -7,11 +7,21 @@ import { IBladeInstance } from "../../shared/components/blade-navigation/types";
 // Global toolbar service (if not provided through provide/inject)
 let globalToolbarService: IToolbarService | null = null;
 
+export interface UseToolbarOptions {
+  /**
+   * Clears all toolbar items for the current blade on component unmount.
+   * Enabled by default for backward compatibility.
+   */
+  autoCleanup?: boolean;
+}
+
 /**
  * Composable for working with the toolbar
  * @returns Methods for managing toolbar buttons
  */
-export function useToolbar() {
+export function useToolbar(options: UseToolbarOptions = {}) {
+  const { autoCleanup = true } = options;
+
   // Try to get the service from dependency injection
   const toolbarService = inject<IToolbarService | null>(TOOLBAR_SERVICE, null);
 
@@ -48,29 +58,31 @@ export function useToolbar() {
    * @param toolbarItem.id - Unique identifier of the button
    * @param toolbarItem.priority - Button priority (higher - more important, displayed at the beginning). Default is 0.
    */
-  const registerToolbarItem = (toolbarItem: IToolbarItem) => {
-    service.registerToolbarItem(toolbarItem, bladeId.value);
+  const resolveBladeId = (targetBladeId?: string): string => targetBladeId ?? bladeId.value;
+
+  const registerToolbarItem = (toolbarItem: IToolbarItem, targetBladeId?: string) => {
+    service.registerToolbarItem(toolbarItem, resolveBladeId(targetBladeId));
   };
 
-  const unregisterToolbarItem = (toolbarItemId: string) => {
-    service.unregisterToolbarItem(toolbarItemId, bladeId.value);
+  const unregisterToolbarItem = (toolbarItemId: string, targetBladeId?: string) => {
+    service.unregisterToolbarItem(toolbarItemId, resolveBladeId(targetBladeId));
   };
 
-  const updateToolbarItem = (id: string, toolbarItem: Partial<IToolbarItem>) => {
-    service.updateToolbarItem({ id, bladeId: bladeId.value, toolbarItem });
+  const updateToolbarItem = (id: string, toolbarItem: Partial<IToolbarItem>, targetBladeId?: string) => {
+    service.updateToolbarItem({ id, bladeId: resolveBladeId(targetBladeId), toolbarItem });
   };
 
-  const getToolbarItems = () => {
-    return service.getToolbarItems(bladeId.value);
+  const getToolbarItems = (targetBladeId?: string) => {
+    return service.getToolbarItems(resolveBladeId(targetBladeId));
   };
 
-  const clearBladeToolbarItems = () => {
-    service.clearBladeToolbarItems(bladeId.value);
+  const clearBladeToolbarItems = (targetBladeId?: string) => {
+    service.clearBladeToolbarItems(resolveBladeId(targetBladeId));
   };
 
   // Automatic cleanup when the component is unmounted
   const instance = getCurrentInstance();
-  if (instance) {
+  if (instance && autoCleanup) {
     onBeforeUnmount(() => {
       clearBladeToolbarItems();
     });

package/core/composables/useUser/index.ts

@@ -15,6 +15,18 @@ import {
 import { RequestPasswordResult } from "./../../types";
 import { createSharedComposable } from "@vueuse/core";
 import { useExternalProvider } from "../../../shared/components/sign-in/useExternalProvider";
+import { createLogger } from "../../utilities";
+
+export interface TokenData {
+  token: string | null;
+  access_token: string | null;
+  refresh_token: string | null;
+  expires_at: number | null;
+}
+
+const AUTH_STORAGE_KEY = "vc_auth_data";
+
+const logger = createLogger("use-user");
 
 // Interface for the full internal API provided by _createInternalUserLogic
 export interface IUserInternalAPI {
@@ -30,6 +42,7 @@ export interface IUserInternalAPI {
   requestPasswordReset: (loginOrEmail: string) => Promise<RequestPasswordResult>;
   changeUserPassword: (oldPassword: string, newPassword: string) => Promise<SecurityResult | undefined>;
   getLoginType: () => Promise<LoginType[]>;
+  getAccessToken: () => Promise<string | null>;
   isAuthenticated: ComputedRef<boolean>;
 }
 
@@ -40,12 +53,89 @@ export interface IAppUserAPI {
   isAdministrator: ComputedRef<boolean | undefined>;
   loadUser: () => Promise<UserDetail>;
   signOut: () => Promise<void>;
+  getAccessToken: () => Promise<string | null>;
 }
 
 const user: Ref<UserDetail | undefined> = ref();
 
+function readAuthData(): TokenData | null {
+  try {
+    const stored = localStorage.getItem(AUTH_STORAGE_KEY);
+    if (stored) {
+      return JSON.parse(stored) as TokenData;
+    }
+  } catch (e) {
+    logger.error("Failed to read auth data from storage:", e);
+  }
+  return null;
+}
+
+function storeAuthData(data: TokenData): void {
+  try {
+    logger.debug("storeAuthData - Saving:", data);
+    localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(data));
+    logger.debug("storeAuthData - Saved successfully");
+  } catch (e) {
+    logger.error("Failed to store auth data:", e);
+  }
+}
+
+function clearAuthData(): void {
+  try {
+    localStorage.removeItem(AUTH_STORAGE_KEY);
+  } catch (e) {
+    logger.error("Failed to clear auth data:", e);
+  }
+}
+
+// Direct fetch to /connect/token endpoint
+async function fetchToken(params: Record<string, string>): Promise<TokenData | null> {
+  try {
+    const body = new URLSearchParams(params).toString();
+
+    const response = await fetch("/connect/token", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body,
+    });
+
+    if (!response.ok) {
+      const errorBody = await response.text();
+      logger.error("fetchToken - HTTP error:", response.status, response.statusText, errorBody);
+      return null;
+    }
+
+    const data = await response.json();
+    logger.debug("fetchToken - Response:", data);
+
+    const accessToken = data.access_token;
+    const refreshToken = data.refresh_token;
+    const expiresIn = data.expires_in;
+
+    if (data.error || !accessToken) {
+      logger.error("fetchToken - Error:", data.error_description || data.error || "No access token");
+      return null;
+    }
+
+    const expiresAt = expiresIn ? Date.now() + expiresIn * 1000 : null;
+
+    return {
+      token: accessToken,
+      access_token: accessToken,
+      refresh_token: refreshToken ?? null,
+      expires_at: expiresAt,
+    };
+  } catch (e) {
+    logger.error("fetchToken - Exception:", e);
+    return null;
+  }
+}
+
 export function _createInternalUserLogic(): IUserInternalAPI {
   const loading: Ref<boolean> = ref(false);
+  const authData: Ref<TokenData | null> = ref(null);
 
   const { storage: externalSignInStorage, signOut: externalSignOut } = useExternalProvider();
 
@@ -83,25 +173,40 @@ export function _createInternalUserLogic(): IUserInternalAPI {
     username: string,
     password: string,
   ): Promise<SignInResult | { succeeded: boolean; error?: any; status?: number }> {
-    console.debug(`[@vc-shell/framework#_createInternalUserLogic:signIn] - Entry point`);
+    logger.debug("signIn - Entry point");
     try {
       loading.value = true;
+
+      // First do the standard login to set cookies/session
       const result = await securityClient.login(new LoginRequest({ userName: username, password }));
-      return await securityClient
-        .getCurrentUser()
-        .then((res) => {
-          if (res) {
-            user.value = res;
-            return result;
-          }
-          throw { succeeded: false };
-        })
-        .catch((e) => {
-          throw e;
-        });
+      logger.debug("signIn - Cookie login completed:", result);
+
+      // Then get OAuth token for API calls (direct fetch, bypasses API client)
+      // Request offline_access scope to get refresh_token for automatic token renewal
+      logger.debug("signIn - Requesting token...");
+      const tokenData = await fetchToken({
+        grant_type: "password",
+        username,
+        password,
+        scope: "offline_access",
+      });
+
+      if (tokenData) {
+        authData.value = tokenData;
+        storeAuthData(authData.value);
+        logger.debug("signIn - Token saved:", authData.value);
+      }
+
+      // Load current user info
+      const userInfo = await securityClient.getCurrentUser();
+      if (userInfo) {
+        user.value = userInfo;
+        return result;
+      }
+
+      throw { succeeded: false };
     } catch (e: any) {
-      //TODO: log error
-      console.log(e);
+      logger.error("signIn failed:", e);
       return { succeeded: false, error: e.message, status: e.status };
     } finally {
       loading.value = false;
@@ -109,10 +214,14 @@ export function _createInternalUserLogic(): IUserInternalAPI {
   }
 
   async function signOut(): Promise<void> {
-    console.debug(`[@vc-shell/framework#_createInternalUserLogic:signOut] - Entry point`);
+    logger.debug("signOut - Entry point");
 
     user.value = undefined;
 
+    // Clear stored auth data
+    clearAuthData();
+    authData.value = null;
+
     if (externalSignInStorage.value?.providerType) {
       await externalSignOut(externalSignInStorage.value.providerType);
     } else {
@@ -121,14 +230,15 @@ export function _createInternalUserLogic(): IUserInternalAPI {
   }
 
   async function loadUser(): Promise<UserDetail> {
-    console.debug(`[@vc-shell/framework#_createInternalUserLogic:loadUser] - Entry point`);
+    logger.debug("loadUser - Entry point");
 
     try {
       loading.value = true;
       user.value = await securityClient.getCurrentUser();
-      console.log("[_createInternalUserLogic]: an user details has been loaded", user.value);
+      await getAccessToken();
+      logger.debug("User details loaded:", user.value);
     } catch (e: any) {
-      console.error(e);
+      logger.error("loadUser failed:", e);
     } finally {
       loading.value = false;
     }
@@ -174,13 +284,70 @@ export function _createInternalUserLogic(): IUserInternalAPI {
     try {
       result = await securityClient.getLoginTypes();
     } catch (e) {
-      console.error(e);
+      logger.error("getLoginType failed:", e);
       throw e;
     }
 
     return result;
   }
 
+  // Buffer time in ms - refresh token this much before actual expiration
+  const TOKEN_REFRESH_BUFFER_MS = 60 * 1000; // 60 seconds
+
+  async function getAccessToken(): Promise<string | null> {
+    logger.debug("getAccessToken - Entry point");
+
+    // Load auth data from storage if not yet loaded
+    if (!authData.value) {
+      authData.value = readAuthData();
+    }
+
+    // No auth data available
+    if (!authData.value) {
+      logger.debug("getAccessToken - No auth data available");
+      return null;
+    }
+
+    // Check if token is expired or about to expire (with buffer)
+    const now = Date.now();
+    const expiresAt = authData.value.expires_at;
+    const shouldRefresh = expiresAt ? now >= expiresAt - TOKEN_REFRESH_BUFFER_MS : false;
+
+    logger.debug("getAccessToken - Token status:", {
+      hasToken: !!authData.value.access_token,
+      expiresAt: expiresAt ? new Date(expiresAt).toISOString() : "not set",
+      now: new Date(now).toISOString(),
+      shouldRefresh,
+      hasRefreshToken: !!authData.value.refresh_token,
+    });
+
+    if (shouldRefresh && authData.value.refresh_token) {
+      logger.debug("getAccessToken - Token expired or expiring soon, attempting refresh");
+
+      const tokenData = await fetchToken({
+        grant_type: "refresh_token",
+        refresh_token: authData.value.refresh_token,
+        scope: "offline_access",
+      });
+
+      if (tokenData) {
+        // Keep old refresh_token if new one not provided
+        tokenData.refresh_token = tokenData.refresh_token ?? authData.value.refresh_token;
+        authData.value = tokenData;
+        storeAuthData(authData.value);
+        logger.debug("getAccessToken - Token refreshed successfully, new expiry:", {
+          expiresAt: tokenData.expires_at ? new Date(tokenData.expires_at).toISOString() : "not set",
+        });
+      } else {
+        // Refresh failed - log error but return existing token (it might still work)
+        // Don't clear auth data - let the API call fail naturally if token is truly invalid
+        logger.warn("getAccessToken - Failed to refresh token, returning existing token");
+      }
+    }
+
+    return authData.value?.access_token ?? authData.value?.token ?? null;
+  }
+
   return {
     user: computed(() => user.value),
     loading: computed(() => loading.value),
@@ -195,6 +362,7 @@ export function _createInternalUserLogic(): IUserInternalAPI {
     requestPasswordReset,
     changeUserPassword,
     getLoginType,
+    getAccessToken,
   };
 }
 
@@ -207,5 +375,6 @@ export const useUser = createSharedComposable((): IAppUserAPI => {
     isAdministrator: internals.isAdministrator,
     loadUser: internals.loadUser,
     signOut: internals.signOut,
+    getAccessToken: internals.getAccessToken,
   };
 });

package/core/composables/useWidgets/index.test.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect } from "vitest";
+import { defineComponent, h, inject } from "vue";
+import { mount } from "@vue/test-utils";
+import { WidgetServiceKey } from "../../../injection-keys";
+import { provideWidgetService, useWidgets } from "./index";
+import { createWidgetService } from "../../services/widget-service";
+
+describe("useWidgets", () => {
+  it("throws InjectionError when no service is provided", () => {
+    const TestComp = defineComponent({
+      setup() {
+        expect(() => useWidgets()).toThrow("WidgetService");
+        return () => h("div");
+      },
+    });
+
+    mount(TestComp);
+  });
+
+  it("returns injected service", () => {
+    const service = createWidgetService();
+
+    const TestComp = defineComponent({
+      setup() {
+        const result = useWidgets();
+        expect(result).toBe(service);
+        return () => h("div");
+      },
+    });
+
+    mount(TestComp, {
+      global: {
+        provide: { [WidgetServiceKey as symbol]: service },
+      },
+    });
+  });
+});
+
+describe("provideWidgetService", () => {
+  it("creates and provides a service", () => {
+    let providedService: any;
+    let injectedService: any;
+
+    const Parent = defineComponent({
+      setup() {
+        providedService = provideWidgetService();
+        return () => h(Child);
+      },
+    });
+
+    const Child = defineComponent({
+      setup() {
+        injectedService = inject(WidgetServiceKey);
+        return () => h("div");
+      },
+    });
+
+    mount(Parent);
+
+    expect(providedService).toBeDefined();
+    expect(injectedService).toBe(providedService);
+  });
+
+  it("is idempotent — returns existing service if already provided", () => {
+    let firstResult: any;
+    let secondResult: any;
+
+    const GrandParent = defineComponent({
+      setup() {
+        firstResult = provideWidgetService();
+        return () => h(Parent);
+      },
+    });
+
+    const Parent = defineComponent({
+      setup() {
+        secondResult = provideWidgetService();
+        return () => h("div");
+      },
+    });
+
+    mount(GrandParent);
+
+    expect(firstResult).toBe(secondResult);
+  });
+});

package/core/composables/useWidgets/index.ts

@@ -1,23 +1,37 @@
-import { getCurrentInstance, inject, provide } from "vue";
+import { getCurrentInstance, inject, provide, getCurrentScope, onScopeDispose } from "vue";
 import {
   createWidgetService,
   IWidgetService,
   registerWidget,
   registerExternalWidget,
+  widgetBus,
 } from "./../../services/widget-service";
 import { WidgetServiceKey } from "./../../../injection-keys";
+import { createLogger, InjectionError } from "../../utilities";
+
+const logger = createLogger("use-widgets");
 
 export function provideWidgetService(): IWidgetService {
+  const existingService = inject(WidgetServiceKey, null);
+  if (existingService) {
+    return existingService;
+  }
+
   const service = createWidgetService();
   provide(WidgetServiceKey, service);
+
+  if (getCurrentScope()) {
+    onScopeDispose(() => widgetBus.dispose(service));
+  }
+
   return service;
 }
 
 export function useWidgets(): IWidgetService {
   const service = inject(WidgetServiceKey);
   if (!service) {
-    console.error("Widget service not found in current context. Injection chain:", getCurrentInstance());
-    throw new Error("WidgetService not provided");
+    logger.error("Widget service not found in current context. Injection chain:", getCurrentInstance());
+    throw new InjectionError("WidgetService");
   }
   return service;
 }