Compare commits
30 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b6a960879f | |||
| 4bd153104b | |||
| e099fcf600 | |||
| 89fdf401c0 | |||
| 9cc46a1819 | |||
| f7c0e5f51a | |||
| 200581e73c | |||
| 505acf833e | |||
| 1ac5b0447a | |||
| 15a2fc2d5f | |||
| a1cf6a1156 | |||
| 481545c37b | |||
| a67df87013 | |||
| d2dbe2ea2f | |||
| 98ea5e7202 | |||
| 6b5c08e99b | |||
| 11ecad136b | |||
| 3a4dccd9f0 | |||
| 0a5e55ca96 | |||
| a72741c0d9 | |||
| e7ed7006fd | |||
| 3d3013d9d6 | |||
| bccaa649dc | |||
| 7aca927937 | |||
| e229c60b22 | |||
| 4966bc6a58 | |||
| 617f292516 | |||
| 8e95004022 | |||
| 93df328853 | |||
| 657e74a2e3 |
@@ -10,10 +10,10 @@ jobs:
|
||||
mirror:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
- name: Checkout repository with full history
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
fetch-depth: 0 # Full history needed for mirroring
|
||||
fetch-depth: 0 # Full history needed for finding the commit
|
||||
|
||||
- name: Setup Git
|
||||
run: |
|
||||
@@ -28,40 +28,144 @@ jobs:
|
||||
git status
|
||||
echo "Remote info:"
|
||||
git remote -v
|
||||
echo "Checking target commit exists:"
|
||||
git show --oneline 7aca927937 || echo "Target commit not found!"
|
||||
|
||||
- name: Create filtered branch
|
||||
- name: Create completely new history from specific commit
|
||||
run: |
|
||||
TARGET_COMMIT="7aca927937"
|
||||
|
||||
# Verify the target commit exists
|
||||
if ! git cat-file -e $TARGET_COMMIT^{commit}; then
|
||||
echo "ERROR: Target commit $TARGET_COMMIT does not exist!"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "✅ Target commit found: $(git log --oneline -1 $TARGET_COMMIT)"
|
||||
|
||||
# Clean up any existing github-mirror branch
|
||||
git branch -D github-mirror || true
|
||||
|
||||
# Create a new branch for GitHub
|
||||
# Create a completely new orphan branch (no history)
|
||||
git checkout --orphan github-mirror
|
||||
|
||||
# Remove sensitive files/directories
|
||||
# Example: Remove .env files, private configs, etc.
|
||||
git rm -r --cached .env* || true
|
||||
git rm -r --cached backend/.env* || true
|
||||
git rm -r --cached frontend/.env* || true
|
||||
git rm -r --cached docker-compose.prod.yml || true
|
||||
git rm -r --cached .claudedocs/ || true
|
||||
git rm -r --cached backend/data/ || true
|
||||
git rm -r --cached backend/storage/ || true
|
||||
git rm -r --cached .gitea/ || true
|
||||
git rm -r --cached scripts/install-gitea-runner.sh || true
|
||||
git rm -r --cached .drone* || true
|
||||
git rm -r --cached .github-mirror-exclude || true
|
||||
git rm -r --cached .gitattributes-github || true
|
||||
git rm -r --cached photo-sharing-prd.md || true
|
||||
git rm -r --cached CLAUDE.md || true
|
||||
git rm -r --cached PRODUCTION_DEPLOYMENT_GUIDE.md || true
|
||||
git rm -r --cached logs/ || true
|
||||
git rm -r --cached frontend/.claudedocs/ || true
|
||||
git rm -r --cached test-maintenance.sh || true
|
||||
git rm -r --cached storage/ || true
|
||||
# Clear the staging area completely
|
||||
git rm -rf . || true
|
||||
|
||||
# Get the file tree from the target commit and create initial commit
|
||||
echo "Creating new history starting from $TARGET_COMMIT..."
|
||||
git read-tree $TARGET_COMMIT
|
||||
git commit -m "Initial commit - imported from $(git log --oneline -1 $TARGET_COMMIT)"
|
||||
|
||||
echo "✅ Created new initial commit: $(git log --oneline -1)"
|
||||
|
||||
# Now get all commits after the target commit and apply their changes
|
||||
COMMITS_AFTER_TARGET=$(git rev-list --reverse --no-merges $TARGET_COMMIT..main)
|
||||
|
||||
if [ -n "$COMMITS_AFTER_TARGET" ]; then
|
||||
echo "📋 Applying changes from commits after $TARGET_COMMIT:"
|
||||
|
||||
for commit in $COMMITS_AFTER_TARGET; do
|
||||
echo "Processing: $(git log --oneline -1 $commit)"
|
||||
|
||||
# Get the commit message and author info
|
||||
COMMIT_MSG=$(git log --format="%B" -n 1 $commit)
|
||||
COMMIT_AUTHOR=$(git log --format="%an <%ae>" -n 1 $commit)
|
||||
COMMIT_DATE=$(git log --format="%ad" -n 1 $commit)
|
||||
|
||||
# Apply the changes from this commit
|
||||
if git diff-tree --no-commit-id --name-only -r $commit | xargs -I {} git show $commit:{} > /dev/null 2>&1; then
|
||||
# Apply file changes
|
||||
git checkout $commit -- . || true
|
||||
|
||||
# Stage all changes
|
||||
git add -A
|
||||
|
||||
# Only commit if there are changes
|
||||
if ! git diff --cached --quiet; then
|
||||
# Create new commit with original metadata but new SHA
|
||||
GIT_AUTHOR_NAME=$(echo "$COMMIT_AUTHOR" | cut -d'<' -f1 | xargs)
|
||||
GIT_AUTHOR_EMAIL=$(echo "$COMMIT_AUTHOR" | cut -d'<' -f2 | cut -d'>' -f1)
|
||||
GIT_AUTHOR_DATE="$COMMIT_DATE"
|
||||
|
||||
export GIT_AUTHOR_NAME GIT_AUTHOR_EMAIL GIT_AUTHOR_DATE
|
||||
git commit -m "$COMMIT_MSG"
|
||||
echo "✅ Applied changes as new commit: $(git log --oneline -1)"
|
||||
else
|
||||
echo "⚠️ No changes to commit for $commit"
|
||||
fi
|
||||
else
|
||||
echo "⚠️ Skipping problematic commit $commit"
|
||||
fi
|
||||
done
|
||||
|
||||
echo "✅ Finished creating new history"
|
||||
else
|
||||
echo "✅ No commits after target commit - history starts fresh"
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "=== New History Summary ==="
|
||||
echo "Total commits in new history: $(git rev-list --count github-mirror)"
|
||||
echo "History starts with: $(git log --oneline --reverse | head -1)"
|
||||
echo "Latest commit: $(git log --oneline -1)"
|
||||
|
||||
|
||||
# Commit the changes
|
||||
git commit -m "Remove sensitive files for GitHub mirror" || true
|
||||
- name: Remove sensitive files and directories
|
||||
run: |
|
||||
# Switch to the github-mirror branch
|
||||
git checkout github-mirror
|
||||
|
||||
echo "Current files before cleanup:"
|
||||
ls -la | head -10 || true
|
||||
echo "..."
|
||||
|
||||
# Remove sensitive files/directories if they exist
|
||||
echo "Removing sensitive files..."
|
||||
rm -rf .env* || true
|
||||
rm -rf backend/.env* || true
|
||||
rm -rf frontend/.env* || true
|
||||
rm -rf docker-compose.prod.yml || true
|
||||
rm -rf .claudedocs/ || true
|
||||
rm -rf backend/data/ || true
|
||||
rm -rf backend/storage/ || true
|
||||
rm -rf .gitea/ || true
|
||||
rm -rf scripts/install-gitea-runner.sh || true
|
||||
rm -rf .drone* || true
|
||||
rm -rf .github-mirror-exclude || true
|
||||
rm -rf .gitattributes-github || true
|
||||
rm -rf photo-sharing-prd.md || true
|
||||
rm -rf CLAUDE.md || true
|
||||
rm -rf PRODUCTION_DEPLOYMENT_GUIDE.md || true
|
||||
rm -rf logs/ || true
|
||||
rm -rf frontend/.claudedocs/ || true
|
||||
rm -rf test-maintenance.sh || true
|
||||
rm -rf storage/ || true
|
||||
|
||||
echo "Sensitive files removal completed"
|
||||
|
||||
# Add and commit the cleanup if there are changes
|
||||
git add -A
|
||||
if ! git diff --cached --quiet; then
|
||||
git commit -m "chore: remove sensitive files for GitHub mirror"
|
||||
echo "✅ Committed cleanup of sensitive files"
|
||||
else
|
||||
echo "✅ No sensitive files to remove"
|
||||
fi
|
||||
|
||||
echo "Final file structure (top level):"
|
||||
ls -la | head -10 || true
|
||||
|
||||
- name: Verify completely new history
|
||||
run: |
|
||||
git checkout github-mirror
|
||||
echo "=== Final History Verification ==="
|
||||
echo "Total commits in new github-mirror branch: $(git rev-list --count github-mirror)"
|
||||
echo ""
|
||||
echo "Complete commit history (should start from target commit content):"
|
||||
git log --oneline --reverse
|
||||
echo ""
|
||||
echo "⚠️ Note: This is a completely NEW history with new commit SHAs"
|
||||
echo "🔍 Original target commit content preserved but with new commit ID"
|
||||
|
||||
- name: Check GitHub token
|
||||
env:
|
||||
@@ -74,10 +178,13 @@ jobs:
|
||||
echo "GitHub token is available (length: ${#GITHUBTOKEN})"
|
||||
fi
|
||||
|
||||
- name: Push to GitHub
|
||||
- name: Force push completely new history to GitHub
|
||||
env:
|
||||
GITHUBTOKEN: ${{ secrets.GITHUBTOKEN }}
|
||||
run: |
|
||||
# Switch to github-mirror branch
|
||||
git checkout github-mirror
|
||||
|
||||
# Remove existing github remote if it exists
|
||||
git remote remove github || true
|
||||
|
||||
@@ -88,12 +195,17 @@ jobs:
|
||||
echo "GitHub remote added:"
|
||||
git remote -v
|
||||
|
||||
# Force push the filtered branch to GitHub main
|
||||
echo "Pushing to GitHub..."
|
||||
# Force push the completely new history to GitHub main
|
||||
echo "🔥 FORCE PUSHING completely new history to GitHub..."
|
||||
echo "⚠️ This will COMPLETELY REPLACE all history on GitHub!"
|
||||
git push github github-mirror:main --force
|
||||
echo "Push completed successfully!"
|
||||
echo "✅ Force push completed - GitHub now has completely new history!"
|
||||
|
||||
- name: Workflow completed
|
||||
run: |
|
||||
echo "✅ Mirror to GitHub workflow completed successfully!"
|
||||
echo "Check https://github.com/the-luap/picpeak to verify the mirror."
|
||||
echo "🔥 COMPLETE HISTORY REPLACEMENT: GitHub now has entirely new history"
|
||||
echo "📊 History starts from commit content: 7aca927937"
|
||||
echo "🔍 Check https://github.com/the-luap/picpeak to verify the new history"
|
||||
echo "📈 Total commits pushed: $(git rev-list --count github-mirror)"
|
||||
echo "🆕 All commit SHAs are NEW - no connection to previous history"
|
||||
@@ -164,11 +164,25 @@ jobs:
|
||||
- name: Commit version bump
|
||||
if: steps.version.outputs.version_changed == 'true'
|
||||
run: |
|
||||
set -e # Exit on any error
|
||||
|
||||
# First, ensure we have the latest changes
|
||||
echo "Fetching latest changes..."
|
||||
git fetch origin main
|
||||
|
||||
# Check if we're behind and need to update
|
||||
LOCAL=$(git rev-parse HEAD)
|
||||
REMOTE=$(git rev-parse origin/main)
|
||||
|
||||
if [ "$LOCAL" != "$REMOTE" ]; then
|
||||
echo "Local is behind remote, pulling changes..."
|
||||
git pull origin main --no-rebase
|
||||
fi
|
||||
|
||||
COMPONENT="${{ steps.version.outputs.component_changed }}"
|
||||
|
||||
if [ "$COMPONENT" = "both" ]; then
|
||||
git add backend/package.json backend/package-lock.json
|
||||
git add frontend/package.json frontend/package-lock.json
|
||||
git add backend/package.json backend/package-lock.json frontend/package.json frontend/package-lock.json
|
||||
git commit -m "chore: bump version to ${{ steps.version.outputs.new_version }} (backend + frontend)"
|
||||
elif [ "$COMPONENT" = "backend" ]; then
|
||||
git add backend/package.json backend/package-lock.json
|
||||
@@ -178,7 +192,51 @@ jobs:
|
||||
git commit -m "chore: bump frontend version to ${{ steps.version.outputs.new_version }}"
|
||||
fi
|
||||
|
||||
git push
|
||||
# Pull latest changes before pushing to avoid conflicts
|
||||
echo "Pulling latest changes from origin/main..."
|
||||
if ! git pull --rebase origin main; then
|
||||
echo "Rebase failed, attempting to resolve..."
|
||||
# If rebase fails, abort and try a regular merge
|
||||
git rebase --abort || true
|
||||
git pull origin main --no-rebase
|
||||
fi
|
||||
|
||||
# Push the changes with retry logic
|
||||
echo "Pushing version bump..."
|
||||
PUSH_SUCCESS=false
|
||||
|
||||
for i in 1 2 3; do
|
||||
echo "Push attempt $i of 3..."
|
||||
|
||||
# Try to push
|
||||
if git push origin main 2>&1; then
|
||||
echo "Successfully pushed version bump on attempt $i"
|
||||
PUSH_SUCCESS=true
|
||||
break
|
||||
else
|
||||
echo "Push failed on attempt $i"
|
||||
|
||||
if [ $i -lt 3 ]; then
|
||||
echo "Waiting 5 seconds before retry..."
|
||||
sleep 5
|
||||
|
||||
echo "Pulling latest changes..."
|
||||
git fetch origin main
|
||||
|
||||
# Try rebase first, fall back to merge
|
||||
if ! git rebase origin/main; then
|
||||
echo "Rebase failed, trying merge..."
|
||||
git rebase --abort 2>/dev/null || true
|
||||
git pull origin main --no-rebase
|
||||
fi
|
||||
fi
|
||||
fi
|
||||
done
|
||||
|
||||
if [ "$PUSH_SUCCESS" = "false" ]; then
|
||||
echo "ERROR: Failed to push after 3 attempts"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
- name: Create Git tag
|
||||
if: steps.version.outputs.version_changed == 'true'
|
||||
|
||||
@@ -54,3 +54,5 @@ coverage/
|
||||
!storage/thumbnails/.gitkeep
|
||||
!data/.gitkeep
|
||||
!logs/.gitkeep
|
||||
|
||||
PRODUCTION_DEPLOYMENT_GUIDE.md
|
||||
@@ -39,6 +39,12 @@ docker-compose -f docker-compose.prod.yml up -d # Production deployment
|
||||
pm2 start ecosystem.config.js # Alternative: PM2 deployment
|
||||
```
|
||||
|
||||
**⚠️ CRITICAL PRODUCTION NOTICE:**
|
||||
- Production runs on a SEPARATE SERVER - never assume local changes affect production
|
||||
- ALWAYS request production server details before any troubleshooting
|
||||
- NO trial-and-error approaches in production - data loss is unacceptable
|
||||
- Every change must be thoroughly analyzed and tested locally first
|
||||
|
||||
## Key Product Requirements (from PRD)
|
||||
|
||||
### Core Features
|
||||
@@ -127,6 +133,41 @@ Background services run as separate processes:
|
||||
5. **Frontend Status**: Only skeleton exists - requires full implementation based on PRD
|
||||
6. **Umami Analytics**: Track password entries, downloads, views, expiration warnings
|
||||
|
||||
## Troubleshooting Guidelines
|
||||
|
||||
### Before ANY Production Troubleshooting:
|
||||
1. **ALWAYS request specific details**:
|
||||
- Production server URL/IP
|
||||
- Current error messages/logs
|
||||
- Recent changes or deployments
|
||||
- Affected users/galleries
|
||||
- Time of issue occurrence
|
||||
|
||||
2. **Thorough Analysis Required**:
|
||||
- Use detailed thinking/analysis for EVERY troubleshooting task
|
||||
- Review all related code before suggesting changes
|
||||
- Consider all potential side effects
|
||||
- Never make assumptions about production environment
|
||||
|
||||
3. **Safe Troubleshooting Steps**:
|
||||
- First, reproduce issue in local/dev environment
|
||||
- Analyze logs without modifying production
|
||||
- Create detailed action plan before any changes
|
||||
- Always have rollback strategy ready
|
||||
- Document every step taken
|
||||
|
||||
### Common Issues & Safe Approaches:
|
||||
- **Email not sending**: Check email_queue table, SMTP settings, service status
|
||||
- **Photos not loading**: Verify file permissions, storage paths, nginx config
|
||||
- **Gallery access issues**: Check JWT tokens, expiration dates, access_logs
|
||||
- **Performance problems**: Analyze with monitoring tools first, never experiment
|
||||
|
||||
### Data Safety Rules:
|
||||
- NEVER delete or modify production data without explicit backup confirmation
|
||||
- ALWAYS verify backups exist before any data operations
|
||||
- NO direct database modifications without transaction safety
|
||||
- Log all actions for audit trail
|
||||
|
||||
## Environment Variables
|
||||
|
||||
### Backend (.env)
|
||||
@@ -258,4 +299,30 @@ const { theme, setTheme, setThemeByName } = useTheme();
|
||||
- Guest satisfaction: >90%
|
||||
- System uptime: 99.9%
|
||||
- Email delivery rate: >98%
|
||||
- Successful archiving: 100%
|
||||
- Successful archiving: 100%
|
||||
|
||||
## Documentation & Development Practices
|
||||
|
||||
### Documentation Guidelines:
|
||||
- **NEVER create new documentation files for simple tasks**
|
||||
- **ALWAYS update existing documentation (like this CLAUDE.md)**
|
||||
- Only create new .md files when explicitly requested
|
||||
- Avoid creating temporary scripts for one-off tasks
|
||||
|
||||
### Development Best Practices:
|
||||
- Test all changes thoroughly in local environment first
|
||||
- Use version control for all changes
|
||||
- Keep commits atomic and well-described
|
||||
- Review impact on all integrated services
|
||||
- Consider backward compatibility
|
||||
- Update tests when changing functionality
|
||||
|
||||
### Production Deployment Checklist:
|
||||
- [ ] All tests passing locally
|
||||
- [ ] Linting and type checks pass
|
||||
- [ ] Database migrations tested with rollback plan
|
||||
- [ ] Environment variables documented
|
||||
- [ ] Backup strategy confirmed
|
||||
- [ ] Monitoring alerts configured
|
||||
- [ ] Rollback procedure documented
|
||||
- [ ] Stakeholders notified of maintenance window
|
||||
@@ -0,0 +1,714 @@
|
||||
# 🚀 Production Todo List - PicPeak Enhancements
|
||||
|
||||
**Priority:** HIGH - These are production fixes and enhancements
|
||||
**Estimated Time:** 2-3 days
|
||||
**Status:** Ready for Implementation
|
||||
|
||||
---
|
||||
|
||||
## 📋 Action Items Overview
|
||||
|
||||
1. [Password Complexity Settings](#1-password-complexity-settings)
|
||||
2. [Gallery Login Page - Remove Event Date](#2-gallery-login-page---remove-event-date)
|
||||
3. [Analytics Umami Configuration Check](#3-analytics-umami-configuration-check)
|
||||
4. [Analytics Numbers Accuracy Fix](#4-analytics-numbers-accuracy-fix)
|
||||
5. [Missing Translation Key Fix](#5-missing-translation-key-fix)
|
||||
6. [Complete Translation Audit](#6-complete-translation-audit)
|
||||
7. [CMS Page Long German Text Formatting](#7-cms-page-long-german-text-formatting)
|
||||
8. [Event Creation Date Format Fix](#8-event-creation-date-format-fix)
|
||||
9. [Language Selector Country Flags Chrome Fix](#9-language-selector-country-flags-chrome-fix)
|
||||
|
||||
---
|
||||
|
||||
## 1. Password Complexity Settings
|
||||
|
||||
**Problem:** Admin security tab only has password minimum length setting, no complexity requirements.
|
||||
|
||||
**Current State:**
|
||||
- File: `frontend/src/pages/admin/SettingsPage.tsx` (lines 635-669)
|
||||
- Backend: `backend/src/utils/passwordValidation.js` has complexity logic but not exposed in settings
|
||||
|
||||
**Implementation:**
|
||||
|
||||
### Frontend Changes:
|
||||
```typescript
|
||||
// File: frontend/src/pages/admin/SettingsPage.tsx
|
||||
// Add to securitySettings state (around line 61):
|
||||
const [securitySettings, setSecuritySettings] = useState({
|
||||
require_password: true,
|
||||
password_min_length: 8,
|
||||
password_complexity_level: 'medium', // ADD THIS
|
||||
enable_2fa: false,
|
||||
session_timeout_minutes: 60,
|
||||
max_login_attempts: 5,
|
||||
enable_recaptcha: false,
|
||||
recaptcha_site_key: '',
|
||||
recaptcha_secret_key: ''
|
||||
});
|
||||
|
||||
// Add complexity setting UI after password_min_length (around line 660):
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
||||
{t('settings.security.passwordComplexity')}
|
||||
</label>
|
||||
<select
|
||||
value={securitySettings.password_complexity_level}
|
||||
onChange={(e) => setSecuritySettings(prev => ({ ...prev, password_complexity_level: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500"
|
||||
>
|
||||
<option value="low">{t('settings.security.complexityLow')}</option>
|
||||
<option value="medium">{t('settings.security.complexityMedium')}</option>
|
||||
<option value="high">{t('settings.security.complexityHigh')}</option>
|
||||
</select>
|
||||
<p className="text-xs text-neutral-500 mt-1">
|
||||
{t('settings.security.complexityHelp')}
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Translation Updates:
|
||||
```json
|
||||
// File: frontend/src/i18n/locales/en.json (add to settings.security):
|
||||
"passwordComplexity": "Password Complexity Level",
|
||||
"complexityLow": "Low - Length only",
|
||||
"complexityMedium": "Medium - Letters and numbers",
|
||||
"complexityHigh": "High - Letters, numbers, and symbols",
|
||||
"complexityHelp": "Controls password requirements for new gallery passwords"
|
||||
|
||||
// File: frontend/src/i18n/locales/de.json (add to settings.security):
|
||||
"passwordComplexity": "Passwort-Komplexitätsstufe",
|
||||
"complexityLow": "Niedrig - Nur Länge",
|
||||
"complexityMedium": "Mittel - Buchstaben und Zahlen",
|
||||
"complexityHigh": "Hoch - Buchstaben, Zahlen und Symbole",
|
||||
"complexityHelp": "Steuert Passwort-Anforderungen für neue Galerie-Passwörter"
|
||||
```
|
||||
|
||||
### Backend Changes:
|
||||
```javascript
|
||||
// File: backend/src/utils/passwordValidation.js
|
||||
// Update PASSWORD_CONFIG based on settings (around line 8):
|
||||
const getPasswordConfigFromSettings = async () => {
|
||||
const { db } = require('../database/db');
|
||||
const settings = await db('admin_settings').select('key', 'value');
|
||||
const settingsMap = settings.reduce((acc, setting) => {
|
||||
acc[setting.key] = setting.value;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const complexityLevel = settingsMap.security_password_complexity_level || 'medium';
|
||||
|
||||
return {
|
||||
...PASSWORD_CONFIG,
|
||||
minLength: parseInt(settingsMap.security_password_min_length) || 8,
|
||||
requireUppercase: complexityLevel !== 'low',
|
||||
requireLowercase: complexityLevel !== 'low',
|
||||
requireNumbers: complexityLevel === 'high' || complexityLevel === 'medium',
|
||||
requireSpecialChars: complexityLevel === 'high',
|
||||
minStrengthScore: complexityLevel === 'high' ? 3 : (complexityLevel === 'medium' ? 2 : 1)
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Gallery Login Page - Remove Event Date
|
||||
|
||||
**Problem:** Gallery login shows event date which is often used as password, creating security risk.
|
||||
|
||||
**Current State:**
|
||||
- File: `frontend/src/pages/GalleryPage.tsx` (lines 275-285)
|
||||
- Shows both event name and date with calendar icon
|
||||
|
||||
**Implementation:**
|
||||
|
||||
### Frontend Changes:
|
||||
```typescript
|
||||
// File: frontend/src/pages/GalleryPage.tsx
|
||||
// Replace the date display section (around lines 280-285):
|
||||
|
||||
// REMOVE THIS:
|
||||
/*
|
||||
<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>
|
||||
*/
|
||||
|
||||
// REPLACE WITH:
|
||||
<div className="text-center text-xs sm:text-sm" style={{ color: 'var(--color-text, #171717)', opacity: 0.7 }}>
|
||||
<span className="truncate">{galleryInfo?.event_type ? t(`events.types.${galleryInfo.event_type}`) : ''}</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Additional Layout Improvements:
|
||||
```typescript
|
||||
// File: frontend/src/pages/GalleryPage.tsx
|
||||
// Update the header section for better visual balance (around line 275):
|
||||
<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>
|
||||
{/* Event type instead of date */}
|
||||
{galleryInfo?.event_type && (
|
||||
<div className="text-center text-sm" style={{ color: 'var(--color-text, #171717)', opacity: 0.7 }}>
|
||||
<span className="px-3 py-1 bg-white/20 rounded-full backdrop-blur-sm">
|
||||
{t(`events.types.${galleryInfo.event_type}`)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Analytics Umami Configuration Check
|
||||
|
||||
**Problem:** Analytics page shows "Umami Analytics Not Configured" even when configured in settings.
|
||||
|
||||
**Current State:**
|
||||
- File: `frontend/src/pages/admin/AnalyticsPage.tsx` (lines 67-87)
|
||||
- Check logic may not be working correctly
|
||||
|
||||
**Implementation:**
|
||||
|
||||
### Frontend Fix:
|
||||
```typescript
|
||||
// File: frontend/src/pages/admin/AnalyticsPage.tsx
|
||||
// Fix the Umami configuration check (around lines 67-87):
|
||||
|
||||
// REPLACE the useEffect:
|
||||
useEffect(() => {
|
||||
const fetchUmamiConfig = async () => {
|
||||
try {
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/public/settings`);
|
||||
const settings = await response.json();
|
||||
|
||||
// Check if Umami is properly configured
|
||||
const isConfigured = settings.analytics_umami_enabled &&
|
||||
settings.analytics_umami_url &&
|
||||
settings.analytics_umami_website_id;
|
||||
|
||||
if (isConfigured) {
|
||||
setUmamiConfig({
|
||||
url: settings.analytics_umami_url,
|
||||
shareUrl: settings.analytics_umami_share_url,
|
||||
websiteId: settings.analytics_umami_website_id,
|
||||
enabled: true
|
||||
});
|
||||
} else {
|
||||
// Fall back to environment variables
|
||||
const envConfigured = import.meta.env.VITE_UMAMI_URL &&
|
||||
import.meta.env.VITE_UMAMI_WEBSITE_ID;
|
||||
|
||||
setUmamiConfig({
|
||||
url: import.meta.env.VITE_UMAMI_URL,
|
||||
shareUrl: import.meta.env.VITE_UMAMI_SHARE_URL,
|
||||
websiteId: import.meta.env.VITE_UMAMI_WEBSITE_ID,
|
||||
enabled: envConfigured
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch Umami config:', error);
|
||||
setUmamiConfig({ enabled: false });
|
||||
}
|
||||
};
|
||||
|
||||
fetchUmamiConfig();
|
||||
}, []);
|
||||
|
||||
// Update the configuration notice condition (around line 441):
|
||||
{!umamiConfig.enabled && (
|
||||
<Card padding="md" className="mt-6 bg-amber-50 border-amber-200">
|
||||
<div className="flex items-start gap-3">
|
||||
<Activity className="w-5 h-5 text-amber-600 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-amber-900">{t('analytics.notConfigured')}</p>
|
||||
<p className="text-sm text-amber-700 mt-1">
|
||||
{t('analytics.configureInstructions')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Analytics Numbers Accuracy Fix
|
||||
|
||||
**Problem:** Dashboard shows correct numbers but analytics page shows different numbers.
|
||||
|
||||
**Current State:**
|
||||
- Dashboard: `frontend/src/services/admin.service.ts` `getDashboardStats()`
|
||||
- Analytics: `frontend/src/services/admin.service.ts` `getAnalytics()`
|
||||
- Backend: Different endpoints with potentially different calculation logic
|
||||
|
||||
**Implementation:**
|
||||
|
||||
### Backend Investigation and Fix:
|
||||
```javascript
|
||||
// File: backend/src/routes/adminDashboard.js
|
||||
// Ensure consistent calculation logic in both /stats and /analytics endpoints
|
||||
|
||||
// Update the analytics endpoint (around line 216) to use the same calculation as stats:
|
||||
router.get('/analytics', adminAuth, async (req, res) => {
|
||||
try {
|
||||
const days = sanitizeDays(req.query.days || 7);
|
||||
|
||||
// Use same calculation logic as /stats endpoint
|
||||
const thirtyDaysAgo = new Date();
|
||||
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - days);
|
||||
|
||||
// Get total downloads - SAME logic as /stats
|
||||
const totalDownloads = await db('access_logs')
|
||||
.whereIn('action', ['download', 'download_all'])
|
||||
.where('timestamp', '>=', thirtyDaysAgo.toISOString())
|
||||
.count('id as count')
|
||||
.first();
|
||||
|
||||
// Get total views - SAME logic as /stats
|
||||
const totalViews = await db('access_logs')
|
||||
.where('action', 'view')
|
||||
.where('timestamp', '>=', thirtyDaysAgo.toISOString())
|
||||
.count('id as count')
|
||||
.first();
|
||||
|
||||
// ... rest of the analytics logic
|
||||
|
||||
// Add totals to response for verification
|
||||
res.json({
|
||||
chartData: dates,
|
||||
topGalleries,
|
||||
devices,
|
||||
totals: {
|
||||
totalViews: totalViews.count,
|
||||
totalDownloads: totalDownloads.count,
|
||||
period: `${days} days`
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Analytics error:', error);
|
||||
res.status(500).json({ error: 'Failed to fetch analytics data' });
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Frontend Verification:
|
||||
```typescript
|
||||
// File: frontend/src/pages/admin/AnalyticsPage.tsx
|
||||
// Add debug information in development (around line 107):
|
||||
|
||||
const analytics: ComponentAnalyticsData | undefined = React.useMemo(() => {
|
||||
if (!apiData) return undefined;
|
||||
|
||||
// Calculate totals from chart data
|
||||
const totalViews = apiData.chartData.reduce((sum, day) => sum + day.views, 0);
|
||||
const totalDownloads = apiData.chartData.reduce((sum, day) => sum + day.downloads, 0);
|
||||
|
||||
// Debug: Compare with API totals in development
|
||||
if (process.env.NODE_ENV === 'development' && apiData.totals) {
|
||||
console.log('Analytics Debug:', {
|
||||
calculatedViews: totalViews,
|
||||
apiTotalViews: apiData.totals.totalViews,
|
||||
calculatedDownloads: totalDownloads,
|
||||
apiTotalDownloads: apiData.totals.totalDownloads,
|
||||
period: apiData.totals.period
|
||||
});
|
||||
}
|
||||
|
||||
// ... rest of the calculation
|
||||
}, [apiData]);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Missing Translation Key Fix
|
||||
|
||||
**Problem:** Missing translation key `admin.activities.analytics_settings_updated` in recent activities.
|
||||
|
||||
**Current State:**
|
||||
- Key not found in `frontend/src/i18n/locales/en.json` or `de.json`
|
||||
|
||||
**Implementation:**
|
||||
|
||||
### Translation Updates:
|
||||
```json
|
||||
// File: frontend/src/i18n/locales/en.json
|
||||
// Add to admin.activities section (around line 785):
|
||||
"analytics_settings_updated": "Analytics settings updated"
|
||||
|
||||
// File: frontend/src/i18n/locales/de.json
|
||||
// Add to admin.activities section (around line 710):
|
||||
"analytics_settings_updated": "Analytik-Einstellungen aktualisiert"
|
||||
```
|
||||
|
||||
### Backend Activity Logging:
|
||||
```javascript
|
||||
// File: backend/src/routes/adminSettings.js (or wherever analytics settings are updated)
|
||||
// Ensure activity is logged with correct key:
|
||||
|
||||
await logActivity(req.admin.id, 'analytics_settings_updated', {
|
||||
settingsUpdated: Object.keys(updateData).filter(key => key.startsWith('analytics_')),
|
||||
timestamp: new Date()
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Complete Translation Audit
|
||||
|
||||
**Problem:** Need to check all recent activity types for missing translations.
|
||||
|
||||
**Current State:**
|
||||
- Activity types defined in backend, translations in frontend
|
||||
|
||||
**Implementation:**
|
||||
|
||||
### Audit Script:
|
||||
```bash
|
||||
# Create a script to find missing translation keys
|
||||
# File: scripts/audit-translations.js
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
// Read translation files
|
||||
const enTranslations = JSON.parse(fs.readFileSync('frontend/src/i18n/locales/en.json', 'utf8'));
|
||||
const deTranslations = JSON.parse(fs.readFileSync('frontend/src/i18n/locales/de.json', 'utf8'));
|
||||
|
||||
// Common activity types that should exist
|
||||
const requiredActivityKeys = [
|
||||
'event_created', 'event_updated', 'event_deleted', 'event_archived',
|
||||
'photos_uploaded', 'photo_deleted', 'photos_bulk_deleted',
|
||||
'archive_downloaded', 'archive_deleted', 'archive_restored',
|
||||
'email_config_updated', 'email_template_updated',
|
||||
'branding_updated', 'theme_updated', 'analytics_settings_updated',
|
||||
'general_settings_updated', 'security_settings_updated',
|
||||
'category_created', 'category_updated', 'category_deleted',
|
||||
'cms_page_updated', 'favicon_uploaded',
|
||||
'bulk_download', 'gallery_password_entry', 'expiration_warning_viewed'
|
||||
];
|
||||
|
||||
console.log('Missing English translations:');
|
||||
requiredActivityKeys.forEach(key => {
|
||||
if (!enTranslations.admin?.activities?.[key]) {
|
||||
console.log(`- admin.activities.${key}`);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('\nMissing German translations:');
|
||||
requiredActivityKeys.forEach(key => {
|
||||
if (!deTranslations.admin?.activities?.[key]) {
|
||||
console.log(`- admin.activities.${key}`);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Missing Translations to Add:
|
||||
```json
|
||||
// File: frontend/src/i18n/locales/en.json
|
||||
// Add any missing keys to admin.activities:
|
||||
"analytics_settings_updated": "Analytics settings updated",
|
||||
"cms_page_updated": "CMS page updated: {{page}}",
|
||||
"security_settings_updated": "Security settings updated",
|
||||
"password_reset": "Password reset for: {{eventName}}",
|
||||
"admin_logout": "Admin {{actorName}} logged out",
|
||||
"system_activity": "System activity: {{type}}"
|
||||
|
||||
// File: frontend/src/i18n/locales/de.json
|
||||
// German equivalents:
|
||||
"analytics_settings_updated": "Analytik-Einstellungen aktualisiert",
|
||||
"cms_page_updated": "CMS-Seite aktualisiert: {{page}}",
|
||||
"security_settings_updated": "Sicherheitseinstellungen aktualisiert",
|
||||
"password_reset": "Passwort zurückgesetzt für: {{eventName}}",
|
||||
"admin_logout": "Admin {{actorName}} abgemeldet",
|
||||
"system_activity": "Systemaktivität: {{type}}"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. CMS Page Long German Text Formatting
|
||||
|
||||
**Problem:** Long German text like "Datenschutzerklärung" pushes image to left and looks ugly.
|
||||
|
||||
**Current State:**
|
||||
- File: `frontend/src/pages/admin/CMSPageEnhanced.tsx` (lines 130-170)
|
||||
- File: `frontend/src/pages/admin/CMSPage.tsx` (lines 90-110)
|
||||
|
||||
**Implementation:**
|
||||
|
||||
### CSS Fix:
|
||||
```typescript
|
||||
// File: frontend/src/pages/admin/CMSPageEnhanced.tsx
|
||||
// Update the page selection buttons (around line 130):
|
||||
|
||||
<button
|
||||
key={page.slug}
|
||||
onClick={() => {
|
||||
if (hasUnsavedChanges) {
|
||||
if (confirm('You have unsaved changes. Do you want to save them?')) {
|
||||
handleSave();
|
||||
}
|
||||
}
|
||||
setSelectedPage(page.slug);
|
||||
}}
|
||||
className={`w-full text-left px-4 py-3 rounded-lg transition-colors flex items-center gap-3 ${
|
||||
selectedPage === page.slug
|
||||
? 'bg-primary-100 text-primary-700 border border-primary-300'
|
||||
: 'bg-white border border-neutral-200 hover:bg-neutral-50'
|
||||
}`}
|
||||
>
|
||||
<FileText className="w-5 h-5 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0"> {/* Add min-w-0 for text overflow */}
|
||||
<p className="font-medium text-sm truncate" title={t(`legal.${page.slug}`)}>
|
||||
{t(`legal.${page.slug}`)}
|
||||
</p>
|
||||
<p className="text-xs text-neutral-500 truncate">/{page.slug}</p>
|
||||
</div>
|
||||
{selectedPage === page.slug && hasUnsavedChanges && (
|
||||
<div className="w-2 h-2 bg-yellow-500 rounded-full flex-shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
```
|
||||
|
||||
### Alternative - Responsive Layout:
|
||||
```typescript
|
||||
// File: frontend/src/pages/admin/CMSPageEnhanced.tsx
|
||||
// Alternative: Use responsive text sizing
|
||||
|
||||
<p className="font-medium text-sm sm:text-base truncate" title={t(`legal.${page.slug}`)}>
|
||||
{/* For very long German words, show abbreviated version */}
|
||||
{t(`legal.${page.slug}`).length > 15
|
||||
? `${t(`legal.${page.slug}`).substring(0, 12)}...`
|
||||
: t(`legal.${page.slug}`)
|
||||
}
|
||||
</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Event Creation Date Format Fix
|
||||
|
||||
**Problem:** Event creation page uses browser English format instead of saved admin settings date format.
|
||||
|
||||
**Current State:**
|
||||
- Files: `frontend/src/pages/admin/CreateEventPageEnhanced.tsx`, `CreateEventPage.tsx`
|
||||
- Uses browser locale instead of admin date format settings
|
||||
|
||||
**Implementation:**
|
||||
|
||||
### Hook Enhancement:
|
||||
```typescript
|
||||
// File: frontend/src/hooks/useLocalizedDate.ts
|
||||
// Add admin settings integration:
|
||||
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { format as dateFnsFormat, formatDistanceToNow as dateFnsFormatDistanceToNow } from 'date-fns';
|
||||
import { de, enUS, enGB } from 'date-fns/locale';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { settingsService } from '../services/settings.service';
|
||||
|
||||
export const useLocalizedDate = () => {
|
||||
const { i18n } = useTranslation();
|
||||
|
||||
// Fetch admin date format settings
|
||||
const { data: settings } = useQuery({
|
||||
queryKey: ['admin-date-settings'],
|
||||
queryFn: () => settingsService.getAllSettings(),
|
||||
staleTime: 10 * 60 * 1000, // Cache for 10 minutes
|
||||
});
|
||||
|
||||
const getLocale = () => {
|
||||
// Use admin settings if available, otherwise fall back to i18n language
|
||||
const savedFormat = settings?.general_date_format;
|
||||
if (savedFormat?.locale) {
|
||||
switch (savedFormat.locale) {
|
||||
case 'en-US': return enUS;
|
||||
case 'en-GB': return enGB;
|
||||
case 'de': return de;
|
||||
default: return i18n.language === 'de' ? de : enUS;
|
||||
}
|
||||
}
|
||||
return i18n.language === 'de' ? de : enUS;
|
||||
};
|
||||
|
||||
const getDateFormat = () => {
|
||||
const savedFormat = settings?.general_date_format?.format;
|
||||
if (savedFormat) {
|
||||
// Convert admin format to date-fns format
|
||||
switch (savedFormat) {
|
||||
case 'DD/MM/YYYY': return 'dd/MM/yyyy';
|
||||
case 'MM/DD/YYYY': return 'MM/dd/yyyy';
|
||||
case 'YYYY-MM-DD': return 'yyyy-MM-dd';
|
||||
case 'DD.MM.YYYY': return 'dd.MM.yyyy';
|
||||
default: return 'dd/MM/yyyy';
|
||||
}
|
||||
}
|
||||
return i18n.language === 'de' ? 'dd.MM.yyyy' : 'MM/dd/yyyy';
|
||||
};
|
||||
|
||||
const format = (date: Date | string, formatStr?: string) => {
|
||||
const dateObj = typeof date === 'string' ? new Date(date) : date;
|
||||
const finalFormat = formatStr || getDateFormat();
|
||||
return dateFnsFormat(dateObj, finalFormat, { locale: getLocale() });
|
||||
};
|
||||
|
||||
// ... rest of the hook
|
||||
};
|
||||
```
|
||||
|
||||
### Event Creation Page Fix:
|
||||
```typescript
|
||||
// File: frontend/src/pages/admin/CreateEventPageEnhanced.tsx
|
||||
// Update the expiration date display (around line 495):
|
||||
|
||||
{formData.event_date && (
|
||||
<p className="mt-2 text-sm text-neutral-500">
|
||||
{t('events.expiresOn')}: {format(addDays(new Date(formData.event_date), formData.expires_in_days), 'PPP')}
|
||||
</p>
|
||||
)}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Language Selector Country Flags Chrome Fix
|
||||
|
||||
**Problem:** Country flags not showing in Chrome browser on Windows in admin language selector.
|
||||
|
||||
**Current State:**
|
||||
- File: `frontend/src/components/common/LanguageSelector.tsx` (lines 5-8)
|
||||
- Uses emoji flags: `🇬🇧`, `🇩🇪`
|
||||
|
||||
**Implementation:**
|
||||
|
||||
### SVG Icon Replacement:
|
||||
```typescript
|
||||
// File: frontend/src/components/common/LanguageSelector.tsx
|
||||
// Replace emoji flags with SVG icons or image flags:
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Globe } from 'lucide-react';
|
||||
|
||||
// SVG flag components for better browser compatibility
|
||||
const FlagGB: React.FC<{ className?: string }> = ({ className = "w-4 h-4" }) => (
|
||||
<svg className={className} viewBox="0 0 640 480" fill="none">
|
||||
<path fill="#012169" d="M0 0h640v480H0z"/>
|
||||
<path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z"/>
|
||||
<path fill="#C8102E" d="m424 281 216 159v40L369 281h55zm-184 20 6 35L54 480H0l246-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z"/>
|
||||
<path fill="#FFF" d="M241 0v480h160V0H241zM0 160v160h640V160H0z"/>
|
||||
<path fill="#C8102E" d="M0 193v96h640v-96H0zM273 0v480h96V0h-96z"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const FlagDE: React.FC<{ className?: string }> = ({ className = "w-4 h-4" }) => (
|
||||
<svg className={className} viewBox="0 0 640 480" fill="none">
|
||||
<path fill="#ffce00" d="M0 320h640v160H0z"/>
|
||||
<path d="M0 0h640v160H0z"/>
|
||||
<path fill="#d00" d="M0 160h640v160H0z"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const languages = [
|
||||
{ code: 'en', name: 'English', flag: FlagGB },
|
||||
{ code: 'de', name: 'Deutsch', flag: FlagDE },
|
||||
];
|
||||
|
||||
export const LanguageSelector: React.FC = () => {
|
||||
const { i18n } = useTranslation();
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
|
||||
const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];
|
||||
|
||||
const handleLanguageChange = (languageCode: string) => {
|
||||
i18n.changeLanguage(languageCode);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-neutral-700 bg-white border border-neutral-300 rounded-lg hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
>
|
||||
<Globe className="w-4 h-4" />
|
||||
<currentLanguage.flag className="w-4 h-4" />
|
||||
<span>{currentLanguage.name}</span>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-neutral-200 py-1 z-50">
|
||||
{languages.map((language) => (
|
||||
<button
|
||||
key={language.code}
|
||||
onClick={() => handleLanguageChange(language.code)}
|
||||
className={`w-full text-left px-4 py-2 text-sm hover:bg-neutral-50 flex items-center gap-3 ${
|
||||
language.code === i18n.language
|
||||
? 'text-primary-600 bg-primary-50'
|
||||
: 'text-neutral-700'
|
||||
}`}
|
||||
>
|
||||
<language.flag className="w-4 h-4" />
|
||||
<span>{language.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Alternative - Image Flags:
|
||||
```typescript
|
||||
// Alternative solution using flag images:
|
||||
const languages = [
|
||||
{ code: 'en', name: 'English', flag: '/flags/gb.svg' },
|
||||
{ code: 'de', name: 'Deutsch', flag: '/flags/de.svg' },
|
||||
];
|
||||
|
||||
// Add images to public/flags/ directory
|
||||
// Use: <img src={language.flag} alt={language.name} className="w-4 h-4" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Testing Instructions
|
||||
|
||||
### After implementing each fix:
|
||||
|
||||
1. **Password Complexity**: Test different complexity levels in admin settings
|
||||
2. **Gallery Login**: Verify event date is hidden on gallery login pages
|
||||
3. **Analytics Check**: Verify "Not Configured" message appears/disappears correctly
|
||||
4. **Analytics Numbers**: Compare dashboard vs analytics page numbers
|
||||
5. **Translations**: Check recent activities display correct translations
|
||||
6. **CMS Formatting**: Test with long German page names
|
||||
7. **Date Format**: Test event creation with different admin date settings
|
||||
8. **Language Flags**: Test language selector in Chrome on Windows
|
||||
|
||||
### Regression Testing:
|
||||
- [ ] Gallery login still works correctly
|
||||
- [ ] Analytics page displays correctly when Umami is configured
|
||||
- [ ] Admin settings save and load correctly
|
||||
- [ ] Event creation works with all date formats
|
||||
- [ ] Language switching works in all browsers
|
||||
|
||||
---
|
||||
|
||||
## 📝 Notes
|
||||
|
||||
- All changes maintain backward compatibility
|
||||
- No database schema changes required
|
||||
- Frontend changes are non-breaking
|
||||
- Can be deployed incrementally
|
||||
- All text is properly internationalized
|
||||
|
||||
**⚠️ Important**: Test each fix in isolation before combining, especially the analytics changes as they affect production data display.
|
||||
+4
-4
@@ -40,10 +40,10 @@ const config = {
|
||||
keepAliveInitialDelayMillis: 0
|
||||
},
|
||||
pool: {
|
||||
min: 2,
|
||||
max: 10,
|
||||
acquireTimeoutMillis: 30000,
|
||||
createTimeoutMillis: 30000,
|
||||
min: 5,
|
||||
max: 25,
|
||||
acquireTimeoutMillis: 60000,
|
||||
createTimeoutMillis: 60000,
|
||||
idleTimeoutMillis: 30000,
|
||||
reapIntervalMillis: 1000,
|
||||
createRetryIntervalMillis: 200,
|
||||
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "picpeak-backend",
|
||||
"version": "1.0.65",
|
||||
"version": "1.0.71",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "picpeak-backend",
|
||||
"version": "1.0.65",
|
||||
"version": "1.0.71",
|
||||
"dependencies": {
|
||||
"adm-zip": "^0.5.16",
|
||||
"archiver": "^5.3.1",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "picpeak-backend",
|
||||
"version": "1.0.65",
|
||||
"version": "1.0.71",
|
||||
"description": "Backend for PicPeak event photo sharing platform",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
|
||||
@@ -23,7 +23,6 @@ const { initializeTransporter, startEmailQueueProcessor } = require('./src/servi
|
||||
const { maintenanceMiddleware } = require('./src/middleware/maintenance');
|
||||
const { sessionTimeoutMiddleware } = require('./src/middleware/sessionTimeout');
|
||||
const { createRateLimiter, createAuthRateLimiter } = require('./src/services/rateLimitService');
|
||||
const logger = require('./src/utils/logger');
|
||||
|
||||
// Import routes
|
||||
const authRoutes = require('./src/routes/auth-enhanced');
|
||||
|
||||
@@ -4,6 +4,33 @@ const knexConfig = require('../../knexfile');
|
||||
// Create database connection with built-in retry logic
|
||||
const db = knex(knexConfig);
|
||||
|
||||
// Connection retry configuration
|
||||
const MAX_RETRIES = 3;
|
||||
const RETRY_DELAY = 1000;
|
||||
|
||||
// Wrapper function to handle connection retries
|
||||
async function withRetry(queryFn, retries = MAX_RETRIES) {
|
||||
for (let i = 0; i < retries; i++) {
|
||||
try {
|
||||
return await queryFn();
|
||||
} catch (error) {
|
||||
const isConnectionError = error.message && (
|
||||
error.message.includes('Connection terminated unexpectedly') ||
|
||||
error.message.includes('Connection ended unexpectedly') ||
|
||||
error.message.includes('ECONNREFUSED') ||
|
||||
error.message.includes('ETIMEDOUT')
|
||||
);
|
||||
|
||||
if (isConnectionError && i < retries - 1) {
|
||||
console.log(`Database connection error, retrying in ${RETRY_DELAY}ms... (attempt ${i + 1}/${retries})`);
|
||||
await new Promise(resolve => setTimeout(resolve, RETRY_DELAY * (i + 1)));
|
||||
continue;
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function initializeDatabase() {
|
||||
// Events table
|
||||
const hasEventsTable = await db.schema.hasTable('events');
|
||||
@@ -225,4 +252,4 @@ async function logActivity(activityType, metadata = {}, eventId = null, actor =
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { db, initializeDatabase, logActivity };
|
||||
module.exports = { db, initializeDatabase, logActivity, withRetry };
|
||||
@@ -1,5 +1,5 @@
|
||||
const jwt = require('jsonwebtoken');
|
||||
const { db } = require('../database/db');
|
||||
const { db, withRetry } = require('../database/db');
|
||||
const { formatBoolean } = require('../utils/dbCompat');
|
||||
|
||||
// Middleware to verify gallery access
|
||||
@@ -11,13 +11,15 @@ 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),
|
||||
is_archived: formatBoolean(false)
|
||||
})
|
||||
.first();
|
||||
const event = await withRetry(async () => {
|
||||
return 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' });
|
||||
|
||||
@@ -10,7 +10,7 @@ const DEFAULT_SESSION_TIMEOUT = 60 * 60 * 1000;
|
||||
// Cache for session timeout setting
|
||||
let cachedTimeout = null;
|
||||
let cacheExpiry = 0;
|
||||
const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
|
||||
const CACHE_DURATION = 30 * 60 * 1000; // 30 minutes - reduced DB queries
|
||||
|
||||
// Clean up expired sessions every 5 minutes
|
||||
setInterval(() => {
|
||||
|
||||
@@ -48,9 +48,9 @@ router.get('/stats', adminAuth, async (req, res) => {
|
||||
.count('id as count')
|
||||
.first();
|
||||
|
||||
// Get total downloads (last 30 days)
|
||||
// Get total downloads (last 30 days) - include both single and bulk downloads
|
||||
const totalDownloads = await db('access_logs')
|
||||
.where('action', 'download')
|
||||
.whereIn('action', ['download', 'download_all'])
|
||||
.where('timestamp', '>=', thirtyDaysAgo.toISOString())
|
||||
.count('id as count')
|
||||
.first();
|
||||
@@ -73,7 +73,7 @@ router.get('/stats', adminAuth, async (req, res) => {
|
||||
.first();
|
||||
|
||||
const previousDownloads = await db('access_logs')
|
||||
.where('action', 'download')
|
||||
.whereIn('action', ['download', 'download_all'])
|
||||
.where('timestamp', '>=', sixtyDaysAgo.toISOString())
|
||||
.where('timestamp', '<', thirtyDaysAgo.toISOString())
|
||||
.count('id as count')
|
||||
@@ -243,10 +243,10 @@ router.get('/analytics', adminAuth, async (req, res) => {
|
||||
.where('timestamp', '>=', startDateStr)
|
||||
.groupByRaw('DATE(timestamp)');
|
||||
|
||||
// Get downloads per day
|
||||
// Get downloads per day - include both single and bulk downloads
|
||||
const downloadsData = await db('access_logs')
|
||||
.select(db.raw('DATE(timestamp) as date'), db.raw('COUNT(*) as count'))
|
||||
.where('action', 'download')
|
||||
.whereIn('action', ['download', 'download_all'])
|
||||
.where('timestamp', '>=', startDateStr)
|
||||
.groupByRaw('DATE(timestamp)');
|
||||
|
||||
@@ -272,14 +272,15 @@ router.get('/analytics', adminAuth, async (req, res) => {
|
||||
if (dateObj) dateObj.uniqueVisitors = row.count;
|
||||
});
|
||||
|
||||
// Get top galleries by views
|
||||
// Get top galleries by views with additional metrics
|
||||
const topGalleries = await db('access_logs')
|
||||
.select('events.event_name', 'events.slug')
|
||||
.select(db.raw('COUNT(*) as views'))
|
||||
.select('events.id', 'events.event_name', 'events.slug')
|
||||
.select(db.raw('COUNT(CASE WHEN action = \'view\' THEN 1 END) as views'))
|
||||
.select(db.raw('COUNT(DISTINCT CASE WHEN action = \'view\' THEN ip_address END) as uniqueVisitors'))
|
||||
.select(db.raw('COUNT(CASE WHEN action IN (\'download\', \'download_all\') THEN 1 END) as downloads'))
|
||||
.join('events', 'access_logs.event_id', 'events.id')
|
||||
.where('access_logs.action', 'view')
|
||||
.where('access_logs.timestamp', '>=', startDateStr)
|
||||
.groupBy('events.id')
|
||||
.groupBy('events.id', 'events.event_name', 'events.slug')
|
||||
.orderBy('views', 'desc')
|
||||
.limit(5);
|
||||
|
||||
@@ -309,10 +310,33 @@ router.get('/analytics', adminAuth, async (req, res) => {
|
||||
devices[d.device_type] = Math.round((d.count / totalDevices) * 100);
|
||||
});
|
||||
|
||||
// Calculate totals for the period (matching /stats logic)
|
||||
const totalViews = await db('access_logs')
|
||||
.where('action', 'view')
|
||||
.where('timestamp', '>=', startDateStr)
|
||||
.count('id as count')
|
||||
.first();
|
||||
|
||||
const totalDownloadsCount = await db('access_logs')
|
||||
.whereIn('action', ['download', 'download_all'])
|
||||
.where('timestamp', '>=', startDateStr)
|
||||
.count('id as count')
|
||||
.first();
|
||||
|
||||
const totalUniqueVisitors = await db('access_logs')
|
||||
.where('timestamp', '>=', startDateStr)
|
||||
.countDistinct('ip_address as count')
|
||||
.first();
|
||||
|
||||
res.json({
|
||||
chartData: dates,
|
||||
topGalleries,
|
||||
devices
|
||||
devices,
|
||||
totals: {
|
||||
views: totalViews?.count || 0,
|
||||
downloads: totalDownloadsCount?.count || 0,
|
||||
uniqueVisitors: totalUniqueVisitors?.count || 0
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Analytics error:', error);
|
||||
|
||||
@@ -496,6 +496,43 @@ router.put('/security', adminAuth, async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
// Update analytics settings
|
||||
router.put('/analytics', adminAuth, async (req, res) => {
|
||||
try {
|
||||
const settings = req.body;
|
||||
|
||||
// Update or insert each setting
|
||||
for (const [key, value] of Object.entries(settings)) {
|
||||
await db('app_settings')
|
||||
.insert({
|
||||
setting_key: key,
|
||||
setting_value: JSON.stringify(value),
|
||||
setting_type: 'analytics',
|
||||
updated_at: new Date()
|
||||
})
|
||||
.onConflict('setting_key')
|
||||
.merge({
|
||||
setting_value: JSON.stringify(value),
|
||||
updated_at: new Date()
|
||||
});
|
||||
}
|
||||
|
||||
// Log activity
|
||||
await db('activity_logs').insert({
|
||||
activity_type: 'analytics_settings_updated',
|
||||
actor_type: 'admin',
|
||||
actor_id: req.admin.id,
|
||||
actor_name: req.admin.username,
|
||||
metadata: JSON.stringify({ settings_count: Object.keys(settings).length })
|
||||
});
|
||||
|
||||
res.json({ message: 'Analytics settings updated successfully' });
|
||||
} catch (error) {
|
||||
console.error('Analytics settings update error:', error);
|
||||
res.status(500).json({ error: 'Failed to update analytics settings' });
|
||||
}
|
||||
});
|
||||
|
||||
// Get storage info
|
||||
router.get('/storage/info', adminAuth, async (req, res) => {
|
||||
try {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
const express = require('express');
|
||||
const { db } = require('../database/db');
|
||||
const { db, withRetry } = require('../database/db');
|
||||
const { adminAuth } = require('../middleware/auth-enhanced-v2');
|
||||
const fs = require('fs').promises;
|
||||
const path = require('path');
|
||||
|
||||
@@ -1,14 +1,20 @@
|
||||
const express = require('express');
|
||||
const { db } = require('../database/db');
|
||||
const { db, withRetry } = require('../database/db');
|
||||
const router = express.Router();
|
||||
|
||||
// Get public settings (branding and theme)
|
||||
router.get('/', async (req, res) => {
|
||||
try {
|
||||
// Fetch branding, theme, general, and select security settings
|
||||
const settings = await db('app_settings')
|
||||
.whereIn('setting_type', ['branding', 'theme', 'general', 'security'])
|
||||
.select('setting_key', 'setting_value');
|
||||
// Fetch branding, theme, general, and security settings
|
||||
// Note: We include analytics in the query but it might not exist yet
|
||||
const settings = await withRetry(async () => {
|
||||
return await db('app_settings')
|
||||
.where(function() {
|
||||
this.whereIn('setting_type', ['branding', 'theme', 'general', 'security', 'analytics'])
|
||||
.orWhere('setting_key', 'like', 'analytics_%');
|
||||
})
|
||||
.select('setting_key', 'setting_value');
|
||||
});
|
||||
|
||||
// Convert to object format
|
||||
const settingsObject = {};
|
||||
@@ -41,7 +47,12 @@ router.get('/', async (req, res) => {
|
||||
enable_analytics: settingsObject.general_enable_analytics !== false,
|
||||
enable_recaptcha: settingsObject.security_enable_recaptcha === true || settingsObject.security_enable_recaptcha === 'true',
|
||||
recaptcha_site_key: settingsObject.security_recaptcha_site_key || null,
|
||||
maintenance_mode: settingsObject.general_maintenance_mode === true || settingsObject.general_maintenance_mode === 'true'
|
||||
maintenance_mode: settingsObject.general_maintenance_mode === true || settingsObject.general_maintenance_mode === 'true',
|
||||
// Umami analytics configuration (only if enabled)
|
||||
umami_enabled: settingsObject.analytics_umami_enabled === true || settingsObject.analytics_umami_enabled === 'true',
|
||||
umami_url: (settingsObject.analytics_umami_enabled === true || settingsObject.analytics_umami_enabled === 'true') ? (settingsObject.analytics_umami_url || null) : null,
|
||||
umami_website_id: (settingsObject.analytics_umami_enabled === true || settingsObject.analytics_umami_enabled === 'true') ? (settingsObject.analytics_umami_website_id || null) : null,
|
||||
umami_share_url: (settingsObject.analytics_umami_enabled === true || settingsObject.analytics_umami_enabled === 'true') ? (settingsObject.analytics_umami_share_url || null) : null
|
||||
};
|
||||
|
||||
res.json(publicSettings);
|
||||
|
||||
@@ -60,6 +60,7 @@ async function processEmailQueue() {
|
||||
}
|
||||
|
||||
// Start email queue processor
|
||||
setInterval(processEmailQueue, 60000); // Process every minute
|
||||
// DISABLED: Using emailProcessor.js instead to prevent duplicate connections
|
||||
// setInterval(processEmailQueue, 60000); // Process every minute
|
||||
|
||||
module.exports = { sendEmail, processEmailQueue };
|
||||
|
||||
@@ -251,7 +251,7 @@ async function createAuthRateLimiter() {
|
||||
timestamp: new Date().toISOString(),
|
||||
headers: {
|
||||
'x-forwarded-for': req.headers['x-forwarded-for'],
|
||||
'x-real-ip': req.headers['x-real-ip'
|
||||
'x-real-ip': req.headers['x-real-ip']
|
||||
},
|
||||
requestUrl: req.originalUrl,
|
||||
authType: req.path.includes('admin') ? 'admin' : 'gallery',
|
||||
|
||||
@@ -113,6 +113,84 @@ function validatePassword(password, options = {}) {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get complexity settings from database
|
||||
* @returns {Object} - Password complexity configuration
|
||||
*/
|
||||
async function getPasswordComplexitySettings() {
|
||||
try {
|
||||
const { db, withRetry } = require('../database/db');
|
||||
|
||||
// Use retry wrapper to handle connection failures
|
||||
const settings = await withRetry(async () => {
|
||||
return await db('app_settings')
|
||||
.where('setting_key', 'security_password_complexity_level')
|
||||
.first();
|
||||
});
|
||||
|
||||
if (!settings || !settings.setting_value) {
|
||||
return 'moderate'; // Default
|
||||
}
|
||||
|
||||
const value = typeof settings.setting_value === 'string'
|
||||
? JSON.parse(settings.setting_value)
|
||||
: settings.setting_value;
|
||||
|
||||
return value;
|
||||
} catch (error) {
|
||||
logger.error('Failed to get password complexity settings:', error);
|
||||
return 'moderate'; // Default on error - ensures app continues working
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get password configuration based on complexity level
|
||||
* @param {string} complexityLevel - Complexity level (simple, moderate, strong, very_strong)
|
||||
* @returns {Object} - Password configuration
|
||||
*/
|
||||
function getPasswordConfigForComplexity(complexityLevel) {
|
||||
const configs = {
|
||||
simple: {
|
||||
minLength: 6,
|
||||
requireUppercase: false,
|
||||
requireLowercase: false,
|
||||
requireNumbers: false,
|
||||
requireSpecialChars: false,
|
||||
preventCommonPasswords: true,
|
||||
minStrengthScore: 0
|
||||
},
|
||||
moderate: {
|
||||
minLength: 8,
|
||||
requireUppercase: true,
|
||||
requireLowercase: true,
|
||||
requireNumbers: true,
|
||||
requireSpecialChars: false,
|
||||
preventCommonPasswords: true,
|
||||
minStrengthScore: 2
|
||||
},
|
||||
strong: {
|
||||
minLength: 12,
|
||||
requireUppercase: true,
|
||||
requireLowercase: true,
|
||||
requireNumbers: true,
|
||||
requireSpecialChars: false,
|
||||
preventCommonPasswords: true,
|
||||
minStrengthScore: 3
|
||||
},
|
||||
very_strong: {
|
||||
minLength: 12,
|
||||
requireUppercase: true,
|
||||
requireLowercase: true,
|
||||
requireNumbers: true,
|
||||
requireSpecialChars: true,
|
||||
preventCommonPasswords: true,
|
||||
minStrengthScore: 3
|
||||
}
|
||||
};
|
||||
|
||||
return configs[complexityLevel] || configs.moderate;
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate password for specific contexts (admin, gallery)
|
||||
* @param {string} password - Password to validate
|
||||
@@ -120,19 +198,16 @@ function validatePassword(password, options = {}) {
|
||||
* @param {Object} userData - Additional user data for context-aware validation
|
||||
* @returns {Object} - Validation result
|
||||
*/
|
||||
function validatePasswordInContext(password, context, userData = {}) {
|
||||
// For gallery context, use more lenient validation
|
||||
async function validatePasswordInContext(password, context, userData = {}) {
|
||||
// For gallery context, use dynamic complexity settings
|
||||
if (context === 'gallery') {
|
||||
// Gallery-specific validation options
|
||||
// Get complexity settings from database
|
||||
const complexityLevel = await getPasswordComplexitySettings();
|
||||
|
||||
// Get configuration for the complexity level
|
||||
const galleryOptions = {
|
||||
minLength: 6, // Reduced minimum length
|
||||
requireUppercase: false, // Don't require uppercase for galleries
|
||||
requireLowercase: false, // Don't require lowercase for galleries
|
||||
requireNumbers: false, // Numbers are optional
|
||||
requireSpecialChars: false, // Special chars are optional
|
||||
preventCommonPasswords: true, // Still prevent common passwords
|
||||
minStrengthScore: 0, // Accept any score for galleries
|
||||
skipStrengthCheck: true // Skip zxcvbn strength analysis for galleries
|
||||
...getPasswordConfigForComplexity(complexityLevel),
|
||||
skipStrengthCheck: complexityLevel === 'simple' // Skip zxcvbn for simple passwords
|
||||
};
|
||||
|
||||
// Base validation with gallery-specific options
|
||||
@@ -281,5 +356,7 @@ module.exports = {
|
||||
generateSecurePassword,
|
||||
getBcryptRounds,
|
||||
logPasswordValidationFailure,
|
||||
getPasswordComplexitySettings,
|
||||
getPasswordConfigForComplexity,
|
||||
PASSWORD_CONFIG
|
||||
};
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "picpeak-frontend",
|
||||
"version": "1.0.65",
|
||||
"version": "1.0.73",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "picpeak-frontend",
|
||||
"version": "1.0.65",
|
||||
"version": "1.0.73",
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.0.0",
|
||||
"@tiptap/extension-character-count": "^2.26.1",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "picpeak-frontend",
|
||||
"private": true,
|
||||
"version": "1.0.65",
|
||||
"version": "1.0.73",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
+27
-13
@@ -44,17 +44,26 @@ function App() {
|
||||
// Initialize Umami Analytics based on settings
|
||||
useEffect(() => {
|
||||
const initializeAnalytics = async () => {
|
||||
const umamiUrl = import.meta.env.VITE_UMAMI_URL;
|
||||
const umamiWebsiteId = import.meta.env.VITE_UMAMI_WEBSITE_ID;
|
||||
|
||||
if (umamiUrl && umamiWebsiteId) {
|
||||
try {
|
||||
// Fetch public settings to check if analytics is enabled
|
||||
const response = await fetch(`${getApiBaseUrl()}/public/settings`);
|
||||
const settings = await response.json();
|
||||
try {
|
||||
// Fetch public settings to get Umami configuration
|
||||
const response = await fetch(`${getApiBaseUrl()}/public/settings`);
|
||||
const settings = await response.json();
|
||||
|
||||
// Check if Umami is enabled and configured in backend settings
|
||||
if (settings.umami_enabled && settings.umami_url && settings.umami_website_id) {
|
||||
// Use backend configuration
|
||||
analyticsService.initialize({
|
||||
websiteId: settings.umami_website_id,
|
||||
hostUrl: settings.umami_url,
|
||||
autoTrack: true,
|
||||
doNotTrack: true
|
||||
});
|
||||
} else {
|
||||
// Fall back to environment variables if backend not configured
|
||||
const umamiUrl = import.meta.env.VITE_UMAMI_URL;
|
||||
const umamiWebsiteId = import.meta.env.VITE_UMAMI_WEBSITE_ID;
|
||||
|
||||
// Only initialize if analytics is enabled in settings
|
||||
if (settings.enable_analytics !== false) {
|
||||
if (umamiUrl && umamiWebsiteId && settings.enable_analytics !== false) {
|
||||
analyticsService.initialize({
|
||||
websiteId: umamiWebsiteId,
|
||||
hostUrl: umamiUrl,
|
||||
@@ -62,9 +71,14 @@ function App() {
|
||||
doNotTrack: true
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch settings for analytics:', error);
|
||||
// Initialize analytics anyway if settings fetch fails
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch settings for analytics:', error);
|
||||
// Fall back to environment variables on error
|
||||
const umamiUrl = import.meta.env.VITE_UMAMI_URL;
|
||||
const umamiWebsiteId = import.meta.env.VITE_UMAMI_WEBSITE_ID;
|
||||
|
||||
if (umamiUrl && umamiWebsiteId) {
|
||||
analyticsService.initialize({
|
||||
websiteId: umamiWebsiteId,
|
||||
hostUrl: umamiUrl,
|
||||
|
||||
@@ -2,9 +2,28 @@ import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Globe } from 'lucide-react';
|
||||
|
||||
// SVG Flag Components
|
||||
const GBFlag: React.FC<{ className?: string }> = ({ className = "w-5 h-5" }) => (
|
||||
<svg className={className} viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#012169" d="M0 0h640v480H0z"/>
|
||||
<path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z"/>
|
||||
<path fill="#C8102E" d="m424 281 216 159v40L369 281h55zm-184 20 6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z"/>
|
||||
<path fill="#FFF" d="M241 0v480h160V0H241zM0 160v160h640V160H0z"/>
|
||||
<path fill="#C8102E" d="M0 193v96h640v-96H0zM273 0v480h96V0h-96z"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const DEFlag: React.FC<{ className?: string }> = ({ className = "w-5 h-5" }) => (
|
||||
<svg className={className} viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#000" d="M0 0h640v160H0z"/>
|
||||
<path fill="#D00" d="M0 160h640v160H0z"/>
|
||||
<path fill="#FFCE00" d="M0 320h640v160H0z"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const languages = [
|
||||
{ code: 'en', name: 'English', flag: '🇬🇧' },
|
||||
{ code: 'de', name: 'Deutsch', flag: '🇩🇪' },
|
||||
{ code: 'en', name: 'English', Flag: GBFlag },
|
||||
{ code: 'de', name: 'Deutsch', Flag: DEFlag },
|
||||
];
|
||||
|
||||
export const LanguageSelector: React.FC = () => {
|
||||
@@ -25,7 +44,7 @@ export const LanguageSelector: React.FC = () => {
|
||||
className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-neutral-700 bg-white border border-neutral-300 rounded-lg hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
>
|
||||
<Globe className="w-4 h-4" />
|
||||
<span>{currentLanguage.flag}</span>
|
||||
<currentLanguage.Flag className="w-5 h-5" />
|
||||
<span>{currentLanguage.name}</span>
|
||||
</button>
|
||||
|
||||
@@ -41,7 +60,7 @@ export const LanguageSelector: React.FC = () => {
|
||||
: 'text-neutral-700'
|
||||
}`}
|
||||
>
|
||||
<span className="text-lg">{language.flag}</span>
|
||||
<language.Flag className="w-5 h-5" />
|
||||
<span>{language.name}</span>
|
||||
</button>
|
||||
))}
|
||||
|
||||
@@ -107,7 +107,7 @@ api.interceptors.response.use(
|
||||
localStorage.removeItem(`gallery_event_${gallerySlug}`);
|
||||
}
|
||||
// Don't redirect - let the component handle the auth state
|
||||
} else {
|
||||
} else if (galleryMatch) {
|
||||
// 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 = '/';
|
||||
|
||||
@@ -1,17 +1,28 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { format as dateFnsFormat, formatDistanceToNow as dateFnsFormatDistanceToNow } from 'date-fns';
|
||||
import { de, enUS } from 'date-fns/locale';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { settingsService } from '../services/settings.service';
|
||||
|
||||
export const useLocalizedDate = () => {
|
||||
const { i18n } = useTranslation();
|
||||
|
||||
// Fetch admin settings to get the date format
|
||||
const { data: settings } = useQuery({
|
||||
queryKey: ['admin-settings-general'],
|
||||
queryFn: () => settingsService.getSettingsByType('general'),
|
||||
staleTime: 5 * 60 * 1000, // Cache for 5 minutes
|
||||
});
|
||||
|
||||
const getLocale = () => {
|
||||
return i18n.language === 'de' ? de : enUS;
|
||||
};
|
||||
|
||||
const format = (date: Date | string, formatStr: string) => {
|
||||
const format = (date: Date | string, formatStr?: string) => {
|
||||
const dateObj = typeof date === 'string' ? new Date(date) : date;
|
||||
return dateFnsFormat(dateObj, formatStr, { locale: getLocale() });
|
||||
// Use admin-configured date format if available and no format string provided
|
||||
const dateFormat = formatStr || settings?.general_date_format || 'PPP';
|
||||
return dateFnsFormat(dateObj, dateFormat, { locale: getLocale() });
|
||||
};
|
||||
|
||||
const formatDistanceToNow = (date: Date | string, options?: { addSuffix?: boolean }) => {
|
||||
@@ -22,6 +33,7 @@ export const useLocalizedDate = () => {
|
||||
return {
|
||||
format,
|
||||
formatDistanceToNow,
|
||||
locale: getLocale()
|
||||
locale: getLocale(),
|
||||
dateFormat: settings?.general_date_format || 'PPP'
|
||||
};
|
||||
};
|
||||
@@ -428,6 +428,12 @@
|
||||
"requirePassword": "Passwort für alle Galerien erforderlich",
|
||||
"minPasswordLength": "Minimale Passwortlänge",
|
||||
"minPasswordLengthHelp": "Mindestanzahl von Zeichen für Galerie-Passwörter",
|
||||
"passwordComplexity": "Passwort-Komplexität",
|
||||
"passwordComplexityHelp": "Sicherheitsstufe für Galerie-Passwörter",
|
||||
"complexitySimple": "Einfach (6+ Zeichen, beliebiger Text)",
|
||||
"complexityModerate": "Moderat (8+ Zeichen, Groß-/Kleinschreibung/Zahlen)",
|
||||
"complexityStrong": "Stark (12+ Zeichen, Groß-/Kleinschreibung/Zahlen)",
|
||||
"complexityVeryStrong": "Sehr stark (12+ Zeichen, alle Zeichentypen)",
|
||||
"sessionAuth": "Sitzung & Authentifizierung",
|
||||
"sessionTimeout": "Sitzungs-Timeout (Minuten)",
|
||||
"sessionTimeoutHelp": "Admin-Sitzungs-Timeout in Minuten",
|
||||
@@ -721,6 +727,12 @@
|
||||
"category_deleted": "Kategorie gelöscht: {{categoryName}}",
|
||||
"general_settings_updated": "Allgemeine Einstellungen aktualisiert",
|
||||
"favicon_uploaded": "Favicon hochgeladen",
|
||||
"analytics_settings_updated": "Analytik-Einstellungen aktualisiert",
|
||||
"cms_page_updated": "CMS-Seite aktualisiert: {{page}}",
|
||||
"security_settings_updated": "Sicherheitseinstellungen aktualisiert",
|
||||
"password_reset": "Passwort zurückgesetzt für: {{eventName}}",
|
||||
"admin_logout": "Admin {{actorName}} abgemeldet",
|
||||
"system_activity": "Systemaktivität: {{type}}",
|
||||
"unknown": "Unbekannte Aktivität"
|
||||
}
|
||||
},
|
||||
|
||||
@@ -447,6 +447,12 @@
|
||||
"requirePassword": "Require password for all galleries",
|
||||
"minPasswordLength": "Minimum Password Length",
|
||||
"minPasswordLengthHelp": "Minimum number of characters for gallery passwords",
|
||||
"passwordComplexity": "Password Complexity",
|
||||
"passwordComplexityHelp": "Security level required for gallery passwords",
|
||||
"complexitySimple": "Simple (6+ chars, any text)",
|
||||
"complexityModerate": "Moderate (8+ chars, mixed case/numbers)",
|
||||
"complexityStrong": "Strong (12+ chars, uppercase/lowercase/numbers)",
|
||||
"complexityVeryStrong": "Very Strong (12+ chars, all character types)",
|
||||
"sessionAuth": "Session & Authentication",
|
||||
"sessionTimeout": "Session Timeout (minutes)",
|
||||
"sessionTimeoutHelp": "Admin session timeout in minutes",
|
||||
@@ -494,6 +500,30 @@
|
||||
"sent": "Sent",
|
||||
"failed": "Failed",
|
||||
"lastUpdate": "Last update"
|
||||
},
|
||||
"analytics": {
|
||||
"title": "Analytics",
|
||||
"umamiIntegration": "Umami Analytics Integration",
|
||||
"enableUmami": "Enable Umami Analytics",
|
||||
"umamiUrl": "Umami URL",
|
||||
"umamiUrlHelp": "The URL of your Umami instance (e.g., https://analytics.yourdomain.com)",
|
||||
"websiteId": "Website ID",
|
||||
"websiteIdHelp": "Your Umami website ID (found in Umami dashboard)",
|
||||
"shareUrl": "Share URL (Optional)",
|
||||
"shareUrlHelp": "Public share URL for embedding the full dashboard (create in Umami)",
|
||||
"umamiInfo": "About Umami Analytics",
|
||||
"umamiInfoText": "Umami is a privacy-focused, open-source analytics platform. It tracks page views, unique visitors, and custom events without using cookies.",
|
||||
"learnMore": "Learn more about Umami",
|
||||
"saveAnalyticsSettings": "Save Analytics Settings",
|
||||
"backendAnalytics": "Backend Analytics",
|
||||
"backendAnalyticsText": "The system also tracks basic analytics server-side for security and performance monitoring.",
|
||||
"tracked": "Tracked Metrics",
|
||||
"galleryViews": "Gallery page views",
|
||||
"photoDownloads": "Individual and bulk downloads",
|
||||
"uniqueVisitors": "Unique visitors by IP",
|
||||
"deviceTypes": "Device types from user agents",
|
||||
"privacy": "Privacy",
|
||||
"privacyText": "IP addresses are hashed for privacy. No personal data is stored. Analytics data is retained for 90 days."
|
||||
}
|
||||
},
|
||||
"analytics": {
|
||||
@@ -772,6 +802,12 @@
|
||||
"category_deleted": "Category deleted: {{categoryName}}",
|
||||
"general_settings_updated": "General settings updated",
|
||||
"favicon_uploaded": "Favicon uploaded",
|
||||
"analytics_settings_updated": "Analytics settings updated",
|
||||
"cms_page_updated": "CMS page updated: {{page}}",
|
||||
"security_settings_updated": "Security settings updated",
|
||||
"password_reset": "Password reset for: {{eventName}}",
|
||||
"admin_logout": "Admin {{actorName}} logged out",
|
||||
"system_activity": "System activity: {{type}}",
|
||||
"unknown": "Unknown activity"
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { Calendar, AlertCircle, Clock } from 'lucide-react';
|
||||
import { AlertCircle, Clock } from 'lucide-react';
|
||||
import { differenceInDays, parseISO } from 'date-fns';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useLocalizedDate } from '../hooks/useLocalizedDate';
|
||||
@@ -289,13 +289,9 @@ export const GalleryPage: React.FC = () => {
|
||||
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)' }}>
|
||||
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-2 px-2" style={{ color: 'var(--color-primary, #5C8762)' }}>
|
||||
{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 */}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
BarChart3,
|
||||
TrendingUp,
|
||||
@@ -17,6 +17,7 @@ import { Button, Card, Loading } from '../../components/common';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { adminService } from '../../services/admin.service';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { api } from '../../config/api';
|
||||
|
||||
// Map API response to component format
|
||||
interface ComponentAnalyticsData {
|
||||
@@ -52,10 +53,8 @@ export const AnalyticsPage: React.FC = () => {
|
||||
const [dateRange, setDateRange] = useState<'7d' | '30d' | '90d'>('7d');
|
||||
const [isEmbedMode, setIsEmbedMode] = useState(false);
|
||||
|
||||
// Check if Umami is configured
|
||||
const umamiUrl = import.meta.env.VITE_UMAMI_URL;
|
||||
// const umamiWebsiteId = import.meta.env.VITE_UMAMI_WEBSITE_ID;
|
||||
const umamiShareUrl = import.meta.env.VITE_UMAMI_SHARE_URL;
|
||||
// Check if Umami is configured from settings or environment
|
||||
const [umamiConfig, setUmamiConfig] = useState<{ url?: string; shareUrl?: string; enabled?: boolean }>({});
|
||||
|
||||
// Fetch analytics data from backend
|
||||
const { data: apiData, isLoading, refetch } = useQuery({
|
||||
@@ -73,6 +72,63 @@ export const AnalyticsPage: React.FC = () => {
|
||||
queryFn: () => adminService.getDashboardStats(),
|
||||
});
|
||||
|
||||
// Fetch Umami config from admin settings since we're in admin panel
|
||||
useEffect(() => {
|
||||
const fetchUmamiConfig = async () => {
|
||||
try {
|
||||
// Use admin API endpoint with auth token since we're in admin area
|
||||
const response = await api.get('/admin/settings');
|
||||
const settings = response.data;
|
||||
|
||||
// Transform the settings array to object
|
||||
const settingsMap = settings.reduce((acc: any, setting: any) => {
|
||||
acc[setting.key] = setting.value;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Check if Umami is enabled in admin settings
|
||||
if (settingsMap.analytics_umami_enabled && settingsMap.analytics_umami_url && settingsMap.analytics_umami_website_id) {
|
||||
setUmamiConfig({
|
||||
url: settingsMap.analytics_umami_url,
|
||||
shareUrl: settingsMap.analytics_umami_share_url,
|
||||
enabled: true
|
||||
});
|
||||
} else {
|
||||
// Fall back to environment variables if they exist
|
||||
const envUrl = import.meta.env.VITE_UMAMI_URL;
|
||||
const envWebsiteId = import.meta.env.VITE_UMAMI_WEBSITE_ID;
|
||||
|
||||
if (envUrl && envWebsiteId) {
|
||||
setUmamiConfig({
|
||||
url: envUrl,
|
||||
shareUrl: import.meta.env.VITE_UMAMI_SHARE_URL,
|
||||
enabled: true
|
||||
});
|
||||
} else {
|
||||
setUmamiConfig({ enabled: false });
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch Umami config:', error);
|
||||
// Fall back to environment variables if they exist
|
||||
const envUrl = import.meta.env.VITE_UMAMI_URL;
|
||||
const envWebsiteId = import.meta.env.VITE_UMAMI_WEBSITE_ID;
|
||||
|
||||
if (envUrl && envWebsiteId) {
|
||||
setUmamiConfig({
|
||||
url: envUrl,
|
||||
shareUrl: import.meta.env.VITE_UMAMI_SHARE_URL,
|
||||
enabled: true
|
||||
});
|
||||
} else {
|
||||
setUmamiConfig({ enabled: false });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fetchUmamiConfig();
|
||||
}, []);
|
||||
|
||||
// Calculate trends and format data
|
||||
const analytics: ComponentAnalyticsData | undefined = React.useMemo(() => {
|
||||
if (!apiData) return undefined;
|
||||
@@ -96,11 +152,15 @@ export const AnalyticsPage: React.FC = () => {
|
||||
const secondHalfDownloads = apiData.chartData.slice(halfPoint).reduce((sum, day) => sum + day.downloads, 0);
|
||||
const downloadsTrend = firstHalfDownloads > 0 ? ((secondHalfDownloads - firstHalfDownloads) / firstHalfDownloads) * 100 : 0;
|
||||
|
||||
// Format top galleries for downloads
|
||||
const topGalleriesWithDownloads = apiData.topGalleries.map(gallery => ({
|
||||
name: gallery.event_name,
|
||||
downloads: gallery.views // Using views as download count for now
|
||||
}));
|
||||
// Get actual download data for top galleries - sort by downloads
|
||||
const topGalleriesWithDownloads = apiData.topGalleries
|
||||
.filter(gallery => gallery.downloads > 0) // Only show galleries with downloads
|
||||
.sort((a, b) => (b.downloads || 0) - (a.downloads || 0)) // Sort by downloads
|
||||
.slice(0, 5) // Take top 5
|
||||
.map(gallery => ({
|
||||
name: gallery.event_name,
|
||||
downloads: gallery.downloads || 0
|
||||
}));
|
||||
|
||||
return {
|
||||
pageViews: {
|
||||
@@ -122,7 +182,7 @@ export const AnalyticsPage: React.FC = () => {
|
||||
topPages: apiData.topGalleries.map(gallery => ({
|
||||
path: `/gallery/${gallery.slug}`,
|
||||
views: gallery.views,
|
||||
uniqueVisitors: Math.round(gallery.views * 0.4) // Estimate unique visitors
|
||||
uniqueVisitors: gallery.uniqueVisitors || gallery.views // Use actual unique visitors if available
|
||||
}))
|
||||
};
|
||||
}, [apiData]);
|
||||
@@ -166,7 +226,7 @@ export const AnalyticsPage: React.FC = () => {
|
||||
}
|
||||
|
||||
// If Umami is configured and embed mode is enabled, show the Umami dashboard
|
||||
if (isEmbedMode && umamiShareUrl) {
|
||||
if (isEmbedMode && umamiConfig.shareUrl) {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
@@ -185,7 +245,7 @@ export const AnalyticsPage: React.FC = () => {
|
||||
|
||||
<Card padding="none" className="overflow-hidden" style={{ height: '800px' }}>
|
||||
<iframe
|
||||
src={umamiShareUrl}
|
||||
src={umamiConfig.shareUrl}
|
||||
className="w-full h-full border-0"
|
||||
title="Umami Analytics Dashboard"
|
||||
/>
|
||||
@@ -203,7 +263,7 @@ export const AnalyticsPage: React.FC = () => {
|
||||
<p className="text-neutral-600 mt-1">{t('analytics.subtitle')}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{umamiShareUrl && (
|
||||
{umamiConfig.shareUrl && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsEmbedMode(true)}
|
||||
@@ -405,7 +465,7 @@ export const AnalyticsPage: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* Configuration Notice */}
|
||||
{!umamiUrl && (
|
||||
{umamiConfig.enabled === false && (
|
||||
<Card padding="md" className="mt-6 bg-amber-50 border-amber-200">
|
||||
<div className="flex items-start gap-3">
|
||||
<Activity className="w-5 h-5 text-amber-600 flex-shrink-0" />
|
||||
|
||||
@@ -153,13 +153,13 @@ export const CMSPageEnhanced: React.FC = () => {
|
||||
: 'bg-white border border-neutral-200 hover:bg-neutral-50'
|
||||
}`}
|
||||
>
|
||||
<FileText className="w-5 h-5" />
|
||||
<div className="flex-1">
|
||||
<p className="font-medium">{t(`legal.${page.slug}`)}</p>
|
||||
<FileText className="w-5 h-5 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium truncate">{t(`legal.${page.slug}`)}</p>
|
||||
<p className="text-sm text-neutral-500">/{page.slug}</p>
|
||||
</div>
|
||||
{selectedPage === page.slug && hasUnsavedChanges && (
|
||||
<div className="w-2 h-2 bg-yellow-500 rounded-full" />
|
||||
<div className="w-2 h-2 bg-yellow-500 rounded-full flex-shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
@@ -235,7 +235,7 @@ export const CMSPageEnhanced: React.FC = () => {
|
||||
: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
|
||||
}`}
|
||||
>
|
||||
🇬🇧 English
|
||||
English
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingLang('de')}
|
||||
@@ -245,7 +245,7 @@ export const CMSPageEnhanced: React.FC = () => {
|
||||
: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
|
||||
}`}
|
||||
>
|
||||
🇩🇪 Deutsch
|
||||
Deutsch
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,14 +10,14 @@ import {
|
||||
Eye,
|
||||
EyeOff
|
||||
} from 'lucide-react';
|
||||
import { format, addDays } from 'date-fns';
|
||||
import { enUS, de } from 'date-fns/locale';
|
||||
import { addDays } from 'date-fns';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
import { Button, Input, Card } from '../../components/common';
|
||||
import { ThemeCustomizerEnhanced, GalleryPreview, WelcomeMessageEditor } from '../../components/admin';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { eventsService } from '../../services/events.service';
|
||||
import { useLocalizedDate } from '../../hooks/useLocalizedDate';
|
||||
import { categoriesService } from '../../services/categories.service';
|
||||
import { settingsService } from '../../services/settings.service';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
@@ -57,6 +57,7 @@ const EVENT_TYPES = [
|
||||
export const CreateEventPageEnhanced: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { t, i18n } = useTranslation();
|
||||
const { format } = useLocalizedDate();
|
||||
const isMountedRef = useRef(true);
|
||||
const [showThemeCustomizer, setShowThemeCustomizer] = useState(false);
|
||||
// const [showPreview, setShowPreview] = useState(false);
|
||||
@@ -499,7 +500,7 @@ export const CreateEventPageEnhanced: React.FC = () => {
|
||||
</div>
|
||||
{formData.event_date && (
|
||||
<p className="mt-2 text-sm text-neutral-500">
|
||||
{t('events.expiresOn')}: {format(addDays(new Date(formData.event_date), formData.expires_in_days), 'PPP', { locale: i18n.language === 'de' ? de : enUS })}
|
||||
{t('events.expiresOn')}: {format(addDays(new Date(formData.event_date), formData.expires_in_days))}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -21,7 +21,7 @@ import { settingsService } from '../../services/settings.service';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const SettingsPage: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<'general' | 'status' | 'security' | 'categories'>('general');
|
||||
const [activeTab, setActiveTab] = useState<'general' | 'status' | 'security' | 'categories' | 'analytics'>('general');
|
||||
const queryClient = useQueryClient();
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
@@ -64,6 +64,7 @@ export const SettingsPage: React.FC = () => {
|
||||
const [securitySettings, setSecuritySettings] = useState({
|
||||
require_password: true,
|
||||
password_min_length: 8,
|
||||
password_complexity: 'moderate',
|
||||
enable_2fa: false,
|
||||
session_timeout_minutes: 60,
|
||||
max_login_attempts: 5,
|
||||
@@ -72,6 +73,14 @@ export const SettingsPage: React.FC = () => {
|
||||
recaptcha_secret_key: ''
|
||||
});
|
||||
|
||||
// Analytics settings state
|
||||
const [analyticsSettings, setAnalyticsSettings] = useState({
|
||||
umami_enabled: false,
|
||||
umami_url: '',
|
||||
umami_website_id: '',
|
||||
umami_share_url: ''
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
if (settings) {
|
||||
// Set the language if it's different from current
|
||||
@@ -104,8 +113,16 @@ export const SettingsPage: React.FC = () => {
|
||||
recaptcha_site_key: settings.security_recaptcha_site_key || '',
|
||||
recaptcha_secret_key: settings.security_recaptcha_secret_key || ''
|
||||
});
|
||||
|
||||
// Extract analytics settings
|
||||
setAnalyticsSettings({
|
||||
umami_enabled: settings.analytics_umami_enabled || false,
|
||||
umami_url: settings.analytics_umami_url || '',
|
||||
umami_website_id: settings.analytics_umami_website_id || '',
|
||||
umami_share_url: settings.analytics_umami_share_url || ''
|
||||
});
|
||||
}
|
||||
}, [settings]);
|
||||
}, [settings, i18n]);
|
||||
|
||||
// Save mutations
|
||||
const saveGeneralMutation = useMutation({
|
||||
@@ -144,6 +161,24 @@ export const SettingsPage: React.FC = () => {
|
||||
}
|
||||
});
|
||||
|
||||
const saveAnalyticsMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
// Convert to the format expected by the API
|
||||
const settingsData: Record<string, any> = {};
|
||||
Object.entries(analyticsSettings).forEach(([key, value]) => {
|
||||
settingsData[`analytics_${key}`] = value;
|
||||
});
|
||||
return settingsService.updateSettings(settingsData);
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success(t('toast.settingsSaved'));
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t('toast.saveError'));
|
||||
}
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
@@ -202,6 +237,16 @@ export const SettingsPage: React.FC = () => {
|
||||
>
|
||||
{t('settings.categories.title')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('analytics')}
|
||||
className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
|
||||
activeTab === 'analytics'
|
||||
? 'border-primary-600 text-primary-600'
|
||||
: 'border-transparent text-neutral-500 hover:text-neutral-700'
|
||||
}`}
|
||||
>
|
||||
{t('settings.analytics.title')}
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -621,6 +666,25 @@ export const SettingsPage: React.FC = () => {
|
||||
max="32"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
||||
{t('settings.security.passwordComplexity')}
|
||||
</label>
|
||||
<select
|
||||
value={securitySettings.password_complexity}
|
||||
onChange={(e) => setSecuritySettings(prev => ({ ...prev, password_complexity: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
>
|
||||
<option value="simple">{t('settings.security.complexitySimple')}</option>
|
||||
<option value="moderate">{t('settings.security.complexityModerate')}</option>
|
||||
<option value="strong">{t('settings.security.complexityStrong')}</option>
|
||||
<option value="very_strong">{t('settings.security.complexityVeryStrong')}</option>
|
||||
</select>
|
||||
<p className="mt-1 text-sm text-neutral-600">
|
||||
{t('settings.security.passwordComplexityHelp')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -754,6 +818,127 @@ export const SettingsPage: React.FC = () => {
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Analytics Tab */}
|
||||
{activeTab === 'analytics' && (
|
||||
<div className="space-y-6">
|
||||
<Card padding="md">
|
||||
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.analytics.umamiIntegration')}</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={analyticsSettings.umami_enabled}
|
||||
onChange={(e) => setAnalyticsSettings(prev => ({ ...prev, umami_enabled: e.target.checked }))}
|
||||
className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-neutral-700">{t('settings.analytics.enableUmami')}</span>
|
||||
</label>
|
||||
|
||||
{analyticsSettings.umami_enabled && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
||||
{t('settings.analytics.umamiUrl')}
|
||||
</label>
|
||||
<Input
|
||||
type="url"
|
||||
value={analyticsSettings.umami_url}
|
||||
onChange={(e) => setAnalyticsSettings(prev => ({ ...prev, umami_url: e.target.value }))}
|
||||
placeholder="https://analytics.yourdomain.com"
|
||||
leftIcon={<Globe className="w-5 h-5 text-neutral-400" />}
|
||||
/>
|
||||
<p className="text-xs text-neutral-500 mt-1">
|
||||
{t('settings.analytics.umamiUrlHelp')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
||||
{t('settings.analytics.websiteId')}
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={analyticsSettings.umami_website_id}
|
||||
onChange={(e) => setAnalyticsSettings(prev => ({ ...prev, umami_website_id: e.target.value }))}
|
||||
placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
|
||||
leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
|
||||
/>
|
||||
<p className="text-xs text-neutral-500 mt-1">
|
||||
{t('settings.analytics.websiteIdHelp')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
||||
{t('settings.analytics.shareUrl')}
|
||||
</label>
|
||||
<Input
|
||||
type="url"
|
||||
value={analyticsSettings.umami_share_url}
|
||||
onChange={(e) => setAnalyticsSettings(prev => ({ ...prev, umami_share_url: e.target.value }))}
|
||||
placeholder="https://analytics.yourdomain.com/share/..."
|
||||
leftIcon={<Activity className="w-5 h-5 text-neutral-400" />}
|
||||
/>
|
||||
<p className="text-xs text-neutral-500 mt-1">
|
||||
{t('settings.analytics.shareUrlHelp')}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-blue-600 flex-shrink-0" />
|
||||
<div className="text-sm text-blue-800">
|
||||
<p className="font-medium mb-1">{t('settings.analytics.umamiInfo')}</p>
|
||||
<p>{t('settings.analytics.umamiInfoText')}</p>
|
||||
<a href="https://umami.is" target="_blank" rel="noopener noreferrer" className="underline mt-1 inline-block">
|
||||
{t('settings.analytics.learnMore')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => saveAnalyticsMutation.mutate()}
|
||||
isLoading={saveAnalyticsMutation.isPending}
|
||||
leftIcon={<Save className="w-5 h-5" />}
|
||||
>
|
||||
{t('settings.analytics.saveAnalyticsSettings')}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Backend Analytics Info */}
|
||||
<Card padding="md">
|
||||
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.analytics.backendAnalytics')}</h2>
|
||||
<p className="text-sm text-neutral-700 mb-4">{t('settings.analytics.backendAnalyticsText')}</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-neutral-50 rounded-lg p-4">
|
||||
<h3 className="text-sm font-medium text-neutral-900 mb-2">{t('settings.analytics.tracked')}</h3>
|
||||
<ul className="text-xs text-neutral-600 space-y-1">
|
||||
<li>• {t('settings.analytics.galleryViews')}</li>
|
||||
<li>• {t('settings.analytics.photoDownloads')}</li>
|
||||
<li>• {t('settings.analytics.uniqueVisitors')}</li>
|
||||
<li>• {t('settings.analytics.deviceTypes')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-neutral-50 rounded-lg p-4">
|
||||
<h3 className="text-sm font-medium text-neutral-900 mb-2">{t('settings.analytics.privacy')}</h3>
|
||||
<p className="text-xs text-neutral-600">
|
||||
{t('settings.analytics.privacyText')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -162,7 +162,19 @@ export const settingsService = {
|
||||
|
||||
// Update multiple settings at once
|
||||
async updateSettings(settings: Record<string, any>): Promise<void> {
|
||||
await api.put('/admin/settings/general', settings);
|
||||
// Determine the endpoint based on setting keys
|
||||
const firstKey = Object.keys(settings)[0];
|
||||
let endpoint = '/admin/settings/general';
|
||||
|
||||
if (firstKey?.startsWith('security_')) {
|
||||
endpoint = '/admin/settings/security';
|
||||
} else if (firstKey?.startsWith('analytics_')) {
|
||||
endpoint = '/admin/settings/analytics';
|
||||
} else if (firstKey?.startsWith('branding_')) {
|
||||
endpoint = '/admin/settings/branding';
|
||||
}
|
||||
|
||||
await api.put(endpoint, settings);
|
||||
},
|
||||
|
||||
// Get storage information
|
||||
|
||||
Reference in New Issue
Block a user