Initial commit - Project start (July 17, 2025)

Original: feat: enhance security logging and ensure rate limit blocks are properly tracked

- Add comprehensive logging for rate limit blocks with full request details
  - IP address (with proper proxy detection), user agent, headers, timestamps
  - Rate limit info (current count, limit, remaining, reset time)
  - Separate tracking for auth vs general endpoints

- Enhance authentication failure logging
  - JWT validation failures with detailed error info
  - Admin auth attempts without token
  - Failed token validation with user context
  - All events include IP, path, method, user agent

- Improve Winston logger configuration for production
  - Add automatic log rotation (10MB errors, 50MB combined)
  - Create separate security.log for auth/rate limit events
  - Ensure logs directory exists automatically
  - Add structured JSON format for log aggregation
  - Support container logging with LOG_TO_CONSOLE env var

- Create comprehensive documentation
  - Security logging guide with examples
  - Monitoring recommendations
  - Configuration reference

- Add test script to verify logging functionality

All rate limit settings remain configurable via admin panel:
- Window duration, max requests, auth limits
- Skip authenticated requests option
- Public endpoints only option

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/common/AuthenticatedImage.tsx

@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react';
+import { getAuthToken } from '../../config/api';
+import { buildResourceUrl } from '../../utils/url';
+
+interface AuthenticatedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string;
+  fallbackSrc?: string;
+  useWatermark?: boolean;
+  isGallery?: boolean;
+}
+
+export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
+  src,
+  fallbackSrc,
+  alt,
+  useWatermark = false,
+  isGallery = false,
+  ...props
+}) => {
+  const [imageSrc, setImageSrc] = useState<string>('');
+  const [error, setError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    let objectUrl: string | null = null;
+
+    // Determine which token to use based on context
+    let token: string | undefined;
+    
+    if (isGallery) {
+      // For gallery images, get the gallery-specific token
+      const pathParts = window.location.pathname.split('/');
+      if (pathParts[1] === 'gallery' && pathParts[2]) {
+        const gallerySlug = pathParts[2];
+        token = localStorage.getItem(`gallery_token_${gallerySlug}`) || undefined;
+      }
+    } else {
+      // For admin images, use the admin token
+      token = getAuthToken(true);
+    }
+    
+    if (!src) {
+      setImageSrc(fallbackSrc || '');
+      setIsLoading(false);
+      return;
+    }
+
+    if (!token) {
+      // No auth token - use fallback
+      setImageSrc(fallbackSrc || '');
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(false);
+
+    // Create a new URL with auth header
+    const fetchImage = async () => {
+      try {
+        // Use the src as-is since it should already be the correct endpoint
+        let imageUrl = src;
+        
+        // Build full URL for the image
+        // For API paths that start with /admin, we need to prepend /api
+        const fullImageUrl = imageUrl.startsWith('/admin') 
+          ? buildResourceUrl(`/api${imageUrl}`)
+          : imageUrl.startsWith('/') 
+          ? buildResourceUrl(imageUrl) 
+          : imageUrl;
+        
+        // Fetch authenticated image
+        const response = await fetch(fullImageUrl, {
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
+        });
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);
+        }
+
+        const blob = await response.blob();
+        objectUrl = URL.createObjectURL(blob);
+        setImageSrc(objectUrl);
+        setIsLoading(false);
+      } catch (err) {
+        // Image loading failed - use fallback
+        setError(true);
+        setImageSrc(fallbackSrc || '');
+        setIsLoading(false);
+      }
+    };
+
+    fetchImage();
+
+    // Cleanup function
+    return () => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [src, fallbackSrc, useWatermark, isGallery]);
+
+  if (isLoading) {
+    return (
+      <div className={props.className} style={{ backgroundColor: '#f3f4f6', ...props.style }}>
+        {/* Show a placeholder while loading */}
+      </div>
+    );
+  }
+
+  if (error && fallbackSrc) {
+    return <img src={fallbackSrc} alt={alt} {...props} />;
+  }
+
+  if (!imageSrc) {
+    return null;
+  }
+
+  return <img src={imageSrc} alt={alt} {...props} />;
+};

frontend/src/components/common/Button.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { Loader2 } from 'lucide-react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  isLoading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant = 'primary',
+      size = 'md',
+      isLoading = false,
+      disabled,
+      leftIcon,
+      rightIcon,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const baseStyles = 'btn';
+    
+    const variants = {
+      primary: 'btn-primary',
+      secondary: 'btn-secondary',
+      outline: 'btn-outline',
+      ghost: 'bg-transparent hover:bg-neutral-100 text-neutral-700',
+    };
+
+    const sizes = {
+      sm: 'btn-sm',
+      md: 'btn-md',
+      lg: 'btn-lg',
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={clsx(
+          baseStyles,
+          variants[variant],
+          sizes[size],
+          className
+        )}
+        disabled={disabled || isLoading}
+        {...props}
+        aria-busy={isLoading}
+        aria-disabled={disabled || isLoading}
+      >
+        {isLoading ? (
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-label="Loading" />
+        ) : (
+          leftIcon && <span className="mr-2" aria-hidden="true">{leftIcon}</span>
+        )}
+        {children}
+        {!isLoading && rightIcon && <span className="ml-2" aria-hidden="true">{rightIcon}</span>}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

frontend/src/components/common/Card.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { clsx } from 'clsx';
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'hover';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  children: React.ReactNode;
+}
+
+export const Card: React.FC<CardProps> = ({
+  className,
+  variant = 'default',
+  padding = 'md',
+  children,
+  ...props
+}) => {
+  const paddingStyles = {
+    none: '',
+    sm: 'p-4',
+    md: 'p-6',
+    lg: 'p-8',
+  };
+
+  return (
+    <div
+      className={clsx(
+        variant === 'hover' ? 'card-hover' : 'card',
+        paddingStyles[padding],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  subtitle?: string;
+  action?: React.ReactNode;
+}
+
+export const CardHeader: React.FC<CardHeaderProps> = ({
+  title,
+  subtitle,
+  action,
+  className,
+  ...props
+}) => {
+  return (
+    <div
+      className={clsx(
+        'flex items-start justify-between mb-4',
+        className
+      )}
+      {...props}
+    >
+      <div>
+        <h3 className="text-lg font-semibold text-neutral-900">{title}</h3>
+        {subtitle && (
+          <p className="mt-1 text-sm text-neutral-500">{subtitle}</p>
+        )}
+      </div>
+      {action && <div className="ml-4">{action}</div>}
+    </div>
+  );
+};
+
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const CardContent: React.FC<CardContentProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <div className={clsx('', className)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const CardFooter: React.FC<CardFooterProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className={clsx(
+        'mt-6 pt-6 border-t border-neutral-200',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

frontend/src/components/common/DynamicFavicon.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { getApiBaseUrl, buildResourceUrl } from '../../utils/url';
+
+export const DynamicFavicon: React.FC = () => {
+  const { data: settings } = useQuery({
+    queryKey: ['public-settings'],
+    queryFn: async () => {
+      try {
+        const response = await fetch(`${getApiBaseUrl()}/public/settings`);
+        if (response.ok) {
+          return response.json();
+        }
+        return null;
+      } catch {
+        return null;
+      }
+    },
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+
+  useEffect(() => {
+    if (settings?.branding_favicon_url) {
+      // Remove existing favicon links
+      const existingFavicons = document.querySelectorAll("link[rel*='icon']");
+      existingFavicons.forEach(favicon => favicon.remove());
+
+      // Create new favicon link
+      const link = document.createElement('link');
+      link.rel = 'icon';
+      link.type = 'image/png';
+      link.href = settings.branding_favicon_url.startsWith('http') 
+        ? settings.branding_favicon_url 
+        : buildResourceUrl(settings.branding_favicon_url);
+      
+      document.head.appendChild(link);
+    }
+  }, [settings?.branding_favicon_url]);
+
+  return null;
+};

frontend/src/components/common/ErrorBoundary.tsx

@@ -0,0 +1,136 @@
+import React, { Component } from 'react';
+import type { ReactNode } from 'react';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+import { Button } from './Button';
+import i18n from '../../i18n/config';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+    console.error('Component stack:', errorInfo.componentStack);
+    console.error('Error message:', error.message);
+    console.error('Error stack:', error.stack);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+    window.location.reload();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return <>{this.props.fallback}</>;
+      }
+
+      return (
+        <div className="min-h-[400px] flex items-center justify-center p-4">
+          <div className="text-center max-w-md">
+            <AlertTriangle className="w-12 h-12 text-red-500 mx-auto mb-4" />
+            <h2 className="text-lg font-semibold text-neutral-900 mb-2">
+              {i18n.t('errors.somethingWentWrong')}
+            </h2>
+            <p className="text-sm text-neutral-600 mb-6">
+              {this.state.error?.message || i18n.t('errors.tryAgainLater')}
+            </p>
+            <Button
+              onClick={this.handleReset}
+              leftIcon={<RefreshCw className="w-4 h-4" />}
+            >
+              {i18n.t('errors.refreshPage')}
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+// Page-level error boundary with more prominent UI
+export class PageErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Page error:', error, errorInfo);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+    window.location.href = '/';
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen bg-neutral-50 flex items-center justify-center p-4">
+          <div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full text-center">
+            <AlertTriangle className="w-16 h-16 text-red-500 mx-auto mb-6" />
+            <h1 className="text-2xl font-bold text-neutral-900 mb-4">
+              {i18n.t('errors.oopsSomethingWentWrong')}
+            </h1>
+            <p className="text-neutral-600 mb-8">
+              {i18n.t('errors.unexpectedError')}
+            </p>
+            <div className="space-y-3">
+              <Button
+                variant="primary"
+                onClick={this.handleReset}
+                leftIcon={<RefreshCw className="w-4 h-4" />}
+                className="w-full"
+              >
+                {i18n.t('errors.goToHomepage')}
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => window.location.reload()}
+                className="w-full"
+              >
+                {i18n.t('gallery.tryAgain')}
+              </Button>
+            </div>
+            {import.meta.env.DEV && this.state.error && (
+              <details className="mt-8 text-left">
+                <summary className="text-sm text-neutral-500 cursor-pointer hover:text-neutral-700">
+                  {i18n.t('errors.errorDetails')}
+                </summary>
+                <pre className="mt-2 text-xs bg-neutral-100 p-3 rounded overflow-auto">
+                  {this.state.error.stack}
+                </pre>
+              </details>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

frontend/src/components/common/Input.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { clsx } from 'clsx';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      label,
+      error,
+      helperText,
+      leftIcon,
+      rightIcon,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="block text-sm font-medium text-neutral-700 mb-1.5"
+          >
+            {label}
+          </label>
+        )}
+        <div className="relative">
+          {leftIcon && (
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <span className="text-neutral-500">{leftIcon}</span>
+            </div>
+          )}
+          <input
+            ref={ref}
+            id={inputId}
+            className={clsx(
+              'input',
+              leftIcon && 'pl-10',
+              rightIcon && 'pr-10',
+              error && 'border-red-500 focus-visible:ring-red-500',
+              className
+            )}
+            aria-invalid={error ? 'true' : 'false'}
+            aria-describedby={
+              error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined
+            }
+            {...props}
+          />
+          {rightIcon && (
+            <div className="absolute inset-y-0 right-0 pr-3 flex items-center">
+              <span className="text-neutral-500">{rightIcon}</span>
+            </div>
+          )}
+        </div>
+        {error && (
+          <p id={`${inputId}-error`} className="mt-1.5 text-sm text-red-600">
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p id={`${inputId}-helper`} className="mt-1.5 text-sm text-neutral-500">
+            {helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';

frontend/src/components/common/LanguageSelector.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Globe } from 'lucide-react';
+
+const languages = [
+  { code: 'en', name: 'English', flag: '🇬🇧' },
+  { code: 'de', name: 'Deutsch', flag: '🇩🇪' },
+];
+
+export const LanguageSelector: React.FC = () => {
+  const { i18n } = useTranslation();
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];
+
+  const handleLanguageChange = (languageCode: string) => {
+    i18n.changeLanguage(languageCode);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-neutral-700 bg-white border border-neutral-300 rounded-lg hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-primary-500"
+      >
+        <Globe className="w-4 h-4" />
+        <span>{currentLanguage.flag}</span>
+        <span>{currentLanguage.name}</span>
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-neutral-200 py-1 z-50">
+          {languages.map((language) => (
+            <button
+              key={language.code}
+              onClick={() => handleLanguageChange(language.code)}
+              className={`w-full text-left px-4 py-2 text-sm hover:bg-neutral-50 flex items-center gap-3 ${
+                language.code === i18n.language
+                  ? 'text-primary-600 bg-primary-50'
+                  : 'text-neutral-700'
+              }`}
+            >
+              <span className="text-lg">{language.flag}</span>
+              <span>{language.name}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+LanguageSelector.displayName = 'LanguageSelector';

frontend/src/components/common/Loading.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Loader2 } from 'lucide-react';
+import { clsx } from 'clsx';
+
+interface LoadingProps {
+  size?: 'sm' | 'md' | 'lg';
+  text?: string;
+  fullScreen?: boolean;
+  className?: string;
+}
+
+export const Loading: React.FC<LoadingProps> = ({
+  size = 'md',
+  text,
+  fullScreen = false,
+  className,
+}) => {
+  const sizeStyles = {
+    sm: 'h-4 w-4',
+    md: 'h-8 w-8',
+    lg: 'h-12 w-12',
+  };
+
+  const content = (
+    <div className={clsx('flex flex-col items-center justify-center', className)}>
+      <Loader2 className={clsx('animate-spin text-primary-600', sizeStyles[size])} />
+      {text && (
+        <p className="mt-4 text-sm text-neutral-600">{text}</p>
+      )}
+    </div>
+  );
+
+  if (fullScreen) {
+    return (
+      <div className="fixed inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-50">
+        {content}
+      </div>
+    );
+  }
+
+  return content;
+};
+
+interface LoadingSkeletonProps {
+  className?: string;
+  count?: number;
+  type?: 'text' | 'card' | 'image';
+}
+
+export const LoadingSkeleton: React.FC<LoadingSkeletonProps> = ({
+  className,
+  count = 1,
+  type = 'text',
+}) => {
+  const baseStyles = 'skeleton';
+  
+  const typeStyles = {
+    text: 'h-4 w-full rounded',
+    card: 'h-32 w-full rounded-xl',
+    image: 'aspect-square w-full rounded-lg',
+  };
+
+  return (
+    <>
+      {Array.from({ length: count }).map((_, index) => (
+        <div
+          key={index}
+          className={clsx(
+            baseStyles,
+            typeStyles[type],
+            className
+          )}
+        />
+      ))}
+    </>
+  );
+};

frontend/src/components/common/OfflineIndicator.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import { WifiOff, Wifi } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+export const OfflineIndicator: React.FC = () => {
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
+  const [showIndicator, setShowIndicator] = useState(false);
+
+  useEffect(() => {
+    const handleOnline = () => {
+      setIsOnline(true);
+      // Show "back online" message briefly
+      setShowIndicator(true);
+      setTimeout(() => setShowIndicator(false), 3000);
+    };
+
+    const handleOffline = () => {
+      setIsOnline(false);
+      setShowIndicator(true);
+    };
+
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    // Check initial state
+    if (!navigator.onLine) {
+      setShowIndicator(true);
+    }
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+
+  if (!showIndicator) return null;
+
+  return (
+    <div
+      className={cn(
+        'fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-auto z-50',
+        'transition-all duration-300 ease-in-out',
+        isOnline ? 'translate-y-0' : 'translate-y-0'
+      )}
+      role="status"
+      aria-live="polite"
+    >
+      <div
+        className={cn(
+          'flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg',
+          isOnline
+            ? 'bg-green-50 border border-green-200 text-green-900'
+            : 'bg-red-50 border border-red-200 text-red-900'
+        )}
+      >
+        {isOnline ? (
+          <>
+            <Wifi className="w-5 h-5" />
+            <span className="text-sm font-medium">Back online</span>
+          </>
+        ) : (
+          <>
+            <WifiOff className="w-5 h-5" />
+            <span className="text-sm font-medium">No internet connection</span>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Hook to monitor online status
+export const useOnlineStatus = () => {
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    const handleStatusChange = () => {
+      setIsOnline(navigator.onLine);
+    };
+
+    window.addEventListener('online', handleStatusChange);
+    window.addEventListener('offline', handleStatusChange);
+
+    return () => {
+      window.removeEventListener('online', handleStatusChange);
+      window.removeEventListener('offline', handleStatusChange);
+    };
+  }, []);
+
+  return isOnline;
+};

frontend/src/components/common/ReCaptcha.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { useQuery } from '@tanstack/react-query';
+import { getApiBaseUrl } from '../../utils/url';
+
+interface ReCaptchaProps {
+  onChange: (token: string | null) => void;
+  onExpired?: () => void;
+  size?: 'normal' | 'compact';
+}
+
+export const ReCaptcha: React.FC<ReCaptchaProps> = ({ 
+  onChange, 
+  onExpired,
+  size = 'normal' 
+}) => {
+  const recaptchaRef = React.useRef<ReCAPTCHA>(null);
+  const [siteKey, setSiteKey] = useState<string>('');
+
+  // Fetch public settings to get reCAPTCHA site key
+  const { data: settings } = useQuery({
+    queryKey: ['public-settings'],
+    queryFn: async () => {
+      const response = await fetch(`${getApiBaseUrl()}/public/settings`);
+      return response.json();
+    },
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+  });
+
+  useEffect(() => {
+    if (settings?.recaptcha_site_key) {
+      setSiteKey(settings.recaptcha_site_key);
+    }
+  }, [settings]);
+
+  // If reCAPTCHA is not enabled or site key is not available, return null
+  if (!settings?.enable_recaptcha || !siteKey) {
+    return null;
+  }
+
+  return (
+    <div className="flex justify-center">
+      <ReCAPTCHA
+        ref={recaptchaRef}
+        sitekey={siteKey}
+        onChange={onChange}
+        onExpired={onExpired}
+        size={size}
+        theme="light"
+      />
+    </div>
+  );
+};
+
+export default ReCaptcha;

frontend/src/components/common/Skeleton.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+interface SkeletonProps {
+  className?: string;
+  variant?: 'text' | 'circular' | 'rectangular';
+  width?: string | number;
+  height?: string | number;
+  animation?: 'pulse' | 'wave' | 'none';
+}
+
+export const Skeleton: React.FC<SkeletonProps> = ({
+  className,
+  variant = 'rectangular',
+  width,
+  height,
+  animation = 'pulse'
+}) => {
+  const baseClasses = 'bg-neutral-200';
+  
+  const animationClasses = {
+    pulse: 'animate-pulse',
+    wave: 'animate-shimmer',
+    none: ''
+  };
+
+  const variantClasses = {
+    text: 'rounded',
+    circular: 'rounded-full',
+    rectangular: 'rounded-lg'
+  };
+
+  const style: React.CSSProperties = {};
+  if (width) style.width = typeof width === 'number' ? `${width}px` : width;
+  if (height) style.height = typeof height === 'number' ? `${height}px` : height;
+
+  return (
+    <div
+      className={cn(
+        baseClasses,
+        animationClasses[animation],
+        variantClasses[variant],
+        className
+      )}
+      style={style}
+      aria-busy="true"
+      aria-live="polite"
+    />
+  );
+};
+
+// Skeleton group for consistent loading states
+interface SkeletonGroupProps {
+  count?: number;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const SkeletonGroup: React.FC<SkeletonGroupProps> = ({
+  count = 1,
+  className,
+  children
+}) => {
+  if (children) {
+    return <div className={cn('space-y-3', className)}>{children}</div>;
+  }
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      {Array.from({ length: count }).map((_, index) => (
+        <Skeleton key={index} height={20} />
+      ))}
+    </div>
+  );
+};
+
+// Common skeleton patterns
+export const SkeletonCard: React.FC<{ className?: string }> = ({ className }) => (
+  <div className={cn('bg-white rounded-lg shadow-sm p-6', className)}>
+    <Skeleton height={24} width="60%" className="mb-4" />
+    <SkeletonGroup count={3} />
+    <div className="flex gap-3 mt-6">
+      <Skeleton width={100} height={36} />
+      <Skeleton width={100} height={36} />
+    </div>
+  </div>
+);
+
+export const SkeletonTable: React.FC<{ rows?: number; className?: string }> = ({ 
+  rows = 5, 
+  className 
+}) => (
+  <div className={cn('bg-white rounded-lg shadow-sm overflow-hidden', className)}>
+    <div className="border-b border-neutral-200 p-4">
+      <div className="flex gap-4">
+        <Skeleton width="30%" height={20} />
+        <Skeleton width="25%" height={20} />
+        <Skeleton width="20%" height={20} />
+        <Skeleton width="25%" height={20} />
+      </div>
+    </div>
+    <div className="divide-y divide-neutral-100">
+      {Array.from({ length: rows }).map((_, index) => (
+        <div key={index} className="p-4">
+          <div className="flex gap-4">
+            <Skeleton width="30%" height={16} />
+            <Skeleton width="25%" height={16} />
+            <Skeleton width="20%" height={16} />
+            <Skeleton width="25%" height={16} />
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export const SkeletonGalleryGrid: React.FC<{ count?: number; className?: string }> = ({ 
+  count = 12, 
+  className 
+}) => (
+  <div className={cn('gallery-grid', className)}>
+    {Array.from({ length: count }).map((_, index) => (
+      <Skeleton
+        key={index}
+        variant="rectangular"
+        className="aspect-square w-full"
+      />
+    ))}
+  </div>
+);
+
+export const SkeletonList: React.FC<{ count?: number; className?: string }> = ({ 
+  count = 5, 
+  className 
+}) => (
+  <div className={cn('space-y-4', className)}>
+    {Array.from({ length: count }).map((_, index) => (
+      <div key={index} className="flex items-center gap-4">
+        <Skeleton variant="circular" width={48} height={48} />
+        <div className="flex-1">
+          <Skeleton height={20} width="70%" className="mb-2" />
+          <Skeleton height={16} width="40%" />
+        </div>
+      </div>
+    ))}
+  </div>
+);

frontend/src/components/common/SkipLink.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const SkipLink: React.FC = () => {
+  return (
+    <a
+      href="#main-content"
+      className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-primary-600 text-white px-4 py-2 rounded-lg z-50 focus:outline-none focus:ring-2 focus:ring-primary-700"
+    >
+      Skip to main content
+    </a>
+  );
+};

frontend/src/components/common/index.ts

@@ -0,0 +1,19 @@
+export { Button } from './Button';
+export { Input } from './Input';
+export { Card, CardHeader, CardContent, CardFooter } from './Card';
+export { Loading, LoadingSkeleton } from './Loading';
+export { ErrorBoundary, PageErrorBoundary } from './ErrorBoundary';
+export { 
+  Skeleton, 
+  SkeletonGroup, 
+  SkeletonCard, 
+  SkeletonTable, 
+  SkeletonGalleryGrid, 
+  SkeletonList 
+} from './Skeleton';
+export { OfflineIndicator, useOnlineStatus } from './OfflineIndicator';
+export { SkipLink } from './SkipLink';
+export { DynamicFavicon } from './DynamicFavicon';
+export { LanguageSelector } from './LanguageSelector';
+export { AuthenticatedImage } from './AuthenticatedImage';
+export { ReCaptcha } from './ReCaptcha';