+ {/* Language Selector */}
+ = ({ isOpen, onClose }) => {
const location = useLocation();
+ const { t } = useTranslation();
return (
diff --git a/frontend/src/components/gallery/GalleryLayout.tsx b/frontend/src/components/gallery/GalleryLayout.tsx
new file mode 100644
index 0000000..1b642f2
--- /dev/null
+++ b/frontend/src/components/gallery/GalleryLayout.tsx
@@ -0,0 +1,171 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Calendar, Clock, Download, LogOut } from 'lucide-react';
+import { format, parseISO } from 'date-fns';
+import { useTranslation } from 'react-i18next';
+import { Button, LanguageSelector } from '../common';
+import { DynamicFavicon } from '../common/DynamicFavicon';
+
+interface GalleryLayoutProps {
+ event: {
+ event_name: string;
+ event_type?: string;
+ event_date?: string;
+ expires_at?: string;
+ };
+ brandingSettings?: {
+ company_name?: string;
+ company_tagline?: string;
+ support_email?: string;
+ footer_text?: string;
+ favicon_url?: string;
+ logo_url?: string;
+ };
+ showLogout?: boolean;
+ onLogout?: () => void;
+ showDownloadAll?: boolean;
+ onDownloadAll?: () => void;
+ isDownloading?: boolean;
+ headerExtra?: React.ReactNode;
+ children: React.ReactNode;
+}
+
+export const GalleryLayout: React.FC = ({ isOpen, onClose }) =
= ({
daysRemaining,
expiresAt
}) => {
+ const { t } = useTranslation();
const expirationDate = parseISO(expiresAt);
const countdownRenderer = ({ days, hours, minutes, completed }: any) => {
if (completed) {
- return Gallery has expired;
+ return {t('gallery.expired')};
} else {
return (
@@ -39,12 +41,12 @@ export const ExpirationBanner: React.FC = ({
+ {/* Dynamic Favicon */}
+
+
+
+ {/* Main Content */}
+ {children}
+
+ {/* Footer */}
+
+
+ );
+};
+
+GalleryLayout.displayName = 'GalleryLayout';
\ No newline at end of file
diff --git a/frontend/src/components/gallery/GalleryView.tsx b/frontend/src/components/gallery/GalleryView.tsx
index 18ffd93..bd8a3ec 100644
--- a/frontend/src/components/gallery/GalleryView.tsx
+++ b/frontend/src/components/gallery/GalleryView.tsx
@@ -1,14 +1,16 @@
-import React, { useState, useMemo, useEffect } from 'react';
-import { Download, Grid, Square, LogOut, Calendar, Clock, Search, SortAsc } from 'lucide-react';
-import { format, differenceInDays, parseISO } from 'date-fns';
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+import { differenceInDays, parseISO } from 'date-fns';
import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
-import { Button, Input, SkeletonGalleryGrid, Skeleton } from '../common';
+import { Button, SkeletonGalleryGrid, Skeleton } from '../common';
import { useGalleryAuth, useTheme } from '../../contexts';
import { useGalleryPhotos, useDownloadAllPhotos } from '../../hooks/useGallery';
import { PhotoGrid } from './PhotoGrid';
import { ExpirationBanner } from './ExpirationBanner';
import { CountdownTimer } from './CountdownTimer';
+import { GalleryLayout } from './GalleryLayout';
+import { PhotoFilterBar } from './PhotoFilterBar';
import { analyticsService } from '../../services/analytics.service';
import { api } from '../../config/api';
@@ -26,13 +28,14 @@ interface GalleryViewProps {
}
export const GalleryView: React.FC
+
+
+
+
+ {/* Company logo */}
+ {brandingSettings?.logo_url && (
+
+
+
+ 
+
+ )}
+ {/* Company branding */}
+ {!brandingSettings?.logo_url && brandingSettings?.company_name && (
+
+
+ )}
+ {brandingSettings.company_name}
+ {brandingSettings.company_tagline && ( +{brandingSettings.company_tagline}
+ )} +
+
+ {event.event_name}
+ {(event.event_date || event.expires_at) && ( +
+ {event.event_date && (
+
+
+ )}
+
+ {headerExtra}
+
+
-
Failed to load photos
+{t('gallery.failedToLoad')}
+ 0 ? (
+
-
-
{/* Welcome Message */}
{event.welcome_message && (
-
+
@@ -510,6 +549,29 @@ export const SettingsPage: React.FC = () => {
)}
+
+ {/* Categories Tab */}
+ {activeTab === 'categories' && (
+
-
-
-
-
- {/* Company branding */}
- {brandingSettings?.company_name && (
-
-
-
-
- )}
- {brandingSettings.company_name}
- {brandingSettings.company_tagline && ( -{brandingSettings.company_tagline}
- )} -
-
- {event.event_name}
-
-
-
-
- {daysUntilExpiration <= 1 && daysUntilExpiration > 0 && (
-
-
+
@@ -267,125 +241,24 @@ export const GalleryView: React.FC = ({ slug, event }) => {
)}
{/* Search and Filters */}
- = ({
+ categories = [],
+ photos,
+ selectedCategoryId,
+ onCategoryChange,
+ searchTerm,
+ onSearchChange,
+ sortBy,
+ onSortChange,
+ photoCount,
+}) => {
+ const { t } = useTranslation();
+ const [showSortMenu, setShowSortMenu] = useState(false);
+
+ return (
+ = ({ photos, slug }) => {
+export const PhotoGrid: React.FC = ({ photos, slug, categoryId }) => {
+ const { t } = useTranslation();
const [selectedPhotoIndex, setSelectedPhotoIndex] = useState(null);
const [selectedPhotos, setSelectedPhotos] = useState>(new Set());
const [isSelectionMode, setIsSelectionMode] = useState(false);
const downloadPhotoMutation = useDownloadPhoto();
- const handlePhotoClick = (index: number) => {
- if (isSelectionMode) {
+ // Clear selection when category changes
+ useEffect(() => {
+ setSelectedPhotos(new Set());
+ }, [categoryId]);
+
+ const handlePhotoClick = (index: number, e?: React.MouseEvent) => {
+ // Check for ctrl/cmd+click for quick selection
+ if (e && (e.ctrlKey || e.metaKey)) {
+ if (!isSelectionMode) {
+ setIsSelectionMode(true);
+ }
+ const newSelected = new Set(selectedPhotos);
+ if (newSelected.has(photos[index].id)) {
+ newSelected.delete(photos[index].id);
+ } else {
+ newSelected.add(photos[index].id);
+ }
+ setSelectedPhotos(newSelected);
+ } else if (isSelectionMode) {
const newSelected = new Set(selectedPhotos);
if (newSelected.has(photos[index].id)) {
newSelected.delete(photos[index].id);
@@ -66,7 +86,7 @@ export const PhotoGrid: React.FC = ({ photos, slug }) => {
const selectedPhotosList = photos.filter(p => selectedPhotos.has(p.id));
- toast.info(`Downloading ${selectedPhotos.size} photos...`);
+ toastify.info(t('gallery.downloading', { count: selectedPhotos.size }));
// Download each selected photo
const downloadPromises = selectedPhotosList.map(photo =>
@@ -79,7 +99,7 @@ export const PhotoGrid: React.FC = ({ photos, slug }) => {
try {
await Promise.all(downloadPromises);
- toast.success(`Downloaded ${selectedPhotos.size} photos!`);
+ toastify.success(t('gallery.downloadedPhotos', { count: selectedPhotos.size }));
// Track bulk download
analyticsService.trackGalleryEvent('bulk_download', {
@@ -91,14 +111,14 @@ export const PhotoGrid: React.FC = ({ photos, slug }) => {
setSelectedPhotos(new Set());
setIsSelectionMode(false);
} catch (error) {
- toast.error('Some photos failed to download');
+ toastify.error(t('gallery.downloadError'));
}
};
if (photos.length === 0) {
return (
= ({ photos, slug }) => {
{/* Selection Mode Controls */}
{photos.length > 1 && (
@@ -280,6 +296,29 @@ export const SettingsPage: React.FC = () => {
Enable maintenance mode
+
+
+ {event.welcome_message}
-
+
);
};
\ No newline at end of file
diff --git a/frontend/src/components/gallery/PhotoFilterBar.tsx b/frontend/src/components/gallery/PhotoFilterBar.tsx
new file mode 100644
index 0000000..6413a7e
--- /dev/null
+++ b/frontend/src/components/gallery/PhotoFilterBar.tsx
@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import { Search, SortAsc, Grid } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, Input } from '../common';
+
+interface PhotoCategory {
+ id: number;
+ name: string;
+ slug: string;
+ is_global: boolean;
+}
+
+interface Photo {
+ id: number;
+ category_id?: number;
+}
+
+interface PhotoFilterBarProps {
+ categories?: PhotoCategory[];
+ photos: Photo[];
+ selectedCategoryId: number | null;
+ onCategoryChange: (categoryId: number | null) => void;
+ searchTerm: string;
+ onSearchChange: (term: string) => void;
+ sortBy: 'date' | 'name' | 'size';
+ onSortChange: (sort: 'date' | 'name' | 'size') => void;
+ photoCount: number;
+}
+
+export const PhotoFilterBar: React.FC
- {/* Search Bar */}
-
-
- {/* View Mode Toggle */}
-
- }
- value={searchTerm}
- onChange={(e) => setSearchTerm(e.target.value)}
- />
-
-
- {/* Sort Dropdown */}
-
- }
- onClick={() => setShowSortMenu(!showSortMenu)}
- >
- Sort by {sortBy === 'date' ? 'Date' : sortBy === 'name' ? 'Name' : 'Size'}
-
-
- {showSortMenu && (
-
-
-
-
-
-
- )}
-
-
+
-
-
-
-
-
- - {filteredPhotos.length} {filteredPhotos.length === 1 ? 'photo' : 'photos'} -
-
+
-
- {/* Footer */}
-
+ {/* Search and Sort */}
+
+ );
+};
+
+PhotoFilterBar.displayName = 'PhotoFilterBar';
\ No newline at end of file
diff --git a/frontend/src/components/gallery/PhotoGrid.tsx b/frontend/src/components/gallery/PhotoGrid.tsx
index 8169a4e..336764c 100644
--- a/frontend/src/components/gallery/PhotoGrid.tsx
+++ b/frontend/src/components/gallery/PhotoGrid.tsx
@@ -1,28 +1,48 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
import { Download, Maximize2, Check, Package } from 'lucide-react';
import { useInView } from 'react-intersection-observer';
-import { toast } from 'react-toastify';
+import { toast as toastify } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
import type { Photo } from '../../types';
import { useDownloadPhoto } from '../../hooks/useGallery';
import { PhotoLightbox } from './PhotoLightbox';
-import { Button } from '../common';
+import { Button, AuthenticatedImage } from '../common';
import { galleryService } from '../../services/gallery.service';
import { analyticsService } from '../../services/analytics.service';
interface PhotoGridProps {
photos: Photo[];
slug: string;
+ categoryId?: number | null;
}
-export const PhotoGrid: React.FC
+ {/* Search Bar */}
+
+
+ {/* Category Filter */}
+ {categories && categories.length > 0 && (
+
+ }
+ value={searchTerm}
+ onChange={(e) => onSearchChange(e.target.value)}
+ />
+
+
+ {/* Sort Dropdown */}
+
+ }
+ onClick={() => setShowSortMenu(!showSortMenu)}
+ >
+ {t('common.sortBy')} {sortBy === 'date' ? t('gallery.sortByDate').replace('Sort by ', '') : sortBy === 'name' ? t('gallery.sortByName').replace('Sort by ', '') : t('gallery.sortBySize').replace('Sort by ', '')}
+
+
+ {showSortMenu && (
+
+
+
+
+
+
+ )}
+
+
+ )}
+
+
+ {categories.map((category) => {
+ const categoryPhotoCount = photos.filter(p => p.category_id === category.id).length;
+ if (categoryPhotoCount === 0) return null;
+
+ return (
+
+ );
+ })}
+
+
+ + {photoCount} {photoCount === 1 ? t('common.photo') : t('common.photos')} +
+
-
);
}
@@ -108,24 +128,39 @@ export const PhotoGrid: React.FCNo photos found
+{t('gallery.noPhotosFound')}
-
+ = ({ photos, slug }) => {
photo={photo}
isSelected={selectedPhotos.has(photo.id)}
isSelectionMode={isSelectionMode}
- onClick={() => handlePhotoClick(index)}
+ onClick={(e) => handlePhotoClick(index, e)}
onDownload={(e) => handleDownload(photo, e)}
/>
))}
@@ -173,7 +208,7 @@ interface PhotoThumbnailProps {
photo: Photo;
isSelected: boolean;
isSelectionMode: boolean;
- onClick: () => void;
+ onClick: (e: React.MouseEvent) => void;
onDownload: (e: React.MouseEvent) => void;
}
@@ -192,12 +227,12 @@ const PhotoThumbnail: React.FC = ({
return (
+
+
+
+ {!isSelectionMode && (
+
+ )}
+
{isSelectionMode && (
- {selectedPhotos.size} selected
+ {t('gallery.photosSelected', { count: selectedPhotos.size })}
{selectedPhotos.size > 0 && (
)}
@@ -150,7 +185,7 @@ export const PhotoGrid: React.FC onClick(e)}
>
{inView ? (
<>
- 
= ({
className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
onClick={(e) => {
e.stopPropagation();
- onClick();
+ onClick(e);
}}
aria-label="View full size"
>
@@ -232,7 +267,7 @@ const PhotoThumbnail: React.FC = ({
{/* Selection checkbox */}
{isSelectionMode && (
= ({
const [theme, setTheme] = useState(initialTheme);
const [themeName, setThemeName] = useState(initialThemeName);
- const applyTheme = (themeConfig: ThemeConfig) => {
+ const applyTheme = useCallback((themeConfig: ThemeConfig) => {
const root = document.documentElement;
// Apply CSS variables
@@ -154,56 +154,76 @@ export const ThemeProvider: React.FC = ({
}
styleElement.textContent = themeConfig.customCss;
}
- };
+ }, []);
- const setThemeByName = (name: string) => {
+ const setThemeConfig = useCallback((newTheme: ThemeConfig) => {
+ setTheme(newTheme);
+ applyTheme(newTheme);
+ }, [applyTheme]);
+
+ const setThemeByName = useCallback((name: string) => {
const presetTheme = PRESET_THEMES[name];
if (presetTheme) {
setThemeName(name);
setTheme(presetTheme.config);
applyTheme(presetTheme.config);
}
- };
+ }, [applyTheme]);
- const resetTheme = () => {
+ const resetTheme = useCallback(() => {
setThemeByName('default');
- };
+ }, [setThemeByName]);
+ // Apply theme when it changes, but skip if it's the same
useEffect(() => {
- applyTheme(theme);
- }, [theme]);
+ const root = document.documentElement;
+ const currentPrimary = root.style.getPropertyValue('--color-primary');
+
+ // Only apply if the theme has actually changed
+ if (currentPrimary !== theme.primaryColor) {
+ applyTheme(theme);
+ }
+ }, [theme, applyTheme]);
- // Load theme from localStorage on mount
+ // Load theme from localStorage on mount (skip if in gallery view)
useEffect(() => {
- const savedTheme = localStorage.getItem('gallery-theme');
- if (savedTheme) {
- try {
- const parsed = JSON.parse(savedTheme);
- setTheme(parsed.config);
- setThemeName(parsed.name);
- } catch (e) {
- console.error('Failed to load saved theme:', e);
+ // Check if we're in a gallery view by looking at the URL
+ const isGalleryView = window.location.pathname.includes('/gallery/');
+ if (!isGalleryView) {
+ const savedTheme = localStorage.getItem('gallery-theme');
+ if (savedTheme) {
+ try {
+ const parsed = JSON.parse(savedTheme);
+ setTheme(parsed.config);
+ setThemeName(parsed.name);
+ } catch (e) {
+ console.error('Failed to load saved theme:', e);
+ }
}
}
}, []);
// Save theme to localStorage when it changes
useEffect(() => {
- localStorage.setItem('gallery-theme', JSON.stringify({ name: themeName, config: theme }));
+ // Only save if theme has actually changed
+ const currentSaved = localStorage.getItem('gallery-theme');
+ const newValue = JSON.stringify({ name: themeName, config: theme });
+ if (currentSaved !== newValue) {
+ localStorage.setItem('gallery-theme', newValue);
+ }
}, [theme, themeName]);
+ const contextValue = useMemo(() => ({
+ theme,
+ themeName,
+ setTheme: setThemeConfig,
+ setThemeByName,
+ applyTheme,
+ resetTheme
+ }), [theme, themeName, setThemeConfig, setThemeByName, applyTheme, resetTheme]);
+
return (
- {
- setTheme(newTheme);
- applyTheme(newTheme);
- },
- setThemeByName,
- applyTheme,
- resetTheme
- }}>
+
{children}
);
diff --git a/frontend/src/i18n/config.ts b/frontend/src/i18n/config.ts
new file mode 100644
index 0000000..4f4c945
--- /dev/null
+++ b/frontend/src/i18n/config.ts
@@ -0,0 +1,36 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import HttpBackend from 'i18next-http-backend';
+
+import enTranslations from './locales/en.json';
+import deTranslations from './locales/de.json';
+
+i18n
+ .use(HttpBackend)
+ .use(LanguageDetector)
+ .use(initReactI18next)
+ .init({
+ fallbackLng: 'en',
+ debug: false,
+
+ resources: {
+ en: {
+ translation: enTranslations,
+ },
+ de: {
+ translation: deTranslations,
+ },
+ },
+
+ interpolation: {
+ escapeValue: false,
+ },
+
+ detection: {
+ order: ['localStorage', 'cookie', 'navigator', 'htmlTag'],
+ caches: ['localStorage', 'cookie'],
+ },
+ });
+
+export default i18n;
\ No newline at end of file
diff --git a/frontend/src/i18n/locales/de.json b/frontend/src/i18n/locales/de.json
new file mode 100644
index 0000000..bbe5a4e
--- /dev/null
+++ b/frontend/src/i18n/locales/de.json
@@ -0,0 +1,284 @@
+{
+ "common": {
+ "loading": "Wird geladen...",
+ "error": "Fehler",
+ "save": "Speichern",
+ "cancel": "Abbrechen",
+ "delete": "Löschen",
+ "edit": "Bearbeiten",
+ "add": "Hinzufügen",
+ "search": "Suchen",
+ "filter": "Filtern",
+ "sortBy": "Sortieren nach",
+ "yes": "Ja",
+ "no": "Nein",
+ "back": "Zurück",
+ "next": "Weiter",
+ "previous": "Zurück",
+ "close": "Schließen",
+ "logout": "Abmelden",
+ "download": "Herunterladen",
+ "downloadAll": "Alle herunterladen",
+ "uploading": "Wird hochgeladen...",
+ "uploaded": "Hochgeladen",
+ "photo": "Foto",
+ "photos": "Fotos"
+ },
+ "navigation": {
+ "dashboard": "Dashboard",
+ "events": "Veranstaltungen",
+ "archives": "Archive",
+ "settings": "Einstellungen",
+ "branding": "Branding",
+ "analytics": "Analytik",
+ "emailSettings": "E-Mail-Einstellungen",
+ "cmsPages": "CMS-Seiten"
+ },
+ "auth": {
+ "login": "Anmelden",
+ "password": "Passwort",
+ "enterPassword": "Galerie-Passwort eingeben",
+ "passwordPlaceholder": "Geben Sie das Galerie-Passwort ein",
+ "invalidPassword": "Ungültiges Passwort",
+ "sessionExpired": "Sitzung abgelaufen",
+ "pleaseEnterPassword": "Bitte geben Sie ein Passwort ein",
+ "passwordHint": "Das Passwort wurde vom Veranstalter bereitgestellt. Kontaktieren Sie ihn, wenn Sie es nicht haben."
+ },
+ "gallery": {
+ "title": "Fotogalerie",
+ "welcomeMessage": "Willkommensnachricht",
+ "expiresOn": "Läuft ab am",
+ "expires": "Läuft ab",
+ "expired": "Abgelaufen",
+ "daysRemaining": "{{days}} Tage verbleibend",
+ "dayRemaining": "1 Tag verbleibend",
+ "hoursRemaining": "{{hours}} Stunden verbleibend",
+ "expiredMessage": "Diese Galerie ist am {{date}} abgelaufen",
+ "contactOrganizer": "Bitte kontaktieren Sie den Veranstalter, wenn Sie Zugriff auf diese Fotos benötigen",
+ "searchPhotos": "Fotos nach Dateiname suchen...",
+ "sortByDate": "Nach Datum sortieren",
+ "sortByName": "Nach Name sortieren",
+ "sortBySize": "Nach Größe sortieren",
+ "allPhotos": "Alle Fotos",
+ "downloadSelected": "Ausgewählte herunterladen",
+ "shareGallery": "Galerie teilen",
+ "needHelp": "Hilfe benötigt? Kontaktieren Sie uns unter",
+ "noPhotosFound": "Keine Fotos gefunden",
+ "failedToLoad": "Fotos konnten nicht geladen werden",
+ "tryAgain": "Erneut versuchen",
+ "loading": "Galerie wird geladen...",
+ "expiredOn": "Diese Galerie ist am {{date}} abgelaufen.",
+ "contactOrganizer": "Bitte kontaktieren Sie den Veranstalter, wenn Sie Zugriff auf diese Fotos benötigen.",
+ "expiresIn": "Galerie läuft in {{count}} Tag ab",
+ "expiresIn_plural": "Galerie läuft in {{count}} Tagen ab",
+ "downloadBefore": "Laden Sie Ihre Fotos herunter, bevor sie nicht mehr verfügbar sind.",
+ "viewGallery": "Galerie anzeigen",
+ "downloadAll": "Alle herunterladen",
+ "downloading": "Lade {{count}} Foto herunter...",
+ "downloading_plural": "Lade {{count}} Fotos herunter...",
+ "downloadedPhotos": "{{count}} Foto heruntergeladen!",
+ "downloadedPhotos_plural": "{{count}} Fotos heruntergeladen!",
+ "downloadError": "Einige Fotos konnten nicht heruntergeladen werden",
+ "selectPhotos": "Fotos auswählen",
+ "cancelSelection": "Auswahl abbrechen",
+ "photosSelected": "{{count}} ausgewählt",
+ "selectAll": "Alle auswählen",
+ "deselectAll": "Auswahl aufheben",
+ "downloadSelected": "{{count}} ausgewählte herunterladen",
+ "remaining": "verbleibend",
+ "selectPhotosHint": "Tipp: Verwenden Sie Strg+Klick (Cmd+Klick auf Mac), um schnell mehrere Fotos auszuwählen"
+ },
+ "categories": {
+ "title": "Fotokategorien",
+ "global": "Globale Kategorien",
+ "eventSpecific": "Veranstaltungsspezifische Kategorien",
+ "addCategory": "Kategorie hinzufügen",
+ "categoryName": "Kategoriename",
+ "noCategory": "Keine Kategorie",
+ "noCategoriesYet": "Noch keine Kategorien. Erstellen Sie Ihre erste Kategorie, um Fotos zu organisieren.",
+ "deleteConfirm": "Sind Sie sicher, dass Sie \"{{name}}\" löschen möchten?",
+ "cannotDelete": "Kategorie mit Fotos kann nicht gelöscht werden. Bitte weisen Sie die Fotos zuerst neu zu."
+ },
+ "events": {
+ "title": "Veranstaltungen",
+ "createEvent": "Veranstaltung erstellen",
+ "eventDetails": "Veranstaltungsdetails",
+ "eventName": "Veranstaltungsname",
+ "eventType": "Veranstaltungstyp",
+ "eventDate": "Veranstaltungsdatum",
+ "hostEmail": "Gastgeber-E-Mail",
+ "adminEmail": "Admin-E-Mail",
+ "expirationDate": "Ablaufdatum",
+ "active": "Aktiv",
+ "archived": "Archiviert",
+ "photoCount": "{{count}} Fotos",
+ "totalSize": "Gesamtgröße",
+ "shareLink": "Freigabelink",
+ "copyLink": "Link kopieren",
+ "linkCopied": "Link kopiert!",
+ "viewGallery": "Galerie ansehen",
+ "uploadPhotos": "Fotos hochladen",
+ "archiveEvent": "Veranstaltung archivieren",
+ "archiveConfirm": "Sind Sie sicher, dass Sie diese Veranstaltung archivieren möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+ "extendExpiration": "Um {{days}} Tage verlängern"
+ },
+ "settings": {
+ "title": "Systemeinstellungen",
+ "general": {
+ "title": "Allgemein",
+ "siteConfiguration": "Website-Konfiguration",
+ "siteUrl": "Website-URL",
+ "siteUrlHelp": "Wird für die Generierung von Galerielinks in E-Mails verwendet",
+ "defaultExpiration": "Standardablauf (Tage)",
+ "maxFileSize": "Max. Dateigröße (MB)",
+ "allowedFileTypes": "Erlaubte Dateitypen",
+ "allowedFileTypesHelp": "Kommagetrennte Liste von Dateierweiterungen",
+ "featureToggles": "Funktionsschalter",
+ "enableWatermark": "Wasserzeichen auf Fotos aktivieren",
+ "enableAnalytics": "Analytics-Tracking aktivieren",
+ "enableRegistration": "Selbstregistrierung für Admins erlauben",
+ "maintenanceMode": "Wartungsmodus aktivieren",
+ "language": "Sprache",
+ "saveSettings": "Allgemeine Einstellungen speichern"
+ },
+ "storage": {
+ "title": "Speicher",
+ "overview": "Speicherübersicht",
+ "totalUsed": "Gesamt verwendet",
+ "archiveStorage": "Archivspeicher",
+ "storageLimit": "Speicherlimit",
+ "storageUsage": "Speichernutzung",
+ "storageByEvent": "Speicher nach Veranstaltung",
+ "storageManagement": "Speicherverwaltung",
+ "storageManagementHelp": "Erwägen Sie, alte Veranstaltungen zu archivieren oder zu löschen, um Speicherplatz freizugeben. Archivierte Veranstaltungen sind komprimiert und benötigen weniger Speicher als aktive Galerien."
+ },
+ "security": {
+ "title": "Sicherheit",
+ "passwordSettings": "Passworteinstellungen",
+ "requirePassword": "Passwort für alle Galerien erforderlich",
+ "minPasswordLength": "Minimale Passwortlänge",
+ "sessionAuth": "Sitzung & Authentifizierung",
+ "sessionTimeout": "Sitzungs-Timeout (Minuten)",
+ "maxLoginAttempts": "Max. Anmeldeversuche",
+ "enable2FA": "Zwei-Faktor-Authentifizierung für Admins aktivieren",
+ "recaptchaSettings": "reCAPTCHA-Einstellungen",
+ "enableRecaptcha": "reCAPTCHA für Anmeldeformulare aktivieren",
+ "siteKey": "Site-Schlüssel",
+ "secretKey": "Geheimer Schlüssel",
+ "recaptchaHelp": "Holen Sie sich Ihre reCAPTCHA-Schlüssel von",
+ "saveSettings": "Sicherheitseinstellungen speichern"
+ },
+ "categories": {
+ "title": "Kategorien",
+ "about": "Über Fotokategorien",
+ "aboutText": "Globale Kategorien sind für alle Veranstaltungen verfügbar. Sie können auch veranstaltungsspezifische Kategorien erstellen, wenn Sie einzelne Veranstaltungen bearbeiten. Kategorien helfen beim Organisieren von Fotos und ermöglichen es Gästen, Fotos nach Typ in der Galerieansicht zu filtern."
+ }
+ },
+ "branding": {
+ "title": "Branding & Anpassung",
+ "companyInfo": "Unternehmensinformationen",
+ "companyName": "Unternehmensname",
+ "companyTagline": "Unternehmens-Slogan",
+ "supportEmail": "Support-E-Mail",
+ "footerText": "Fußzeilentext",
+ "logo": "Logo",
+ "uploadLogo": "Logo hochladen",
+ "removeLogo": "Logo entfernen",
+ "favicon": "Favicon",
+ "uploadFavicon": "Favicon hochladen",
+ "removeFavicon": "Favicon entfernen",
+ "watermark": "Wasserzeichen",
+ "enableWatermark": "Wasserzeichen auf Fotos aktivieren",
+ "theme": "Theme",
+ "themeCustomization": "Theme-Anpassung",
+ "selectPreset": "Vorgefertigtes Theme auswählen",
+ "colors": "Farben",
+ "primaryColor": "Primärfarbe",
+ "secondaryColor": "Sekundärfarbe",
+ "accentColor": "Akzentfarbe",
+ "customCSS": "Benutzerdefiniertes CSS",
+ "preview": "Vorschau",
+ "previewInNewTab": "Vorschau in neuem Tab",
+ "reset": "Zurücksetzen",
+ "saveChanges": "Änderungen speichern"
+ },
+ "admin": {
+ "title": "Admin-Panel",
+ "welcome": "Willkommen zurück, {{name}}",
+ "recentActivity": "Letzte Aktivitäten",
+ "systemStatus": "Systemstatus",
+ "totalEvents": "Gesamte Veranstaltungen",
+ "activeGalleries": "Aktive Galerien",
+ "storageUsed": "Speicher verwendet",
+ "totalPhotos": "Gesamte Fotos",
+ "storagePercent": "{{percent}}% von {{limit}}",
+ "notifications": "Benachrichtigungen",
+ "viewAllNotifications": "Alle Benachrichtigungen anzeigen",
+ "changePassword": "Passwort ändern",
+ "loadingDashboard": "Dashboard wird geladen...",
+ "activeEvents": "Aktive Veranstaltungen",
+ "expiringSoon": "Demnächst ablaufend",
+ "next7Days": "Nächste 7 Tage",
+ "totalViews": "Gesamtaufrufe",
+ "downloads": "Downloads",
+ "percentFromLastWeek": "{{percent}}% gegenüber letzter Woche",
+ "dashboardSubtitle": "Willkommen zurück! Hier ist, was mit Ihren Galerien passiert.",
+ "eventsExpiringSoon": "Demnächst ablaufende Veranstaltungen",
+ "noEventsExpiring": "Keine Veranstaltungen laufen in den nächsten 7 Tagen ab",
+ "daysLeft": "{{count}} Tag verbleibend",
+ "daysLeft_plural": "{{count}} Tage verbleibend",
+ "viewAllExpiringEvents": "Alle {{count}} ablaufenden Veranstaltungen anzeigen",
+ "noRecentActivity": "Keine aktuellen Aktivitäten",
+ "viewAllActivity": "Alle Aktivitäten anzeigen",
+ "quickActions": "Schnellaktionen",
+ "viewArchives": "Archive anzeigen",
+ "analytics": "Analytik"
+ },
+ "errors": {
+ "notFound": "Nicht gefunden",
+ "galleryNotFound": "Galerie nicht gefunden",
+ "galleryNotFoundMessage": "Diese Galerie existiert nicht oder wurde entfernt.",
+ "unauthorized": "Nicht autorisiert",
+ "forbidden": "Verboten",
+ "serverError": "Serverfehler",
+ "somethingWentWrong": "Etwas ist schiefgelaufen",
+ "tryAgainLater": "Bitte versuchen Sie es später erneut",
+ "refreshPage": "Seite neu laden",
+ "oopsSomethingWentWrong": "Ups! Etwas ist schiefgelaufen",
+ "unexpectedError": "Es ist ein unerwarteter Fehler aufgetreten. Keine Sorge, Ihre Daten sind sicher.",
+ "goToHomepage": "Zur Startseite",
+ "errorDetails": "Fehlerdetails"
+ },
+ "legal": {
+ "impressum": "Impressum",
+ "datenschutz": "Datenschutzerklärung",
+ "termsOfService": "Nutzungsbedingungen",
+ "cookiePolicy": "Cookie-Richtlinie"
+ },
+ "toast": {
+ "saveSuccess": "Änderungen erfolgreich gespeichert",
+ "saveError": "Fehler beim Speichern der Änderungen",
+ "deleteSuccess": "Erfolgreich gelöscht",
+ "deleteError": "Fehler beim Löschen",
+ "uploadSuccess": "Upload erfolgreich abgeschlossen",
+ "uploadError": "Upload fehlgeschlagen",
+ "loginSuccess": "Anmeldung erfolgreich",
+ "loginError": "Anmeldung fehlgeschlagen",
+ "passwordChanged": "Passwort erfolgreich geändert",
+ "linkCopied": "Link in Zwischenablage kopiert",
+ "eventCreated": "Veranstaltung erfolgreich erstellt",
+ "eventUpdated": "Veranstaltung erfolgreich aktualisiert",
+ "eventArchived": "Veranstaltung erfolgreich archiviert",
+ "settingsSaved": "Einstellungen erfolgreich gespeichert",
+ "themeUpdated": "Theme erfolgreich aktualisiert",
+ "brandingUpdated": "Branding erfolgreich aktualisiert",
+ "categoryAdded": "Kategorie erfolgreich hinzugefügt",
+ "categoryDeleted": "Kategorie erfolgreich gelöscht",
+ "categoryUpdated": "Kategorie erfolgreich aktualisiert",
+ "emailConfigSaved": "E-Mail-Konfiguration erfolgreich gespeichert",
+ "testEmailSent": "Test-E-Mail erfolgreich gesendet",
+ "pageUpdated": "Seite erfolgreich aktualisiert",
+ "archiveRestored": "Archiv erfolgreich wiederhergestellt",
+ "archiveDeleted": "Archiv dauerhaft gelöscht"
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
new file mode 100644
index 0000000..5f301b1
--- /dev/null
+++ b/frontend/src/i18n/locales/en.json
@@ -0,0 +1,284 @@
+{
+ "common": {
+ "loading": "Loading...",
+ "error": "Error",
+ "save": "Save",
+ "cancel": "Cancel",
+ "delete": "Delete",
+ "edit": "Edit",
+ "add": "Add",
+ "search": "Search",
+ "filter": "Filter",
+ "sortBy": "Sort by",
+ "yes": "Yes",
+ "no": "No",
+ "back": "Back",
+ "next": "Next",
+ "previous": "Previous",
+ "close": "Close",
+ "logout": "Logout",
+ "download": "Download",
+ "downloadAll": "Download All",
+ "uploading": "Uploading...",
+ "uploaded": "Uploaded",
+ "photo": "photo",
+ "photos": "photos"
+ },
+ "navigation": {
+ "dashboard": "Dashboard",
+ "events": "Events",
+ "archives": "Archives",
+ "settings": "Settings",
+ "branding": "Branding",
+ "analytics": "Analytics",
+ "emailSettings": "Email Settings",
+ "cmsPages": "CMS Pages"
+ },
+ "auth": {
+ "login": "Login",
+ "password": "Password",
+ "enterPassword": "Enter Gallery Password",
+ "passwordPlaceholder": "Enter the gallery password",
+ "invalidPassword": "Invalid password",
+ "sessionExpired": "Session expired",
+ "pleaseEnterPassword": "Please enter a password",
+ "passwordHint": "The password was provided by the event organizer. Contact them if you don't have it."
+ },
+ "gallery": {
+ "title": "Photo Gallery",
+ "welcomeMessage": "Welcome Message",
+ "expiresOn": "Expires on",
+ "expires": "Expires",
+ "expired": "Expired",
+ "daysRemaining": "{{days}} days remaining",
+ "dayRemaining": "1 day remaining",
+ "hoursRemaining": "{{hours}} hours remaining",
+ "expiredMessage": "This gallery expired on {{date}}",
+ "contactOrganizer": "Please contact the event organizer if you need access to these photos",
+ "searchPhotos": "Search photos by filename...",
+ "sortByDate": "Sort by Date",
+ "sortByName": "Sort by Name",
+ "sortBySize": "Sort by Size",
+ "allPhotos": "All Photos",
+ "downloadSelected": "Download Selected",
+ "shareGallery": "Share Gallery",
+ "needHelp": "Need help? Contact us at",
+ "noPhotosFound": "No photos found",
+ "failedToLoad": "Failed to load photos",
+ "tryAgain": "Try Again",
+ "loading": "Loading gallery...",
+ "expiredOn": "This gallery expired on {{date}}.",
+ "contactOrganizer": "Please contact the event organizer if you need access to these photos.",
+ "expiresIn": "Gallery expires in {{count}} day",
+ "expiresIn_plural": "Gallery expires in {{count}} days",
+ "downloadBefore": "Download your photos before they're no longer available.",
+ "viewGallery": "View Gallery",
+ "downloadAll": "Download All",
+ "downloading": "Downloading {{count}} photo...",
+ "downloading_plural": "Downloading {{count}} photos...",
+ "downloadedPhotos": "Downloaded {{count}} photo!",
+ "downloadedPhotos_plural": "Downloaded {{count}} photos!",
+ "downloadError": "Some photos failed to download",
+ "selectPhotos": "Select Photos",
+ "cancelSelection": "Cancel Selection",
+ "photosSelected": "{{count}} selected",
+ "selectAll": "Select All",
+ "deselectAll": "Deselect All",
+ "downloadSelected": "Download {{count}} Selected",
+ "remaining": "remaining",
+ "selectPhotosHint": "Tip: Use Ctrl+Click (Cmd+Click on Mac) to quickly select multiple photos"
+ },
+ "categories": {
+ "title": "Photo Categories",
+ "global": "Global Categories",
+ "eventSpecific": "Event-Specific Categories",
+ "addCategory": "Add Category",
+ "categoryName": "Category name",
+ "noCategory": "No category",
+ "noCategoriesYet": "No categories yet. Create your first category to organize photos.",
+ "deleteConfirm": "Are you sure you want to delete \"{{name}}\"?",
+ "cannotDelete": "Cannot delete category with photos. Please reassign photos first."
+ },
+ "events": {
+ "title": "Events",
+ "createEvent": "Create Event",
+ "eventDetails": "Event Details",
+ "eventName": "Event Name",
+ "eventType": "Event Type",
+ "eventDate": "Event Date",
+ "hostEmail": "Host Email",
+ "adminEmail": "Admin Email",
+ "expirationDate": "Expiration Date",
+ "active": "Active",
+ "archived": "Archived",
+ "photoCount": "{{count}} photos",
+ "totalSize": "Total Size",
+ "shareLink": "Share Link",
+ "copyLink": "Copy Link",
+ "linkCopied": "Link copied!",
+ "viewGallery": "View Gallery",
+ "uploadPhotos": "Upload Photos",
+ "archiveEvent": "Archive Event",
+ "archiveConfirm": "Are you sure you want to archive this event? This action cannot be undone.",
+ "extendExpiration": "Extend {{days}} Days"
+ },
+ "settings": {
+ "title": "System Settings",
+ "general": {
+ "title": "General",
+ "siteConfiguration": "Site Configuration",
+ "siteUrl": "Site URL",
+ "siteUrlHelp": "Used for generating gallery links in emails",
+ "defaultExpiration": "Default Expiration (days)",
+ "maxFileSize": "Max File Size (MB)",
+ "allowedFileTypes": "Allowed File Types",
+ "allowedFileTypesHelp": "Comma-separated list of file extensions",
+ "featureToggles": "Feature Toggles",
+ "enableWatermark": "Enable watermark on photos",
+ "enableAnalytics": "Enable analytics tracking",
+ "enableRegistration": "Allow self-registration for admins",
+ "maintenanceMode": "Enable maintenance mode",
+ "language": "Language",
+ "saveSettings": "Save General Settings"
+ },
+ "storage": {
+ "title": "Storage",
+ "overview": "Storage Overview",
+ "totalUsed": "Total Used",
+ "archiveStorage": "Archive Storage",
+ "storageLimit": "Storage Limit",
+ "storageUsage": "Storage Usage",
+ "storageByEvent": "Storage by Event",
+ "storageManagement": "Storage Management",
+ "storageManagementHelp": "Consider archiving or deleting old events to free up storage space. Archived events are compressed and use less storage than active galleries."
+ },
+ "security": {
+ "title": "Security",
+ "passwordSettings": "Password Settings",
+ "requirePassword": "Require password for all galleries",
+ "minPasswordLength": "Minimum Password Length",
+ "sessionAuth": "Session & Authentication",
+ "sessionTimeout": "Session Timeout (minutes)",
+ "maxLoginAttempts": "Max Login Attempts",
+ "enable2FA": "Enable two-factor authentication for admins",
+ "recaptchaSettings": "reCAPTCHA Settings",
+ "enableRecaptcha": "Enable reCAPTCHA for login forms",
+ "siteKey": "Site Key",
+ "secretKey": "Secret Key",
+ "recaptchaHelp": "Get your reCAPTCHA keys from",
+ "saveSettings": "Save Security Settings"
+ },
+ "categories": {
+ "title": "Categories",
+ "about": "About Photo Categories",
+ "aboutText": "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."
+ }
+ },
+ "branding": {
+ "title": "Branding & Customization",
+ "companyInfo": "Company Information",
+ "companyName": "Company Name",
+ "companyTagline": "Company Tagline",
+ "supportEmail": "Support Email",
+ "footerText": "Footer Text",
+ "logo": "Logo",
+ "uploadLogo": "Upload Logo",
+ "removeLogo": "Remove Logo",
+ "favicon": "Favicon",
+ "uploadFavicon": "Upload Favicon",
+ "removeFavicon": "Remove Favicon",
+ "watermark": "Watermark",
+ "enableWatermark": "Enable watermark on photos",
+ "theme": "Theme",
+ "themeCustomization": "Theme Customization",
+ "selectPreset": "Select a preset theme",
+ "colors": "Colors",
+ "primaryColor": "Primary Color",
+ "secondaryColor": "Secondary Color",
+ "accentColor": "Accent Color",
+ "customCSS": "Custom CSS",
+ "preview": "Preview",
+ "previewInNewTab": "Preview in New Tab",
+ "reset": "Reset",
+ "saveChanges": "Save Changes"
+ },
+ "admin": {
+ "title": "Admin Panel",
+ "welcome": "Welcome back, {{name}}",
+ "recentActivity": "Recent Activity",
+ "systemStatus": "System Status",
+ "totalEvents": "Total Events",
+ "activeGalleries": "Active Galleries",
+ "storageUsed": "Storage Used",
+ "totalPhotos": "Total Photos",
+ "storagePercent": "{{percent}}% of {{limit}}",
+ "notifications": "Notifications",
+ "viewAllNotifications": "View all notifications",
+ "changePassword": "Change Password",
+ "loadingDashboard": "Loading dashboard...",
+ "activeEvents": "Active Events",
+ "expiringSoon": "Expiring Soon",
+ "next7Days": "Next 7 days",
+ "totalViews": "Total Views",
+ "downloads": "Downloads",
+ "percentFromLastWeek": "{{percent}}% from last week",
+ "dashboardSubtitle": "Welcome back! Here's what's happening with your galleries.",
+ "eventsExpiringSoon": "Events Expiring Soon",
+ "noEventsExpiring": "No events expiring in the next 7 days",
+ "daysLeft": "{{count}} day left",
+ "daysLeft_plural": "{{count}} days left",
+ "viewAllExpiringEvents": "View all {{count}} expiring events",
+ "noRecentActivity": "No recent activity",
+ "viewAllActivity": "View all activity",
+ "quickActions": "Quick Actions",
+ "viewArchives": "View Archives",
+ "analytics": "Analytics"
+ },
+ "errors": {
+ "notFound": "Not Found",
+ "galleryNotFound": "Gallery Not Found",
+ "galleryNotFoundMessage": "This gallery does not exist or has been removed.",
+ "unauthorized": "Unauthorized",
+ "forbidden": "Forbidden",
+ "serverError": "Server Error",
+ "somethingWentWrong": "Something went wrong",
+ "tryAgainLater": "Please try again later",
+ "refreshPage": "Refresh Page",
+ "oopsSomethingWentWrong": "Oops! Something went wrong",
+ "unexpectedError": "We encountered an unexpected error. Don't worry, your data is safe.",
+ "goToHomepage": "Go to Homepage",
+ "errorDetails": "Error Details"
+ },
+ "legal": {
+ "impressum": "Legal Notice",
+ "datenschutz": "Privacy Policy",
+ "termsOfService": "Terms of Service",
+ "cookiePolicy": "Cookie Policy"
+ },
+ "toast": {
+ "saveSuccess": "Changes saved successfully",
+ "saveError": "Failed to save changes",
+ "deleteSuccess": "Deleted successfully",
+ "deleteError": "Failed to delete",
+ "uploadSuccess": "Upload completed successfully",
+ "uploadError": "Upload failed",
+ "loginSuccess": "Login successful",
+ "loginError": "Login failed",
+ "passwordChanged": "Password changed successfully",
+ "linkCopied": "Link copied to clipboard",
+ "eventCreated": "Event created successfully",
+ "eventUpdated": "Event updated successfully",
+ "eventArchived": "Event archived successfully",
+ "settingsSaved": "Settings saved successfully",
+ "themeUpdated": "Theme updated successfully",
+ "brandingUpdated": "Branding updated successfully",
+ "categoryAdded": "Category added successfully",
+ "categoryDeleted": "Category deleted successfully",
+ "categoryUpdated": "Category updated successfully",
+ "emailConfigSaved": "Email configuration saved successfully",
+ "testEmailSent": "Test email sent successfully",
+ "pageUpdated": "Page updated successfully",
+ "archiveRestored": "Archive restored successfully",
+ "archiveDeleted": "Archive deleted permanently"
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 899136a..b90f9fa 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -160,4 +160,39 @@
.smooth-scroll {
scroll-behavior: smooth;
}
+
+ /* Custom range slider styles */
+ .slider {
+ -webkit-appearance: none;
+ appearance: none;
+ background: transparent;
+ cursor: pointer;
+ }
+
+ .slider::-webkit-slider-track {
+ @apply bg-neutral-200 h-2 rounded-lg;
+ }
+
+ .slider::-moz-range-track {
+ @apply bg-neutral-200 h-2 rounded-lg;
+ }
+
+ .slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ @apply bg-primary-600 h-5 w-5 rounded-full cursor-pointer transition-all;
+ margin-top: -6px;
+ }
+
+ .slider::-moz-range-thumb {
+ @apply bg-primary-600 h-5 w-5 rounded-full cursor-pointer transition-all border-0;
+ }
+
+ .slider:hover::-webkit-slider-thumb {
+ @apply bg-primary-700 scale-110;
+ }
+
+ .slider:hover::-moz-range-thumb {
+ @apply bg-primary-700 scale-110;
+ }
}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index bef5202..fbb4c06 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,6 +1,7 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
+import './i18n/config'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
diff --git a/frontend/src/pages/GalleryPage.tsx b/frontend/src/pages/GalleryPage.tsx
index 2e7e41d..9252ef5 100644
--- a/frontend/src/pages/GalleryPage.tsx
+++ b/frontend/src/pages/GalleryPage.tsx
@@ -1,23 +1,44 @@
import React, { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
import { Camera, Calendar, AlertCircle, Clock } from 'lucide-react';
import { format, differenceInDays, parseISO } from 'date-fns';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
import { Card, CardContent, Input, Button, Loading } from '../components/common';
import { useGalleryAuth } from '../contexts';
import { useGalleryInfo } from '../hooks/useGallery';
import { GalleryView } from '../components/gallery';
import { analyticsService } from '../services/analytics.service';
+import { api } from '../config/api';
export const GalleryPage: React.FC = () => {
const { slug, token } = useParams<{ slug: string; token?: string }>();
const { isAuthenticated, login, event } = useGalleryAuth();
+ const { t, i18n } = useTranslation();
const [password, setPassword] = useState('');
const [isLoggingIn, setIsLoggingIn] = useState(false);
const [loginError, setLoginError] = useState(null);
// Fetch gallery info (public data)
const { data: galleryInfo, isLoading: isLoadingInfo, error: infoError } = useGalleryInfo(slug!, token);
+
+ // Fetch branding settings
+ const { data: settingsData } = useQuery({
+ queryKey: ['gallery-settings'],
+ queryFn: async () => {
+ const response = await api.get('/api/public/settings');
+ return response.data;
+ },
+ staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+ });
+
+ // Set language from admin settings when on login page
+ React.useEffect(() => {
+ if (!isAuthenticated && settingsData?.default_language) {
+ i18n.changeLanguage(settingsData.default_language);
+ }
+ }, [settingsData, isAuthenticated, i18n]);
// Calculate days until expiration
const daysUntilExpiration = galleryInfo
@@ -27,7 +48,7 @@ export const GalleryPage: React.FC = () => {
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
if (!password.trim()) {
- setLoginError('Please enter a password');
+ setLoginError(t('auth.pleaseEnterPassword'));
return;
}
@@ -42,7 +63,7 @@ export const GalleryPage: React.FC = () => {
success: true
});
} catch (error: any) {
- setLoginError(error.response?.data?.error || 'Invalid password');
+ setLoginError(error.response?.data?.error || t('auth.invalidPassword'));
// Track failed password entry
analyticsService.trackGalleryEvent('password_entry', {
@@ -57,8 +78,10 @@ export const GalleryPage: React.FC = () => {
// Show loading state
if (isLoadingInfo) {
return (
- ('impressum');
+ const [editingLang, setEditingLang] = useState<'en' | 'de'>('en');
+ const [editForm, setEditForm] = useState>({});
+
+ // Fetch CMS pages
+ const { data: pages, isLoading } = useQuery({
+ queryKey: ['cms-pages'],
+ queryFn: cmsService.getPages,
+ });
+
+ // Update page mutation
+ const updateMutation = useMutation({
+ mutationFn: ({ slug, data }: { slug: string; data: Partial }) =>
+ cmsService.updatePage(slug, data),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['cms-pages'] });
+ toast.success('Page updated successfully');
+ },
+ onError: () => {
+ toast.error('Failed to update page');
+ },
+ });
+
+ // Load page data when selection changes
+ React.useEffect(() => {
+ if (pages) {
+ const page = pages.find(p => p.slug === selectedPage);
+ if (page) {
+ setEditForm(page);
+ }
+ }
+ }, [pages, selectedPage]);
+
+ const handleSave = () => {
+ updateMutation.mutate({
+ slug: selectedPage,
+ data: editForm,
+ });
+ };
+
+ const handleContentChange = (content: string) => {
+ const field = editingLang === 'de' ? 'content_de' : 'content_en';
+ setEditForm(prev => ({ ...prev, [field]: content }));
+ };
+
+ const handleTitleChange = (title: string) => {
+ const field = editingLang === 'de' ? 'title_de' : 'title_en';
+ setEditForm(prev => ({ ...prev, [field]: title }));
+ };
+
+ if (isLoading) {
+ return (
+
- = ({
onTouchEnd={handleTouchEnd}
style={{ cursor: zoom > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default' }}
>
- 
= ({
transition: isDragging ? 'none' : 'transform 0.2s',
}}
draggable={false}
+ useWatermark={true}
/>
diff --git a/frontend/src/components/gallery/index.ts b/frontend/src/components/gallery/index.ts
index 91c74ec..dbd7c76 100644
--- a/frontend/src/components/gallery/index.ts
+++ b/frontend/src/components/gallery/index.ts
@@ -2,4 +2,6 @@ export { GalleryView } from './GalleryView';
export { PhotoGrid } from './PhotoGrid';
export { PhotoLightbox } from './PhotoLightbox';
export { ExpirationBanner } from './ExpirationBanner';
-export { CountdownTimer } from './CountdownTimer';
\ No newline at end of file
+export { CountdownTimer } from './CountdownTimer';
+export { GalleryLayout } from './GalleryLayout';
+export { PhotoFilterBar } from './PhotoFilterBar';
\ No newline at end of file
diff --git a/frontend/src/config/api.ts b/frontend/src/config/api.ts
index 4acd2b1..9ef29f3 100644
--- a/frontend/src/config/api.ts
+++ b/frontend/src/config/api.ts
@@ -26,6 +26,11 @@ api.interceptors.request.use(
config.headers.Authorization = `Bearer ${token}`;
}
+ // Don't set Content-Type for FormData - let browser set it with boundary
+ if (config.data instanceof FormData) {
+ delete config.headers['Content-Type'];
+ }
+
return config;
},
(error) => {
diff --git a/frontend/src/contexts/ThemeContext.tsx b/frontend/src/contexts/ThemeContext.tsx
index a07c2a8..a77966c 100644
--- a/frontend/src/contexts/ThemeContext.tsx
+++ b/frontend/src/contexts/ThemeContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
import type { ReactNode } from 'react';
export interface ThemeConfig {
@@ -107,7 +107,7 @@ export const ThemeProvider: React.FC
+
diff --git a/frontend/src/components/gallery/PhotoLightbox.tsx b/frontend/src/components/gallery/PhotoLightbox.tsx
index d6edcd2..ef73c26 100644
--- a/frontend/src/components/gallery/PhotoLightbox.tsx
+++ b/frontend/src/components/gallery/PhotoLightbox.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { X, ChevronLeft, ChevronRight, Download, ZoomIn, ZoomOut } from 'lucide-react';
import type { Photo } from '../../types';
import { useDownloadPhoto } from '../../hooks/useGallery';
+import { AuthenticatedImage } from '../common';
interface PhotoLightboxProps {
photos: Photo[];
@@ -241,7 +242,7 @@ export const PhotoLightbox: React.FC
{isSelected &&
-
diff --git a/frontend/src/pages/admin/CMSPage.tsx b/frontend/src/pages/admin/CMSPage.tsx
new file mode 100644
index 0000000..88f72fd
--- /dev/null
+++ b/frontend/src/pages/admin/CMSPage.tsx
@@ -0,0 +1,212 @@
+import React, { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import { Save, FileText, Globe } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { Button, Card, Input, Loading } from '../../components/common';
+import { CMSEditor } from '../../components/admin/CMSEditor';
+import { cmsService } from '../../services/cms.service';
+import type { CMSPage as CMSPageType } from '../../services/cms.service';
+
+export const CMSPage: React.FC = () => {
+ const { t } = useTranslation();
+ const queryClient = useQueryClient();
+ const [selectedPage, setSelectedPage] = useState
+
);
}
@@ -66,16 +89,50 @@ export const GalleryPage: React.FC = () => {
// Show error state
if (infoError) {
return (
-
+
-
-
-
-
+
@@ -165,12 +167,12 @@ export const AdminDashboard: React.FC = () => {
@@ -207,7 +209,7 @@ export const AdminDashboard: React.FC = () => {
onClick={() => navigate('/admin/events?filter=expiring')}
className="w-full mt-4 text-sm text-primary-600 hover:text-primary-700 font-medium"
>
- View all {expiringEvents.length} expiring events →
+ {t('admin.viewAllExpiringEvents', { count: expiringEvents.length })} →
)}
@@ -216,13 +218,13 @@ export const AdminDashboard: React.FC = () => {
{/* Recent Activity */}
+
+ Gallery Not Found
-- This gallery does not exist or has been removed. -
-
+
);
}
@@ -83,19 +140,53 @@ export const GalleryPage: React.FC = () => {
// Show expired state
if (galleryInfo?.is_expired) {
return (
-
+ {/* Logo at top */}
+ {settingsData?.branding_logo_url && (
+
+ 
+
+ )}
+
+
+
+
+
+
+
+
+ {/* Legal Links */}
+ {t('errors.galleryNotFound')}
++ {t('errors.galleryNotFoundMessage')} +
+
+
+
+
+ {t('legal.impressum')}
+
+ |
+
+ {t('legal.datenschutz')}
+
+
+
-
-
-
-
+
diff --git a/frontend/src/pages/admin/AdminDashboard.tsx b/frontend/src/pages/admin/AdminDashboard.tsx
index d762d91..3c8d4ee 100644
--- a/frontend/src/pages/admin/AdminDashboard.tsx
+++ b/frontend/src/pages/admin/AdminDashboard.tsx
@@ -14,6 +14,7 @@ import {
Image
} from 'lucide-react';
import { format, differenceInDays, parseISO, formatDistanceToNow } from 'date-fns';
+import { useTranslation } from 'react-i18next';
import { Button, Card, Loading } from '../../components/common';
import { useQuery } from '@tanstack/react-query';
@@ -29,6 +30,7 @@ interface StatCard {
}
export const AdminDashboard: React.FC = () => {
+ const { t } = useTranslation();
const navigate = useNavigate();
// Fetch dashboard statistics
@@ -54,7 +56,7 @@ export const AdminDashboard: React.FC = () => {
if (isLoading) {
return (
Gallery Expired
-- This gallery expired on {format(parseISO(galleryInfo.expires_at), 'MMMM d, yyyy')}. -
-- Please contact the event organizer if you need access to these photos. -
-
+
);
}
@@ -112,9 +203,17 @@ export const GalleryPage: React.FC = () => {
+ {/* Logo at top */}
+ {settingsData?.branding_logo_url && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ {/* Legal Links */}
+ {t('gallery.expired')}
++ {t('gallery.expiredOn', { date: format(parseISO(galleryInfo.expires_at), 'MMMM d, yyyy') })} +
++ {t('gallery.contactOrganizer')} +
+
+
+
+
+ {t('legal.impressum')}
+
+ |
+
+ {t('legal.datenschutz')}
+
+
+
{/* Logo/Header */}
-
- {/* Event Type Badge */}
+ {/* Legal Links */}
-
+ ) : (
+
@@ -144,13 +243,13 @@ export const GalleryPage: React.FC = () => {
{/* Login Card */}
-
+ {settingsData?.branding_logo_url ? (
+
+
+ )}
{galleryInfo?.event_name}
@@ -131,10 +230,10 @@ export const GalleryPage: React.FC = () => {- Gallery expires in {daysUntilExpiration} {daysUntilExpiration === 1 ? 'day' : 'days'} + {t('gallery.expiresIn', { count: daysUntilExpiration })}
- Download your photos before they're no longer available. + {t('gallery.downloadBefore')}
Enter Gallery Password
+{t('auth.enterPassword')}
- The password was provided by the event organizer. - Contact them if you don't have it. + {t('auth.passwordHint')}
-
- {galleryInfo?.event_type}
-
+
-
);
}
@@ -76,26 +78,26 @@ export const AdminDashboard: React.FC = () => {
// Build statistics cards
const stats: StatCard[] = [
{
- title: 'Active Events',
+ title: t('admin.activeEvents'),
value: dashboardStats?.activeEvents || 0,
icon: Calendar,
color: 'text-green-600',
},
{
- title: 'Expiring Soon',
+ title: t('admin.expiringSoon'),
value: dashboardStats?.expiringEvents || 0,
- change: 'Next 7 days',
+ change: t('admin.next7Days'),
icon: AlertTriangle,
color: 'text-orange-600',
},
{
- title: 'Total Photos',
+ title: t('admin.totalPhotos'),
value: formatNumber(dashboardStats?.totalPhotos || 0),
icon: Image,
color: 'text-blue-600',
},
{
- title: 'Storage Used',
+ title: t('admin.storageUsed'),
value: adminService.formatBytes(dashboardStats?.storageUsed || 0),
icon: HardDrive,
color: 'text-purple-600',
@@ -106,16 +108,16 @@ export const AdminDashboard: React.FC = () => {
if (dashboardStats?.totalViews !== undefined) {
stats.push(
{
- title: 'Total Views',
+ title: t('admin.totalViews'),
value: formatNumber(dashboardStats.totalViews),
- change: dashboardStats.viewsTrend > 0 ? `+${dashboardStats.viewsTrend}% from last week` : undefined,
+ change: dashboardStats.viewsTrend > 0 ? t('admin.percentFromLastWeek', { percent: `+${dashboardStats.viewsTrend}` }) : undefined,
icon: Eye,
color: 'text-indigo-600',
},
{
- title: 'Downloads',
+ title: t('admin.downloads'),
value: formatNumber(dashboardStats.totalDownloads),
- change: dashboardStats.downloadsTrend > 0 ? `+${dashboardStats.downloadsTrend}% from last week` : undefined,
+ change: dashboardStats.downloadsTrend > 0 ? t('admin.percentFromLastWeek', { percent: `+${dashboardStats.downloadsTrend}` }) : undefined,
icon: Download,
color: 'text-pink-600',
}
@@ -127,15 +129,15 @@ export const AdminDashboard: React.FC = () => {
{/* Page Header */}
-
}
onClick={() => navigate('/admin/events/new')}
>
- Create Event
+ {t('events.createEvent')}
Dashboard
-Welcome back! Here's what's happening with your galleries.
+{t('navigation.dashboard')}
+{t('admin.dashboardSubtitle')}
-
{expiringEvents.length === 0 ? (
- Events Expiring Soon
+{t('admin.eventsExpiringSoon')}
No events expiring in the next 7 days
+{t('admin.noEventsExpiring')}
) : (
{expiringEvents.slice(0, 5).map((event) => {
@@ -190,10 +192,10 @@ export const AdminDashboard: React.FC = () => {
- {daysLeft} {daysLeft === 1 ? 'day' : 'days'} left + {t('admin.daysLeft', { count: daysLeft })}
- Expires {format(parseISO(event.expires_at), 'MMM d')} + {t('gallery.expires')} {format(parseISO(event.expires_at), 'MMM d')}
-
Recent Activity
+{t('admin.recentActivity')}
{!recentActivity || recentActivity.length === 0 ? (
-
-
diff --git a/frontend/src/pages/admin/BrandingPage.tsx b/frontend/src/pages/admin/BrandingPage.tsx
index 1fc2d54..0c63b2a 100644
--- a/frontend/src/pages/admin/BrandingPage.tsx
+++ b/frontend/src/pages/admin/BrandingPage.tsx
@@ -1,25 +1,31 @@
-import React, { useState, useEffect } from 'react';
-import { Save, Eye, Palette } from 'lucide-react';
+import React, { useState, useEffect, useRef } from 'react';
+import { Save, Eye, Palette, Upload } from 'lucide-react';
import { toast } from 'react-toastify';
import { Button, Card, Input, ErrorBoundary, Loading } from '../../components/common';
import { ThemeCustomizer } from '../../components/admin/ThemeCustomizer';
import { useTheme, type ThemeConfig, PRESET_THEMES } from '../../contexts/ThemeContext';
import { useQuery, useMutation } from '@tanstack/react-query';
-import { settingsService } from '../../services/settings.service';
+import { settingsService, type BrandingSettings } from '../../services/settings.service';
export const BrandingPage: React.FC = () => {
const { theme, setTheme } = useTheme();
- const [brandingSettings, setBrandingSettings] = useState({
+ const [brandingSettings, setBrandingSettings] = useState({
company_name: '',
company_tagline: '',
footer_text: '© 2024 Your Company. All rights reserved.',
support_email: '',
watermark_enabled: false,
+ watermark_position: 'bottom-right',
+ watermark_opacity: 50,
+ watermark_size: 15,
+ watermark_logo_url: '',
+ favicon_url: '',
});
const [currentTheme, setCurrentTheme] = useState(theme);
const [currentThemeName, setCurrentThemeName] = useState('default');
const [isPreviewMode, setIsPreviewMode] = useState(false);
+ const faviconInputRef = useRef(null);
// Fetch current settings
const { data: settings, isLoading } = useQuery({
@@ -68,8 +74,12 @@ export const BrandingPage: React.FC = () => {
if (themeSettings) {
const formatted = settingsService.formatThemeSettings(themeSettings);
if (formatted && Object.keys(formatted).length > 0) {
- setCurrentTheme(formatted);
- setTheme(formatted);
+ // Merge logo URL from branding settings if available
+ const logoUrl = settings?.branding_logo_url || brandingSettings.logo_url;
+ const themeWithLogo = logoUrl ? { ...formatted, logoUrl } : formatted;
+
+ setCurrentTheme(themeWithLogo);
+ setTheme(themeWithLogo);
// Try to identify which preset this matches
for (const [key, preset] of Object.entries(PRESET_THEMES)) {
@@ -80,7 +90,7 @@ export const BrandingPage: React.FC = () => {
}
}
}
- }, [themeSettings, setTheme]);
+ }, [themeSettings, settings, brandingSettings.logo_url, setTheme]);
const handleBrandingChange = (key: string, value: any) => {
setBrandingSettings(prev => ({ ...prev, [key]: value }));
@@ -88,6 +98,10 @@ export const BrandingPage: React.FC = () => {
const handleThemeChange = (newTheme: ThemeConfig) => {
setCurrentTheme(newTheme);
+ // Also update logo URL in branding settings if it changed
+ if (newTheme.logoUrl !== currentTheme.logoUrl) {
+ setBrandingSettings(prev => ({ ...prev, logo_url: newTheme.logoUrl || '' }));
+ }
if (isPreviewMode) {
setTheme(newTheme);
}
@@ -105,16 +119,47 @@ export const BrandingPage: React.FC = () => {
}
};
+ const handleFaviconUpload = async (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (file) {
+ try {
+ const faviconUrl = await settingsService.uploadFavicon(file);
+ setBrandingSettings(prev => ({ ...prev, favicon_url: faviconUrl }));
+ toast.success('Favicon uploaded successfully');
+ } catch (error) {
+ console.error('Failed to upload favicon:', error);
+ toast.error('Failed to upload favicon. Please use PNG or ICO format.');
+ }
+ }
+ };
+
+ const handleWatermarkLogoUpload = async (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (file) {
+ try {
+ const watermarkLogoUrl = await settingsService.uploadWatermarkLogo(file);
+ setBrandingSettings(prev => ({ ...prev, watermark_logo_url: watermarkLogoUrl }));
+ toast.success('Watermark logo uploaded successfully');
+ } catch (error) {
+ console.error('Failed to upload watermark logo:', error);
+ toast.error('Failed to upload watermark logo. Please use PNG format with transparency.');
+ }
+ }
+ };
+
const handleSave = async () => {
try {
// Save branding settings to database
await brandingMutation.mutateAsync(brandingSettings);
- // Save theme settings to database
- await themeMutation.mutateAsync(currentTheme);
+ // Save theme settings to database (including logo URL if present)
+ const themeToSave = brandingSettings.logo_url
+ ? { ...currentTheme, logoUrl: brandingSettings.logo_url }
+ : currentTheme;
+ await themeMutation.mutateAsync(themeToSave);
// Apply theme globally
- setTheme(currentTheme);
+ setTheme(themeToSave);
} catch (error) {
console.error('Failed to save settings:', error);
}
@@ -223,6 +268,175 @@ export const BrandingPage: React.FC = () => {
No recent activity
+{t('admin.noRecentActivity')}
) : ( recentActivity.slice(0, 5).map((activity) => { // Get color based on activity type @@ -265,7 +267,7 @@ export const AdminDashboard: React.FC = () => { onClick={() => navigate('/admin/activity')} className="w-full mt-4 text-sm text-primary-600 hover:text-primary-700 font-medium" > - View all activity → + {t('admin.viewAllActivity')} → )} @@ -273,7 +275,7 @@ export const AdminDashboard: React.FC = () => { {/* Quick Actions */}Quick Actions
+{t('admin.quickActions')}
+
+
+ {/* Watermark Settings */}
+ {brandingSettings.watermark_enabled && (
+
+
+
+
+ {brandingSettings.favicon_url && (
+
+
+ )
+ Current favicon
+
+
+ )}
+
+
+
+
+ PNG or ICO format, recommended size: 32x32px
+
+
+ )}
{/* Theme Customization */}
@@ -247,6 +461,7 @@ export const BrandingPage: React.FC = () => {
onChange={handleThemeChange}
presetName={currentThemeName}
onPresetChange={handlePresetChange}
+ isPreviewMode={isPreviewMode}
/>
Watermark Settings
+ + {/* Watermark Logo Upload */} +
+
+
+
+ {/* Position Selector */}
+
+ {brandingSettings.watermark_logo_url && (
+
+
+ )
+ Current watermark
+
+
+ )}
+
+
+
+
+ PNG format with transparency recommended
+
+
+
+
+ {/* Opacity Slider */}
+
+ {[
+ { value: 'top-left', label: 'Top Left' },
+ { value: 'top-right', label: 'Top Right' },
+ { value: 'center', label: 'Center' },
+ { value: 'bottom-left', label: 'Bottom Left' },
+ { value: 'bottom-right', label: 'Bottom Right' }
+ ].map((position) => (
+
+ ))}
+
+
+
+ handleBrandingChange('watermark_opacity', parseInt(e.target.value))}
+ className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer slider"
+ />
+
+
+ {/* Size Slider */}
+
+ 10%
+ 50%
+ 100%
+
+
+
+ handleBrandingChange('watermark_size', parseInt(e.target.value))}
+ className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer slider"
+ />
+
+
+ 5%
+ 15%
+ 30%
+
+
+
+ );
+ }
+
+ const currentPage = pages?.find(p => p.slug === selectedPage);
+
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/frontend/src/pages/admin/EventDetailsPage.tsx b/frontend/src/pages/admin/EventDetailsPage.tsx
index 7b1a495..cb57131 100644
--- a/frontend/src/pages/admin/EventDetailsPage.tsx
+++ b/frontend/src/pages/admin/EventDetailsPage.tsx
@@ -20,7 +20,7 @@ import { format, parseISO, differenceInDays } from 'date-fns';
import { toast } from 'react-toastify';
import { Button, Input, Card, Loading } from '../../components/common';
-import { PhotoUpload } from '../../components/admin';
+import { PhotoUpload, EventCategoryManager } from '../../components/admin';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { eventsService } from '../../services/events.service';
import { galleryService } from '../../services/gallery.service';
@@ -408,10 +408,14 @@ export const EventDetailsPage: React.FC = () => {
Storage Location: /storage/events/active/{event.slug}/
+
+
+ CMS Pages
+Manage legal and informational pages
+
+ {/* Page Selection */}
+
+
+
+
+
+
+
+
+
+ {/* Editor */}
+ Pages
+
+ {pages?.map((page) => (
+
+ ))}
+
+ Preview Links
+ +
+
+
+
+
+
+
+ + Edit {t(`legal.${selectedPage}`)} +
+ + {/* Language Tabs */} +
+
+
+
+
+ {/* Title */}
+
+
+
+
+ handleTitleChange(e.target.value)}
+ placeholder="Enter page title..."
+ />
+
+
+ {/* Content */}
+
+
+
+
+ }
+ >
+ Save Changes
+
+
+
+ {currentPage?.updated_at && (
+ + Last updated: {new Date(currentPage.updated_at).toLocaleString()} +
+ )} +- Photos can also be added by placing them in the 'individual' or 'collages' folders. + Photos are organized by categories you define.
+
{/* Actions */}
diff --git a/frontend/src/pages/admin/SettingsPage.tsx b/frontend/src/pages/admin/SettingsPage.tsx
index 9872122..3b274bf 100644
--- a/frontend/src/pages/admin/SettingsPage.tsx
+++ b/frontend/src/pages/admin/SettingsPage.tsx
@@ -4,17 +4,21 @@ import {
Database,
Globe,
Key,
- AlertCircle
+ 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'>('general');
+ const [activeTab, setActiveTab] = useState<'general' | 'storage' | 'security' | 'categories'>('general');
const queryClient = useQueryClient();
+ const { t } = useTranslation();
// Fetch settings
const { data: settings, isLoading } = useQuery({
@@ -38,7 +42,8 @@ export const SettingsPage: React.FC = () => {
enable_watermark: false,
enable_analytics: true,
enable_registration: false,
- maintenance_mode: false
+ maintenance_mode: false,
+ default_language: 'en'
});
// Security settings state
@@ -64,7 +69,8 @@ export const SettingsPage: React.FC = () => {
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
+ maintenance_mode: settings.general_maintenance_mode || false,
+ default_language: settings.general_default_language || 'en'
});
// Extract security settings
@@ -166,6 +172,16 @@ export const SettingsPage: React.FC = () => {
>
Security
+
{t('settings.general.language')}
+ +
+
+
+
+
+ + Sets the default language for all gallery pages and login screens +
+
+
+
+
+
+
+
+ )}
);
};
\ No newline at end of file
diff --git a/frontend/src/pages/admin/index.ts b/frontend/src/pages/admin/index.ts
index 17b9a3f..4ce00bb 100644
--- a/frontend/src/pages/admin/index.ts
+++ b/frontend/src/pages/admin/index.ts
@@ -7,4 +7,5 @@ export { EmailConfigPage } from './EmailConfigPage';
export { ArchivesPage } from './ArchivesPage';
export { AnalyticsPage } from './AnalyticsPage';
export { BrandingPage } from './BrandingPage';
-export { SettingsPage } from './SettingsPage';
\ No newline at end of file
+export { SettingsPage } from './SettingsPage';
+export { CMSPage } from './CMSPage';
\ No newline at end of file
diff --git a/frontend/src/pages/gallery/PreviewPage.tsx b/frontend/src/pages/gallery/PreviewPage.tsx
new file mode 100644
index 0000000..8d02d95
--- /dev/null
+++ b/frontend/src/pages/gallery/PreviewPage.tsx
@@ -0,0 +1,143 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { GalleryLayout, PhotoFilterBar } from '../../components/gallery';
+import { Card } from '../../components/common';
+import { Camera } from 'lucide-react';
+
+// Mock photo data for preview
+const generateMockPhotos = (count: number) => {
+ return Array.from({ length: count }, (_, i) => ({
+ id: i + 1,
+ filename: `photo-${i + 1}.jpg`,
+ url: '',
+ thumbnail_url: '',
+ type: i % 3 === 0 ? 'collage' : 'individual',
+ category_id: (i % 4) + 1,
+ category_name: ['Ceremony', 'Reception', 'Portraits', 'Party'][i % 4],
+ category_slug: ['ceremony', 'reception', 'portraits', 'party'][i % 4],
+ size: Math.floor(Math.random() * 5000000) + 1000000,
+ uploaded_at: new Date().toISOString(),
+ }));
+};
+
+const mockCategories = [
+ { id: 1, name: 'Ceremony', slug: 'ceremony', is_global: true },
+ { id: 2, name: 'Reception', slug: 'reception', is_global: true },
+ { id: 3, name: 'Portraits', slug: 'portraits', is_global: true },
+ { id: 4, name: 'Party', slug: 'party', is_global: true },
+];
+
+export const PreviewPage: React.FC = () => {
+ const { setTheme } = useTheme();
+ const [brandingSettings, setBrandingSettings] = useState
+
+
+
+ About Photo Categories
++ 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. +
+
+ {photos.map((photo) => (
+
+
+ ))}
+
+ );
+
+ return (
+
+
+
+
+
+
+ {photo.filename}
+ {photo.category_name && ( +{photo.category_name}
+ )} +
+
+
+
+
+ {/* Filters */}
+ Theme Preview
+This is how your galleries will look with the current theme settings
+
+
+
+
+ );
+ }
+
+ if (error || !page) {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ Page Not Found
++ The page you're looking for doesn't exist. +
+ +
+ {/* Header */}
+
+
+
+ {/* Content */}
+
+
+
+ {/* Footer */}
+
+
+ );
+};
\ No newline at end of file
diff --git a/frontend/src/services/categories.service.ts b/frontend/src/services/categories.service.ts
new file mode 100644
index 0000000..67185af
--- /dev/null
+++ b/frontend/src/services/categories.service.ts
@@ -0,0 +1,48 @@
+import { api } from '../config/api';
+
+export interface PhotoCategory {
+ id: number;
+ name: string;
+ slug: string;
+ is_global: boolean;
+ event_id: number | null;
+ created_at: string;
+}
+
+export interface CreateCategoryData {
+ name: string;
+ slug?: string;
+ is_global?: boolean;
+ event_id?: number;
+}
+
+export const categoriesService = {
+ // Get all global categories
+ async getGlobalCategories(): Promise
+
+
+
+
+
+
+