adserver-dashboard 1.0.0

package/client/src/lib/__tests__/storage-utils.test.ts

@@ -0,0 +1,167 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { setItem, getItem, removeItem, hasItem, clearAll } from '../storage-utils';
+
+describe('storage-utils', () => {
+  let originalCookie: string;
+  let mockCookie: string;
+
+  beforeEach(() => {
+    originalCookie = document.cookie;
+    mockCookie = '';
+    
+    Object.defineProperty(document, 'cookie', {
+      get: () => mockCookie,
+      set: (value: string) => {
+        const [cookiePart] = value.split(';');
+        const [name, val] = cookiePart.split('=');
+        
+        if (value.includes('expires=Thu, 01 Jan 1970')) {
+          const cookies = mockCookie.split(';').filter(c => {
+            const [n] = c.split('=');
+            return n.trim() !== name;
+          });
+          mockCookie = cookies.join(';');
+        } else {
+          if (mockCookie) {
+            mockCookie += '; ';
+          }
+          mockCookie += `${name}=${val}`;
+        }
+      },
+      configurable: true,
+    });
+    
+    vi.spyOn(console, 'log').mockImplementation(() => {});
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    Object.defineProperty(document, 'cookie', {
+      value: originalCookie,
+      configurable: true,
+      writable: true,
+    });
+    vi.restoreAllMocks();
+  });
+
+  describe('setItem', () => {
+    it('should set a cookie with the oauth_ prefix', () => {
+      setItem('test_key', 'test_value');
+      expect(mockCookie).toContain('oauth_test_key');
+      expect(mockCookie).toContain('test_value');
+    });
+  });
+
+  describe('getItem', () => {
+    it('should retrieve a cookie value', () => {
+      mockCookie = 'oauth_test_key=test_value';
+      const result = getItem('test_key');
+      expect(result).toBe('test_value');
+    });
+
+    it('should return null for non-existent cookie', () => {
+      mockCookie = '';
+      const result = getItem('nonexistent');
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('removeItem', () => {
+    it('should remove a cookie', () => {
+      mockCookie = 'oauth_test_key=test_value';
+      removeItem('test_key');
+      expect(mockCookie).not.toContain('test_value');
+    });
+  });
+
+  describe('hasItem', () => {
+    it('should return true for existing cookie', () => {
+      mockCookie = 'oauth_test_key=test_value';
+      expect(hasItem('test_key')).toBe(true);
+    });
+
+    it('should return false for non-existent cookie', () => {
+      mockCookie = '';
+      expect(hasItem('nonexistent')).toBe(false);
+    });
+  });
+
+  describe('clearAll', () => {
+    it('should clear all OAuth cookies', () => {
+      mockCookie = 'oauth_token1=val1; oauth_token2=val2';
+      clearAll();
+      expect(console.log).toHaveBeenCalledWith('[Storage] All OAuth cookies cleared');
+    });
+  });
+
+  describe('error handling', () => {
+    it('should log when setting cookie', () => {
+      setItem('test', 'value');
+      expect(console.log).toHaveBeenCalled();
+    });
+
+    it('should log when removing cookie', () => {
+      removeItem('test');
+      expect(console.log).toHaveBeenCalled();
+    });
+
+    it('should handle setItem errors gracefully', () => {
+      Object.defineProperty(document, 'cookie', {
+        get: () => { throw new Error('Cookie access denied'); },
+        set: () => { throw new Error('Cookie access denied'); },
+        configurable: true,
+      });
+      
+      setItem('test', 'value');
+      expect(console.error).toHaveBeenCalledWith('Failed to set cookie:', expect.any(Error));
+    });
+
+    it('should handle getItem errors gracefully', () => {
+      Object.defineProperty(document, 'cookie', {
+        get: () => { throw new Error('Cookie access denied'); },
+        configurable: true,
+      });
+      
+      const result = getItem('test');
+      expect(result).toBeNull();
+      expect(console.error).toHaveBeenCalledWith('Failed to get cookie:', expect.any(Error));
+    });
+
+    it('should handle removeItem errors gracefully', () => {
+      Object.defineProperty(document, 'cookie', {
+        get: () => { throw new Error('Cookie access denied'); },
+        set: () => { throw new Error('Cookie access denied'); },
+        configurable: true,
+      });
+      
+      removeItem('test');
+      expect(console.error).toHaveBeenCalledWith('Failed to remove cookie:', expect.any(Error));
+    });
+
+    it('should handle clearAll errors gracefully', () => {
+      Object.defineProperty(document, 'cookie', {
+        get: () => { throw new Error('Cookie access denied'); },
+        set: () => { throw new Error('Cookie access denied'); },
+        configurable: true,
+      });
+      
+      clearAll();
+      expect(console.error).toHaveBeenCalledWith('Failed to clear cookies:', expect.any(Error));
+    });
+  });
+
+  describe('secure flag', () => {
+    it('should include Secure flag when protocol is https', () => {
+      const originalProtocol = window.location.protocol;
+      Object.defineProperty(window, 'location', {
+        value: { ...window.location, protocol: 'https:' },
+        writable: true,
+      });
+      
+      Object.defineProperty(window, 'location', {
+        value: { ...window.location, protocol: originalProtocol },
+        writable: true,
+      });
+    });
+  });
+});

package/client/src/lib/__tests__/utils.test.ts

@@ -0,0 +1,57 @@
+import { describe, it, expect } from 'vitest';
+import { cn } from '../utils';
+
+describe('utils', () => {
+  describe('cn', () => {
+    it('should merge class names', () => {
+      const result = cn('foo', 'bar');
+      expect(result).toBe('foo bar');
+    });
+
+    it('should handle undefined values', () => {
+      const result = cn('foo', undefined, 'bar');
+      expect(result).toBe('foo bar');
+    });
+
+    it('should handle conditional classes', () => {
+      const isActive = true;
+      const result = cn('base', isActive && 'active');
+      expect(result).toBe('base active');
+    });
+
+    it('should handle false conditional classes', () => {
+      const isActive = false;
+      const result = cn('base', isActive && 'active');
+      expect(result).toBe('base');
+    });
+
+    it('should merge tailwind classes correctly', () => {
+      const result = cn('px-2 py-1', 'px-4');
+      expect(result).toBe('py-1 px-4');
+    });
+
+    it('should handle array of classes', () => {
+      const result = cn(['foo', 'bar']);
+      expect(result).toBe('foo bar');
+    });
+
+    it('should handle object syntax', () => {
+      const result = cn({
+        foo: true,
+        bar: false,
+        baz: true,
+      });
+      expect(result).toBe('foo baz');
+    });
+
+    it('should handle empty inputs', () => {
+      const result = cn();
+      expect(result).toBe('');
+    });
+
+    it('should handle null values', () => {
+      const result = cn('foo', null, 'bar');
+      expect(result).toBe('foo bar');
+    });
+  });
+});

package/client/src/lib/accessibility.ts

@@ -0,0 +1,141 @@
+import { useRef, useEffect, useCallback } from 'react';
+
+export const focusableSelector = 
+  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+export function useFocusTrap(isActive: boolean = true) {
+  const containerRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!isActive || !containerRef.current) return;
+
+    const container = containerRef.current;
+    const focusableElements = container.querySelectorAll<HTMLElement>(focusableSelector);
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement?.focus();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement?.focus();
+        }
+      }
+    };
+
+    firstElement?.focus();
+    container.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      container.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isActive]);
+
+  return containerRef;
+}
+
+export function useFocusReturn() {
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
+  const saveFocus = useCallback(() => {
+    previousFocusRef.current = document.activeElement as HTMLElement;
+  }, []);
+
+  const restoreFocus = useCallback(() => {
+    previousFocusRef.current?.focus();
+  }, []);
+
+  return { saveFocus, restoreFocus };
+}
+
+export function useArrowNavigation(
+  items: HTMLElement[],
+  options: {
+    orientation?: 'horizontal' | 'vertical' | 'both';
+    loop?: boolean;
+  } = {}
+) {
+  const { orientation = 'vertical', loop = true } = options;
+  const currentIndex = useRef(0);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    const isVertical = orientation === 'vertical' || orientation === 'both';
+    const isHorizontal = orientation === 'horizontal' || orientation === 'both';
+
+    let direction = 0;
+    if ((e.key === 'ArrowDown' && isVertical) || (e.key === 'ArrowRight' && isHorizontal)) {
+      direction = 1;
+    } else if ((e.key === 'ArrowUp' && isVertical) || (e.key === 'ArrowLeft' && isHorizontal)) {
+      direction = -1;
+    }
+
+    if (direction === 0) return;
+
+    e.preventDefault();
+    let nextIndex = currentIndex.current + direction;
+
+    if (loop) {
+      if (nextIndex < 0) nextIndex = items.length - 1;
+      if (nextIndex >= items.length) nextIndex = 0;
+    } else {
+      nextIndex = Math.max(0, Math.min(items.length - 1, nextIndex));
+    }
+
+    currentIndex.current = nextIndex;
+    items[nextIndex]?.focus();
+  }, [items, orientation, loop]);
+
+  return handleKeyDown;
+}
+
+export function announce(message: string, priority: 'polite' | 'assertive' = 'polite') {
+  const el = document.createElement('div');
+  el.setAttribute('aria-live', priority);
+  el.setAttribute('aria-atomic', 'true');
+  el.setAttribute('class', 'sr-only');
+  el.textContent = message;
+  
+  document.body.appendChild(el);
+  
+  setTimeout(() => {
+    document.body.removeChild(el);
+  }, 1000);
+}
+
+export function useEscapeKey(handler: () => void, enabled: boolean = true) {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handler();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handler, enabled]);
+}
+
+export function generateId(prefix: string = 'mw'): string {
+  return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+export const visuallyHiddenStyles = {
+  position: 'absolute' as const,
+  width: '1px',
+  height: '1px',
+  padding: '0',
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap' as const,
+  borderWidth: '0',
+};

package/client/src/lib/api-config.ts

@@ -0,0 +1,9 @@
+export const API_CONFIG = {
+  inventory: import.meta.env.VITE_INVENTORY_API_URL,
+  billboard: import.meta.env.VITE_BILLBOARD_API_URL,
+  contentHub: import.meta.env.VITE_CONTENT_HUB_API_URL,
+  directCampaign: import.meta.env.VITE_OAUTH_API_URL,
+  auth: import.meta.env.VITE_IAM_API_URL,
+  authFE: import.meta.env.VITE_ACCOUNT_URL,
+  recommendation: import.meta.env.VITE_RECOMMENDATION_API_URL,
+} as const;

package/client/src/lib/auth-service.ts

@@ -0,0 +1,209 @@
+/**
+ * Authentication Service
+ *
+ * Provides centralized authentication handling for API requests.
+ * Supports multiple authentication methods:
+ * - OAuth Bearer Token (from cookies) - NEW: Auto-injected from OAuth cookies
+ * - API Key (via header or query param)
+ * - Bearer Token
+ * - Basic Auth
+ * - Custom headers
+ */
+
+import { getAccessToken } from './oauth-service';
+
+export type AuthMethod = 'none' | 'api-key' | 'bearer' | 'basic' | 'custom' | 'oauth';
+
+export interface AuthConfig {
+  method: AuthMethod;
+  // API Key configuration
+  apiKey?: string;
+  apiKeyHeader?: string; // Default: 'X-API-Key'
+  // Bearer Token configuration
+  bearerToken?: string;
+  // Basic Auth configuration
+  username?: string;
+  password?: string;
+  // Custom headers
+  customHeaders?: Record<string, string>;
+}
+
+export class AuthService {
+  private config: AuthConfig;
+
+  constructor(config: AuthConfig = { method: 'none' }) {
+    this.config = config;
+  }
+
+  /**
+   * Update authentication configuration
+   */
+  updateConfig(config: Partial<AuthConfig>) {
+    this.config = { ...this.config, ...config };
+  }
+
+  /**
+   * Get authentication headers for API requests
+   */
+  getAuthHeaders(): Record<string, string> {
+    const headers: Record<string, string> = {};
+
+    // Always try to inject OAuth token from cookies if available
+    const oauthToken = getAccessToken();
+    if (oauthToken && this.config.method !== 'basic') {
+      headers['Authorization'] = `Bearer ${oauthToken}`;
+      return headers; // OAuth takes precedence
+    }
+
+    switch (this.config.method) {
+      case 'oauth':
+        // OAuth token already handled above
+        break;
+
+      case 'api-key':
+        if (this.config.apiKey) {
+          const headerName = this.config.apiKeyHeader || 'X-API-Key';
+          headers[headerName] = this.config.apiKey;
+        }
+        break;
+
+      case 'bearer':
+        if (this.config.bearerToken) {
+          headers['Authorization'] = `Bearer ${this.config.bearerToken}`;
+        }
+        break;
+
+      case 'basic':
+        if (this.config.username && this.config.password) {
+          const credentials = btoa(`${this.config.username}:${this.config.password}`);
+          headers['Authorization'] = `Basic ${credentials}`;
+        }
+        break;
+
+      case 'custom':
+        if (this.config.customHeaders) {
+          Object.assign(headers, this.config.customHeaders);
+        }
+        break;
+
+      case 'none':
+      default:
+        // No authentication headers
+        break;
+    }
+
+    return headers;
+  }
+
+  /**
+   * Add authentication to URL query parameters (for API key auth)
+   */
+  addAuthToUrl(url: string): string {
+    if (this.config.method === 'api-key' && this.config.apiKey) {
+      const urlObj = new URL(url, window.location.origin);
+      const paramName = this.config.apiKeyHeader || 'api_key';
+      urlObj.searchParams.set(paramName, this.config.apiKey);
+      return urlObj.toString();
+    }
+    return url;
+  }
+
+  /**
+   * Create authenticated fetch options
+   */
+  createFetchOptions(options: RequestInit = {}): RequestInit {
+    const authHeaders = this.getAuthHeaders();
+
+    return {
+      ...options,
+      headers: {
+        ...authHeaders,
+        ...options.headers,
+      },
+    };
+  }
+
+  /**
+   * Make an authenticated API request
+   */
+  async fetch(url: string, options: RequestInit = {}): Promise<Response> {
+    const authenticatedOptions = this.createFetchOptions(options);
+    const authenticatedUrl = this.addAuthToUrl(url);
+
+    return fetch(authenticatedUrl, authenticatedOptions);
+  }
+
+  /**
+   * Check if authentication is configured
+   */
+  isConfigured(): boolean {
+    return this.config.method !== 'none';
+  }
+
+  /**
+   * Get current auth method
+   */
+  getAuthMethod(): AuthMethod {
+    return this.config.method;
+  }
+}
+
+// Singleton instance for Direct Campaign API
+export const directCampaignAuth = new AuthService({
+  method: 'none', // Default: no auth required
+  // To enable API key auth, uncomment and set:
+  // method: 'api-key',
+  // apiKey: import.meta.env.VITE_DIRECT_CAMPAIGN_API_KEY,
+  // apiKeyHeader: 'X-API-Key',
+});
+
+// Singleton instance for other APIs
+export const contentHubAuth = new AuthService({
+  method: 'none',
+});
+
+export const programmaticAuth = new AuthService({
+  method: 'none',
+});
+
+export const billboardAuth = new AuthService({
+  method: 'none',
+});
+
+/**
+ * Initialize authentication from environment variables
+ * Call this in your app initialization
+ */
+export function initializeAuth() {
+  // Direct Campaign API
+  if (import.meta.env.VITE_DIRECT_CAMPAIGN_API_KEY) {
+    directCampaignAuth.updateConfig({
+      method: 'api-key',
+      apiKey: import.meta.env.VITE_DIRECT_CAMPAIGN_API_KEY,
+      apiKeyHeader: import.meta.env.VITE_DIRECT_CAMPAIGN_API_KEY_HEADER || 'X-API-Key',
+    });
+  } else if (import.meta.env.VITE_DIRECT_CAMPAIGN_BEARER_TOKEN) {
+    directCampaignAuth.updateConfig({
+      method: 'bearer',
+      bearerToken: import.meta.env.VITE_DIRECT_CAMPAIGN_BEARER_TOKEN,
+    });
+  }
+
+  // Content Hub API
+  if (import.meta.env.VITE_CONTENT_HUB_API_KEY) {
+    contentHubAuth.updateConfig({
+      method: 'api-key',
+      apiKey: import.meta.env.VITE_CONTENT_HUB_API_KEY,
+      apiKeyHeader: import.meta.env.VITE_CONTENT_HUB_API_KEY_HEADER || 'X-API-Key',
+    });
+  }
+
+  // Add other API auth initialization as needed
+}
+
+/**
+ * Helper to create authenticated fetch function for a specific auth instance
+ */
+export function createAuthenticatedFetch(authService: AuthService) {
+  return (url: string, options?: RequestInit) => authService.fetch(url, options);
+}

package/client/src/lib/campaign-creative-api.ts

@@ -0,0 +1,82 @@
+/**
+ * Campaign Creative API Client
+ * Handles creative assignment for Direct Campaigns
+ */
+
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { queryClient } from './queryClient';
+import type { DirectCreative, InsertDirectCreative } from '@shared/direct-io-schema';
+
+// API Client Functions
+async function getCampaignCreatives(campaignId: string): Promise<DirectCreative[]> {
+  const response = await fetch(`/api/direct-campaigns/${campaignId}/creatives`);
+  if (!response.ok) {
+    throw new Error('Failed to fetch campaign creatives');
+  }
+  return response.json();
+}
+
+async function assignCreativesToCampaign(
+  campaignId: string,
+  creatives: (Omit<InsertDirectCreative, 'campaign_id'> & { content_hub_id: string })[]
+): Promise<{ creatives: DirectCreative[]; duplicates?: string[] }> {
+  const response = await fetch(`/api/direct-campaigns/${campaignId}/creatives`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ creatives }),
+  });
+  
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to assign creatives');
+  }
+  
+  return response.json();
+}
+
+async function deleteCampaignCreative(
+  campaignId: string,
+  creativeId: string
+): Promise<void> {
+  const response = await fetch(
+    `/api/direct-campaigns/${campaignId}/creatives/${creativeId}`,
+    { method: 'DELETE' }
+  );
+  
+  if (!response.ok) {
+    throw new Error('Failed to delete creative');
+  }
+}
+
+// React Query Hooks
+export function useCampaignCreatives(campaignId: string | undefined) {
+  return useQuery({
+    queryKey: ['campaign-creatives', campaignId],
+    queryFn: () => getCampaignCreatives(campaignId!),
+    enabled: !!campaignId,
+  });
+}
+
+export function useAssignCreatives() {
+  return useMutation({
+    mutationFn: ({ campaignId, creatives }: {
+      campaignId: string;
+      creatives: (Omit<InsertDirectCreative, 'campaign_id'> & { content_hub_id: string })[];
+    }) => assignCreativesToCampaign(campaignId, creatives),
+    onSuccess: (_, { campaignId }) => {
+      queryClient.invalidateQueries({ queryKey: ['campaign-creatives', campaignId] });
+    },
+  });
+}
+
+export function useDeleteCampaignCreative() {
+  return useMutation({
+    mutationFn: ({ campaignId, creativeId }: {
+      campaignId: string;
+      creativeId: string;
+    }) => deleteCampaignCreative(campaignId, creativeId),
+    onSuccess: (_, { campaignId }) => {
+      queryClient.invalidateQueries({ queryKey: ['campaign-creatives', campaignId] });
+    },
+  });
+}