@qwickapps/server 1.3.1 → 1.4.0

package/ui/src/api/controlPanelApi.ts

@@ -255,6 +255,7 @@ export interface PluginDetailResponse {
 // ==================
 
 export type AuthPluginState = 'disabled' | 'enabled' | 'error';
+export type AuthAdapterType = 'auth0' | 'supabase' | 'supertokens' | 'basic';
 
 export interface AuthConfigStatus {
   state: AuthPluginState;
@@ -262,6 +263,118 @@ export interface AuthConfigStatus {
   error?: string;
   missingVars?: string[];
   config?: Record<string, string>;
+  /** Runtime config from database (if available) */
+  runtimeConfig?: RuntimeAuthConfig;
+}
+
+export interface RuntimeAuthConfig {
+  adapter: AuthAdapterType | null;
+  config: {
+    auth0?: Auth0AdapterConfig;
+    supabase?: SupabaseAdapterConfig;
+    supertokens?: SupertokensAdapterConfig;
+    basic?: BasicAdapterConfig;
+  };
+  settings: {
+    authRequired?: boolean;
+    excludePaths?: string[];
+    debug?: boolean;
+  };
+  updatedAt: string;
+  updatedBy?: string;
+}
+
+export interface Auth0AdapterConfig {
+  domain: string;
+  clientId: string;
+  clientSecret: string;
+  baseUrl: string;
+  secret: string;
+  audience?: string;
+  scopes?: string[];
+  allowedRoles?: string[];
+  allowedDomains?: string[];
+}
+
+export interface SupabaseAdapterConfig {
+  url: string;
+  anonKey: string;
+}
+
+export interface BasicAdapterConfig {
+  username: string;
+  password: string;
+  realm?: string;
+}
+
+export interface SupertokensAdapterConfig {
+  connectionUri: string;
+  apiKey?: string;
+  appName: string;
+  apiDomain: string;
+  websiteDomain: string;
+  apiBasePath?: string;
+  websiteBasePath?: string;
+  enableEmailPassword?: boolean;
+  socialProviders?: {
+    google?: { clientId: string; clientSecret: string };
+    apple?: { clientId: string; clientSecret: string; keyId: string; teamId: string };
+    github?: { clientId: string; clientSecret: string };
+  };
+}
+
+export interface UpdateAuthConfigRequest {
+  adapter: AuthAdapterType;
+  config: Record<string, unknown>;
+  settings?: {
+    authRequired?: boolean;
+    excludePaths?: string[];
+  };
+}
+
+export interface TestProviderRequest {
+  adapter: AuthAdapterType;
+  config: Record<string, unknown>;
+  provider?: 'google' | 'github' | 'apple';
+}
+
+export interface TestProviderResponse {
+  success: boolean;
+  message: string;
+  details?: {
+    latency?: number;
+    version?: string;
+  };
+}
+
+// ==================
+// Rate Limit Config Types
+// ==================
+
+export type RateLimitStrategy = 'sliding-window' | 'fixed-window' | 'token-bucket';
+
+export interface RateLimitConfig {
+  windowMs: number;
+  maxRequests: number;
+  strategy: RateLimitStrategy;
+  cleanupEnabled: boolean;
+  cleanupIntervalMs: number;
+  store: string;
+  cache: string;
+  cacheAvailable: boolean;
+}
+
+export interface RateLimitConfigUpdateRequest {
+  windowMs?: number;
+  maxRequests?: number;
+  strategy?: RateLimitStrategy;
+  cleanupEnabled?: boolean;
+  cleanupIntervalMs?: number;
+}
+
+export interface RateLimitConfigUpdateResponse {
+  success: boolean;
+  config: RateLimitConfig;
 }
 
 class ControlPanelApi {
@@ -279,6 +392,33 @@ class ControlPanelApi {
     this.baseUrl = baseUrl;
   }
 
+  /**
+   * Get the base URL for API requests.
+   */
+  getBaseUrl(): string {
+    return this.baseUrl;
+  }
+
+  /**
+   * Generic fetch method for API requests.
+   * Automatically prepends the base URL and /api prefix.
+   */
+  async fetch<T = unknown>(path: string, options?: RequestInit): Promise<T> {
+    const url = `${this.baseUrl}/api${path.startsWith('/') ? path : `/${path}`}`;
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || error.message || `Request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
   // ==================
   // Plugin Feature Detection
   // ==================
@@ -595,6 +735,92 @@ class ControlPanelApi {
     }
     return response.json();
   }
+
+  /**
+   * Update auth configuration (save to database for hot-reload)
+   */
+  async updateAuthConfig(request: UpdateAuthConfigRequest): Promise<{ success: boolean; message: string }> {
+    const response = await fetch(`${this.baseUrl}/api/auth/config`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(request),
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `Auth config update failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  /**
+   * Delete auth configuration (revert to environment variables)
+   */
+  async deleteAuthConfig(): Promise<{ success: boolean; message: string }> {
+    const response = await fetch(`${this.baseUrl}/api/auth/config`, {
+      method: 'DELETE',
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `Auth config delete failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  /**
+   * Test auth provider connection without saving
+   */
+  async testAuthProvider(request: TestProviderRequest): Promise<TestProviderResponse> {
+    const response = await fetch(`${this.baseUrl}/api/auth/test-provider`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(request),
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `Provider test failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  /**
+   * Test current auth provider connection (uses existing env/runtime config)
+   */
+  async testCurrentAuthProvider(): Promise<TestProviderResponse> {
+    const response = await fetch(`${this.baseUrl}/api/auth/test-current`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `Provider test failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  // ==================
+  // Rate Limit Config API
+  // ==================
+
+  async getRateLimitConfig(): Promise<RateLimitConfig> {
+    const response = await fetch(`${this.baseUrl}/api/rate-limit/config`);
+    if (!response.ok) {
+      throw new Error(`Rate limit config request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  async updateRateLimitConfig(updates: RateLimitConfigUpdateRequest): Promise<RateLimitConfigUpdateResponse> {
+    const response = await fetch(`${this.baseUrl}/api/rate-limit/config`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(updates),
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `Rate limit config update failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
 }
 
 export const api = new ControlPanelApi();

package/ui/src/dashboard/builtInWidgets.tsx

@@ -10,7 +10,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { ServiceHealthWidget } from './widgets';
+import { ServiceHealthWidget, IntegrationStatusWidget, AuthStatusWidget } from './widgets';
 import type { WidgetComponent } from './WidgetComponentRegistry';
 
 /**
@@ -19,6 +19,8 @@ import type { WidgetComponent } from './WidgetComponentRegistry';
  */
 export const builtInWidgetComponents: Record<string, React.ComponentType> = {
   ServiceHealthWidget: ServiceHealthWidget,
+  IntegrationStatusWidget: IntegrationStatusWidget,
+  AuthStatusWidget: AuthStatusWidget,
 };
 
 /**
@@ -31,5 +33,7 @@ export const builtInWidgetComponents: Record<string, React.ComponentType> = {
 export function getBuiltInWidgetComponents(): WidgetComponent[] {
   return [
     { name: 'ServiceHealthWidget', component: ServiceHealthWidget },
+    { name: 'IntegrationStatusWidget', component: IntegrationStatusWidget },
+    { name: 'AuthStatusWidget', component: AuthStatusWidget },
   ];
 }

package/ui/src/dashboard/widgets/AuthStatusWidget.tsx

@@ -0,0 +1,143 @@
+/**
+ * Auth Status Widget
+ *
+ * Displays the authentication plugin status on the dashboard.
+ * Shows whether auth is enabled, the adapter type, and configuration status.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import { Box, Typography, Chip, CircularProgress, Alert } from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+import BlockIcon from '@mui/icons-material/Block';
+import { api } from '../../api/controlPanelApi';
+
+interface AuthStatus {
+  state: 'enabled' | 'disabled' | 'error';
+  adapter: string | null;
+  error?: string;
+  missingVars?: string[];
+}
+
+const adapterLabels: Record<string, string> = {
+  supertokens: 'SuperTokens',
+  auth0: 'Auth0',
+  supabase: 'Supabase',
+  basic: 'Basic Auth',
+};
+
+export function AuthStatusWidget() {
+  const [status, setStatus] = useState<AuthStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchStatus = async () => {
+      try {
+        const data = await api.fetch<AuthStatus>('/auth/config/status');
+        setStatus(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch auth status');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchStatus();
+  }, []);
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
+        <CircularProgress size={20} />
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert severity="warning" sx={{ py: 0.5, fontSize: 13 }}>
+        Unable to load auth status
+      </Alert>
+    );
+  }
+
+  if (!status) return null;
+
+  const getStateIcon = () => {
+    switch (status.state) {
+      case 'enabled':
+        return <CheckCircleIcon sx={{ color: 'var(--theme-success)', fontSize: 32 }} />;
+      case 'error':
+        return <ErrorIcon sx={{ color: 'var(--theme-error)', fontSize: 32 }} />;
+      case 'disabled':
+      default:
+        return <BlockIcon sx={{ color: 'var(--theme-text-secondary)', fontSize: 32 }} />;
+    }
+  };
+
+  const getStateColor = () => {
+    switch (status.state) {
+      case 'enabled':
+        return 'var(--theme-success)';
+      case 'error':
+        return 'var(--theme-error)';
+      case 'disabled':
+      default:
+        return 'var(--theme-text-secondary)';
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        bgcolor: 'var(--theme-surface)',
+        borderRadius: 2,
+        p: 2,
+        border: '1px solid var(--theme-border)',
+      }}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        {getStateIcon()}
+        <Box sx={{ flex: 1 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
+            <Typography variant="subtitle1" sx={{ color: 'var(--theme-text-primary)', fontWeight: 600 }}>
+              {status.state === 'enabled' && status.adapter
+                ? adapterLabels[status.adapter] || status.adapter
+                : status.state === 'disabled'
+                  ? 'Not Configured'
+                  : 'Configuration Error'}
+            </Typography>
+            <Chip
+              label={status.state.toUpperCase()}
+              size="small"
+              sx={{
+                bgcolor: `${getStateColor()}20`,
+                color: getStateColor(),
+                fontWeight: 600,
+                fontSize: 10,
+                height: 20,
+              }}
+            />
+          </Box>
+          <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
+            {status.state === 'enabled'
+              ? 'Authentication is active'
+              : status.state === 'disabled'
+                ? 'Set AUTH_ADAPTER environment variable'
+                : status.error || 'Check configuration'}
+          </Typography>
+        </Box>
+      </Box>
+
+      {/* Missing vars warning */}
+      {status.missingVars && status.missingVars.length > 0 && (
+        <Alert severity="warning" sx={{ mt: 2, py: 0.5, '& .MuiAlert-message': { fontSize: 12 } }}>
+          Missing: {status.missingVars.join(', ')}
+        </Alert>
+      )}
+    </Box>
+  );
+}

package/ui/src/dashboard/widgets/IntegrationStatusWidget.tsx

@@ -0,0 +1,135 @@
+/**
+ * Integration Status Widget
+ *
+ * Displays the status of configured integrations with their connection status.
+ * Used in the dashboard to show a quick overview of integration health.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import { Box, Typography, Chip, CircularProgress, Alert } from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+import { api } from '../../api/controlPanelApi';
+
+interface Integration {
+  id: string;
+  name: string;
+  description: string;
+  configured: boolean;
+}
+
+interface IntegrationsConfig {
+  integrations: Integration[];
+  stats: {
+    totalRequests: number;
+  };
+}
+
+export function IntegrationStatusWidget() {
+  const [config, setConfig] = useState<IntegrationsConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const data = await api.fetch<IntegrationsConfig>('/ai-proxy/config');
+        setConfig(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch integrations');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchConfig();
+  }, []);
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
+        <CircularProgress size={20} />
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert severity="warning" sx={{ py: 0.5, fontSize: 13 }}>
+        Unable to load integrations
+      </Alert>
+    );
+  }
+
+  if (!config) return null;
+
+  const configuredCount = config.integrations.filter((i) => i.configured).length;
+  const totalCount = config.integrations.length;
+
+  return (
+    <Box
+      sx={{
+        bgcolor: 'var(--theme-surface)',
+        borderRadius: 2,
+        p: 2,
+        border: '1px solid var(--theme-border)',
+      }}
+    >
+      {/* Summary */}
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+        <Typography variant="subtitle2" sx={{ color: 'var(--theme-text-secondary)' }}>
+          {configuredCount} of {totalCount} configured
+        </Typography>
+        <Typography variant="subtitle2" sx={{ color: 'var(--theme-text-secondary)' }}>
+          {config.stats.totalRequests} requests
+        </Typography>
+      </Box>
+
+      {/* Integration List */}
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        {config.integrations.map((integration) => (
+          <Box
+            key={integration.id}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              p: 1.5,
+              bgcolor: 'var(--theme-background)',
+              borderRadius: 1,
+            }}
+          >
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              {integration.configured ? (
+                <CheckCircleIcon sx={{ color: 'var(--theme-success)', fontSize: 18 }} />
+              ) : (
+                <ErrorIcon sx={{ color: 'var(--theme-text-secondary)', fontSize: 18 }} />
+              )}
+              <Box>
+                <Typography variant="body2" sx={{ color: 'var(--theme-text-primary)', fontWeight: 500 }}>
+                  {integration.name}
+                </Typography>
+                <Typography variant="caption" sx={{ color: 'var(--theme-text-secondary)' }}>
+                  {integration.description}
+                </Typography>
+              </Box>
+            </Box>
+            <Chip
+              label={integration.configured ? 'Connected' : 'Not Configured'}
+              size="small"
+              sx={{
+                bgcolor: integration.configured ? 'var(--theme-success)20' : 'transparent',
+                color: integration.configured ? 'var(--theme-success)' : 'var(--theme-text-secondary)',
+                border: integration.configured ? 'none' : '1px solid var(--theme-border)',
+                fontWeight: 500,
+                fontSize: 11,
+              }}
+            />
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/ui/src/dashboard/widgets/index.ts

@@ -5,3 +5,5 @@
  */
 
 export { ServiceHealthWidget } from './ServiceHealthWidget';
+export { IntegrationStatusWidget } from './IntegrationStatusWidget';
+export { AuthStatusWidget } from './AuthStatusWidget';