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 <[email protected]>

frontend/src/pages/GalleryPage.tsx

@@ -0,0 +1,383 @@
+import React, { useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { Calendar, AlertCircle, Clock } from 'lucide-react';
+import { differenceInDays, parseISO } from 'date-fns';
+import { useTranslation } from 'react-i18next';
+import { useLocalizedDate } from '../hooks/useLocalizedDate';
+import { useQuery } from '@tanstack/react-query';
+
+import { Card, CardContent, Input, Button, Loading, ReCaptcha } from '../components/common';
+import { useGalleryAuth, useTheme } from '../contexts';
+import { useGalleryInfo } from '../hooks/useGallery';
+import { GalleryView } from '../components/gallery';
+import { analyticsService } from '../services/analytics.service';
+import { api } from '../config/api';
+import { GALLERY_THEME_PRESETS } from '../types/theme.types';
+import { buildResourceUrl } from '../utils/url';
+
+export const GalleryPage: React.FC = () => {
+  const { slug, token } = useParams<{ slug: string; token?: string }>();
+  const { isAuthenticated, login, event } = useGalleryAuth();
+  const { t, i18n } = useTranslation();
+  const { format } = useLocalizedDate();
+  const { setTheme } = useTheme();
+  const [password, setPassword] = useState('');
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const [loginError, setLoginError] = useState<string | null>(null);
+  const [recaptchaToken, setRecaptchaToken] = useState<string | null>(null);
+
+  // Fetch gallery info (public data)
+  const { data: galleryInfo, isLoading: isLoadingInfo, error: infoError } = useGalleryInfo(slug!, token);
+  
+  // Fetch branding settings
+  const { data: settingsData } = useQuery({
+    queryKey: ['gallery-settings'],
+    queryFn: async () => {
+      const response = await api.get('/public/settings');
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+  });
+  
+  // Set language from admin settings when on login page
+  React.useEffect(() => {
+    if (!isAuthenticated && settingsData?.default_language) {
+      i18n.changeLanguage(settingsData.default_language);
+    }
+  }, [settingsData, isAuthenticated, i18n]);
+
+  // Apply theme for login page
+  React.useEffect(() => {
+    if (!isAuthenticated && galleryInfo && settingsData) {
+      let themeToApply = null;
+      
+      if (galleryInfo.color_theme) {
+        try {
+          // Check if it's a valid JSON string
+          if (galleryInfo.color_theme.startsWith('{')) {
+            themeToApply = JSON.parse(galleryInfo.color_theme);
+          } else {
+            // Handle legacy theme names - check if it's a preset
+            const preset = GALLERY_THEME_PRESETS[galleryInfo.color_theme];
+            if (preset) {
+              themeToApply = preset.config;
+            } else {
+              // Unknown theme name, fall back to global theme
+              if (settingsData.theme_config) {
+                themeToApply = settingsData.theme_config;
+              }
+            }
+          }
+        } catch (e) {
+          console.error('Failed to parse event theme:', e);
+          // Fall back to global theme
+          if (settingsData.theme_config) {
+            themeToApply = settingsData.theme_config;
+          }
+        }
+      } else if (settingsData.theme_config) {
+        // No event theme, use global theme
+        themeToApply = settingsData.theme_config;
+      }
+      
+      // Apply theme
+      if (themeToApply) {
+        setTheme(themeToApply);
+      }
+    }
+  }, [galleryInfo, settingsData, isAuthenticated, setTheme]);
+
+  // Calculate days until expiration
+  const daysUntilExpiration = galleryInfo
+    ? differenceInDays(parseISO(galleryInfo.expires_at), new Date())
+    : null;
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    e.stopPropagation(); // Prevent any bubbling
+    
+    if (!password.trim()) {
+      setLoginError(t('auth.pleaseEnterPassword'));
+      return;
+    }
+
+    try {
+      setIsLoggingIn(true);
+      setLoginError(null);
+      await login(slug!, password, recaptchaToken);
+      
+      // Track successful password entry
+      analyticsService.trackGalleryEvent('password_entry', {
+        gallery: slug,
+        success: true
+      });
+    } catch (error: any) {
+      console.error('Login error:', error);
+      const errorMessage = error.response?.data?.error || 'Invalid password';
+      const statusCode = error.response?.status;
+      
+      // Map backend error messages to user-friendly translations
+      if (statusCode === 401 || errorMessage.toLowerCase().includes('invalid password')) {
+        setLoginError(t('auth.wrongPassword'));
+      } else if (statusCode === 429 || errorMessage.toLowerCase().includes('too many')) {
+        setLoginError(t('auth.tooManyAttempts'));
+      } else if (statusCode === 404) {
+        setLoginError(t('errors.galleryNotFound'));
+      } else {
+        setLoginError(t('auth.invalidPassword'));
+      }
+      
+      // Track failed password entry
+      analyticsService.trackGalleryEvent('password_entry', {
+        gallery: slug,
+        success: false,
+        statusCode
+      });
+      
+      // Keep the password field to allow retry
+      // Do not clear the password
+    } finally {
+      setIsLoggingIn(false);
+    }
+  };
+
+  // Show loading state
+  if (isLoadingInfo) {
+    return (
+      <div className="min-h-screen" style={{ backgroundColor: 'var(--color-background, #fafafa)' }}>
+        <div className="min-h-screen flex items-center justify-center">
+          <Loading size="lg" text={t('gallery.loading')} />
+        </div>
+      </div>
+    );
+  }
+
+  // Show error state
+  if (infoError) {
+    // Check if it's an archived gallery error
+    const errorMessage = (infoError as any)?.response?.data?.error;
+    const isArchived = errorMessage?.includes('archived');
+    
+    return (
+      <div className="min-h-screen" style={{ backgroundColor: 'var(--color-background, #fafafa)' }}>
+        <div className="min-h-screen flex flex-col">
+          {/* Logo at top */}
+          {settingsData?.branding_logo_url && (
+            <div className="p-8 text-center">
+              <img 
+                src={buildResourceUrl(settingsData.branding_logo_url)} 
+                alt={settingsData.branding_company_name || 'Company Logo'}
+                className="h-16 w-auto object-contain mx-auto"
+              />
+            </div>
+          )}
+          
+          <div className="flex-1 flex items-center justify-center">
+            <Card className="max-w-md w-full mx-4">
+              <CardContent className="text-center py-12">
+                <AlertCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
+                <h2 className="text-xl font-semibold mb-2">
+                  {t(isArchived ? 'errors.galleryArchived' : 'errors.galleryNotFound')}
+                </h2>
+                <p className="text-neutral-600">
+                  {t(isArchived ? 'errors.galleryArchivedMessage' : 'errors.galleryNotFoundMessage')}
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+          
+          {/* Legal Links */}
+          <div className="p-8 text-center">
+            <div className="flex items-center justify-center gap-4">
+              <Link 
+                to="/impressum" 
+                className="text-xs text-neutral-500 hover:text-neutral-700 transition-colors"
+              >
+                {t('legal.impressum')}
+              </Link>
+              <span className="text-xs text-neutral-400">|</span>
+              <Link 
+                to="/datenschutz" 
+                className="text-xs text-neutral-500 hover:text-neutral-700 transition-colors"
+              >
+                {t('legal.datenschutz')}
+              </Link>
+            </div>
+            <p className="text-xs mt-2 text-neutral-500">
+              Powered by <span className="font-semibold">PicPeak</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Show expired state
+  if (galleryInfo?.is_expired) {
+    return (
+      <div className="min-h-screen" style={{ backgroundColor: 'var(--color-background, #fafafa)' }}>
+        <div className="min-h-screen flex flex-col">
+          {/* Logo at top */}
+          {settingsData?.branding_logo_url && (
+            <div className="p-8 text-center">
+              <img 
+                src={buildResourceUrl(settingsData.branding_logo_url)} 
+                alt={settingsData.branding_company_name || 'Company Logo'}
+                className="h-16 w-auto object-contain mx-auto"
+              />
+            </div>
+          )}
+          
+          <div className="flex-1 flex items-center justify-center">
+            <Card className="max-w-md w-full mx-4">
+              <CardContent className="text-center py-12">
+                <Clock className="w-16 h-16 text-amber-500 mx-auto mb-4" />
+                <h2 className="text-xl font-semibold mb-2">{t('gallery.expired')}</h2>
+                <p className="text-neutral-600 mb-4">
+                  {t('gallery.expiredOn', { date: format(parseISO(galleryInfo.expires_at), 'PP') })}
+                </p>
+                <p className="text-sm text-neutral-500">
+                  {t('gallery.contactOrganizer')}
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+          
+          {/* Legal Links */}
+          <div className="p-8 text-center">
+            <div className="flex items-center justify-center gap-4">
+              <Link 
+                to="/impressum" 
+                className="text-xs text-neutral-500 hover:text-neutral-700 transition-colors"
+              >
+                {t('legal.impressum')}
+              </Link>
+              <span className="text-xs text-neutral-400">|</span>
+              <Link 
+                to="/datenschutz" 
+                className="text-xs text-neutral-500 hover:text-neutral-700 transition-colors"
+              >
+                {t('legal.datenschutz')}
+              </Link>
+            </div>
+            <p className="text-xs mt-2 text-neutral-500">
+              Powered by <span className="font-semibold">PicPeak</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Show gallery view if authenticated
+  if (isAuthenticated && event) {
+    return <GalleryView slug={slug!} event={event} />;
+  }
+
+  // Show login form
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: 'var(--color-background, #fafafa)' }}>
+      <div className="min-h-screen flex items-center justify-center p-4">
+        <div className="w-full max-w-lg">
+          {/* Logo/Header */}
+          <div className="text-center mb-4 sm:mb-6">
+            <img 
+              src={settingsData?.branding_logo_url ? 
+                buildResourceUrl(settingsData.branding_logo_url) : 
+                '/picpeak-logo-transparent.png'
+              } 
+              alt={settingsData?.branding_company_name || 'PicPeak'}
+              className="h-12 sm:h-16 lg:h-20 w-auto object-contain mx-auto mb-3 sm:mb-4"
+            />
+            <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold mb-2 px-2" style={{ color: 'var(--color-text, #171717)' }}>
+              {galleryInfo?.event_name}
+            </h1>
+            <div className="flex items-center justify-center text-xs sm:text-sm" style={{ color: 'var(--color-text, #171717)', opacity: 0.7 }}>
+              <Calendar className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />
+              <span className="truncate">{format(parseISO(galleryInfo!.event_date), 'PP')}</span>
+            </div>
+          </div>
+
+          {/* Expiration Warning */}
+          {daysUntilExpiration !== null && daysUntilExpiration <= 7 && (
+            <div className="mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
+              <div className="flex items-start">
+                <AlertCircle className="w-4 h-4 sm:w-5 sm:h-5 text-amber-600 mt-0.5 mr-2 flex-shrink-0" />
+                <div>
+                  <p className="text-xs sm:text-sm font-medium text-amber-800">
+                    {t('gallery.expiresIn', { count: daysUntilExpiration })}
+                  </p>
+                  <p className="text-xs text-amber-700 mt-1">
+                    {t('gallery.downloadBefore')}
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Login Card */}
+          <Card>
+            <CardContent className="p-4 sm:p-6">
+              <h2 className="text-base sm:text-lg lg:text-xl font-semibold mb-4">{t('auth.enterPassword')}</h2>
+              
+              <form onSubmit={handleLogin} className="space-y-4">
+                <Input
+                  type="password"
+                  label={t('auth.password')}
+                  placeholder={t('auth.passwordPlaceholder')}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  error={loginError || undefined}
+                  autoFocus
+                  className="text-sm sm:text-base"
+                />
+                
+                <ReCaptcha
+                  onChange={setRecaptchaToken}
+                  onExpired={() => setRecaptchaToken(null)}
+                />
+                
+                <Button
+                  type="submit"
+                  variant="primary"
+                  size="lg"
+                  className="w-full text-sm sm:text-base"
+                  isLoading={isLoggingIn}
+                  disabled={isLoggingIn}
+                >
+                  {t('gallery.viewGallery')}
+                </Button>
+              </form>
+
+              <p className="text-xs text-neutral-500 text-center mt-4 sm:mt-6">
+                {t('auth.passwordHint')}
+              </p>
+            </CardContent>
+          </Card>
+
+          {/* Legal Links */}
+          <div className="text-center mt-4 sm:mt-6">
+            <div className="flex items-center justify-center gap-4">
+              <Link 
+                to="/impressum" 
+                className="text-xs text-neutral-500 hover:text-neutral-700 transition-colors"
+              >
+                {t('legal.impressum')}
+              </Link>
+              <span className="text-xs text-neutral-400">|</span>
+              <Link 
+                to="/datenschutz" 
+                className="text-xs text-neutral-500 hover:text-neutral-700 transition-colors"
+              >
+                {t('legal.datenschutz')}
+              </Link>
+            </div>
+            <p className="text-xs mt-2 text-neutral-500">
+              Powered by <span className="font-semibold">PicPeak</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};