Fix brand theme application and add comprehensive translations

- 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>
2025-07-08 17:07:40 +02:00
parent 2012b0bab9
commit d594d00227
79 changed files with 4570 additions and 329 deletions
@@ -0,0 +1,113 @@
+import React, { useEffect } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { api } from '../config/api';
+
+interface BrandingSettings {
+  branding_company_name?: string;
+  branding_company_tagline?: string;
+  branding_support_email?: string;
+  branding_footer_text?: string;
+  branding_favicon_url?: string;
+  branding_logo_url?: string;
+  default_language?: string;
+}
+
+export const MaintenanceMode: React.FC = () => {
+  const { t, i18n } = useTranslation();
+  
+  // Fetch branding settings
+  const { data: settings } = useQuery<BrandingSettings>({
+    queryKey: ['public-settings-maintenance'],
+    queryFn: async () => {
+      try {
+        const response = await api.get('/api/public/settings');
+        return response.data;
+      } catch (error) {
+        // Return empty object if settings can't be fetched
+        return {};
+      }
+    },
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    retry: false, // Don't retry on failure
+  });
+
+  // Set language based on system settings
+  useEffect(() => {
+    if (settings?.default_language && settings.default_language !== i18n.language) {
+      i18n.changeLanguage(settings.default_language);
+    }
+  }, [settings?.default_language, i18n]);
+
+  return (
+    <div className="min-h-screen bg-neutral-50 flex flex-col">
+      {/* Header with branding */}
+      {(settings?.branding_logo_url || settings?.branding_company_name) && (
+        <div className="bg-white border-b border-neutral-200 py-4">
+          <div className="container">
+            <div className="flex items-center justify-center">
+              {settings.branding_logo_url ? (
+                <img 
+                  src={settings.branding_logo_url.startsWith('http') 
+                    ? settings.branding_logo_url 
+                    : `${import.meta.env.VITE_API_URL || 'http://localhost:3001'}${settings.branding_logo_url}`
+                  } 
+                  alt={settings.branding_company_name || 'Company Logo'}
+                  className="h-12 w-auto object-contain"
+                />
+              ) : (
+                <div className="text-center">
+                  <h2 className="text-xl font-semibold text-neutral-800">{settings.branding_company_name}</h2>
+                  {settings.branding_company_tagline && (
+                    <p className="text-sm text-neutral-600">{settings.branding_company_tagline}</p>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Main content */}
+      <div className="flex-1 flex items-center justify-center p-4">
+        <div className="max-w-md w-full text-center">
+          <div className="inline-flex items-center justify-center w-20 h-20 bg-amber-100 rounded-full mb-6">
+            <AlertTriangle className="w-10 h-10 text-amber-600" />
+          </div>
+          
+          <h1 className="text-3xl font-bold text-neutral-900 mb-4">
+            {t('maintenance.title')}
+          </h1>
+          
+          <p className="text-lg text-neutral-600 mb-8">
+            {t('maintenance.message')}
+          </p>
+          
+          {settings?.branding_support_email && (
+            <p className="text-sm text-neutral-500 mt-8">
+              {t('maintenance.urgentMatters')}{' '}
+              <a 
+                href={`mailto:${settings.branding_support_email}`}
+                className="text-primary-600 hover:text-primary-700"
+              >
+                {settings.branding_support_email}
+              </a>
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Footer */}
+      {settings?.branding_footer_text && (
+        <footer className="py-4 border-t border-neutral-200">
+          <div className="container text-center">
+            <p className="text-sm text-neutral-500">
+              {settings.branding_footer_text}
+            </p>
+          </div>
+        </footer>
+      )}
+    </div>
+  );
+};