chore: bump version to 1.0.37

- Fix archive deletion to also clean up associated thumbnails
- Add cleanup-thumbnails.js script to remove temporary and orphaned thumbnails
- Add diagnose-thumbnails.js script to troubleshoot thumbnail serving issues
- Update README with documentation for new scripts

This prevents thumbnail accumulation when events are deleted and helps
diagnose why thumbnails might not be showing despite existing on disk.

🤖 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.37",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "picpeak-backend",
-      "version": "1.0.32",
+      "version": "1.0.37",
       "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.37",
   "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/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' });
       }

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "picpeak-frontend",
-  "version": "1.0.32",
+  "version": "1.0.37",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "picpeak-frontend",
-      "version": "1.0.32",
+      "version": "1.0.37",
       "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.37",
   "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
+      // For gallery routes, try to extract slug from the request URL first
-      const pathParts = window.location.pathname.split('/');
+      const galleryMatch = config.url?.match(/\/gallery\/([^\/]+)/);
-      if (pathParts[1] === 'gallery' && pathParts[2]) {
+      if (galleryMatch && galleryMatch[1]) {
-        const gallerySlug = pathParts[2];
+        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
+        // For gallery routes, check if the error is from a gallery API call
-        const currentPath = window.location.pathname;
+        const galleryMatch = error.config?.url?.match(/\/gallery\/([^\/]+)/);
-        const pathParts = currentPath.split('/');
+        
-        if (pathParts[1] === 'gallery' && pathParts[2]) {
+        // Don't redirect if we're on any gallery page (to avoid redirect loops during login)
-          const gallerySlug = pathParts[2];
+        if (currentPath.startsWith('/gallery/')) {
-          localStorage.removeItem(`gallery_token_${gallerySlug}`);
+          // If we have a gallery match from the API URL, clear that specific gallery's token
-          localStorage.removeItem(`gallery_event_${gallerySlug}`);
+          if (galleryMatch && galleryMatch[1]) {
-          window.location.href = `/gallery/${gallerySlug}`;
+            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');
+        // Use public settings endpoint that doesn't require authentication
-        const brandingSettings = settingsService.formatBrandingSettings(settings);
+        const response = await api.get('/public/settings');
-        setWatermarkEnabled(brandingSettings.watermark_enabled);
+        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);
       }