@invect/ui 0.0.1

package/src/components/credentials/EditCredentialModal.tsx

@@ -0,0 +1,399 @@
+import React, { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Textarea } from '../ui/textarea';
+import type {
+  Credential,
+  UpdateCredentialInput,
+  CredentialAuthType,
+  CredentialType,
+} from '../../api/types';
+
+interface EditCredentialModalProps {
+  credential: Credential;
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: UpdateCredentialInput) => void;
+  isLoading?: boolean;
+}
+
+const ALL_AUTH_TYPES: { value: CredentialAuthType; label: string }[] = [
+  { value: 'bearer', label: 'Bearer Token' },
+  { value: 'apiKey', label: 'API Key' },
+  { value: 'basic', label: 'Basic Auth' },
+  { value: 'oauth2', label: 'OAuth2' },
+  { value: 'custom', label: 'Custom Headers' },
+  { value: 'awsSigV4', label: 'AWS Signature V4' },
+  { value: 'jwt', label: 'JWT' },
+  { value: 'connectionString', label: 'Connection String' },
+];
+
+function getAuthTypesForType(type: CredentialType) {
+  if (type === 'database') {
+    return ALL_AUTH_TYPES.filter((t) => ['basic', 'connectionString', 'oauth2'].includes(t.value));
+  }
+  if (type === 'llm') {
+    return ALL_AUTH_TYPES.filter((t) => ['apiKey', 'bearer'].includes(t.value));
+  }
+  // http-api
+  return ALL_AUTH_TYPES.filter((t) => !['connectionString'].includes(t.value));
+}
+
+export const EditCredentialModal: React.FC<EditCredentialModalProps> = ({
+  credential,
+  open,
+  onClose,
+  onSubmit,
+  isLoading,
+}) => {
+  const [formData, setFormData] = useState<UpdateCredentialInput>({
+    name: credential.name,
+    type: credential.type,
+    authType: credential.authType,
+    description: credential.description,
+    isActive: credential.isActive,
+    config: credential.config || {},
+    metadata: credential.metadata || {},
+  });
+
+  useEffect(() => {
+    setFormData({
+      name: credential.name,
+      type: credential.type,
+      authType: credential.authType,
+      description: credential.description,
+      isActive: credential.isActive,
+      config: credential.config || {},
+      metadata: credential.metadata || {},
+    });
+  }, [credential]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(formData);
+  };
+
+  const updateConfig = (key: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      config: { ...prev.config, [key]: value },
+    }));
+  };
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50">
+      <div className="fixed inset-0 bg-background/80" onClick={onClose} />
+      <div className="fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 w-full max-w-2xl">
+        <div className="grid w-full gap-4 border border-border bg-background p-6 shadow-lg sm:rounded-lg max-h-[90vh] overflow-y-auto">
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-semibold">Edit Credential</h2>
+            <button
+              onClick={onClose}
+              className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </button>
+          </div>
+
+          <form
+            onSubmit={handleSubmit}
+            className="space-y-4"
+            autoComplete="one-time-code"
+            data-lpignore="true"
+          >
+            {/* Name */}
+            <div className="space-y-2">
+              <Label htmlFor="name">Name *</Label>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                placeholder="My Stripe Production"
+                required
+              />
+            </div>
+
+            {/* Credential Type */}
+            <div className="space-y-2">
+              <Label htmlFor="type">Credential Type *</Label>
+              <select
+                id="type"
+                value={formData.type}
+                onChange={(e) => {
+                  const newType = e.target.value as CredentialType;
+                  if (newType === 'llm') {
+                    setFormData({ ...formData, type: newType, authType: 'apiKey' });
+                  } else {
+                    const available = getAuthTypesForType(newType);
+                    const nextAuthType = available.some((t) => t.value === formData.authType)
+                      ? formData.authType
+                      : available[0]?.value || 'basic';
+                    setFormData({ ...formData, type: newType, authType: nextAuthType });
+                  }
+                }}
+                className="flex h-10 w-full rounded-md border border-input bg-background dark:bg-input/30 px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+                required
+              >
+                <option value="http-api">HTTP API</option>
+                <option value="llm">LLM Provider</option>
+                <option value="database">Database</option>
+              </select>
+            </div>
+
+            {/* Auth Type (hidden for LLM — always apiKey) */}
+            {formData.type !== 'llm' && (
+              <div className="space-y-2">
+                <Label htmlFor="authType">Authentication Type *</Label>
+                <select
+                  id="authType"
+                  value={formData.authType}
+                  onChange={(e) =>
+                    setFormData({ ...formData, authType: e.target.value as CredentialAuthType })
+                  }
+                  className="flex h-10 w-full rounded-md border border-input bg-background dark:bg-input/30 px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+                  required
+                >
+                  {getAuthTypesForType(formData.type || 'http-api').map((type) => (
+                    <option key={type.value} value={type.value}>
+                      {type.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+
+            {/* Active Status */}
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="isActive"
+                checked={formData.isActive}
+                onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
+                className="h-4 w-4 rounded border-border"
+              />
+              <Label htmlFor="isActive" className="cursor-pointer">
+                Active
+              </Label>
+            </div>
+
+            {/* LLM Provider selector (only shown for LLM type) */}
+            {formData.type === 'llm' && (
+              <div className="space-y-2">
+                <Label htmlFor="edit-llmProvider">LLM Provider</Label>
+                <select
+                  id="edit-llmProvider"
+                  value={(formData.metadata?.provider as string) || ''}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      metadata: { ...formData.metadata, provider: e.target.value },
+                    })
+                  }
+                  className="flex h-10 w-full rounded-md border border-input bg-background dark:bg-input/30 px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+                >
+                  <option value="">Select a provider…</option>
+                  <option value="openai">OpenAI</option>
+                  <option value="anthropic">Anthropic</option>
+                  <option value="openrouter">OpenRouter</option>
+                </select>
+              </div>
+            )}
+
+            {/* Config fields based on auth type */}
+            <div className="space-y-4 p-4 bg-muted rounded-lg">
+              <h3 className="font-medium text-sm">Credentials</h3>
+              <p className="text-xs text-muted-foreground">
+                Leave fields empty to keep existing values
+              </p>
+
+              {/* LLM: plain API key only */}
+              {formData.type === 'llm' && (
+                <div className="space-y-2">
+                  <Label htmlFor="apiKey">API Key</Label>
+                  <Input
+                    id="apiKey"
+                    type="text"
+                    style={{ WebkitTextSecurity: 'disc' }}
+                    value={(formData.config?.apiKey as string) || ''}
+                    onChange={(e) => updateConfig('apiKey', e.target.value)}
+                    placeholder="Enter API key or leave empty to keep current"
+                    autoComplete="one-time-code"
+                    data-1p-ignore
+                    data-lpignore="true"
+                  />
+                </div>
+              )}
+
+              {formData.type !== 'llm' && formData.authType === 'bearer' && (
+                <div className="space-y-2">
+                  <Label htmlFor="token">Token</Label>
+                  <Input
+                    id="token"
+                    type="text"
+                    style={{ WebkitTextSecurity: 'disc' }}
+                    value={(formData.config?.token as string) || ''}
+                    onChange={(e) => updateConfig('token', e.target.value)}
+                    placeholder="Enter new bearer token or leave empty"
+                    autoComplete="one-time-code"
+                    data-1p-ignore
+                    data-lpignore="true"
+                  />
+                </div>
+              )}
+
+              {formData.type !== 'llm' && formData.authType === 'apiKey' && (
+                <>
+                  <div className="space-y-2">
+                    <Label htmlFor="apiKey">API Key</Label>
+                    <Input
+                      id="apiKey"
+                      type="text"
+                      style={{ WebkitTextSecurity: 'disc' }}
+                      value={(formData.config?.apiKey as string) || ''}
+                      onChange={(e) => updateConfig('apiKey', e.target.value)}
+                      placeholder="Enter new API key or leave empty"
+                      autoComplete="one-time-code"
+                      data-1p-ignore
+                      data-lpignore="true"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="location">Location</Label>
+                    <select
+                      id="location"
+                      value={(formData.config?.location as string) || 'header'}
+                      onChange={(e) => updateConfig('location', e.target.value)}
+                      className="flex h-10 w-full rounded-md border border-input bg-background dark:bg-input/30 px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+                    >
+                      <option value="header">Header</option>
+                      <option value="query">Query Parameter</option>
+                    </select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="paramName">Parameter Name</Label>
+                    <Input
+                      id="paramName"
+                      value={(formData.config?.paramName as string) || ''}
+                      onChange={(e) => updateConfig('paramName', e.target.value)}
+                      placeholder="X-API-Key"
+                      autoComplete="one-time-code"
+                      data-1p-ignore
+                      data-lpignore="true"
+                    />
+                  </div>
+                </>
+              )}
+
+              {formData.authType === 'connectionString' && (
+                <div className="space-y-2">
+                  <Label htmlFor="connectionString">Connection String</Label>
+                  <Input
+                    id="connectionString"
+                    type="text"
+                    style={{ WebkitTextSecurity: 'disc' }}
+                    value={(formData.config?.connectionString as string) || ''}
+                    onChange={(e) => updateConfig('connectionString', e.target.value)}
+                    placeholder="postgres://user:pass@host:5432/dbname?sslmode=require"
+                    autoComplete="one-time-code"
+                    data-1p-ignore
+                    data-lpignore="true"
+                  />
+                </div>
+              )}
+
+              {formData.authType === 'basic' && (
+                <>
+                  <div className="space-y-2">
+                    <Label htmlFor="username">Username</Label>
+                    <Input
+                      id="username"
+                      value={(formData.config?.username as string) || ''}
+                      onChange={(e) => updateConfig('username', e.target.value)}
+                      placeholder="Enter new username or leave empty"
+                      autoComplete="one-time-code"
+                      data-1p-ignore
+                      data-lpignore="true"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="password">Password</Label>
+                    <Input
+                      id="password"
+                      type="text"
+                      style={{ WebkitTextSecurity: 'disc' }}
+                      value={(formData.config?.password as string) || ''}
+                      onChange={(e) => updateConfig('password', e.target.value)}
+                      placeholder="Enter new password or leave empty"
+                      autoComplete="one-time-code"
+                      data-1p-ignore
+                      data-lpignore="true"
+                    />
+                  </div>
+                </>
+              )}
+
+              {formData.authType === 'oauth2' && (
+                <>
+                  <div className="space-y-2">
+                    <Label htmlFor="clientId">Client ID</Label>
+                    <Input
+                      id="clientId"
+                      value={(formData.config?.clientId as string) || ''}
+                      onChange={(e) => updateConfig('clientId', e.target.value)}
+                      placeholder="Enter client ID or leave empty"
+                      autoComplete="one-time-code"
+                      data-1p-ignore
+                      data-lpignore="true"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="clientSecret">Client Secret</Label>
+                    <Input
+                      id="clientSecret"
+                      type="text"
+                      style={{ WebkitTextSecurity: 'disc' }}
+                      value={(formData.config?.clientSecret as string) || ''}
+                      onChange={(e) => updateConfig('clientSecret', e.target.value)}
+                      placeholder="Enter client secret or leave empty"
+                      autoComplete="one-time-code"
+                      data-1p-ignore
+                      data-lpignore="true"
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+
+            {/* Description */}
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                value={formData.description || ''}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                placeholder="Optional description for this credential"
+                rows={3}
+              />
+            </div>
+
+            <div className="flex justify-end gap-2 pt-4">
+              <Button type="button" variant="outline" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isLoading}>
+                {isLoading ? 'Saving...' : 'Save Changes'}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/credentials/OAuth2ConnectButton.tsx

@@ -0,0 +1,288 @@
+/**
+ * OAuth2 Connect Button Component
+ *
+ * A button that initiates OAuth2 authorization flow for a specific provider.
+ * Opens a popup window for the user to authorize, then handles the callback.
+ */
+
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { Button } from '../ui/button';
+import { Loader2, ExternalLink, CheckCircle2, AlertCircle } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { useHandleOAuth2Callback, useStartOAuth2Flow } from '../../api/credentials.api';
+import type { OAuth2ProviderDefinition, Credential } from '../../api/types';
+
+export interface OAuth2ConnectButtonProps {
+  /** The OAuth2 provider to connect to */
+  provider: OAuth2ProviderDefinition;
+  /** OAuth2 client ID (from your app's OAuth configuration) */
+  clientId: string;
+  /** OAuth2 client secret (from your app's OAuth configuration) */
+  clientSecret: string;
+  /** Redirect URI registered with the OAuth provider */
+  redirectUri: string;
+  /** Optional: Custom scopes to request (defaults to provider's default scopes) */
+  scopes?: string[];
+  /** Optional: Custom name for the created credential */
+  credentialName?: string;
+  /** Called when credential is successfully created */
+  onSuccess?: (credential: Credential) => void;
+  /** Called when an error occurs */
+  onError?: (error: Error) => void;
+  /** Button variant */
+  variant?: 'default' | 'outline' | 'secondary' | 'ghost';
+  /** Button size */
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+  /** Additional CSS classes */
+  className?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Children to render inside button (defaults to "Connect with {provider.name}") */
+  children?: React.ReactNode;
+}
+
+type ConnectionStatus = 'idle' | 'connecting' | 'success' | 'error';
+
+export function OAuth2ConnectButton({
+  provider,
+  clientId,
+  clientSecret,
+  redirectUri,
+  scopes,
+  credentialName,
+  onSuccess,
+  onError,
+  variant = 'outline',
+  size = 'default',
+  className,
+  disabled,
+  children,
+}: OAuth2ConnectButtonProps) {
+  const startOAuth2FlowMutation = useStartOAuth2Flow();
+  const handleOAuth2CallbackMutation = useHandleOAuth2Callback();
+  const [status, setStatus] = useState<ConnectionStatus>('idle');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [popupWindow, setPopupWindow] = useState<Window | null>(null);
+
+  // Store callback params in refs so we can access them in the message handler
+  const callbackParamsRef = useRef({ clientId, clientSecret, redirectUri });
+  useEffect(() => {
+    callbackParamsRef.current = { clientId, clientSecret, redirectUri };
+  }, [clientId, clientSecret, redirectUri]);
+
+  // Store callbacks in refs to avoid stale closures in the message handler
+  const onSuccessRef = useRef(onSuccess);
+  const onErrorRef = useRef(onError);
+  useEffect(() => {
+    onSuccessRef.current = onSuccess;
+    onErrorRef.current = onError;
+  }, [onSuccess, onError]);
+
+  // Listen for OAuth callback message from popup
+  useEffect(() => {
+    const handleMessage = async (event: MessageEvent) => {
+      // Verify origin for security
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+
+      const { type, code, state, error } = event.data;
+
+      if (type !== 'oauth2_callback') {
+        return;
+      }
+
+      // Close the popup
+      if (popupWindow && !popupWindow.closed) {
+        popupWindow.close();
+      }
+      setPopupWindow(null);
+
+      if (error) {
+        setStatus('error');
+        setErrorMessage(error);
+        onErrorRef.current?.(new Error(error));
+        return;
+      }
+
+      if (!code || !state) {
+        setStatus('error');
+        setErrorMessage('Invalid OAuth callback - missing code or state');
+        onErrorRef.current?.(new Error('Invalid OAuth callback'));
+        return;
+      }
+
+      // Exchange code for tokens using the mutation (which invalidates credentials cache)
+      try {
+        const params = callbackParamsRef.current;
+        const credential = await handleOAuth2CallbackMutation.mutateAsync({
+          code,
+          state,
+          clientId: params.clientId,
+          clientSecret: params.clientSecret,
+          redirectUri: params.redirectUri,
+        });
+
+        setStatus('success');
+        onSuccessRef.current?.(credential);
+
+        // Reset to idle after showing success
+        setTimeout(() => setStatus('idle'), 2000);
+      } catch (err) {
+        setStatus('error');
+        const message = err instanceof Error ? err.message : 'Failed to exchange OAuth code';
+        setErrorMessage(message);
+        onErrorRef.current?.(err instanceof Error ? err : new Error(message));
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [popupWindow, handleOAuth2CallbackMutation]);
+
+  // Check if popup was closed without completing
+  useEffect(() => {
+    if (!popupWindow) {
+      return;
+    }
+
+    const checkClosed = setInterval(() => {
+      if (popupWindow.closed) {
+        clearInterval(checkClosed);
+        setPopupWindow(null);
+        if (status === 'connecting') {
+          setStatus('idle');
+        }
+      }
+    }, 500);
+
+    return () => clearInterval(checkClosed);
+  }, [popupWindow, status]);
+
+  const handleConnect = useCallback(async () => {
+    setStatus('connecting');
+    setErrorMessage(null);
+
+    try {
+      // Start OAuth flow to get authorization URL
+      const result = await startOAuth2FlowMutation.mutateAsync({
+        providerId: provider.id,
+        clientId,
+        clientSecret,
+        redirectUri,
+        scopes,
+        credentialName,
+        returnUrl: window.location.href,
+      });
+
+      // Open popup window for OAuth
+      const width = 600;
+      const height = 700;
+      const left = window.screenX + (window.outerWidth - width) / 2;
+      const top = window.screenY + (window.outerHeight - height) / 2;
+
+      const popup = window.open(
+        result.authorizationUrl,
+        `oauth2_${provider.id}`,
+        `width=${width},height=${height},left=${left},top=${top},menubar=no,toolbar=no,location=no,status=no`,
+      );
+
+      if (!popup) {
+        throw new Error('Failed to open popup window. Please allow popups for this site.');
+      }
+
+      setPopupWindow(popup);
+    } catch (err) {
+      setStatus('error');
+      const message = err instanceof Error ? err.message : 'Failed to start OAuth flow';
+      setErrorMessage(message);
+      onError?.(err instanceof Error ? err : new Error(message));
+    }
+  }, [
+    startOAuth2FlowMutation,
+    provider.id,
+    clientId,
+    clientSecret,
+    redirectUri,
+    scopes,
+    credentialName,
+    onError,
+  ]);
+
+  const isDisabled = disabled || status === 'connecting';
+
+  return (
+    <div className="flex flex-col gap-1">
+      <Button
+        type="button"
+        variant={variant}
+        size={size}
+        onClick={handleConnect}
+        disabled={isDisabled}
+        className={cn(
+          'gap-2',
+          status === 'success' && 'bg-success/10 border-success/50 text-success',
+          status === 'error' && 'bg-destructive/10 border-destructive/50 text-destructive',
+          className,
+        )}
+      >
+        {status === 'connecting' && <Loader2 className="w-4 h-4 animate-spin" />}
+        {status === 'success' && <CheckCircle2 className="w-4 h-4" />}
+        {status === 'error' && <AlertCircle className="w-4 h-4" />}
+        {status === 'idle' && <ExternalLink className="w-4 h-4" />}
+
+        {children ??
+          (status === 'success'
+            ? 'Connected!'
+            : status === 'error'
+              ? 'Connection Failed'
+              : `Connect with ${provider.name}`)}
+      </Button>
+
+      {status === 'error' && errorMessage && (
+        <p className="text-xs text-destructive">{errorMessage}</p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * OAuth2 Callback Handler Component
+ *
+ * Place this component on your OAuth callback page.
+ * It extracts the code/state from URL and sends it to the parent window.
+ */
+export function OAuth2CallbackHandler() {
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const code = params.get('code');
+    const state = params.get('state');
+    const error = params.get('error');
+    const errorDescription = params.get('error_description');
+
+    // Send message to parent window
+    if (window.opener) {
+      window.opener.postMessage(
+        {
+          type: 'oauth2_callback',
+          code,
+          state,
+          error: error || errorDescription,
+        },
+        window.location.origin,
+      );
+    }
+
+    // Close this window after a short delay
+    setTimeout(() => window.close(), 100);
+  }, []);
+
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="text-center">
+        <Loader2 className="w-8 h-8 mx-auto mb-4 animate-spin text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">Completing authorization...</p>
+      </div>
+    </div>
+  );
+}