Complete translation implementation for admin interface
- Fixed all hardcoded strings in admin components to use t() function - Updated BrandingPage.tsx to use translations for watermark settings - Updated EventsListPage.tsx to use translations for status labels - Added missing translation keys to both en.json and de.json - Fixed translations for: - System settings (general, storage, categories tabs) - Branding page (watermark settings, positions, opacity) - Email configuration and templates - Event list view (status labels, filters, actions) - Event detail view (all sections properly translated) - Added comprehensive German translations for all new keys - Ensured consistent translation usage across all admin pages 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
This commit is contained in:
Claude
@@ -103,11 +103,11 @@ export const SettingsPage: React.FC = () => {
|
||||
return settingsService.updateSettings(settingsData);
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success('General settings saved successfully');
|
||||
toast.success(t('toast.settingsSaved'));
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
|
||||
},
|
||||
onError: () => {
|
||||
toast.error('Failed to save general settings');
|
||||
toast.error(t('toast.saveError'));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -121,18 +121,18 @@ export const SettingsPage: React.FC = () => {
|
||||
return settingsService.updateSettings(settingsData);
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success('Security settings saved successfully');
|
||||
toast.success(t('toast.settingsSaved'));
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
|
||||
},
|
||||
onError: () => {
|
||||
toast.error('Failed to save security settings');
|
||||
toast.error(t('toast.saveError'));
|
||||
}
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<Loading size="lg" text="Loading settings..." />
|
||||
<Loading size="lg" text={t('settings.loadingSettings')} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -140,8 +140,8 @@ export const SettingsPage: React.FC = () => {
|
||||
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>
|
||||
<h1 className="text-2xl font-bold text-neutral-900">{t('settings.title')}</h1>
|
||||
<p className="text-neutral-600 mt-1">{t('settings.subtitle')}</p>
|
||||
</div>
|
||||
|
||||
{/* Tab Navigation */}
|
||||
@@ -155,7 +155,7 @@ export const SettingsPage: React.FC = () => {
|
||||
: 'border-transparent text-neutral-500 hover:text-neutral-700'
|
||||
}`}
|
||||
>
|
||||
General
|
||||
{t('settings.general.title')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('storage')}
|
||||
@@ -165,7 +165,7 @@ export const SettingsPage: React.FC = () => {
|
||||
: 'border-transparent text-neutral-500 hover:text-neutral-700'
|
||||
}`}
|
||||
>
|
||||
Storage
|
||||
{t('settings.storage.title')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('security')}
|
||||
@@ -175,7 +175,7 @@ export const SettingsPage: React.FC = () => {
|
||||
: 'border-transparent text-neutral-500 hover:text-neutral-700'
|
||||
}`}
|
||||
>
|
||||
Security
|
||||
{t('settings.security.title')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('categories')}
|
||||
@@ -185,7 +185,7 @@ export const SettingsPage: React.FC = () => {
|
||||
: 'border-transparent text-neutral-500 hover:text-neutral-700'
|
||||
}`}
|
||||
>
|
||||
Categories
|
||||
{t('settings.categories.title')}
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -194,12 +194,12 @@ export const SettingsPage: React.FC = () => {
|
||||
{activeTab === 'general' && (
|
||||
<div className="space-y-6">
|
||||
<Card padding="md">
|
||||
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Site Configuration</h2>
|
||||
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.general.siteConfiguration')}</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
||||
Site URL
|
||||
{t('settings.general.siteUrl')}
|
||||
</label>
|
||||
<Input
|
||||
type="url"
|
||||
@@ -209,14 +209,14 @@ export const SettingsPage: React.FC = () => {
|
||||
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
|
||||
{t('settings.general.siteUrlHelp')}
|
||||
</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)
|
||||
{t('settings.general.defaultExpiration')}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
@@ -228,7 +228,7 @@ export const SettingsPage: React.FC = () => {
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
||||
Max File Size (MB)
|
||||
{t('settings.general.maxFileSize')}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
@@ -242,7 +242,7 @@ export const SettingsPage: React.FC = () => {
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
||||
Allowed File Types
|
||||
{t('settings.general.allowedFileTypes')}
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
@@ -251,14 +251,14 @@ export const SettingsPage: React.FC = () => {
|
||||
placeholder="jpg,jpeg,png,gif"
|
||||
/>
|
||||
<p className="text-xs text-neutral-500 mt-1">
|
||||
Comma-separated list of file extensions
|
||||
{t('settings.general.allowedFileTypesHelp')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card padding="md">
|
||||
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Feature Toggles</h2>
|
||||
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.general.featureToggles')}</h2>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="flex items-center">
|
||||
@@ -268,7 +268,7 @@ export const SettingsPage: React.FC = () => {
|
||||
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>
|
||||
<span className="ml-2 text-sm text-neutral-700">{t('settings.general.enableWatermark')}</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center">
|
||||
@@ -278,7 +278,7 @@ export const SettingsPage: React.FC = () => {
|
||||
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>
|
||||
<span className="ml-2 text-sm text-neutral-700">{t('settings.general.enableAnalytics')}</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center">
|
||||
@@ -288,7 +288,7 @@ export const SettingsPage: React.FC = () => {
|
||||
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>
|
||||
<span className="ml-2 text-sm text-neutral-700">{t('settings.general.enableRegistration')}</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center">
|
||||
@@ -298,7 +298,7 @@ export const SettingsPage: React.FC = () => {
|
||||
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>
|
||||
<span className="ml-2 text-sm text-neutral-700">{t('settings.general.maintenanceMode')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</Card>
|
||||
@@ -320,7 +320,7 @@ export const SettingsPage: React.FC = () => {
|
||||
<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
|
||||
{t('settings.general.defaultLanguageHelp')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -332,7 +332,7 @@ export const SettingsPage: React.FC = () => {
|
||||
isLoading={saveGeneralMutation.isPending}
|
||||
leftIcon={<Save className="w-5 h-5" />}
|
||||
>
|
||||
{t('settings.general.saveSettings')}
|
||||
{t('settings.general.saveGeneralSettings')}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
@@ -343,23 +343,23 @@ export const SettingsPage: React.FC = () => {
|
||||
{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>
|
||||
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.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-sm text-neutral-600">{t('settings.storage.totalUsed')}</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-sm text-neutral-600">{t('settings.storage.archiveStorage')}</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-sm text-neutral-600">{t('settings.storage.storageLimit')}</p>
|
||||
<p className="text-2xl font-bold text-neutral-900">
|
||||
{settingsService.formatBytes(storageInfo.storage_limit)}
|
||||
</p>
|
||||
@@ -368,7 +368,7 @@ export const SettingsPage: React.FC = () => {
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span className="text-neutral-600">Storage Usage</span>
|
||||
<span className="text-neutral-600">{t('settings.storage.storageUsage')}</span>
|
||||
<span className="font-medium">
|
||||
{Math.round((storageInfo.total_used / storageInfo.storage_limit) * 100)}%
|
||||
</span>
|
||||
@@ -384,7 +384,7 @@ export const SettingsPage: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h3 className="text-sm font-semibold text-neutral-900 mb-3">Storage by Event</h3>
|
||||
<h3 className="text-sm font-semibold text-neutral-900 mb-3">{t('settings.storage.storageByEvent')}</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">
|
||||
@@ -402,10 +402,9 @@ export const SettingsPage: React.FC = () => {
|
||||
<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>
|
||||
<h3 className="text-sm font-semibold text-amber-900">{t('settings.storage.storageManagement')}</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.
|
||||
{t('settings.storage.storageManagementHelp')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -417,7 +416,7 @@ export const SettingsPage: React.FC = () => {
|
||||
{activeTab === 'security' && (
|
||||
<div className="space-y-6">
|
||||
<Card padding="md">
|
||||
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Password Settings</h2>
|
||||
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.security.passwordSettings')}</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<label className="flex items-center">
|
||||
@@ -427,12 +426,12 @@ export const SettingsPage: React.FC = () => {
|
||||
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>
|
||||
<span className="ml-2 text-sm text-neutral-700">{t('settings.security.requirePassword')}</span>
|
||||
</label>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
||||
Minimum Password Length
|
||||
{t('settings.security.minPasswordLength')}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
@@ -446,13 +445,13 @@ export const SettingsPage: React.FC = () => {
|
||||
</Card>
|
||||
|
||||
<Card padding="md">
|
||||
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Session & Authentication</h2>
|
||||
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.security.sessionAuth')}</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)
|
||||
{t('settings.security.sessionTimeout')}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
@@ -464,7 +463,7 @@ export const SettingsPage: React.FC = () => {
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
||||
Max Login Attempts
|
||||
{t('settings.security.maxLoginAttempts')}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
@@ -483,13 +482,13 @@ export const SettingsPage: React.FC = () => {
|
||||
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>
|
||||
<span className="ml-2 text-sm text-neutral-700">{t('settings.security.enable2FA')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card padding="md">
|
||||
<h2 className="text-lg font-semibold text-neutral-900 mb-4">reCAPTCHA Settings</h2>
|
||||
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.security.recaptchaSettings')}</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<label className="flex items-center">
|
||||
@@ -499,32 +498,32 @@ export const SettingsPage: React.FC = () => {
|
||||
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>
|
||||
<span className="ml-2 text-sm text-neutral-700">{t('settings.security.enableRecaptcha')}</span>
|
||||
</label>
|
||||
|
||||
{securitySettings.enable_recaptcha && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-1">
|
||||
Site Key
|
||||
{t('settings.security.siteKey')}
|
||||
</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"
|
||||
placeholder={t('settings.security.siteKey')}
|
||||
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
|
||||
{t('settings.security.secretKey')}
|
||||
</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"
|
||||
placeholder={t('settings.security.secretKey')}
|
||||
leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
|
||||
/>
|
||||
</div>
|
||||
@@ -535,7 +534,7 @@ export const SettingsPage: React.FC = () => {
|
||||
<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>
|
||||
<p>{t('settings.security.recaptchaHelp')} <a href="https://www.google.com/recaptcha/admin" target="_blank" rel="noopener noreferrer" className="underline">Google reCAPTCHA Admin</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -548,7 +547,7 @@ export const SettingsPage: React.FC = () => {
|
||||
isLoading={saveSecurityMutation.isPending}
|
||||
leftIcon={<Save className="w-5 h-5" />}
|
||||
>
|
||||
Save Security Settings
|
||||
{t('settings.security.saveSecuritySettings')}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
@@ -566,11 +565,9 @@ export const SettingsPage: React.FC = () => {
|
||||
<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>
|
||||
<h3 className="text-sm font-semibold text-blue-900">{t('settings.categories.about')}</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.
|
||||
{t('settings.categories.aboutText')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user