@qwickapps/server 1.6.0 → 1.7.0

package/ui/src/api/types.ts

@@ -0,0 +1,276 @@
+/**
+ * API Client Type Definitions
+ *
+ * Type-safe API client interfaces for the auto-generated client.
+ * These types are manually maintained and should be updated when
+ * new plugins/routes are added.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import type {
+  HealthResponse,
+  InfoResponse,
+  DiagnosticsResponse,
+  ConfigResponse,
+  LogsResponse,
+  LogSource,
+  UsersResponse,
+  User,
+  InviteUserRequest,
+  InvitationResponse,
+  BansResponse,
+  ApiKeysResponse,
+  ApiKey,
+  CreateApiKeyRequest,
+  UpdateApiKeyRequest,
+  AvailableScopesResponse,
+  KeyUsageResponse,
+  EntitlementsStatus,
+  UiContributionsResponse,
+  PluginsResponse,
+  AuthConfigStatus,
+  RuntimeAuthConfig,
+  UpdateAuthConfigRequest,
+  TestProviderRequest,
+  TestProviderResponse,
+  NotificationsStatsResponse,
+  NotificationsClientsResponse,
+  RateLimitConfigUpdateRequest,
+  RateLimitConfigUpdateResponse,
+  PreferencesResponse,
+} from './controlPanelApi.js';
+
+// =============================================================================
+// Route Manifest Types
+// =============================================================================
+
+/**
+ * Type-safe API route manifest
+ *
+ * Manually maintained to provide IDE autocomplete and type checking.
+ * Update when new plugins/routes are added.
+ */
+export interface APIClientManifest {
+  routes: {
+    // Config plugin (separate namespace)
+    'config.query': { method: 'GET'; path: '/api/config'; auth: true };
+
+    // Core routes
+    'core.health': { method: 'GET'; path: '/api/health'; auth: false };
+    'core.info': { method: 'GET'; path: '/api/info'; auth: false };
+    'core.diagnostics': { method: 'GET'; path: '/api/diagnostics'; auth: false };
+    'core.uiContributions': { method: 'GET'; path: '/api/ui-contributions'; auth: false };
+    'core.plugins': { method: 'GET'; path: '/api/plugins'; auth: false };
+
+    // Logs plugin
+    'logs.query': { method: 'GET'; path: '/api/logs'; auth: true };
+    'logs.sources': { method: 'GET'; path: '/api/logs/sources'; auth: true };
+
+    // Users plugin
+    'users.query': { method: 'GET'; path: '/api/users'; auth: true };
+    'users.get': { method: 'GET'; path: '/api/users/:id'; auth: true };
+    'users.invite': { method: 'POST'; path: '/api/users/invite'; auth: true };
+
+    // Bans plugin
+    'bans.query': { method: 'GET'; path: '/api/bans'; auth: true };
+
+    // API Keys plugin (camelCase namespace)
+    'apiKeys.query': { method: 'GET'; path: '/api/api-keys'; auth: true };
+    'apiKeys.create': { method: 'POST'; path: '/api/api-keys'; auth: true };
+    'apiKeys.get': { method: 'GET'; path: '/api/api-keys/:id'; auth: true };
+    'apiKeys.update': { method: 'PUT'; path: '/api/api-keys/:id'; auth: true };
+    'apiKeys.delete': { method: 'DELETE'; path: '/api/api-keys/:id'; auth: true };
+    'apiKeys.scopes': { method: 'GET'; path: '/api/api-keys/scopes'; auth: true };
+    'apiKeys.usage': { method: 'GET'; path: '/api/api-keys/:id/usage'; auth: true };
+
+    // Entitlements plugin
+    'entitlements.query': { method: 'GET'; path: '/api/entitlements'; auth: true };
+
+    // Auth plugin
+    'auth.status': { method: 'GET'; path: '/api/auth/status'; auth: true };
+    'auth.config': { method: 'GET'; path: '/api/auth/config'; auth: true };
+    'auth.update': { method: 'PUT'; path: '/api/auth/config'; auth: true };
+    'auth.test': { method: 'POST'; path: '/api/auth/test-provider'; auth: true };
+
+    // Notifications plugin
+    'notifications.stats': { method: 'GET'; path: '/api/notifications/stats'; auth: true };
+    'notifications.clients': { method: 'GET'; path: '/api/notifications/clients'; auth: true };
+
+    // Rate Limit plugin (camelCase namespace)
+    'rateLimit.config': { method: 'GET'; path: '/api/rate-limit/config'; auth: true };
+    'rateLimit.update': { method: 'PUT'; path: '/api/rate-limit/config'; auth: true };
+
+    // Preferences plugin
+    'preferences.query': { method: 'GET'; path: '/api/preferences'; auth: true };
+  };
+}
+
+// =============================================================================
+// Generated API Client Types
+// =============================================================================
+
+/**
+ * Query parameters for log queries
+ */
+export interface LogQueryParams {
+  level?: string;
+  source?: string;
+  limit?: number;
+  offset?: number;
+  startTime?: string;
+  endTime?: string;
+}
+
+/**
+ * Query parameters for user queries
+ */
+export interface UserQueryParams {
+  status?: string;
+  limit?: number;
+  offset?: number;
+}
+
+/**
+ * Query parameters for bans
+ */
+export interface BanQueryParams {
+  userId?: string;
+  active?: boolean;
+  limit?: number;
+  offset?: number;
+}
+
+/**
+ * Query parameters for API keys
+ */
+export interface ApiKeyQueryParams {
+  userId?: string;
+  active?: boolean;
+  limit?: number;
+  offset?: number;
+}
+
+/**
+ * Query parameters for entitlements
+ */
+export interface EntitlementQueryParams {
+  userId?: string;
+}
+
+/**
+ * Query parameters for preferences
+ */
+export interface PreferenceQueryParams {
+  userId?: string;
+}
+
+/**
+ * Generated API Client interface
+ *
+ * Provides type-safe access to all API routes.
+ * Auto-generated at runtime, types defined manually.
+ */
+export interface APIClient {
+  /** Configuration plugin routes */
+  config: {
+    /** Get server configuration */
+    query: () => Promise<ConfigResponse>;
+  };
+
+  /** Core system routes */
+  core: {
+    /** Health check endpoint */
+    health: () => Promise<HealthResponse>;
+    /** Server information */
+    info: () => Promise<InfoResponse>;
+    /** System diagnostics */
+    diagnostics: () => Promise<DiagnosticsResponse>;
+    /** UI contributions from plugins */
+    uiContributions: () => Promise<UiContributionsResponse>;
+    /** List plugins */
+    plugins: () => Promise<PluginsResponse>;
+  };
+
+  /** Logs plugin routes */
+  logs: {
+    /** Query logs */
+    query: (params?: LogQueryParams) => Promise<LogsResponse>;
+    /** Get log sources */
+    sources: () => Promise<LogSource[]>;
+  };
+
+  /** Users plugin routes */
+  users: {
+    /** Query users */
+    query: (params?: UserQueryParams) => Promise<UsersResponse>;
+    /** Get user by ID */
+    get: (id: string) => Promise<User>;
+    /** Invite new user */
+    invite: (data: InviteUserRequest) => Promise<InvitationResponse>;
+  };
+
+  /** Bans plugin routes */
+  bans: {
+    /** Query bans */
+    query: (params?: BanQueryParams) => Promise<BansResponse>;
+  };
+
+  /** API Keys plugin routes */
+  apiKeys: {
+    /** Query API keys */
+    query: (params?: ApiKeyQueryParams) => Promise<ApiKeysResponse>;
+    /** Create API key */
+    create: (data: CreateApiKeyRequest) => Promise<ApiKey>;
+    /** Get API key by ID */
+    get: (id: string) => Promise<ApiKey>;
+    /** Update API key */
+    update: (id: string, data: UpdateApiKeyRequest) => Promise<ApiKey>;
+    /** Delete API key */
+    delete: (id: string) => Promise<void>;
+    /** Get available scopes */
+    scopes: () => Promise<AvailableScopesResponse>;
+    /** Get key usage stats */
+    usage: (id: string) => Promise<KeyUsageResponse>;
+  };
+
+  /** Entitlements plugin routes */
+  entitlements: {
+    /** Query entitlements */
+    query: (params?: EntitlementQueryParams) => Promise<EntitlementsStatus>;
+  };
+
+  /** Auth plugin routes */
+  auth: {
+    /** Get auth status */
+    status: () => Promise<AuthConfigStatus>;
+    /** Get auth config */
+    config: () => Promise<RuntimeAuthConfig>;
+    /** Update auth config */
+    update: (data: UpdateAuthConfigRequest) => Promise<RuntimeAuthConfig>;
+    /** Test provider connection */
+    test: (data: TestProviderRequest) => Promise<TestProviderResponse>;
+  };
+
+  /** Notifications plugin routes */
+  notifications: {
+    /** Get notification stats */
+    stats: () => Promise<NotificationsStatsResponse>;
+    /** Get connected clients */
+    clients: () => Promise<NotificationsClientsResponse>;
+  };
+
+  /** Rate limit plugin routes */
+  rateLimit: {
+    /** Get rate limit config */
+    config: () => Promise<RateLimitConfigUpdateResponse>;
+    /** Update rate limit config */
+    update: (data: RateLimitConfigUpdateRequest) => Promise<RateLimitConfigUpdateResponse>;
+  };
+
+  /** Preferences plugin routes */
+  preferences: {
+    /** Query preferences */
+    query: (params?: PreferenceQueryParams) => Promise<PreferencesResponse>;
+  };
+}

package/ui/src/components/ControlPanelApp.tsx

@@ -139,7 +139,7 @@ export function ControlPanelApp({
   hideBaseNavItems = [],
   showThemeSwitcher = true,
   showPaletteSwitcher = true,
-  basePath = '',
+  basePath: _basePath = '', // Keep for backwards compatibility but unused (API always at /api)
   children,
 }: ControlPanelAppProps) {
   const [version, setVersion] = useState<string>('');
@@ -147,10 +147,9 @@ export function ControlPanelApp({
   // Combine built-in widget components with custom ones
   const allWidgetComponents = [...getBuiltInWidgetComponents(), ...widgetComponents];
 
-  // Configure API base URL based on basePath - do this synchronously before any renders
-  // If basePath is '/cpanel', API is at '/cpanel/api'
-  // If basePath is '' or '/', API is at '/api'
-  const apiBasePath = basePath && basePath !== '/' ? basePath : '';
+  // Configure API base URL - API routes are always at '/api' regardless of control panel mount path
+  // The control panel might be mounted at /cpanel, but API is always at /api (not /cpanel/api)
+  const apiBasePath = '';
   api.setBaseUrl(apiBasePath);
 
   // Fetch version from API

package/ui/src/components/auth/AcceptInvitationPage.tsx

@@ -0,0 +1,151 @@
+/**
+ * AcceptInvitationPage - User invitation acceptance form
+ *
+ * Allows invited users to set password and activate their account
+ */
+
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { GridLayout, TextInputField, Button } from '@qwickapps/react-framework';
+import { AuthLayout, AuthError } from './shared';
+
+export interface AcceptInvitationPageProps {
+  /**
+   * Auto-generated API client from qwickapps-server
+   */
+  apiClient: any;
+
+  /**
+   * Callback invoked on successful invitation acceptance
+   */
+  onSuccess?: (user: any) => void;
+
+  /**
+   * Path to redirect to after successful acceptance
+   * @default '/login'
+   */
+  redirectTo?: string;
+}
+
+export function AcceptInvitationPage({
+  apiClient,
+  onSuccess,
+  redirectTo = '/login',
+}: AcceptInvitationPageProps) {
+  const { token } = useParams<{ token: string }>();
+  const navigate = useNavigate();
+
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [invitationValid, setInvitationValid] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    // Validate invitation token on mount
+    const validateToken = async () => {
+      if (!token) {
+        setError('Invalid invitation link');
+        setInvitationValid(false);
+        return;
+      }
+
+      try {
+        // Token exists and is in correct format
+        setInvitationValid(true);
+      } catch (err) {
+        setError('Invalid or expired invitation');
+        setInvitationValid(false);
+      }
+    };
+
+    validateToken();
+  }, [token]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    if (!token) {
+      setError('Invalid invitation token');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // Call auto-generated API client
+      const result = await apiClient.users.acceptInvitation(token, { password });
+      onSuccess?.(result.user);
+      navigate(redirectTo);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to accept invitation');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (invitationValid === false) {
+    return (
+      <AuthLayout title="Invalid Invitation">
+        <AuthError message={error || 'This invitation link is invalid or has expired'} />
+        <div style={{ marginTop: '1.5rem', textAlign: 'center' }}>
+          <a href="/login" style={{ color: '#0066cc', fontSize: '0.875rem' }}>
+            Go to login
+          </a>
+        </div>
+      </AuthLayout>
+    );
+  }
+
+  if (invitationValid === null) {
+    return (
+      <AuthLayout title="Loading...">
+        <p style={{ textAlign: 'center', color: '#666' }}>Validating invitation...</p>
+      </AuthLayout>
+    );
+  }
+
+  return (
+    <AuthLayout title="Accept Invitation">
+      <form onSubmit={handleSubmit}>
+        <GridLayout columns={1} spacing="md">
+          {error && <AuthError message={error} />}
+
+          <p style={{ marginBottom: '1rem', color: '#666', fontSize: '0.875rem' }}>
+            Set your password to activate your account
+          </p>
+
+          <TextInputField
+            label="Password"
+            type="password"
+            value={password}
+            onChange={setPassword}
+            required
+            disabled={loading}
+            helperText="Minimum 8 characters"
+            textFieldProps={{ autoComplete: 'new-password' }}
+          />
+
+          <TextInputField
+            label="Confirm Password"
+            type="password"
+            value={confirmPassword}
+            onChange={setConfirmPassword}
+            required
+            disabled={loading}
+            textFieldProps={{ autoComplete: 'new-password' }}
+          />
+
+          <Button type="submit" variant="primary" loading={loading} fullWidth>
+            Activate Account
+          </Button>
+        </GridLayout>
+      </form>
+    </AuthLayout>
+  );
+}

package/ui/src/components/auth/LoginPage.tsx

@@ -0,0 +1,122 @@
+/**
+ * LoginPage - User login form component
+ *
+ * Provides email/password login with integration to auth provider
+ */
+
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@qwickapps/auth-client';
+import { GridLayout, TextInputField, Button } from '@qwickapps/react-framework';
+import { AuthLayout, AuthError } from './shared';
+
+export interface LoginPageProps {
+  /**
+   * Callback invoked on successful login
+   */
+  onSuccess?: (user: any) => void;
+
+  /**
+   * Path to redirect to after successful login
+   * @default '/dashboard'
+   */
+  redirectTo?: string;
+
+  /**
+   * Whether to show signup link
+   * @default true
+   */
+  showSignupLink?: boolean;
+
+  /**
+   * Whether to show password reset link
+   * @default true
+   */
+  showPasswordResetLink?: boolean;
+}
+
+export function LoginPage({
+  onSuccess,
+  redirectTo = '/dashboard',
+  showSignupLink = true,
+  showPasswordResetLink = true,
+}: LoginPageProps) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const { signIn } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      const result = await signIn({ email, password });
+      if (result.error) {
+        setError(result.error.message);
+      } else {
+        onSuccess?.(result.data?.user);
+        navigate(redirectTo);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <AuthLayout title="Sign In">
+      <form onSubmit={handleSubmit}>
+        <GridLayout columns={1} spacing="md">
+          {error && <AuthError message={error} />}
+
+          <TextInputField
+            label="Email"
+            type="email"
+            value={email}
+            onChange={setEmail}
+            required
+            disabled={loading}
+            textFieldProps={{ autoComplete: 'email' }}
+          />
+
+          <TextInputField
+            label="Password"
+            type="password"
+            value={password}
+            onChange={setPassword}
+            required
+            disabled={loading}
+            textFieldProps={{ autoComplete: 'current-password' }}
+          />
+
+          <Button type="submit" variant="primary" loading={loading} fullWidth>
+            Sign In
+          </Button>
+
+          {showPasswordResetLink && (
+            <div style={{ textAlign: 'center', marginTop: '0.5rem' }}>
+              <a href="/reset-password" style={{ fontSize: '0.875rem', color: '#0066cc' }}>
+                Forgot password?
+              </a>
+            </div>
+          )}
+
+          {showSignupLink && (
+            <p style={{ textAlign: 'center', marginTop: '1rem', fontSize: '0.875rem' }}>
+              Don't have an account?{' '}
+              <a href="/signup" style={{ color: '#0066cc', fontWeight: 500 }}>
+                Sign up
+              </a>
+            </p>
+          )}
+        </GridLayout>
+      </form>
+    </AuthLayout>
+  );
+}

package/ui/src/components/auth/PasswordResetConfirmPage.tsx

@@ -0,0 +1,109 @@
+/**
+ * PasswordResetConfirmPage - Password reset confirmation form
+ *
+ * Allows users to set a new password using reset token
+ */
+
+import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+// import { useNavigate } from 'react-router-dom';
+// import { useAuth } from '@qwickapps/auth-client';
+import { GridLayout, TextInputField, Button } from '@qwickapps/react-framework';
+import { AuthLayout, AuthError } from './shared';
+
+export interface PasswordResetConfirmPageProps {
+  /**
+   * Callback invoked on successful password reset
+   */
+  onSuccess?: () => void;
+
+  /**
+   * Path to redirect to after successful reset
+   * @default '/login'
+   */
+  redirectTo?: string;
+}
+
+export function PasswordResetConfirmPage({
+  // TODO: Remove these comments when confirmPasswordReset is implemented
+  // onSuccess,
+  // redirectTo = '/login',
+}: PasswordResetConfirmPageProps) {
+  const { token } = useParams<{ token: string }>();
+  // const navigate = useNavigate();
+
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // TODO: Implement confirmPasswordReset in auth-client
+  // const { confirmPasswordReset } = useAuth();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    if (!token) {
+      setError('Invalid reset token');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // TODO: Implement confirmPasswordReset API
+      // await confirmPasswordReset(token, password);
+      setError('Password reset confirmation not yet implemented');
+      // onSuccess?.();
+      // navigate(redirectTo);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to reset password');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <AuthLayout title="Set New Password">
+      <form onSubmit={handleSubmit}>
+        <GridLayout columns={1} spacing="md">
+          {error && <AuthError message={error} />}
+
+          <p style={{ marginBottom: '1rem', color: '#666', fontSize: '0.875rem' }}>
+            Enter your new password below.
+          </p>
+
+          <TextInputField
+            label="New Password"
+            type="password"
+            value={password}
+            onChange={setPassword}
+            required
+            disabled={loading}
+            helperText="Minimum 8 characters"
+            textFieldProps={{ autoComplete: 'new-password' }}
+          />
+
+          <TextInputField
+            label="Confirm New Password"
+            type="password"
+            value={confirmPassword}
+            onChange={setConfirmPassword}
+            required
+            disabled={loading}
+            textFieldProps={{ autoComplete: 'new-password' }}
+          />
+
+          <Button type="submit" variant="primary" loading={loading} fullWidth>
+            Reset Password
+          </Button>
+        </GridLayout>
+      </form>
+    </AuthLayout>
+  );
+}