paul
d594d00227
- Fixed theme not being reflected on gallery and admin login pages - Created GlobalThemeProvider to apply themes globally - Updated gallery and admin login pages to use dynamic CSS variables - Added complete translations for all admin sections in English and German: - Notifications management - Event view and creation - Photo upload functionality - Category management - Archive page view - Analytics dashboard - Branding and theme settings - System settings - CMS page management - Email configuration - Fixed admin photo management display issues - Fixed photo upload category assignment - Added password reset functionality for galleries - Improved error handling and user feedback 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
582 lines
24 KiB
TypeScript
582 lines
24 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
Save,
|
|
Database,
|
|
Globe,
|
|
Key,
|
|
AlertCircle,
|
|
Image
|
|
} from 'lucide-react';
|
|
import { toast } from 'react-toastify';
|
|
|
|
import { Button, Card, Input, Loading } from '../../components/common';
|
|
import { CategoryManager } from '../../components/admin/CategoryManager';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { settingsService } from '../../services/settings.service';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export const SettingsPage: React.FC = () => {
|
|
const [activeTab, setActiveTab] = useState<'general' | 'storage' | 'security' | 'categories'>('general');
|
|
const queryClient = useQueryClient();
|
|
const { t, i18n } = useTranslation();
|
|
|
|
// Fetch settings
|
|
const { data: settings, isLoading } = useQuery({
|
|
queryKey: ['admin-settings'],
|
|
queryFn: () => settingsService.getAllSettings(),
|
|
});
|
|
|
|
// Fetch storage info
|
|
const { data: storageInfo } = useQuery({
|
|
queryKey: ['admin-storage-info'],
|
|
queryFn: () => settingsService.getStorageInfo(),
|
|
enabled: activeTab === 'storage'
|
|
});
|
|
|
|
// General settings state
|
|
const [generalSettings, setGeneralSettings] = useState({
|
|
site_url: '',
|
|
default_expiration_days: 30,
|
|
max_file_size_mb: 50,
|
|
allowed_file_types: 'jpg,jpeg,png,gif,webp',
|
|
enable_watermark: false,
|
|
enable_analytics: true,
|
|
enable_registration: false,
|
|
maintenance_mode: false,
|
|
default_language: 'en'
|
|
});
|
|
|
|
// Security settings state
|
|
const [securitySettings, setSecuritySettings] = useState({
|
|
require_password: true,
|
|
password_min_length: 8,
|
|
enable_2fa: false,
|
|
session_timeout_minutes: 60,
|
|
max_login_attempts: 5,
|
|
enable_recaptcha: false,
|
|
recaptcha_site_key: '',
|
|
recaptcha_secret_key: ''
|
|
});
|
|
|
|
React.useEffect(() => {
|
|
if (settings) {
|
|
// Set the language if it's different from current
|
|
if (settings.general_default_language && settings.general_default_language !== i18n.language) {
|
|
i18n.changeLanguage(settings.general_default_language);
|
|
}
|
|
|
|
// Extract general settings
|
|
setGeneralSettings({
|
|
site_url: settings.general_site_url || '',
|
|
default_expiration_days: settings.general_default_expiration_days || 30,
|
|
max_file_size_mb: settings.general_max_file_size_mb || 50,
|
|
allowed_file_types: settings.general_allowed_file_types || 'jpg,jpeg,png,gif,webp',
|
|
enable_watermark: settings.general_enable_watermark || false,
|
|
enable_analytics: settings.general_enable_analytics || true,
|
|
enable_registration: settings.general_enable_registration || false,
|
|
maintenance_mode: settings.general_maintenance_mode || false,
|
|
default_language: settings.general_default_language || 'en'
|
|
});
|
|
|
|
// Extract security settings
|
|
setSecuritySettings({
|
|
require_password: settings.security_require_password || true,
|
|
password_min_length: settings.security_password_min_length || 8,
|
|
enable_2fa: settings.security_enable_2fa || false,
|
|
session_timeout_minutes: settings.security_session_timeout_minutes || 60,
|
|
max_login_attempts: settings.security_max_login_attempts || 5,
|
|
enable_recaptcha: settings.security_enable_recaptcha || false,
|
|
recaptcha_site_key: settings.security_recaptcha_site_key || '',
|
|
recaptcha_secret_key: settings.security_recaptcha_secret_key || ''
|
|
});
|
|
}
|
|
}, [settings]);
|
|
|
|
// Save mutations
|
|
const saveGeneralMutation = useMutation({
|
|
mutationFn: async () => {
|
|
// Convert to the format expected by the API
|
|
const settingsData: Record<string, any> = {};
|
|
Object.entries(generalSettings).forEach(([key, value]) => {
|
|
settingsData[`general_${key}`] = value;
|
|
});
|
|
return settingsService.updateSettings(settingsData);
|
|
},
|
|
onSuccess: () => {
|
|
toast.success('General settings saved successfully');
|
|
queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
|
|
},
|
|
onError: () => {
|
|
toast.error('Failed to save general settings');
|
|
}
|
|
});
|
|
|
|
const saveSecurityMutation = useMutation({
|
|
mutationFn: async () => {
|
|
// Convert to the format expected by the API
|
|
const settingsData: Record<string, any> = {};
|
|
Object.entries(securitySettings).forEach(([key, value]) => {
|
|
settingsData[`security_${key}`] = value;
|
|
});
|
|
return settingsService.updateSettings(settingsData);
|
|
},
|
|
onSuccess: () => {
|
|
toast.success('Security settings saved successfully');
|
|
queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
|
|
},
|
|
onError: () => {
|
|
toast.error('Failed to save security settings');
|
|
}
|
|
});
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[400px]">
|
|
<Loading size="lg" text="Loading settings..." />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-neutral-900">System Settings</h1>
|
|
<p className="text-neutral-600 mt-1">Configure system-wide settings and preferences</p>
|
|
</div>
|
|
|
|
{/* Tab Navigation */}
|
|
<div className="border-b border-neutral-200 mb-6">
|
|
<nav className="-mb-px flex gap-6">
|
|
<button
|
|
onClick={() => setActiveTab('general')}
|
|
className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
|
|
activeTab === 'general'
|
|
? 'border-primary-600 text-primary-600'
|
|
: 'border-transparent text-neutral-500 hover:text-neutral-700'
|
|
}`}
|
|
>
|
|
General
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('storage')}
|
|
className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
|
|
activeTab === 'storage'
|
|
? 'border-primary-600 text-primary-600'
|
|
: 'border-transparent text-neutral-500 hover:text-neutral-700'
|
|
}`}
|
|
>
|
|
Storage
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('security')}
|
|
className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
|
|
activeTab === 'security'
|
|
? 'border-primary-600 text-primary-600'
|
|
: 'border-transparent text-neutral-500 hover:text-neutral-700'
|
|
}`}
|
|
>
|
|
Security
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('categories')}
|
|
className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
|
|
activeTab === 'categories'
|
|
? 'border-primary-600 text-primary-600'
|
|
: 'border-transparent text-neutral-500 hover:text-neutral-700'
|
|
}`}
|
|
>
|
|
Categories
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* General Settings Tab */}
|
|
{activeTab === 'general' && (
|
|
<div className="space-y-6">
|
|
<Card padding="md">
|
|
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Site Configuration</h2>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
|
Site URL
|
|
</label>
|
|
<Input
|
|
type="url"
|
|
value={generalSettings.site_url}
|
|
onChange={(e) => setGeneralSettings(prev => ({ ...prev, site_url: e.target.value }))}
|
|
placeholder="https://yourdomain.com"
|
|
leftIcon={<Globe className="w-5 h-5 text-neutral-400" />}
|
|
/>
|
|
<p className="text-xs text-neutral-500 mt-1">
|
|
Used for generating gallery links in emails
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
|
Default Expiration (days)
|
|
</label>
|
|
<Input
|
|
type="number"
|
|
value={generalSettings.default_expiration_days}
|
|
onChange={(e) => setGeneralSettings(prev => ({ ...prev, default_expiration_days: parseInt(e.target.value) || 30 }))}
|
|
min="1"
|
|
max="365"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
|
Max File Size (MB)
|
|
</label>
|
|
<Input
|
|
type="number"
|
|
value={generalSettings.max_file_size_mb}
|
|
onChange={(e) => setGeneralSettings(prev => ({ ...prev, max_file_size_mb: parseInt(e.target.value) || 50 }))}
|
|
min="1"
|
|
max="500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
|
Allowed File Types
|
|
</label>
|
|
<Input
|
|
type="text"
|
|
value={generalSettings.allowed_file_types}
|
|
onChange={(e) => setGeneralSettings(prev => ({ ...prev, allowed_file_types: e.target.value }))}
|
|
placeholder="jpg,jpeg,png,gif"
|
|
/>
|
|
<p className="text-xs text-neutral-500 mt-1">
|
|
Comma-separated list of file extensions
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card padding="md">
|
|
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Feature Toggles</h2>
|
|
|
|
<div className="space-y-3">
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={generalSettings.enable_watermark}
|
|
onChange={(e) => setGeneralSettings(prev => ({ ...prev, enable_watermark: 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">Enable watermark on photos</span>
|
|
</label>
|
|
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={generalSettings.enable_analytics}
|
|
onChange={(e) => setGeneralSettings(prev => ({ ...prev, enable_analytics: 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">Enable analytics tracking</span>
|
|
</label>
|
|
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={generalSettings.enable_registration}
|
|
onChange={(e) => setGeneralSettings(prev => ({ ...prev, enable_registration: 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">Allow self-registration for admins</span>
|
|
</label>
|
|
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={generalSettings.maintenance_mode}
|
|
onChange={(e) => setGeneralSettings(prev => ({ ...prev, maintenance_mode: 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">Enable maintenance mode</span>
|
|
</label>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card padding="md">
|
|
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.general.language')}</h2>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-neutral-700 mb-2">
|
|
{t('settings.general.language')}
|
|
</label>
|
|
<select
|
|
value={generalSettings.default_language}
|
|
onChange={(e) => setGeneralSettings(prev => ({ ...prev, default_language: 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="en">English</option>
|
|
<option value="de">Deutsch</option>
|
|
</select>
|
|
<p className="text-xs text-neutral-500 mt-1">
|
|
Sets the default language for all gallery pages and login screens
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => saveGeneralMutation.mutate()}
|
|
isLoading={saveGeneralMutation.isPending}
|
|
leftIcon={<Save className="w-5 h-5" />}
|
|
>
|
|
{t('settings.general.saveSettings')}
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Storage Tab */}
|
|
{activeTab === 'storage' && storageInfo && (
|
|
<div className="space-y-6">
|
|
<Card padding="md">
|
|
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Storage Overview</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
<div className="bg-neutral-50 rounded-lg p-4">
|
|
<p className="text-sm text-neutral-600">Total Used</p>
|
|
<p className="text-2xl font-bold text-neutral-900">
|
|
{settingsService.formatBytes(storageInfo.total_used)}
|
|
</p>
|
|
</div>
|
|
<div className="bg-neutral-50 rounded-lg p-4">
|
|
<p className="text-sm text-neutral-600">Archive Storage</p>
|
|
<p className="text-2xl font-bold text-neutral-900">
|
|
{settingsService.formatBytes(storageInfo.archive_storage)}
|
|
</p>
|
|
</div>
|
|
<div className="bg-neutral-50 rounded-lg p-4">
|
|
<p className="text-sm text-neutral-600">Storage Limit</p>
|
|
<p className="text-2xl font-bold text-neutral-900">
|
|
{settingsService.formatBytes(storageInfo.storage_limit)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<div className="flex justify-between text-sm mb-1">
|
|
<span className="text-neutral-600">Storage Usage</span>
|
|
<span className="font-medium">
|
|
{Math.round((storageInfo.total_used / storageInfo.storage_limit) * 100)}%
|
|
</span>
|
|
</div>
|
|
<div className="w-full bg-neutral-200 rounded-full h-3">
|
|
<div
|
|
className="bg-primary-600 h-3 rounded-full transition-all"
|
|
style={{
|
|
width: `${Math.min((storageInfo.total_used / storageInfo.storage_limit) * 100, 100)}%`
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<h3 className="text-sm font-semibold text-neutral-900 mb-3">Storage by Event</h3>
|
|
<div className="space-y-2">
|
|
{storageInfo.storage_by_event.slice(0, 10).map((event) => (
|
|
<div key={event.id} className="flex items-center justify-between py-2 border-b border-neutral-100">
|
|
<span className="text-sm text-neutral-700">{event.event_name}</span>
|
|
<span className="text-sm font-medium text-neutral-900">
|
|
{settingsService.formatBytes(event.size)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card padding="md">
|
|
<div className="flex items-start gap-3">
|
|
<Database className="w-5 h-5 text-amber-600 flex-shrink-0" />
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-amber-900">Storage Management</h3>
|
|
<p className="text-sm text-amber-700 mt-1">
|
|
Consider archiving or deleting old events to free up storage space.
|
|
Archived events are compressed and use less storage than active galleries.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Security Tab */}
|
|
{activeTab === 'security' && (
|
|
<div className="space-y-6">
|
|
<Card padding="md">
|
|
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Password Settings</h2>
|
|
|
|
<div className="space-y-4">
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={securitySettings.require_password}
|
|
onChange={(e) => setSecuritySettings(prev => ({ ...prev, require_password: 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">Require password for all galleries</span>
|
|
</label>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
|
Minimum Password Length
|
|
</label>
|
|
<Input
|
|
type="number"
|
|
value={securitySettings.password_min_length}
|
|
onChange={(e) => setSecuritySettings(prev => ({ ...prev, password_min_length: parseInt(e.target.value) || 8 }))}
|
|
min="4"
|
|
max="32"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card padding="md">
|
|
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Session & Authentication</h2>
|
|
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
|
Session Timeout (minutes)
|
|
</label>
|
|
<Input
|
|
type="number"
|
|
value={securitySettings.session_timeout_minutes}
|
|
onChange={(e) => setSecuritySettings(prev => ({ ...prev, session_timeout_minutes: parseInt(e.target.value) || 60 }))}
|
|
min="5"
|
|
max="1440"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
|
Max Login Attempts
|
|
</label>
|
|
<Input
|
|
type="number"
|
|
value={securitySettings.max_login_attempts}
|
|
onChange={(e) => setSecuritySettings(prev => ({ ...prev, max_login_attempts: parseInt(e.target.value) || 5 }))}
|
|
min="3"
|
|
max="10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={securitySettings.enable_2fa}
|
|
onChange={(e) => setSecuritySettings(prev => ({ ...prev, enable_2fa: 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">Enable two-factor authentication for admins</span>
|
|
</label>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card padding="md">
|
|
<h2 className="text-lg font-semibold text-neutral-900 mb-4">reCAPTCHA Settings</h2>
|
|
|
|
<div className="space-y-4">
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={securitySettings.enable_recaptcha}
|
|
onChange={(e) => setSecuritySettings(prev => ({ ...prev, enable_recaptcha: 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">Enable reCAPTCHA for login forms</span>
|
|
</label>
|
|
|
|
{securitySettings.enable_recaptcha && (
|
|
<>
|
|
<div>
|
|
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
|
Site Key
|
|
</label>
|
|
<Input
|
|
type="text"
|
|
value={securitySettings.recaptcha_site_key}
|
|
onChange={(e) => setSecuritySettings(prev => ({ ...prev, recaptcha_site_key: e.target.value }))}
|
|
placeholder="Your reCAPTCHA site key"
|
|
leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
|
Secret Key
|
|
</label>
|
|
<Input
|
|
type="password"
|
|
value={securitySettings.recaptcha_secret_key}
|
|
onChange={(e) => setSecuritySettings(prev => ({ ...prev, recaptcha_secret_key: e.target.value }))}
|
|
placeholder="Your reCAPTCHA secret key"
|
|
leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
|
|
/>
|
|
</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>Get your reCAPTCHA keys from <a href="https://www.google.com/recaptcha/admin" target="_blank" rel="noopener noreferrer" className="underline">Google reCAPTCHA Admin</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => saveSecurityMutation.mutate()}
|
|
isLoading={saveSecurityMutation.isPending}
|
|
leftIcon={<Save className="w-5 h-5" />}
|
|
>
|
|
Save Security Settings
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Categories Tab */}
|
|
{activeTab === 'categories' && (
|
|
<div className="space-y-6">
|
|
<Card padding="md">
|
|
<CategoryManager />
|
|
</Card>
|
|
|
|
<Card padding="md">
|
|
<div className="flex items-start gap-3">
|
|
<Image className="w-5 h-5 text-blue-600 flex-shrink-0" />
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-blue-900">About Photo Categories</h3>
|
|
<p className="text-sm text-blue-700 mt-1">
|
|
Global categories are available for all events. You can also create event-specific
|
|
categories when editing individual events. Categories help organize photos and
|
|
allow guests to filter photos by type in the gallery view.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}; |