chore: bump version to 1.0.38

- Change gallery photo URLs from static paths to API endpoints
- Add dedicated thumbnail serving endpoint for galleries
- Add test script to diagnose authentication issues
- Add nginx configuration documentation for Authorization header

This fixes the issue where photos and thumbnails work in admin but not
in gallery view. The problem was that static file routes with auth
middleware often have Authorization headers stripped by reverse proxies.
Using API endpoints ensures proper authentication handling.

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

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

backend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "picpeak-backend",
-  "version": "1.0.32",
+  "version": "1.0.38",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "picpeak-backend",
-      "version": "1.0.32",
+      "version": "1.0.38",
       "dependencies": {
         "adm-zip": "^0.5.16",
         "archiver": "^5.3.1",

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picpeak-backend",
-  "version": "1.0.32",
+  "version": "1.0.38",
   "description": "Backend for PicPeak event photo sharing platform",
   "main": "server.js",
   "scripts": {

backend/scripts/README.md

@@ -0,0 +1,103 @@
+# Storage Management Scripts
+
+## check-storage.js
+
+Checks the storage directory structure and verifies that photo files exist.
+
+### Usage:
+```bash
+# Check overall storage structure
+node scripts/check-storage.js
+
+# Check specific event
+node scripts/check-storage.js wedding-test-gallery-2025-07-14-1
+```
+
+### What it checks:
+- Storage directory structure and permissions
+- Event directories
+- Photo files existence
+- Thumbnail files existence
+- Database vs filesystem consistency
+
+## regenerate-thumbnails.js
+
+Regenerates missing thumbnails for photos in the database.
+
+### Usage:
+```bash
+# Regenerate all missing thumbnails
+node scripts/regenerate-thumbnails.js
+
+# Regenerate thumbnails for specific event (by ID)
+node scripts/regenerate-thumbnails.js 2
+```
+
+### What it does:
+- Scans photos in database
+- Checks if thumbnails exist
+- Generates missing thumbnails using Sharp
+- Updates database with thumbnail paths
+- Reports success/error statistics
+
+### Prerequisites:
+- Node.js environment
+- Database access
+- Write permissions to storage directory
+- Sharp library installed
+
+## Production Usage
+
+On your production server:
+
+1. First, check the storage structure:
+   ```bash
+   cd /path/to/picpeak/backend
+   NODE_ENV=production node scripts/check-storage.js wedding-test-gallery-2025-07-14-1
+   ```
+
+2. If thumbnails are missing, regenerate them:
+   ```bash
+   NODE_ENV=production node scripts/regenerate-thumbnails.js 2
+   ```
+
+Note: Replace `2` with the actual event ID from your database.
+
+## cleanup-thumbnails.js
+
+Cleans up temporary and orphaned thumbnail files.
+
+### Usage:
+```bash
+# Dry run - see what would be deleted
+node scripts/cleanup-thumbnails.js --dry-run
+
+# Actually delete orphaned thumbnails
+node scripts/cleanup-thumbnails.js
+```
+
+### What it does:
+- Identifies temporary thumbnails (thumb_temp_*)
+- Finds orphaned thumbnails not linked to any photo
+- Removes unnecessary files to free up space
+- Reports statistics on cleanup
+
+## diagnose-thumbnails.js
+
+Diagnoses why thumbnails might not be showing for a specific event.
+
+### Usage:
+```bash
+node scripts/diagnose-thumbnails.js 2
+```
+
+### What it checks:
+- Thumbnail paths in database vs filesystem
+- Path format inconsistencies
+- Missing thumbnail files
+- Provides SQL to fix path issues
+
+### Common Issues:
+1. **Path mismatch**: Database has wrong thumbnail path format
+2. **Missing files**: Thumbnails were never generated
+3. **Permission issues**: Web server can't read thumbnail files

backend/scripts/check-storage.js

@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+
+/**
+ * Script to check storage directory structure and verify files
+ * Usage: node scripts/check-storage.js [eventSlug]
+ */
+
+const path = require('path');
+const fs = require('fs').promises;
+const { db } = require('../src/database/db');
+
+const STORAGE_PATH = process.env.STORAGE_PATH || path.join(__dirname, '../../storage');
+
+async function checkDirectory(dirPath, description) {
+  try {
+    await fs.access(dirPath);
+    const stats = await fs.stat(dirPath);
+    const files = await fs.readdir(dirPath);
+    console.log(`✓ ${description}: ${dirPath}`);
+    console.log(`  - Files/Folders: ${files.length}`);
+    console.log(`  - Permissions: ${(stats.mode & parseInt('777', 8)).toString(8)}`);
+    return true;
+  } catch (error) {
+    console.log(`✗ ${description}: ${dirPath} - ${error.message}`);
+    return false;
+  }
+}
+
+async function checkStorageStructure(eventSlug = null) {
+  console.log('Checking storage structure...');
+  console.log(`Storage base path: ${STORAGE_PATH}\n`);
+  
+  // Check main directories
+  await checkDirectory(STORAGE_PATH, 'Storage root');
+  await checkDirectory(path.join(STORAGE_PATH, 'events'), 'Events directory');
+  await checkDirectory(path.join(STORAGE_PATH, 'events/active'), 'Active events');
+  await checkDirectory(path.join(STORAGE_PATH, 'events/archived'), 'Archived events');
+  await checkDirectory(path.join(STORAGE_PATH, 'thumbnails'), 'Thumbnails');
+  await checkDirectory(path.join(STORAGE_PATH, 'uploads'), 'Uploads');
+  
+  console.log('\n---\n');
+  
+  // If event slug provided, check specific event
+  if (eventSlug) {
+    console.log(`Checking specific event: ${eventSlug}`);
+    
+    const event = await db('events').where('slug', eventSlug).first();
+    if (!event) {
+      console.log(`✗ Event not found in database: ${eventSlug}`);
+      return;
+    }
+    
+    console.log(`✓ Event found in database:`);
+    console.log(`  - ID: ${event.id}`);
+    console.log(`  - Name: ${event.event_name}`);
+    console.log(`  - Active: ${event.is_active}`);
+    console.log(`  - Archived: ${event.is_archived}`);
+    
+    // Check event directory
+    const eventDir = path.join(STORAGE_PATH, 'events/active', eventSlug);
+    const eventExists = await checkDirectory(eventDir, 'Event directory');
+    
+    if (eventExists) {
+      const files = await fs.readdir(eventDir);
+      console.log(`  - Photo files: ${files.filter(f => /\.(jpg|jpeg|png|gif)$/i.test(f)).length}`);
+    }
+    
+    // Check photos in database
+    const photos = await db('photos').where('event_id', event.id).select('id', 'filename', 'path', 'thumbnail_path');
+    console.log(`\nDatabase photos: ${photos.length}`);
+    
+    // Check if photo files exist
+    let existingPhotos = 0;
+    let missingPhotos = 0;
+    let existingThumbnails = 0;
+    let missingThumbnails = 0;
+    
+    for (const photo of photos) {
+      const photoPath = path.join(STORAGE_PATH, 'events/active', photo.path);
+      try {
+        await fs.access(photoPath);
+        existingPhotos++;
+      } catch {
+        missingPhotos++;
+        console.log(`  ✗ Missing photo: ${photo.path}`);
+      }
+      
+      if (photo.thumbnail_path) {
+        const thumbPath = path.join(STORAGE_PATH, photo.thumbnail_path.replace(/^\//, ''));
+        try {
+          await fs.access(thumbPath);
+          existingThumbnails++;
+        } catch {
+          missingThumbnails++;
+          console.log(`  ✗ Missing thumbnail: ${photo.thumbnail_path}`);
+        }
+      }
+    }
+    
+    console.log(`\nFile check summary:`);
+    console.log(`  - Photos: ${existingPhotos} exist, ${missingPhotos} missing`);
+    console.log(`  - Thumbnails: ${existingThumbnails} exist, ${missingThumbnails} missing`);
+  } else {
+    // List all event directories
+    try {
+      const activeDir = path.join(STORAGE_PATH, 'events/active');
+      const eventDirs = await fs.readdir(activeDir);
+      console.log(`Active event directories: ${eventDirs.length}`);
+      for (const dir of eventDirs.slice(0, 10)) {
+        console.log(`  - ${dir}`);
+      }
+      if (eventDirs.length > 10) {
+        console.log(`  ... and ${eventDirs.length - 10} more`);
+      }
+    } catch (error) {
+      console.log('Could not list event directories:', error.message);
+    }
+  }
+}
+
+// Parse command line arguments
+const eventSlug = process.argv[2] || null;
+
+// Run the script
+checkStorageStructure(eventSlug).then(async () => {
+  await db.destroy();
+  console.log('\nStorage check complete');
+}).catch(async error => {
+  console.error('Error:', error);
+  await db.destroy();
+  process.exit(1);
+});

backend/scripts/cleanup-thumbnails.js

@@ -0,0 +1,107 @@
+#!/usr/bin/env node
+
+/**
+ * Script to clean up orphaned and temporary thumbnails
+ * Usage: node scripts/cleanup-thumbnails.js [--dry-run]
+ */
+
+const path = require('path');
+const fs = require('fs').promises;
+const { db } = require('../src/database/db');
+
+const STORAGE_PATH = process.env.STORAGE_PATH || path.join(__dirname, '../../storage');
+const THUMBNAILS_DIR = path.join(STORAGE_PATH, 'thumbnails');
+
+async function cleanupThumbnails(dryRun = false) {
+  console.log('Starting thumbnail cleanup...');
+  console.log(`Thumbnails directory: ${THUMBNAILS_DIR}`);
+  console.log(`Mode: ${dryRun ? 'DRY RUN' : 'LIVE'}\n`);
+  
+  try {
+    // Get all thumbnail files
+    const files = await fs.readdir(THUMBNAILS_DIR);
+    console.log(`Found ${files.length} files in thumbnails directory`);
+    
+    // Get all valid thumbnail paths from database
+    const validThumbnails = await db('photos')
+      .whereNotNull('thumbnail_path')
+      .select('thumbnail_path');
+    
+    const validPaths = new Set(
+      validThumbnails.map(t => path.basename(t.thumbnail_path))
+    );
+    
+    console.log(`Found ${validPaths.size} valid thumbnails in database\n`);
+    
+    let tempCount = 0;
+    let orphanedCount = 0;
+    let validCount = 0;
+    let deletedCount = 0;
+    
+    for (const file of files) {
+      // Skip directories
+      const filePath = path.join(THUMBNAILS_DIR, file);
+      const stats = await fs.stat(filePath);
+      if (stats.isDirectory()) continue;
+      
+      // Check if it's a temporary file
+      if (file.startsWith('thumb_temp_')) {
+        tempCount++;
+        console.log(`Temporary file: ${file}`);
+        
+        if (!dryRun) {
+          try {
+            await fs.unlink(filePath);
+            deletedCount++;
+          } catch (error) {
+            console.error(`  Failed to delete: ${error.message}`);
+          }
+        }
+      }
+      // Check if it's an orphaned thumbnail
+      else if (!validPaths.has(file)) {
+        orphanedCount++;
+        console.log(`Orphaned file: ${file}`);
+        
+        if (!dryRun) {
+          try {
+            await fs.unlink(filePath);
+            deletedCount++;
+          } catch (error) {
+            console.error(`  Failed to delete: ${error.message}`);
+          }
+        }
+      } else {
+        validCount++;
+      }
+    }
+    
+    console.log('\n--- Summary ---');
+    console.log(`Total files: ${files.length}`);
+    console.log(`Valid thumbnails: ${validCount}`);
+    console.log(`Temporary files: ${tempCount}`);
+    console.log(`Orphaned files: ${orphanedCount}`);
+    if (!dryRun) {
+      console.log(`Deleted files: ${deletedCount}`);
+    } else {
+      console.log(`Files to be deleted: ${tempCount + orphanedCount}`);
+    }
+    
+  } catch (error) {
+    console.error('Error during cleanup:', error);
+    process.exit(1);
+  }
+}
+
+// Parse command line arguments
+const dryRun = process.argv.includes('--dry-run');
+
+// Run the cleanup
+cleanupThumbnails(dryRun).then(async () => {
+  await db.destroy();
+  console.log('\nCleanup complete');
+}).catch(async error => {
+  console.error('Cleanup failed:', error);
+  await db.destroy();
+  process.exit(1);
+});

backend/scripts/diagnose-thumbnails.js

@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+
+/**
+ * Script to diagnose thumbnail serving issues
+ * Usage: node scripts/diagnose-thumbnails.js <eventId>
+ */
+
+const path = require('path');
+const fs = require('fs').promises;
+const { db } = require('../src/database/db');
+
+const STORAGE_PATH = process.env.STORAGE_PATH || path.join(__dirname, '../../storage');
+const THUMBNAILS_DIR = path.join(STORAGE_PATH, 'thumbnails');
+
+async function diagnoseThumbnails(eventId) {
+  if (!eventId) {
+    console.error('Usage: node scripts/diagnose-thumbnails.js <eventId>');
+    process.exit(1);
+  }
+  
+  console.log(`Diagnosing thumbnails for event ID: ${eventId}`);
+  console.log(`Storage path: ${STORAGE_PATH}`);
+  console.log(`Thumbnails directory: ${THUMBNAILS_DIR}\n`);
+  
+  try {
+    // Get event info
+    const event = await db('events').where('id', eventId).first();
+    if (!event) {
+      console.error(`Event not found with ID: ${eventId}`);
+      return;
+    }
+    
+    console.log(`Event: ${event.event_name} (${event.slug})`);
+    console.log(`Active: ${event.is_active}, Archived: ${event.is_archived}\n`);
+    
+    // Get photos for this event
+    const photos = await db('photos')
+      .where('event_id', eventId)
+      .select('id', 'filename', 'path', 'thumbnail_path');
+    
+    console.log(`Found ${photos.length} photos in database\n`);
+    
+    let missingThumbnails = 0;
+    let existingThumbnails = 0;
+    let pathIssues = [];
+    
+    for (const photo of photos.slice(0, 10)) { // Check first 10 photos
+      console.log(`Photo ID ${photo.id}: ${photo.filename}`);
+      console.log(`  Photo path: ${photo.path}`);
+      console.log(`  Thumbnail path in DB: ${photo.thumbnail_path}`);
+      
+      if (photo.thumbnail_path) {
+        // Expected thumbnail filename
+        const expectedThumbName = `thumb_${photo.filename}`;
+        const expectedThumbPath = path.join(THUMBNAILS_DIR, expectedThumbName);
+        
+        // Check if thumbnail exists
+        try {
+          await fs.access(expectedThumbPath);
+          console.log(`  ✓ Thumbnail exists at: ${expectedThumbName}`);
+          existingThumbnails++;
+          
+          // Check if DB path matches expected path
+          const dbThumbName = path.basename(photo.thumbnail_path);
+          if (dbThumbName !== expectedThumbName) {
+            console.log(`  ⚠ Path mismatch! DB has: ${dbThumbName}, Expected: ${expectedThumbName}`);
+            pathIssues.push({
+              photoId: photo.id,
+              dbPath: photo.thumbnail_path,
+              expectedPath: `thumbnails/${expectedThumbName}`
+            });
+          }
+        } catch {
+          console.log(`  ✗ Thumbnail missing: ${expectedThumbName}`);
+          missingThumbnails++;
+        }
+      } else {
+        console.log(`  ✗ No thumbnail path in database`);
+        missingThumbnails++;
+      }
+      console.log('');
+    }
+    
+    console.log('--- Summary ---');
+    console.log(`Existing thumbnails: ${existingThumbnails}`);
+    console.log(`Missing thumbnails: ${missingThumbnails}`);
+    console.log(`Path issues: ${pathIssues.length}`);
+    
+    if (pathIssues.length > 0) {
+      console.log('\n--- Path Issues ---');
+      console.log('The following photos have incorrect thumbnail paths in the database:');
+      for (const issue of pathIssues) {
+        console.log(`Photo ID ${issue.photoId}:`);
+        console.log(`  Current: ${issue.dbPath}`);
+        console.log(`  Should be: ${issue.expectedPath}`);
+      }
+      
+      console.log('\nTo fix path issues, run:');
+      console.log(`UPDATE photos SET thumbnail_path = 'thumbnails/thumb_' || filename WHERE event_id = ${eventId};`);
+    }
+    
+    // Check for any thumbnails in the directory that match this event
+    const files = await fs.readdir(THUMBNAILS_DIR);
+    const eventThumbnails = files.filter(f => {
+      // Try to match thumbnails for this event
+      for (const photo of photos) {
+        if (f === `thumb_${photo.filename}`) return true;
+      }
+      return false;
+    });
+    
+    console.log(`\n--- Filesystem Check ---`);
+    console.log(`Found ${eventThumbnails.length} thumbnails in directory for this event`);
+    
+  } catch (error) {
+    console.error('Error during diagnosis:', error);
+    process.exit(1);
+  }
+}
+
+// Parse command line arguments
+const eventId = process.argv[2] ? parseInt(process.argv[2]) : null;
+
+// Run the diagnosis
+diagnoseThumbnails(eventId).then(async () => {
+  await db.destroy();
+  console.log('\nDiagnosis complete');
+}).catch(async error => {
+  console.error('Diagnosis failed:', error);
+  await db.destroy();
+  process.exit(1);
+});

backend/scripts/regenerate-thumbnails.js

@@ -0,0 +1,141 @@
+#!/usr/bin/env node
+
+/**
+ * Script to regenerate missing thumbnails for photos in the database
+ * Usage: node scripts/regenerate-thumbnails.js [eventId]
+ */
+
+const path = require('path');
+const fs = require('fs').promises;
+const sharp = require('sharp');
+const { db } = require('../src/database/db');
+
+// Configuration
+const THUMBNAIL_SIZE = 300;
+const STORAGE_PATH = process.env.STORAGE_PATH || path.join(__dirname, '../../storage');
+const THUMBNAILS_DIR = path.join(STORAGE_PATH, 'thumbnails');
+
+async function ensureDirectoryExists(dirPath) {
+  try {
+    await fs.access(dirPath);
+  } catch {
+    await fs.mkdir(dirPath, { recursive: true });
+    console.log(`Created directory: ${dirPath}`);
+  }
+}
+
+async function generateThumbnail(photoPath, thumbnailPath) {
+  try {
+    await sharp(photoPath)
+      .resize(THUMBNAIL_SIZE, THUMBNAIL_SIZE, {
+        fit: 'cover',
+        position: 'center'
+      })
+      .jpeg({ quality: 80 })
+      .toFile(thumbnailPath);
+    
+    return true;
+  } catch (error) {
+    console.error(`Failed to generate thumbnail for ${photoPath}:`, error.message);
+    return false;
+  }
+}
+
+async function regenerateThumbnails(eventId = null) {
+  try {
+    console.log('Starting thumbnail regeneration...');
+    console.log(`Storage path: ${STORAGE_PATH}`);
+    console.log(`Thumbnails directory: ${THUMBNAILS_DIR}`);
+    
+    // Ensure thumbnails directory exists
+    await ensureDirectoryExists(THUMBNAILS_DIR);
+    
+    // Build query
+    let query = db('photos')
+      .join('events', 'photos.event_id', 'events.id')
+      .select(
+        'photos.id',
+        'photos.filename',
+        'photos.path',
+        'photos.thumbnail_path',
+        'events.slug as event_slug'
+      );
+    
+    if (eventId) {
+      query = query.where('photos.event_id', eventId);
+      console.log(`Filtering for event ID: ${eventId}`);
+    }
+    
+    const photos = await query;
+    console.log(`Found ${photos.length} photos to process`);
+    
+    let successCount = 0;
+    let skipCount = 0;
+    let errorCount = 0;
+    
+    for (const photo of photos) {
+      const photoPath = path.join(STORAGE_PATH, 'events/active', photo.path);
+      const thumbnailFilename = `thumb_${photo.filename}`;
+      const thumbnailPath = path.join(THUMBNAILS_DIR, thumbnailFilename);
+      
+      try {
+        // Check if photo file exists
+        await fs.access(photoPath);
+        
+        // Check if thumbnail already exists
+        try {
+          await fs.access(thumbnailPath);
+          console.log(`Thumbnail already exists for ${photo.filename}, skipping...`);
+          skipCount++;
+          continue;
+        } catch {
+          // Thumbnail doesn't exist, generate it
+        }
+        
+        console.log(`Generating thumbnail for ${photo.filename}...`);
+        const success = await generateThumbnail(photoPath, thumbnailPath);
+        
+        if (success) {
+          // Update database with thumbnail path
+          await db('photos')
+            .where('id', photo.id)
+            .update({
+              thumbnail_path: `thumbnails/${thumbnailFilename}`
+            });
+          
+          successCount++;
+          console.log(`✓ Generated thumbnail for ${photo.filename}`);
+        } else {
+          errorCount++;
+        }
+      } catch (error) {
+        console.error(`✗ Photo file not found: ${photoPath}`);
+        errorCount++;
+      }
+    }
+    
+    console.log('\nThumbnail regeneration complete!');
+    console.log(`- Successfully generated: ${successCount}`);
+    console.log(`- Skipped (already exist): ${skipCount}`);
+    console.log(`- Errors: ${errorCount}`);
+    console.log(`- Total processed: ${photos.length}`);
+    
+  } catch (error) {
+    console.error('Error during thumbnail regeneration:', error);
+    process.exit(1);
+  } finally {
+    await db.destroy();
+  }
+}
+
+// Parse command line arguments
+const eventId = process.argv[2] ? parseInt(process.argv[2]) : null;
+
+// Run the script
+regenerateThumbnails(eventId).then(() => {
+  console.log('Script completed successfully');
+  process.exit(0);
+}).catch(error => {
+  console.error('Script failed:', error);
+  process.exit(1);
+});

backend/scripts/test-photo-auth.js

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+
+/**
+ * Script to test photo authentication
+ * Usage: node scripts/test-photo-auth.js <jwt-token>
+ */
+
+const axios = require('axios');
+
+async function testPhotoAuth(token) {
+  if (!token) {
+    console.error('Usage: node scripts/test-photo-auth.js <jwt-token>');
+    console.error('\nTo get a token, login to a gallery and check localStorage for gallery_token_<slug>');
+    process.exit(1);
+  }
+
+  const baseUrl = process.env.API_URL || 'http://localhost:3001';
+  
+  console.log(`Testing photo authentication with token: ${token.substring(0, 20)}...`);
+  console.log(`Base URL: ${baseUrl}\n`);
+
+  // Test URLs
+  const tests = [
+    {
+      name: 'Thumbnail via static route',
+      url: `${baseUrl}/thumbnails/thumb_Test_Gallery_uncategorized_5210.jpg`,
+      headers: { 'Authorization': `Bearer ${token}` }
+    },
+    {
+      name: 'Photo via static route',
+      url: `${baseUrl}/photos/wedding-test-gallery-2025-07-14-1/Test_Gallery_uncategorized_5210.jpg`,
+      headers: { 'Authorization': `Bearer ${token}` }
+    },
+    {
+      name: 'Gallery photos API',
+      url: `${baseUrl}/api/gallery/wedding-test-gallery-2025-07-14-1/photos`,
+      headers: { 'Authorization': `Bearer ${token}` }
+    }
+  ];
+
+  for (const test of tests) {
+    console.log(`Testing: ${test.name}`);
+    console.log(`URL: ${test.url}`);
+    
+    try {
+      const response = await axios.get(test.url, {
+        headers: test.headers,
+        validateStatus: () => true // Don't throw on any status
+      });
+      
+      console.log(`Status: ${response.status}`);
+      console.log(`Headers:`, response.headers['content-type']);
+      
+      if (response.status === 200) {
+        if (test.name.includes('API')) {
+          console.log(`Photos count: ${response.data.photos?.length || 0}`);
+        } else {
+          console.log(`Content length: ${response.headers['content-length']} bytes`);
+        }
+      } else {
+        console.log(`Error:`, response.data);
+      }
+    } catch (error) {
+      console.log(`Network error:`, error.message);
+    }
+    
+    console.log('---\n');
+  }
+  
+  // Decode token to show info
+  try {
+    const parts = token.split('.');
+    const payload = JSON.parse(Buffer.from(parts[1], 'base64').toString());
+    console.log('Token payload:', payload);
+  } catch (error) {
+    console.log('Failed to decode token');
+  }
+}
+
+// Get token from command line
+const token = process.argv[2];
+
+testPhotoAuth(token).catch(error => {
+  console.error('Test failed:', error);
+  process.exit(1);
+});

backend/src/middleware/gallery.js

@@ -11,7 +11,13 @@ async function verifyGalleryAccess(req, res, next) {
     }
     
     const decoded = jwt.verify(token, process.env.JWT_SECRET);
-    const event = await db('events').where({ id: decoded.eventId, is_active: formatBoolean(true) }).first();
+    const event = await db('events')
+      .where({ 
+        id: decoded.eventId, 
+        is_active: formatBoolean(true),
+        is_archived: formatBoolean(false)
+      })
+      .first();
     
     if (!event) {
       return res.status(404).json({ error: 'Gallery not found or expired' });

backend/src/routes/adminArchives.js

@@ -363,12 +363,29 @@ router.delete('/:id', adminAuth, async (req, res) => {
     // Delete archive file if exists
     if (archive.archive_path) {
       try {
-        await fs.unlink(archive.archive_path);
+        const storagePath = process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
+        const fullArchivePath = path.join(storagePath, archive.archive_path);
+        await fs.unlink(fullArchivePath);
       } catch (error) {
         console.error('Failed to delete archive file:', error);
       }
     }
 
+    // Delete thumbnails for this event
+    const photos = await db('photos').where('event_id', req.params.id).select('thumbnail_path');
+    const storagePath = process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
+    
+    for (const photo of photos) {
+      if (photo.thumbnail_path) {
+        try {
+          const thumbPath = path.join(storagePath, photo.thumbnail_path.replace(/^\//, ''));
+          await fs.unlink(thumbPath);
+        } catch (error) {
+          // Ignore errors - thumbnail might already be deleted
+        }
+      }
+    }
+
     // Delete from database (cascade will delete photos and logs)
     await db('events').where('id', req.params.id).delete();
 

backend/src/routes/auth.js

@@ -119,7 +119,8 @@ router.post('/gallery/verify', [
         color_theme: event.color_theme,
         expires_at: event.expires_at,
         allow_user_uploads: event.allow_user_uploads,
-        upload_category_id: event.upload_category_id
+        upload_category_id: event.upload_category_id,
+        hero_photo_id: event.hero_photo_id
       }
     });
   } catch (error) {

backend/src/routes/gallery.js

@@ -6,35 +6,11 @@ const archiver = require('archiver');
 const path = require('path');
 const router = express.Router();
 const watermarkService = require('../services/watermarkService');
+const { verifyGalleryAccess } = require('../middleware/gallery');
 
 // Get storage path from environment or default
 const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
 
-// Middleware to verify gallery access
-async function verifyGalleryAccess(req, res, next) {
-  try {
-    const token = req.headers.authorization?.split(' ')[1];
-    if (!token) {
-      return res.status(401).json({ error: 'No token provided' });
-    }
-    
-    const decoded = jwt.verify(token, process.env.JWT_SECRET);
-    const event = await db('events')
-      .where({ id: decoded.eventId, is_active: formatBoolean(true), is_archived: formatBoolean(false) })
-      .first();
-    
-    if (!event) {
-      return res.status(404).json({ error: 'Gallery not found or expired' });
-    }
-    
-    req.event = event;
-    next();
-  } catch (error) {
-    console.error('Error verifying gallery access:', error);
-    res.status(401).json({ error: 'Invalid token', details: error.message });
-  }
-}
-
 // Verify share token
 router.get('/:slug/verify-token/:token', async (req, res) => {
   try {
@@ -84,7 +60,11 @@ router.get('/:slug/info', async (req, res) => {
     
     // If token provided, verify it matches the share link
     if (token) {
-      const expectedToken = event.share_link.split('/').pop();
+      let expectedToken = event.share_link;
+      // Handle both formats: full URL or just token
+      if (event.share_link && event.share_link.includes('/')) {
+        expectedToken = event.share_link.split('/').pop();
+      }
       if (token !== expectedToken) {
         return res.status(404).json({ error: 'Invalid gallery link' });
       }
@@ -156,8 +136,8 @@ router.get('/:slug/photos', verifyGalleryAccess, async (req, res) => {
       photos: photos.map(photo => ({
         id: photo.id,
         filename: photo.filename,
-        url: `/photos/${photo.path}`,
-        thumbnail_url: photo.thumbnail_path ? `/${photo.thumbnail_path}` : null,
+        url: `/api/gallery/${req.params.slug}/photo/${photo.id}`,
+        thumbnail_url: photo.thumbnail_path ? `/api/gallery/${req.params.slug}/thumbnail/${photo.id}` : null,
         type: photo.type,
         category_id: photo.category_id,
         category_name: photo.category_name,
@@ -340,6 +320,42 @@ router.get('/:slug/photo/:photoId', verifyGalleryAccess, async (req, res) => {
   }
 });
 
+// Serve thumbnail
+router.get('/:slug/thumbnail/:photoId', verifyGalleryAccess, async (req, res) => {
+  try {
+    const { photoId } = req.params;
+    
+    const photo = await db('photos')
+      .where({ id: photoId, event_id: req.event.id })
+      .first();
+    
+    if (!photo || !photo.thumbnail_path) {
+      return res.status(404).json({ error: 'Thumbnail not found' });
+    }
+    
+    const thumbPath = path.join(getStoragePath(), photo.thumbnail_path);
+    
+    // Check if file exists
+    const fs = require('fs').promises;
+    try {
+      await fs.access(thumbPath);
+    } catch (error) {
+      return res.status(404).json({ error: 'Thumbnail file not found' });
+    }
+    
+    // Set appropriate headers
+    res.setHeader('Content-Type', 'image/jpeg');
+    res.setHeader('Cache-Control', 'private, max-age=3600');
+    res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
+    
+    // Send file
+    res.sendFile(path.resolve(thumbPath));
+  } catch (error) {
+    console.error('Error serving thumbnail:', error);
+    res.status(500).json({ error: 'Failed to serve thumbnail' });
+  }
+});
+
 // Get photo stats
 router.get('/:slug/stats', verifyGalleryAccess, async (req, res) => {
   try {

docs/nginx-fix.md

@@ -0,0 +1,59 @@
+# Nginx Configuration Fix for Photo Authentication
+
+If photos and thumbnails are not loading in gallery view but work in admin, it's likely that the Authorization header is being stripped by nginx or another reverse proxy.
+
+## Common Issue
+
+The `Authorization` header is often not passed through by default in nginx proxy configurations.
+
+## Fix
+
+Add these lines to your nginx configuration for the PicPeak location block:
+
+```nginx
+location / {
+    proxy_pass http://localhost:3001;
+    
+    # Important: Pass the Authorization header
+    proxy_pass_header Authorization;
+    proxy_set_header Authorization $http_authorization;
+    
+    # Other standard proxy headers
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+}
+```
+
+## Alternative Fix Using Traefik
+
+If using Traefik, ensure headers are passed:
+
+```yaml
+services:
+  picpeak:
+    labels:
+      - "traefik.http.middlewares.picpeak-headers.headers.customrequestheaders.Authorization="
+```
+
+## Testing
+
+1. Check if Authorization header is reaching the backend:
+   ```bash
+   curl -H "Authorization: Bearer YOUR_TOKEN" https://picpeak.yourdomain.com/thumbnails/test.jpg -v
+   ```
+
+2. Check nginx logs to see if the header is present:
+   ```bash
+   tail -f /var/log/nginx/access.log
+   ```
+
+## Docker Compose Fix
+
+If using docker-compose with nginx proxy, add:
+
+```yaml
+environment:
+  - NGINX_PROXY_PASS_HEADER=Authorization
+```

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "picpeak-frontend",
-  "version": "1.0.32",
+  "version": "1.0.38",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "picpeak-frontend",
-      "version": "1.0.32",
+      "version": "1.0.38",
       "dependencies": {
         "@tanstack/react-query": "^5.0.0",
         "@tiptap/extension-link": "^2.25.0",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "picpeak-frontend",
   "private": true,
-  "version": "1.0.32",
+  "version": "1.0.38",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/gallery/GalleryView.tsx

@@ -52,7 +52,7 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
   const { watermarkEnabled } = useWatermarkSettings();
   
   // Fetch photos
-  const { data, isLoading, error } = useGalleryPhotos(slug);
+  const { data, isLoading, error, refetch } = useGalleryPhotos(slug);
   
   // Debug logging
   useEffect(() => {
@@ -294,11 +294,20 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
   }
 
   if (error || !data) {
+    // Check if it's an authentication error (401)
+    const is401Error = (error as any)?.response?.status === 401;
+    
+    if (is401Error) {
+      // Authentication failed - logout and let the parent component handle re-authentication
+      logout();
+      return null;
+    }
+    
     return (
       <div className="min-h-screen bg-neutral-50 flex items-center justify-center">
         <div className="text-center">
           <p className="text-lg text-neutral-600">{t('gallery.failedToLoad')}</p>
-          <Button onClick={() => window.location.reload()} className="mt-4">
+          <Button onClick={() => refetch()} className="mt-4">
             {t('gallery.tryAgain')}
           </Button>
         </div>

frontend/src/config/api.ts

@@ -32,14 +32,24 @@ api.interceptors.request.use(
         config.headers.Authorization = `Bearer ${token}`;
       }
     } else {
-      // For gallery routes, get the slug from the URL path
-      const pathParts = window.location.pathname.split('/');
-      if (pathParts[1] === 'gallery' && pathParts[2]) {
-        const gallerySlug = pathParts[2];
+      // For gallery routes, try to extract slug from the request URL first
+      const galleryMatch = config.url?.match(/\/gallery\/([^\/]+)/);
+      if (galleryMatch && galleryMatch[1]) {
+        const gallerySlug = galleryMatch[1];
         const token = localStorage.getItem(`gallery_token_${gallerySlug}`);
         if (token) {
           config.headers.Authorization = `Bearer ${token}`;
         }
+      } else {
+        // Fallback to getting slug from the current page URL
+        const pathParts = window.location.pathname.split('/');
+        if (pathParts[1] === 'gallery' && pathParts[2]) {
+          const gallerySlug = pathParts[2];
+          const token = localStorage.getItem(`gallery_token_${gallerySlug}`);
+          if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+          }
+        }
       }
     }
 
@@ -73,21 +83,34 @@ api.interceptors.response.use(
     }
     
     if (error.response?.status === 401) {
-      // Redirect to appropriate login
+      // Check if it's an admin route
       const isAdminRoute = error.config?.url?.includes('/admin');
+      const currentPath = window.location.pathname;
+      
       if (isAdminRoute) {
         // Clear admin token on unauthorized
         Cookies.remove(ADMIN_TOKEN_KEY);
-        window.location.href = '/admin/login';
+        // Only redirect if we're not already on the admin login page
+        if (!currentPath.includes('/admin/login')) {
+          window.location.href = '/admin/login';
+        }
       } else {
-        // For gallery routes, clear gallery-specific token and redirect
-        const currentPath = window.location.pathname;
-        const pathParts = currentPath.split('/');
-        if (pathParts[1] === 'gallery' && pathParts[2]) {
-          const gallerySlug = pathParts[2];
-          localStorage.removeItem(`gallery_token_${gallerySlug}`);
-          localStorage.removeItem(`gallery_event_${gallerySlug}`);
-          window.location.href = `/gallery/${gallerySlug}`;
+        // For gallery routes, check if the error is from a gallery API call
+        const galleryMatch = error.config?.url?.match(/\/gallery\/([^\/]+)/);
+        
+        // Don't redirect if we're on any gallery page (to avoid redirect loops during login)
+        if (currentPath.startsWith('/gallery/')) {
+          // If we have a gallery match from the API URL, clear that specific gallery's token
+          if (galleryMatch && galleryMatch[1]) {
+            const gallerySlug = galleryMatch[1];
+            localStorage.removeItem(`gallery_token_${gallerySlug}`);
+            localStorage.removeItem(`gallery_event_${gallerySlug}`);
+          }
+          // Don't redirect - let the component handle the auth state
+        } else {
+          // We're not on a gallery page but got a 401 from a gallery API
+          // This shouldn't happen in normal flow, but if it does, redirect to homepage
+          window.location.href = '/';
         }
       }
     }

frontend/src/hooks/useGallery.ts

@@ -18,6 +18,8 @@ export const useGalleryPhotos = (slug: string, enabled: boolean = true) => {
     enabled,
     retry: 1,
     staleTime: 5 * 60 * 1000, // 5 minutes
+    // Add a small delay to ensure auth token is properly set
+    retryDelay: 100,
   });
 };
 

frontend/src/hooks/useWatermarkSettings.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { settingsService } from '../services/settings.service';
+import { api } from '../config/api';
 
 export function useWatermarkSettings() {
   const [watermarkEnabled, setWatermarkEnabled] = useState(false);
@@ -8,11 +8,13 @@ export function useWatermarkSettings() {
   useEffect(() => {
     const fetchSettings = async () => {
       try {
-        const settings = await settingsService.getSettingsByType('branding');
-        const brandingSettings = settingsService.formatBrandingSettings(settings);
-        setWatermarkEnabled(brandingSettings.watermark_enabled);
+        // 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);
       }