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/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './useSessionTimeout';
+export * from './useOnClickOutside';
+export * from './useLocalizedDate';
+export * from './useLocalizedTimeAgo';

frontend/src/hooks/useFocusTrap.ts

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from 'react';
+
+export const useFocusTrap = (isActive: boolean) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isActive || !containerRef.current) return;
+
+    const container = containerRef.current;
+    const focusableElements = container.querySelectorAll(
+      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    
+    const firstFocusable = focusableElements[0] as HTMLElement;
+    const lastFocusable = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+    // Focus first element when trap is activated
+    firstFocusable?.focus();
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+
+      if (e.shiftKey) {
+        // Shift + Tab
+        if (document.activeElement === firstFocusable) {
+          e.preventDefault();
+          lastFocusable?.focus();
+        }
+      } else {
+        // Tab
+        if (document.activeElement === lastFocusable) {
+          e.preventDefault();
+          firstFocusable?.focus();
+        }
+      }
+    };
+
+    container.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      container.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isActive]);
+
+  return containerRef;
+};

frontend/src/hooks/useGallery.ts

@@ -0,0 +1,66 @@
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { galleryService } from '../services';
+import { toast } from 'react-toastify';
+
+export const useGalleryInfo = (slug: string, token?: string) => {
+  return useQuery({
+    queryKey: ['gallery-info', slug, token],
+    queryFn: () => galleryService.getGalleryInfo(slug, token),
+    retry: 1,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+};
+
+export const useGalleryPhotos = (slug: string, enabled: boolean = true) => {
+  return useQuery({
+    queryKey: ['gallery-photos', slug],
+    queryFn: () => galleryService.getGalleryPhotos(slug),
+    enabled,
+    retry: 1,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    // Add a small delay to ensure auth token is properly set
+    retryDelay: 100,
+  });
+};
+
+export const useGalleryStats = (slug: string, enabled: boolean = true) => {
+  return useQuery({
+    queryKey: ['gallery-stats', slug],
+    queryFn: () => galleryService.getGalleryStats(slug),
+    enabled,
+    retry: 1,
+    staleTime: 60 * 1000, // 1 minute
+  });
+};
+
+export const useDownloadPhoto = () => {
+  return useMutation({
+    mutationFn: ({
+      slug,
+      photoId,
+      filename,
+    }: {
+      slug: string;
+      photoId: number;
+      filename: string;
+    }) => galleryService.downloadPhoto(slug, photoId, filename),
+    onSuccess: () => {
+      toast.success('Photo downloaded successfully');
+    },
+    onError: () => {
+      toast.error('Failed to download photo');
+    },
+  });
+};
+
+export const useDownloadAllPhotos = () => {
+  return useMutation({
+    mutationFn: (slug: string) => galleryService.downloadAllPhotos(slug),
+    onSuccess: () => {
+      toast.success('Download started');
+    },
+    onError: () => {
+      toast.error('Failed to download photos');
+    },
+  });
+};

frontend/src/hooks/useLocalizedDate.ts

@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next';
+import { format as dateFnsFormat, formatDistanceToNow as dateFnsFormatDistanceToNow } from 'date-fns';
+import { de, enUS } from 'date-fns/locale';
+
+export const useLocalizedDate = () => {
+  const { i18n } = useTranslation();
+  
+  const getLocale = () => {
+    return i18n.language === 'de' ? de : enUS;
+  };
+  
+  const format = (date: Date | string, formatStr: string) => {
+    const dateObj = typeof date === 'string' ? new Date(date) : date;
+    return dateFnsFormat(dateObj, formatStr, { locale: getLocale() });
+  };
+  
+  const formatDistanceToNow = (date: Date | string, options?: { addSuffix?: boolean }) => {
+    const dateObj = typeof date === 'string' ? new Date(date) : date;
+    return dateFnsFormatDistanceToNow(dateObj, { ...options, locale: getLocale() });
+  };
+  
+  return {
+    format,
+    formatDistanceToNow,
+    locale: getLocale()
+  };
+};

frontend/src/hooks/useLocalizedTimeAgo.ts

@@ -0,0 +1,72 @@
+import { useTranslation } from 'react-i18next';
+
+export const useLocalizedTimeAgo = () => {
+  const { i18n } = useTranslation();
+  
+  const formatTimeAgo = (date: Date | string): string => {
+    const dateObj = typeof date === 'string' ? new Date(date) : date;
+    const now = new Date();
+    const seconds = Math.floor((now.getTime() - dateObj.getTime()) / 1000);
+    
+    const isGerman = i18n.language === 'de';
+    
+    // Less than a minute
+    if (seconds < 60) {
+      return isGerman ? 'gerade eben' : 'just now';
+    }
+    
+    // Minutes
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) {
+      if (minutes === 1) {
+        return isGerman ? 'vor 1 Minute' : '1 minute ago';
+      }
+      return isGerman ? `vor ${minutes} Minuten` : `${minutes} minutes ago`;
+    }
+    
+    // Hours
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) {
+      if (hours === 1) {
+        return isGerman ? 'vor 1 Stunde' : '1 hour ago';
+      }
+      return isGerman ? `vor ${hours} Stunden` : `${hours} hours ago`;
+    }
+    
+    // Days
+    const days = Math.floor(hours / 24);
+    if (days < 7) {
+      if (days === 1) {
+        return isGerman ? 'vor 1 Tag' : '1 day ago';
+      }
+      return isGerman ? `vor ${days} Tagen` : `${days} days ago`;
+    }
+    
+    // Weeks
+    const weeks = Math.floor(days / 7);
+    if (weeks < 4) {
+      if (weeks === 1) {
+        return isGerman ? 'vor 1 Woche' : '1 week ago';
+      }
+      return isGerman ? `vor ${weeks} Wochen` : `${weeks} weeks ago`;
+    }
+    
+    // Months
+    const months = Math.floor(days / 30);
+    if (months < 12) {
+      if (months === 1) {
+        return isGerman ? 'vor 1 Monat' : '1 month ago';
+      }
+      return isGerman ? `vor ${months} Monaten` : `${months} months ago`;
+    }
+    
+    // Years
+    const years = Math.floor(days / 365);
+    if (years === 1) {
+      return isGerman ? 'vor 1 Jahr' : '1 year ago';
+    }
+    return isGerman ? `vor ${years} Jahren` : `${years} years ago`;
+  };
+  
+  return { formatTimeAgo };
+};

frontend/src/hooks/useOnClickOutside.ts

@@ -0,0 +1,24 @@
+import { useEffect, type RefObject } from 'react';
+
+export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T | null>,
+  handler: () => void
+) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+      handler();
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+}

frontend/src/hooks/useSessionTimeout.ts

@@ -0,0 +1,40 @@
+import { useEffect, useCallback } from 'react';
+import { useAdminAuth } from '../contexts';
+import { api } from '../config/api';
+
+// Hook to handle session timeout
+export const useSessionTimeout = () => {
+  const { logout } = useAdminAuth();
+  
+  const handleSessionTimeout = useCallback((error: any) => {
+    if (error?.response?.data?.code === 'SESSION_TIMEOUT') {
+      // Clear local auth state
+      logout();
+      // Redirect to login with message
+      window.location.href = '/admin/login?session=expired';
+      return true;
+    }
+    return false;
+  }, [logout]);
+  
+  useEffect(() => {
+    // Add response interceptor to handle session timeout
+    const interceptor = api.interceptors.response.use(
+      response => response,
+      error => {
+        if (handleSessionTimeout(error)) {
+          // Don't propagate the error if it was a session timeout
+          return Promise.reject(new Error('Session expired'));
+        }
+        return Promise.reject(error);
+      }
+    );
+    
+    // Clean up interceptor on unmount
+    return () => {
+      api.interceptors.response.eject(interceptor);
+    };
+  }, [handleSessionTimeout]);
+  
+  return { handleSessionTimeout };
+};

frontend/src/hooks/useWatermarkSettings.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import { api } from '../config/api';
+
+export function useWatermarkSettings() {
+  const [watermarkEnabled, setWatermarkEnabled] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchSettings = async () => {
+      try {
+        // Use public settings endpoint that doesn't require authentication
+        const response = await api.get('/public/settings');
+        setWatermarkEnabled(response.data.branding_watermark_enabled || false);
+      } catch (error) {
+        console.error('Failed to fetch watermark settings:', error);
+        // Default to false if we can't fetch settings
+        setWatermarkEnabled(false);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSettings();
+  }, []);
+
+  return { watermarkEnabled, loading };
+}