@qwickapps/server 1.3.0 → 1.3.1

package/src/plugins/users/types.ts

@@ -207,3 +207,41 @@ export interface UsersPluginConfig {
   /** Enable debug logging */
   debug?: boolean;
 }
+
+/**
+ * Comprehensive user information aggregated from multiple plugins.
+ * Used by /users/:id/info and /users/sync endpoints.
+ */
+export interface UserInfo {
+  /** Core user data from users plugin */
+  user: User;
+  /** User's entitlements (if entitlements plugin loaded) */
+  entitlements?: string[];
+  /** User's preferences (if preferences plugin loaded) */
+  preferences?: Record<string, unknown>;
+  /** Active ban info (if bans plugin loaded, null if not banned) */
+  ban?: {
+    id: string;
+    reason: string;
+    banned_at: Date;
+    expires_at?: Date;
+  } | null;
+  /** User's roles (if roles plugin loaded - future) */
+  roles?: string[];
+}
+
+/**
+ * Input for POST /users/sync endpoint
+ */
+export interface UserSyncInput {
+  /** User's email address */
+  email: string;
+  /** External provider ID (e.g., Auth0 user_id) */
+  external_id: string;
+  /** Provider name (e.g., 'auth0', 'google') */
+  provider: string;
+  /** User's display name (optional) */
+  name?: string;
+  /** Profile picture URL (optional) */
+  picture?: string;
+}

package/src/plugins/users/users-plugin.ts

@@ -18,10 +18,18 @@ import type {
   CreateUserInput,
   UpdateUserInput,
   UserSearchParams,
+  UserInfo,
+  UserSyncInput,
 } from './types.js';
+// Import helpers from other plugins for buildUserInfo
+// Note: These imports are used dynamically based on registry.hasPlugin() checks
+import { getEntitlements } from '../entitlements/entitlements-plugin.js';
+import { getPreferences } from '../preferences/preferences-plugin.js';
+import { getActiveBan } from '../bans/bans-plugin.js';
 
 // Store instance for helper access
 let currentStore: UserStore | null = null;
+let currentRegistry: PluginRegistry | null = null;
 
 /**
  * Create the Users plugin
@@ -49,8 +57,9 @@ export function createUsersPlugin(config: UsersPluginConfig): Plugin {
       await config.store.initialize();
       log('Users plugin migrations complete');
 
-      // Store reference for helper access
+      // Store references for helper access
       currentStore = config.store;
+      currentRegistry = registry;
 
       // Register health check
       registry.registerHealthCheck({
@@ -191,6 +200,69 @@ export function createUsersPlugin(config: UsersPluginConfig): Plugin {
             }
           },
         });
+
+        // GET /users/:id/info - Get comprehensive user info
+        registry.addRoute({
+          method: 'get',
+          path: `${apiPrefix}/:id/info`,
+          pluginId: 'users',
+          handler: async (req: Request, res: Response) => {
+            try {
+              const user = await config.store.getById(req.params.id);
+              if (!user) {
+                return res.status(404).json({ error: 'User not found' });
+              }
+
+              const info = await buildUserInfo(user, registry);
+              res.json(info);
+            } catch (error) {
+              console.error('[UsersPlugin] Get user info error:', error);
+              res.status(500).json({ error: 'Failed to get user info' });
+            }
+          },
+        });
+
+        // POST /users/sync - Find or create user, return comprehensive info
+        registry.addRoute({
+          method: 'post',
+          path: `${apiPrefix}/sync`,
+          pluginId: 'users',
+          handler: async (req: Request, res: Response) => {
+            try {
+              const input = req.body as UserSyncInput;
+
+              // Normalize and validate email
+              const email = input.email?.trim().toLowerCase();
+              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+              if (!email || !emailRegex.test(email)) {
+                return res.status(400).json({ error: 'Valid email is required' });
+              }
+
+              // Validate required fields
+              if (!input.external_id) {
+                return res.status(400).json({ error: 'external_id is required' });
+              }
+              if (!input.provider) {
+                return res.status(400).json({ error: 'provider is required' });
+              }
+
+              // Find or create user
+              const user = await findOrCreateUser({
+                email: email,
+                external_id: input.external_id,
+                provider: input.provider,
+                name: input.name?.trim(),
+                picture: input.picture?.trim(),
+              });
+
+              const info = await buildUserInfo(user, registry);
+              res.json(info);
+            } catch (error) {
+              console.error('[UsersPlugin] User sync error:', error);
+              res.status(500).json({ error: 'Failed to sync user' });
+            }
+          },
+        });
       }
 
       log('Users plugin started');
@@ -200,6 +272,7 @@ export function createUsersPlugin(config: UsersPluginConfig): Plugin {
       log('Stopping users plugin');
       await config.store.shutdown();
       currentStore = null;
+      currentRegistry = null;
       log('Users plugin stopped');
     },
   };
@@ -260,10 +333,7 @@ export async function findOrCreateUser(data: {
   // Try to find by email
   user = await currentStore.getByEmail(data.email);
   if (user) {
-    // Update with external ID if not set
-    if (!user.external_id) {
-      await currentStore.update(user.id, {});
-    }
+    // Note: external_id cannot be updated after user creation for security reasons
     await currentStore.updateLastLogin(user.id);
     return user;
   }
@@ -279,3 +349,70 @@ export async function findOrCreateUser(data: {
 
   return user;
 }
+
+/**
+ * Build comprehensive user info by aggregating data from all loaded plugins.
+ * This helper fetches data from entitlements, preferences, and bans plugins
+ * in parallel (if they are loaded) and returns a unified UserInfo object.
+ */
+export async function buildUserInfo(user: User, registry: PluginRegistry): Promise<UserInfo> {
+  const info: UserInfo = { user };
+
+  // Fetch data from other plugins in parallel
+  const promises: Promise<void>[] = [];
+
+  if (registry.hasPlugin('entitlements')) {
+    promises.push(
+      getEntitlements(user.email)
+        .then((result) => {
+          info.entitlements = result.entitlements;
+        })
+        .catch((error) => {
+          console.error('[UsersPlugin] Failed to fetch entitlements:', error);
+          // Continue without entitlements - don't fail the whole request
+        })
+    );
+  }
+
+  if (registry.hasPlugin('preferences')) {
+    promises.push(
+      getPreferences(user.id)
+        .then((prefs) => {
+          info.preferences = prefs;
+        })
+        .catch((error) => {
+          console.error('[UsersPlugin] Failed to fetch preferences:', error);
+          // Continue without preferences - don't fail the whole request
+        })
+    );
+  }
+
+  if (registry.hasPlugin('bans')) {
+    promises.push(
+      getActiveBan(user.id)
+        .then((ban) => {
+          // Transform Ban to UserInfo.ban shape (only include relevant fields)
+          info.ban = ban
+            ? {
+                id: ban.id,
+                reason: ban.reason,
+                banned_at: ban.banned_at,
+                expires_at: ban.expires_at,
+              }
+            : null;
+        })
+        .catch((error) => {
+          console.error('[UsersPlugin] Failed to fetch ban status:', error);
+          // Continue without ban info - don't fail the whole request
+        })
+    );
+  }
+
+  // Future: roles plugin
+  // if (registry.hasPlugin('roles')) {
+  //   promises.push(getUserRoles(user.id).then(roles => info.roles = roles));
+  // }
+
+  await Promise.all(promises);
+  return info;
+}

package/ui/src/App.tsx

@@ -7,6 +7,7 @@ import { DashboardWidgetProvider } from './dashboard';
 import { DashboardPage } from './pages/DashboardPage';
 import { LogsPage } from './pages/LogsPage';
 import { SystemPage } from './pages/SystemPage';
+import { PluginsPage } from './pages/PluginsPage';
 import { UsersPage } from './pages/UsersPage';
 import { EntitlementsPage } from './pages/EntitlementsPage';
 import { PluginPage } from './pages/PluginPage';
@@ -24,6 +25,7 @@ interface NavigationItem {
 // Core navigation items always shown
 const coreNavigationItems: NavigationItem[] = [
   { id: 'dashboard', label: 'Dashboard', route: '/', icon: 'dashboard' },
+  { id: 'plugins', label: 'Plugins', route: '/plugins', icon: 'extension' },
   { id: 'logs', label: 'Logs', route: '/logs', icon: 'article' },
   { id: 'system', label: 'System', route: '/system', icon: 'settings' },
 ];
@@ -34,7 +36,7 @@ const builtInPluginNavItems: Record<string, NavigationItem> = {
 };
 
 // Routes that have dedicated page components
-const dedicatedRoutes = new Set(['/', '/logs', '/system', '/users', '/entitlements']);
+const dedicatedRoutes = new Set(['/', '/plugins', '/logs', '/system', '/users', '/entitlements']);
 
 // Package version - injected at build time or fallback
 const SERVER_VERSION = '1.0.0';
@@ -188,6 +190,7 @@ export function App() {
           <Routes>
             {/* Core routes */}
             <Route path="/" element={<DashboardPage />} />
+            <Route path="/plugins" element={<PluginsPage />} />
             <Route path="/logs" element={<LogsPage />} />
             <Route path="/system" element={<SystemPage />} />
 

package/ui/src/api/controlPanelApi.ts

@@ -203,6 +203,67 @@ export interface UiContributionsResponse {
   plugins: Array<{ id: string; name: string; version?: string; status: string }>;
 }
 
+// ==================
+// Plugin Detail Types
+// ==================
+
+export interface ConfigContribution {
+  id: string;
+  component: string;
+  title?: string;
+  pluginId: string;
+}
+
+export interface PluginContributions {
+  routes: Array<{ method: string; path: string }>;
+  menuItems: MenuContribution[];
+  pages: PageContribution[];
+  widgets: WidgetContribution[];
+  config?: ConfigContribution;
+}
+
+export interface PluginInfo {
+  id: string;
+  name: string;
+  version?: string;
+  status: 'starting' | 'active' | 'stopped' | 'error';
+  error?: string;
+  contributionCounts: {
+    routes: number;
+    menuItems: number;
+    pages: number;
+    widgets: number;
+    hasConfig: boolean;
+  };
+}
+
+export interface PluginsResponse {
+  plugins: PluginInfo[];
+}
+
+export interface PluginDetailResponse {
+  id: string;
+  name: string;
+  version?: string;
+  status: 'starting' | 'active' | 'stopped' | 'error';
+  error?: string;
+  contributions: PluginContributions;
+}
+
+// ==================
+// Auth Config Types
+// ==================
+
+export type AuthPluginState = 'disabled' | 'enabled' | 'error';
+
+export interface AuthConfigStatus {
+  state: AuthPluginState;
+  adapter: string | null;
+  error?: string;
+  missingVars?: string[];
+  config?: Record<string, string>;
+}
+
 class ControlPanelApi {
   private baseUrl: string;
 
@@ -477,7 +538,7 @@ class ControlPanelApi {
   // Plugins API
   // ==================
 
-  async getPlugins(): Promise<{ plugins: Array<{ id: string; name: string; version?: string }> }> {
+  async getPlugins(): Promise<PluginsResponse> {
     const response = await fetch(`${this.baseUrl}/api/plugins`);
     if (!response.ok) {
       throw new Error(`Plugins request failed: ${response.statusText}`);
@@ -485,6 +546,17 @@ class ControlPanelApi {
     return response.json();
   }
 
+  async getPluginDetail(id: string): Promise<PluginDetailResponse> {
+    const response = await fetch(`${this.baseUrl}/api/plugins/${encodeURIComponent(id)}`);
+    if (!response.ok) {
+      if (response.status === 404) {
+        throw new Error(`Plugin not found: ${id}`);
+      }
+      throw new Error(`Plugin detail request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
   // ==================
   // UI Contributions API
   // ==================
@@ -496,6 +568,33 @@ class ControlPanelApi {
     }
     return response.json();
   }
+
+  // ==================
+  // Auth Config API
+  // ==================
+
+  async getAuthConfigStatus(): Promise<AuthConfigStatus> {
+    const response = await fetch(`${this.baseUrl}/api/auth/config/status`);
+    if (!response.ok) {
+      // Return disabled state if endpoint not available
+      if (response.status === 404) {
+        return { state: 'disabled', adapter: null };
+      }
+      throw new Error(`Auth config status request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  async getAuthConfig(): Promise<AuthConfigStatus> {
+    const response = await fetch(`${this.baseUrl}/api/auth/config`);
+    if (!response.ok) {
+      if (response.status === 404) {
+        return { state: 'disabled', adapter: null };
+      }
+      throw new Error(`Auth config request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
 }
 
 export const api = new ControlPanelApi();

package/ui/src/components/ControlPanelApp.tsx

@@ -36,6 +36,7 @@ import { defaultConfig } from '../config/AppConfig';
 import { DashboardPage } from '../pages/DashboardPage';
 import { LogsPage } from '../pages/LogsPage';
 import { SystemPage } from '../pages/SystemPage';
+import { AuthPage } from '../pages/AuthPage';
 import { NotFoundPage } from '../pages/NotFoundPage';
 
 // Dashboard widget system
@@ -122,6 +123,7 @@ function getBaseNavigationItems(): MenuItem[] {
   return [
     { id: 'dashboard', label: 'Dashboard', route: '/', icon: 'dashboard' },
     { id: 'logs', label: 'Logs', route: '/logs', icon: 'article' },
+    { id: 'auth', label: 'Auth', route: '/auth', icon: 'lock' },
     { id: 'system', label: 'System', route: '/system', icon: 'settings' },
   ];
 }
@@ -192,6 +194,7 @@ export function ControlPanelApp({
               <>
                 {!hideBaseNavItems.includes('dashboard') && <Route path="/" element={<DashboardPage />} />}
                 {!hideBaseNavItems.includes('logs') && <Route path="/logs" element={<LogsPage />} />}
+                {!hideBaseNavItems.includes('auth') && <Route path="/auth" element={<AuthPage />} />}
                 {!hideBaseNavItems.includes('system') && <Route path="/system" element={<SystemPage />} />}
               </>
             )}

package/ui/src/dashboard/PluginWidgetRenderer.tsx

@@ -100,16 +100,19 @@ export function PluginWidgetRenderer({
 
   return (
     <>
-      {visibleWidgets.map(widget => (
-        <Box key={widget.id} sx={{ mt: 4 }}>
-          {widget.title && (
-            <Typography variant="h6" sx={{ mb: 2, color: 'var(--theme-text-primary)' }}>
-              {widget.title}
-            </Typography>
-          )}
-          {getComponent(widget.component)}
-        </Box>
-      ))}
+      {visibleWidgets.map(widget => {
+        const Component = getComponent(widget.component);
+        return (
+          <Box key={widget.id} sx={{ mt: 4 }}>
+            {widget.title && (
+              <Typography variant="h6" sx={{ mb: 2, color: 'var(--theme-text-primary)' }}>
+                {widget.title}
+              </Typography>
+            )}
+            {Component && <Component />}
+          </Box>
+        );
+      })}
     </>
   );
 }

package/ui/src/dashboard/WidgetComponentRegistry.tsx

@@ -7,25 +7,29 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { ReactNode, createContext, useContext, useState, useCallback, useMemo } from 'react';
+import React, { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from 'react';
 
 /**
  * Widget component definition
+ *
+ * IMPORTANT: We store component functions (ComponentType), not JSX instances (ReactNode).
+ * This ensures cross-React-version compatibility when the library is used in apps
+ * with different React versions.
  */
 export interface WidgetComponent {
   /** Component name (must match server-side WidgetContribution.component) */
   name: string;
-  /** The React component to render */
-  component: ReactNode;
+  /** The React component function to render */
+  component: React.ComponentType;
 }
 
 interface WidgetComponentRegistryContextValue {
   /** Register a widget component */
-  registerComponent: (name: string, component: ReactNode) => void;
+  registerComponent: (name: string, component: React.ComponentType) => void;
   /** Register multiple widget components */
   registerComponents: (components: WidgetComponent[]) => void;
   /** Get a component by name */
-  getComponent: (name: string) => ReactNode | null;
+  getComponent: (name: string) => React.ComponentType | null;
   /** Check if a component is registered */
   hasComponent: (name: string) => boolean;
   /** Get all registered component names */
@@ -47,15 +51,15 @@ export function WidgetComponentRegistryProvider({
   initialComponents = [],
   children,
 }: WidgetComponentRegistryProviderProps) {
-  const [components, setComponents] = useState<Map<string, ReactNode>>(() => {
-    const map = new Map<string, ReactNode>();
+  const [components, setComponents] = useState<Map<string, React.ComponentType>>(() => {
+    const map = new Map<string, React.ComponentType>();
     for (const comp of initialComponents) {
       map.set(comp.name, comp.component);
     }
     return map;
   });
 
-  const registerComponent = useCallback((name: string, component: ReactNode) => {
+  const registerComponent = useCallback((name: string, component: React.ComponentType) => {
     setComponents(prev => {
       const next = new Map(prev);
       next.set(name, component);
@@ -73,7 +77,7 @@ export function WidgetComponentRegistryProvider({
     });
   }, []);
 
-  const getComponent = useCallback((name: string): ReactNode | null => {
+  const getComponent = useCallback((name: string): React.ComponentType | null => {
     return components.get(name) ?? null;
   }, [components]);
 

package/ui/src/dashboard/builtInWidgets.tsx

@@ -4,6 +4,9 @@
  * Maps built-in widget component names to their React components.
  * These are the widgets that qwickapps-server provides out of the box.
  *
+ * IMPORTANT: We export component functions, not JSX instances.
+ * This ensures cross-React-version compatibility.
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
@@ -19,11 +22,14 @@ export const builtInWidgetComponents: Record<string, React.ComponentType> = {
 };
 
 /**
- * Get built-in widget components as WidgetComponent array with JSX elements.
+ * Get built-in widget components as WidgetComponent array.
  * Use this when registering with WidgetComponentRegistryProvider.
+ *
+ * Returns component functions (not JSX instances) to ensure compatibility
+ * across different React versions.
  */
 export function getBuiltInWidgetComponents(): WidgetComponent[] {
   return [
-    { name: 'ServiceHealthWidget', component: <ServiceHealthWidget /> },
+    { name: 'ServiceHealthWidget', component: ServiceHealthWidget },
   ];
 }