@vue-skuilder/common-ui 0.1.4 → 0.1.6

package/src/composables/__tests__/useAuthUI.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useAuthUI } from '../useAuthUI';
+import type { UserDBInterface } from '@vue-skuilder/db';
+
+// Mock getCurrentUser
+vi.mock('../../stores/useAuthStore', () => ({
+  getCurrentUser: vi.fn(),
+}));
+
+// Get reference to the mocked function
+import { getCurrentUser } from '../../stores/useAuthStore';
+const mockGetCurrentUser = vi.mocked(getCurrentUser);
+
+describe('useAuthUI', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should detect local-only mode when user cannot create account', async () => {
+    // Mock user that cannot create account (NoOpSyncStrategy)
+    const mockUser = {
+      syncStrategy: {
+        canCreateAccount: vi.fn().mockReturnValue(false),
+      },
+      getUsername: vi.fn().mockReturnValue('TestUser'),
+    } as unknown as UserDBInterface;
+    mockGetCurrentUser.mockResolvedValue(mockUser);
+
+    const { config, detectSyncStrategy, isLocalOnlyMode } = useAuthUI();
+
+    await detectSyncStrategy();
+
+    expect(isLocalOnlyMode.value).toBe(true);
+    expect(config.value).toEqual({
+      showLoginRegistration: false,
+      showLogout: false,
+      showResetData: true,
+      logoutLabel: '',
+      resetLabel: 'Reset User Data',
+    });
+  });
+
+  it('should detect remote sync mode when user can create account', async () => {
+    // Mock user that can create account (CouchDBSyncStrategy)
+    const mockUser = {
+      syncStrategy: {
+        canCreateAccount: vi.fn().mockReturnValue(true),
+      },
+      getUsername: vi.fn().mockReturnValue('TestUser'),
+    } as unknown as UserDBInterface;
+    mockGetCurrentUser.mockResolvedValue(mockUser);
+
+    const { config, detectSyncStrategy, isLocalOnlyMode } = useAuthUI();
+
+    await detectSyncStrategy();
+
+    expect(isLocalOnlyMode.value).toBe(false);
+    expect(config.value).toEqual({
+      showLoginRegistration: true,
+      showLogout: true,
+      showResetData: false,
+      logoutLabel: 'Log out',
+      resetLabel: '',
+    });
+  });
+
+  it('should handle errors gracefully and default to remote sync mode', async () => {
+    mockGetCurrentUser.mockRejectedValue(new Error('User not available'));
+
+    const { config, detectSyncStrategy, isLocalOnlyMode } = useAuthUI();
+
+    await detectSyncStrategy();
+
+    expect(isLocalOnlyMode.value).toBe(false);
+    expect(config.value).toEqual({
+      showLoginRegistration: true,
+      showLogout: true,
+      showResetData: false,
+      logoutLabel: 'Log out',
+      resetLabel: '',
+    });
+  });
+
+  it('should manage loading state correctly', async () => {
+    const mockUser = {
+      syncStrategy: {
+        canCreateAccount: vi.fn().mockReturnValue(true),
+      },
+      getUsername: vi.fn().mockReturnValue('TestUser'),
+    } as unknown as UserDBInterface;
+    mockGetCurrentUser.mockResolvedValue(mockUser);
+
+    const { isLoading, detectSyncStrategy } = useAuthUI();
+
+    expect(isLoading.value).toBe(true);
+
+    const promise = detectSyncStrategy();
+    expect(isLoading.value).toBe(true);
+
+    await promise;
+    expect(isLoading.value).toBe(false);
+  });
+});

package/src/composables/index.ts

@@ -1,2 +1,3 @@
 export * from './CompositionViewable';
 export * from './Displayable';
+export * from './useAuthUI';

package/src/composables/useAuthUI.ts

@@ -0,0 +1,67 @@
+import { ref, computed } from 'vue';
+import { getCurrentUser } from '../stores/useAuthStore';
+
+export interface AuthUIConfig {
+  showLoginRegistration: boolean;
+  showLogout: boolean;
+  showResetData: boolean;
+  logoutLabel: string;
+  resetLabel: string;
+}
+
+export function useAuthUI() {
+  const isLoading = ref(true);
+  const syncStrategyDetected = ref(false);
+  const isLocalOnlyMode = ref(false);
+
+  const config = computed<AuthUIConfig>(() => {
+    if (isLocalOnlyMode.value) {
+      return {
+        showLoginRegistration: false,
+        showLogout: false,
+        showResetData: true,
+        logoutLabel: '',
+        resetLabel: 'Reset User Data',
+      };
+    } else {
+      return {
+        showLoginRegistration: true,
+        showLogout: true,
+        showResetData: false,
+        logoutLabel: 'Log out',
+        resetLabel: '',
+      };
+    }
+  });
+
+  const detectSyncStrategy = async () => {
+    try {
+      isLoading.value = true;
+      const user = await getCurrentUser();
+      
+      // Access the sync strategy through the user's private syncStrategy property
+      // NoOpSyncStrategy (local-only) returns false for canCreateAccount
+      // CouchDBSyncStrategy (remote sync) returns true for canCreateAccount
+      const userInternal = user as any; // Type assertion to access private members
+      const canCreateAccount = userInternal.syncStrategy?.canCreateAccount?.();
+      
+      isLocalOnlyMode.value = !canCreateAccount;
+      syncStrategyDetected.value = true;
+    } catch (error) {
+      console.error('Failed to detect sync strategy:', error);
+      // Default to remote sync mode on error
+      isLocalOnlyMode.value = false;
+      syncStrategyDetected.value = true;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  return {
+    config,
+    isLoading,
+    syncStrategyDetected,
+    isLocalOnlyMode,
+    detectSyncStrategy,
+  };
+}

package/src/index.ts

@@ -77,3 +77,11 @@ export * from './stores/useConfigStore';
   plugins
 */
 export { piniaPlugin } from './plugins/pinia';
+
+/*
+  Course browsing components
+*/
+export { default as CourseInformation } from './components/CourseInformation.vue';
+export { default as CardBrowser } from './components/CardBrowser.vue';
+export { default as CourseCardBrowser } from './components/CourseCardBrowser.vue';
+export { default as TagsInput } from './components/TagsInput.vue';

package/src/plugins/pinia.ts

@@ -15,7 +15,7 @@ export const getPinia = (): Pinia | null => {
 
 // Create a plugin that the main app can use
 export const piniaPlugin: Plugin = {
-  install(app, options) {
+  install(_app, options) {
     const pinia = options?.pinia;
     if (pinia) {
       setPinia(pinia);

package/src/stores/useAuthStore.ts

@@ -74,6 +74,25 @@ export const useAuthStore = () => {
       setRegDialog(open: boolean) {
         this.loginAndRegistration.regDialogOpen = open;
       },
+
+      async resetUserData() {
+        try {
+          if (!this._user) {
+            throw new Error('No user available for data reset');
+          }
+          
+          const result = await this._user.resetUserData();
+          if (result.status !== 'ok') {
+            throw new Error(result.error || 'Reset failed');
+          }
+          
+          console.log('User data reset successfully');
+          return result;
+        } catch (error) {
+          console.error('Failed to reset user data:', error);
+          throw error;
+        }
+      },
     },
 
     getters: {