paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Enhance email templates with clickable links, branding, and improved styling

Browse Source 
- Add clickable gallery links in all email templates
- Include application logo in email header and footer (custom or PicPeak default)
- Redesign emails with professional styling matching gallery login page
  - Gray background with white content box
  - PicPeak green header with centered logo
  - Clean typography and proper spacing
  - Responsive design for mobile devices
  - Styled call-to-action buttons
  - Footer with branding and copyright
- Update email processor to fetch branding settings dynamically
- Use proper API URLs for logo images in emails

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
paul
2025-07-10 22:19:15 +02:00
parent 6438374258
commit 5328b4f73a
52 changed files with 3237 additions and 683 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/src/routes/adminEvents.js
+60 -12
View File
@@ -8,6 +8,7 @@ const crypto = require('crypto');
const fs = require('fs').promises;
const path = require('path');
const { archiveEvent } = require('../services/archiveService');
const { formatDate } = require('../utils/dateFormatter');
// Create new event
router.post('/', adminAuth, [
@@ -20,12 +21,15 @@ router.post('/', adminAuth, [
body('expiration_days').isInt({ min: 1, max: 365 }).optional(),
body('welcome_message').optional().trim(),
body('color_theme').optional().trim(),
body('allow_user_uploads').optional().isBoolean(),
body('upload_category_id').optional().isInt()
body('allow_user_uploads').optional().isBoolean().toBoolean(),
body('upload_category_id').optional({ nullable: true, checkFalsy: true }).isInt(),
body('host_name').notEmpty().trim()
], async (req, res) => {
try {
console.log('Create event request body:', req.body);
const errors = validationResult(req);
if (!errors.isEmpty()) {
console.error('Validation errors:', errors.array());
return res.status(400).json({ errors: errors.array() });
}
@@ -33,6 +37,7 @@ router.post('/', adminAuth, [
event_type,
event_name,
event_date,
host_name,
host_email,
admin_email,
password,
@@ -76,6 +81,7 @@ router.post('/', adminAuth, [
event_type,
event_name,
event_date,
host_name,
host_email,
admin_email,
password_hash,
@@ -96,17 +102,20 @@ router.post('/', adminAuth, [
);
// Queue creation email
// Determine language based on email domain
const emailLang = host_email.endsWith('.de') ? 'de' : 'en';
await db('email_queue').insert({
event_id: eventId,
recipient_email: host_email,
email_type: 'gallery_created',
email_data: JSON.stringify({
host_name: host_email.split('@')[0], // Extract name from email
host_name: host_name,
event_name,
event_date: new Date(event_date).toLocaleDateString(),
event_date: await formatDate(event_date, emailLang),
gallery_link: shareLink,
gallery_password: password,
expiry_date: expires_at.toLocaleDateString()
expiry_date: await formatDate(expires_at, emailLang)
})
// scheduled_at will use default value
});
@@ -245,10 +254,28 @@ router.get('/:id', adminAuth, async (req, res) => {
.limit(10)
.select('filename', 'type', 'size_bytes', 'uploaded_at');
// Get view and download statistics
const [{ totalViews }] = await db('access_logs')
.where('event_id', id)
.where('action', 'view')
.count('* as totalViews');
const [{ totalDownloads }] = await db('access_logs')
.where('event_id', id)
.where('action', 'download')
.count('* as totalDownloads');
const [{ uniqueVisitors }] = await db('access_logs')
.where('event_id', id)
.countDistinct('ip_address as uniqueVisitors');
res.json({
...event,
photo_count: parseInt(photoCount) || 0,
total_size: parseInt(totalSize) || 0,
total_views: parseInt(totalViews) || 0,
total_downloads: parseInt(totalDownloads) || 0,
unique_visitors: parseInt(uniqueVisitors) || 0,
recent_photos: recentPhotos
});
} catch (error) {
@@ -263,20 +290,44 @@ router.put('/:id', adminAuth, [
body('admin_email').optional().isEmail(),
body('is_active').optional().isBoolean(),
body('expires_at').optional().isISO8601(),
body('welcome_message').optional().trim(),
body('color_theme').optional().trim(),
body('welcome_message').optional({ nullable: true, checkFalsy: true }).trim(),
body('color_theme').optional({ nullable: true }),
body('allow_user_uploads').optional().isBoolean(),
body('upload_category_id').optional().isInt()
body('host_name').optional().trim().notEmpty(),
body('upload_category_id').optional().custom((value) => {
// Accept null, undefined, or integer values
if (value === null || value === undefined) return true;
return Number.isInteger(Number(value));
}).withMessage('upload_category_id must be an integer or null'),
body('hero_photo_id').optional().custom((value) => {
// Accept null, undefined, or numeric values
if (value === null || value === undefined) return true;
// Check if it's a number or can be converted to a valid integer
const num = Number(value);
return !isNaN(num) && Number.isInteger(num);
}).withMessage('hero_photo_id must be an integer or null')
], async (req, res) => {
try {
const errors = validationResult(req);
if (!errors.isEmpty()) {
console.log('Update event validation errors:', JSON.stringify(errors.array(), null, 2));
console.log('Request body:', req.body);
return res.status(400).json({ errors: errors.array() });
}
const { id } = req.params;
const updates = req.body;
// Log the update request for debugging
console.log('Update event request:', {
id,
updates,
color_theme_length: updates.color_theme ? updates.color_theme.length : 0,
color_theme_type: typeof updates.color_theme,
hero_photo_id: updates.hero_photo_id,
hero_photo_id_type: typeof updates.hero_photo_id
});
// Check if event exists
const event = await db('events').where('id', id).first();
if (!event) {
@@ -286,10 +337,7 @@ router.put('/:id', adminAuth, [
// Update event
await db('events')
.where('id', id)
.update({
...updates,
updated_at: new Date()
});
.update(updates);
// Log activity
await logActivity('event_updated',
backend/src/routes/adminSettings.js
+68 -2
View File
@@ -133,7 +133,10 @@ router.put('/branding', adminAuth, async (req, res) => {
watermark_enabled,
watermark_position,
watermark_opacity,
watermark_size
watermark_size,
favicon_url,
logo_url,
watermark_logo_url
} = req.body;
const brandingSettings = {
@@ -144,9 +147,72 @@ router.put('/branding', adminAuth, async (req, res) => {
watermark_enabled,
watermark_position,
watermark_opacity,
watermark_size
watermark_size,
favicon_url,
logo_url,
watermark_logo_url
};
// Handle favicon deletion if empty string or null is provided
if (favicon_url === '' || favicon_url === null || favicon_url === undefined) {
// Get current favicon path to delete file
const currentFaviconSetting = await db('app_settings')
.where('setting_key', 'branding_favicon_url')
.first();
if (currentFaviconSetting && currentFaviconSetting.setting_value) {
let currentFaviconUrl;
try {
// Try to parse as JSON first
currentFaviconUrl = JSON.parse(currentFaviconSetting.setting_value);
} catch (e) {
// If it's not valid JSON, use the raw value
currentFaviconUrl = currentFaviconSetting.setting_value;
}
if (currentFaviconUrl && typeof currentFaviconUrl === 'string' && currentFaviconUrl.startsWith('/uploads/favicons/')) {
// Delete the file from filesystem
const faviconPath = path.join(__dirname, '..', '..', 'storage', currentFaviconUrl.replace('/uploads/', ''));
try {
await fs.unlink(faviconPath);
console.log('Deleted favicon file:', faviconPath);
} catch (err) {
console.error('Error deleting favicon file:', err);
}
}
}
}
// Handle logo deletion if empty string or null is provided
if (logo_url === '' || logo_url === null || logo_url === undefined) {
// Get current logo path to delete file
const currentLogoSetting = await db('app_settings')
.where('setting_key', 'branding_logo_url')
.first();
if (currentLogoSetting && currentLogoSetting.setting_value) {
let currentLogoUrl;
try {
// Try to parse as JSON first
currentLogoUrl = JSON.parse(currentLogoSetting.setting_value);
} catch (e) {
// If it's not valid JSON, use the raw value
currentLogoUrl = currentLogoSetting.setting_value;
}
if (currentLogoUrl && typeof currentLogoUrl === 'string' && currentLogoUrl.startsWith('/uploads/logos/')) {
// Delete the file from filesystem
const logoPath = path.join(__dirname, '..', '..', 'storage', currentLogoUrl.replace('/uploads/', ''));
try {
await fs.unlink(logoPath);
console.log('Deleted logo file:', logoPath);
} catch (err) {
console.error('Error deleting logo file:', err);
}
}
}
}
// Update or insert each setting
for (const [key, value] of Object.entries(brandingSettings)) {
await db('app_settings')
backend/src/routes/gallery.js
+37 -5
View File
@@ -96,7 +96,8 @@ router.get('/:slug/info', async (req, res) => {
expires_at: event.expires_at,
is_active: event.is_active,
is_expired: !event.is_active || new Date(event.expires_at) < new Date(),
requires_password: true
requires_password: true,
color_theme: event.color_theme
});
} catch (error) {
console.error('Error fetching gallery info:', error);
@@ -142,7 +143,8 @@ router.get('/:slug/photos', verifyGalleryAccess, async (req, res) => {
event_date: req.event.event_date,
welcome_message: req.event.welcome_message,
color_theme: req.event.color_theme,
expires_at: req.event.expires_at
expires_at: req.event.expires_at,
hero_photo_id: req.event.hero_photo_id
},
categories: categories.map(cat => ({
id: cat.id,
@@ -222,12 +224,26 @@ router.get('/:slug/download/:photoId', verifyGalleryAccess, async (req, res) =>
// Download all photos as ZIP
router.get('/:slug/download-all', verifyGalleryAccess, async (req, res) => {
try {
const photos = await db('photos').where('event_id', req.event.id);
// Fetch photos with category information
const photos = await db('photos')
.leftJoin('photo_categories', 'photos.category_id', 'photo_categories.id')
.where('photos.event_id', req.event.id)
.select(
'photos.*',
'photo_categories.name as category_name',
'photo_categories.slug as category_slug'
)
.orderBy('photo_categories.name', 'asc')
.orderBy('photos.uploaded_at', 'desc');
if (photos.length === 0) {
return res.status(404).json({ error: 'No photos found' });
}
// Count unique categories (excluding null)
const uniqueCategories = new Set(photos.filter(p => p.category_id).map(p => p.category_id)).size;
const hasMultipleCategories = uniqueCategories > 1;
res.setHeader('Content-Type', 'application/zip');
res.setHeader('Content-Disposition', `attachment; filename="${req.event.slug}.zip"`);
@@ -245,13 +261,29 @@ router.get('/:slug/download-all', verifyGalleryAccess, async (req, res) => {
for (const photo of photos) {
const filePath = path.join(getStoragePath(), 'events/active', photo.path);
// Determine the file name in the archive
let archiveName;
if (hasMultipleCategories) {
if (photo.category_name) {
// Use category name as folder (sanitize for filesystem)
const folderName = photo.category_name.replace(/[^a-zA-Z0-9-_ ]/g, '').trim();
archiveName = path.join(folderName, photo.filename);
} else {
// Put uncategorized photos in 'Uncategorized' folder
archiveName = path.join('Uncategorized', photo.filename);
}
} else {
// No folders, just the filename
archiveName = photo.filename;
}
if (watermarkSettings && watermarkSettings.enabled) {
// Apply watermark
const watermarkedBuffer = await watermarkService.applyWatermark(filePath, watermarkSettings);
archive.append(watermarkedBuffer, { name: photo.path });
archive.append(watermarkedBuffer, { name: archiveName });
} else {
// Add original file
archive.file(filePath, { name: photo.path });
archive.file(filePath, { name: archiveName });
}
}