Commit Graph

41 Commits

Author SHA1 Message Date
e48cf69b5d update pre commit skript, and responsive menu 2025-11-24 20:55:33 +01:00
b7acc01e90 Removed Navigation in user upload page 2025-11-24 20:38:33 +01:00
6332b82c6a Feature Request: admin session security
- replace bearer auth with session+CSRF flow and add admin user directory

- update frontend moderation flow, force password change gate, and new CLI

- refresh changelog/docs/feature plan + ensure swagger dev experience
2025-11-23 21:18:42 +01:00
98b3616dc4 Fix: Admin deletion log, CSV export revoked consents, consent filter UI
Backend Fixes:
- Admin deletions now create deletion_log entries (admin_moderation_deletion)
- Static mount for /previews added to serve preview images
- Admin groups endpoint supports consent filter parameter

Frontend Improvements:
- Replaced consent dropdown with checkbox UI (Workshop, Facebook, Instagram, TikTok)
- Checkboxes use OR logic for filtering
- Revoked consents excluded from filter counts
- Updated ModerationGroupsPage to send consents array to backend

Infrastructure:
- Simplified nginx.conf (proxy /api/* to backend, all else to frontend)
- Fixed docker-compose port mapping (5001:5000)

Tests: 11/11 passed 
2025-11-22 11:13:10 +01:00
6effded8bf feat(frontend): Add comprehensive error handling for admin API
Phase 2: User-Friendly Error Handling

 Error Handler Service:
- Created adminErrorHandler.js with handleAdminError()
- User-friendly SweetAlert2 dialogs for all error types:
  * 403 Unauthorized - Clear admin token instructions
  * 429 Rate Limit - Wait and retry message
  * 404 Not Found - Resource not found
  * 500 Server Error - Internal server error
  * Generic errors with context

 Integrated Error Handling in all Admin Components:
- ModerationGroupsPage.js (all 6 admin operations)
- ModerationGroupImagesPage.js (group loading)
- DeletionLogSection.js (log loading + statistics)
- ConsentCheckboxes.js (platform loading)

 Error Context Messages:
- "Gruppe laden"
- "Gruppe freigeben"
- "Gruppe löschen"
- "Bild löschen"
- "Consent-Export"
- "Plattformen laden"
- "Lösch-Log laden"
- "Statistiken laden"

 Benefits:
- Clear technical details for admins in error dialogs
- Context-specific error messages
- Consistent error handling across all admin features
- Better debugging with detailed 403 instructions
2025-11-16 18:56:21 +01:00
cb640576f4 feat(frontend): Migrate all API routes to new structure with admin auth
Phase 1: Route Structure & Admin Authentication

 Route Prefix Fixes:
- All routes now use consistent /api prefix
- Public: /groups/* → /api/groups/*
- Admin: /groups/*, /moderation/* → /api/admin/*
- Social Media: /api/social-media/* → /api/admin/social-media/*

 Admin API Authentication:
- Created adminApi.js service with Bearer Token helpers
  * adminFetch() - Base fetch with Authorization header
  * adminGet() - GET with auto error handling
  * adminRequest() - POST/PUT/PATCH/DELETE with JSON
  * adminDownload() - For Blob downloads (CSV exports)
- Added frontend/.env.example with REACT_APP_ADMIN_API_KEY
- All /api/admin/* calls now use admin helpers

 Updated Components:
- ModerationGroupsPage.js: All admin endpoints migrated
- ModerationGroupImagesPage.js: Group loading + image deletion
- PublicGroupImagesPage.js: Fixed public group route
- DeletionLogSection.js: Deletion log endpoints
- ConsentCheckboxes.js: Platform loading

⚠️ Next Steps:
- Add user-friendly 403 error handling
- Test all affected pages
- Configure REACT_APP_ADMIN_API_KEY in deployment
2025-11-16 18:39:40 +01:00
89e35e7de6 fix: Use correct image ID when deleting images in preview mode
Changed ImageGalleryCard to pass itemId (image.id) instead of index
when deleting images in preview mode. This fixes 'Image not found' error
when attempting to delete individual images in ManagementPortalPage
and ModerationGroupImagesPage.

The index was being passed to the API, but the API expects the actual
database image ID.
2025-11-15 18:59:21 +01:00
bd7bdac000 refactor: Complete UI refactoring with modular components
- Refactored ManagementPortalPage, MultiUploadPage, ModerationGroupImagesPage
- Created reusable modular components with mode support:
  * ImageDescriptionManager (manage/moderate modes)
  * GroupMetadataEditor (edit/upload/moderate modes)
  * ConsentManager (edit/upload modes)
- Replaced Material-UI Buttons with HTML buttons + CSS classes
- Fixed image descriptions upload (preview ID to filename mapping)
- Reduced ModerationGroupImagesPage from 281 to 107 lines
- Updated ModerationGroupsPage and GroupsOverviewPage button styles
- All pages now use consistent Paper boxes with headings
- Inline Material-UI Alerts instead of SweetAlert2 popups (except destructive actions)
- Icons: 💾 save, ↩ discard, 🗑️ delete consistently used
2025-11-15 18:17:14 +01:00
4b9feec887 Refactor: Create modular component architecture for ManagementPortalPage
- Created new modular components:
  * ConsentManager: Manages workshop + social media consents with individual save
  * GroupMetadataEditor: Manages group metadata (title, description, name, year) with save
  * ImageDescriptionManager: Manages image descriptions with batch save
  * DeleteGroupButton: Standalone group deletion component

- Refactored ManagementPortalPage to use modular components:
  * Each component in Paper box with heading inside (not outside)
  * HTML buttons with CSS classes (btn btn-success, btn btn-secondary)
  * Inline feedback with Material-UI Alert instead of SweetAlert2 popups
  * Icons: 💾 save, ↩ discard, 🗑️ delete
  * Individual save/discard functionality per component

- Enhanced ConsentCheckboxes component:
  * Added children prop for flexible composition
  * Conditional heading for manage mode inside Paper box

- Fixed DescriptionInput:
  * Removed duplicate heading (now only in parent component)

- React state management improvements:
  * Deep copy pattern for nested objects/arrays
  * Sorted array comparison for order-insensitive change detection
  * Set-based comparison for detecting removed items
  * Initialization guard to prevent useEffect overwrites

- Bug fixes:
  * Fixed image reordering using existing /api/groups/:groupId/reorder route
  * Fixed edit mode toggle with unsaved changes warning
  * Fixed consent state updates with proper object references
  * Fixed uploadImageBatch signature to use object destructuring
  * Removed unnecessary /api/manage/:token/reorder route from backend

Next: Apply same modular pattern to MultiUploadPage and ModerationGroupImagesPage
2025-11-15 17:25:51 +01:00
324c46d735 feat(phase2): Complete Management Portal with reusable ConsentCheckboxes
Phase 2 Frontend completed (Tasks 12-17, 19-20) - 14. Nov 2025

Backend Enhancements:
- Enhanced PUT /api/manage/:token/consents to support creating new consents
- INSERT new consent row when restoring consent for platform not selected during upload
- Enables granting consents for previously unselected platforms

Frontend Refactoring (Code Deduplizierung):
- Extended ConsentCheckboxes component for both modes (upload & manage)
- Removed ~150 lines of duplicated consent UI code from ManagementPortalPage
- New mode prop: 'upload' (default) | 'manage'
- Dynamic hint texts and validation rules based on mode
- Workshop consent required only in upload mode

ManagementPortalPage Updates:
- Replaced custom consent UI with reusable ConsentCheckboxes component
- New state currentConsents tracks checkbox values
- New handler handleConsentChange() computes changes vs original
- Local change collection with batch save on button click
- Email link for social media post deletion (mailto workaround)
- Save/Discard buttons only visible when pending changes exist

ConsentBadges Fix:
- Now correctly displays only active (non-revoked) consents
- Updates properly after consent revocation

Documentation:
- Updated FEATURE_PLAN with Phase 2 Frontend completion status
- Added refactoring section documenting code deduplizierung
- Updated README with Management Portal features
- Documented email backend solution requirement (future work)

Results:
 100% consistent UI between upload and management
 Zero code duplication for consent handling
 ConsentBadges correctly filters revoked consents
 Backend supports granting new consents after upload
 Management link displayed on upload success page
 All manual tests passed

Tasks Completed:
- Task 12: Management Portal UI (/manage/:token)
- Task 13: Consent Management (revoke/restore)
- Task 14: Metadata Editor (title/description)
- Task 15: Image Management (add/delete)
- Task 16: Group Deletion (with confirmation)
- Task 17: Upload Success Page (management link)
- Task 19: Documentation updates
- Task 20: nginx routing configuration

Pending:
- Task 18: E2E Testing (formal test suite)
2025-11-14 14:38:03 +01:00
e8ba1e73a0 feat(phase2): Implement Frontend Management Portal & nginx routing (Tasks 12, 20)
Task 12: ManagementPortalPage - Self-Service Portal Implementation
- New page: ManagementPortalPage.js (~650 lines) with token-based auth
- Maximum component reuse (ImageGalleryCard, ImageGallery, DescriptionInput, ConsentBadges)
- Single-page layout without tabs (consistent with ModerationGroupImagesPage)
- All CRUD operations: view, edit metadata, delete images, revoke/restore consents, delete group
- Data transformation: API camelCase → Component snake_case (ConsentBadges compatibility)
- Error handling: 404 invalid token, 429 rate-limit, general errors
- Route added: /manage/:token in App.js

Task 20: nginx Configuration for Management API
- Dev: Proxy /api/manage/* → backend-dev:5000
- Prod: Proxy /api/manage/* → image-uploader-backend:5000
- Headers: Host, X-Real-IP, X-Forwarded-For, X-Forwarded-Proto
- Frontend container rebuilt with new nginx config

Navigation Enhancement (Navbar.js):
- Conditional rendering with useLocation() hook
- Show "Upload" always (active only on /)
- Show "Mein Upload" additionally on /manage/:token (active)
- Both buttons visible simultaneously on management page

Test Results:
 Token validation (404 on invalid)
 API routing through nginx
 ConsentBadges display correctly
 All CRUD operations functional
 Rate-limiting working (429 on excessive requests)
 Navigation highlighting correct
 Component reuse: 0 lines duplicated code

Known Issues (to be fixed in separate bugfix session):
⚠️ Issue 6: ModerationGroupsPage - Filter "Alle Gruppen" not working
⚠️ Issue 7: Export button "Consent-Daten exportieren" not working

Files Changed:
- frontend/src/Components/Pages/ManagementPortalPage.js (NEW)
- frontend/src/App.js (route added)
- frontend/src/Components/ComponentUtils/Headers/Navbar.js (conditional nav)
- docker/dev/frontend/nginx.conf (proxy config)
- docker/prod/frontend/nginx.conf (proxy config)
- docs/FEATURE_PLAN-social-media.md (documentation updated)
2025-11-13 20:05:27 +01:00
a27a66f6ee feat: Implement moderation panel consent features
- Add ConsentBadges component with platform icons and tooltips
- Add consent filter dropdown in moderation page (all/workshop-only/platforms)
- Add export button for CSV download of consent data
- Extend /moderation/groups endpoint with filter params and consent data
- Display consent badges in ImageGalleryCard for moderation mode
- Visual distinction: workshop (green), social media (blue outlined)
- Export functionality with date-stamped CSV files

Tasks completed:
- Moderation visual consent indicators
- Moderation consent filter
- Moderation export functionality
2025-11-09 22:20:11 +01:00
39f133eadf feat(frontend): Add consent management UI components
- Add ConsentCheckboxes component with workshop and social media consents
- Add UploadSuccessDialog with group ID display and copy functionality
- Integrate consent validation into MultiUploadPage
- Extend batchUpload utility to send consent data
- Add GDPR compliance notices and contact information
- Block uploads without required workshop consent
2025-11-09 21:11:01 +01:00
1b4629cca3 changed admin, Link to gitea, LoadingLogo 2025-11-09 11:55:31 +01:00
008adf3f27 feat(frontend): Ersetze Lottie-Animation durch custom 3D SVG Logo-Animation
- Lottie-react Bibliothek durch native CSS 3D Transforms ersetzt
- Hobbyhimmel Logo (Hammer & Wolke) als animiertes Loading-Icon
- Wolke rotiert um Y-Achse (4s)
- Hammer rotiert um Y-Achse UND eigene Diagonalachse (3s)
- 15° X-Neigung für dynamischeren 3D-Effekt
- Nested Transform-Hierarchie mit transform-box: fill-box
- Upload-Erfolgsmeldung als grünes Banner unter Animation
- Nutzer muss Upload-Bestätigung mit Button bestätigen
- Loading-Animation bleibt während Erfolgsmeldung sichtbar
2025-11-08 20:58:23 +01:00
ddc7e787b3 feat(frontend): Update footer with version info and attribution
- Display app version dynamically from window._env_.APP_VERSION
- Credit original author (vallezw) with link to original repo
- Credit extended version (lotzm) with link to Gitea repo
- Update package.json version to 1.1.0

Footer styling:
- Position fixed at bottom-right corner of viewport
- Unobtrusive design with small font size (11px)
- Semi-transparent background with subtle shadow
- Stays visible while scrolling
- Hover effect on links for better UX

Changes:
- frontend/package.json: version 0.1.0 → 1.1.0
- Footer.js: Dynamic version display, attribution links
- Footer.css: Fixed positioning, responsive styling
2025-11-08 16:22:04 +01:00
3a2efd97c3 refactor: Move deletion log into ModerationGroupsPage
- Create DeletionLogSection component
- Integrate deletion log at bottom of moderation page
- Remove standalone DeletionLogPage and route
- Remove admin nav link (log now in moderation)
- Keep /api/admin routes for backend API access
- Update nginx configs (remove /admin frontend route)
2025-11-08 12:55:55 +01:00
e7da188967 feat(frontend+nginx): Add DeletionLogPage and admin routes
- Create DeletionLogPage with statistics cards and deletion history table
- Add admin navigation link to Navbar
- Configure nginx for /admin and /api/admin routes (dev+prod)
- Add password protection for admin routes
- Support toggle between last 10 and all deletions
2025-11-08 12:38:14 +01:00
15fc02235f feat(frontend): Add countdown and improve approval feedback
Phase 4 Progress - Tasks 7 & 8 Complete

Countdown Display (Task 7):
- getDaysUntilDeletion() helper in ImageGalleryCard
- Countdown widget for unapproved groups
- Shows ' Wird gelöscht in: X Tagen'
- Only visible for pending groups in moderation mode
- Yellow warning style with border accent
- CSS: .deletion-countdown with responsive design

Approval Button Improvements (Task 8):
- Upgraded from alert() to SweetAlert2
- Success message with auto-close (2s)
- Error handling with detailed messages
- Optimistic UI updates (groups move between sections)
- Different messages for approve/unapprove actions

Files modified:
- ImageGalleryCard.js: Countdown logic and display
- ImageGallery.css: Countdown styling
- ModerationGroupsPage.js: SweetAlert2 integration

Tasks completed:  4.7,  4.8
2025-11-08 12:28:58 +01:00
07b436cc4d feat: Complete image description feature implementation
Features:
- Add image description field (max 200 chars) for individual images
- Replace 'Sort' button with 'Edit' button in image gallery cards
- Enable edit mode with text fields for each image in moderation
- Display descriptions in slideshow and public views
- Integrate description saving with main save button

Frontend changes:
- ImageGalleryCard: Add edit mode UI with textarea and character counter
- ModerationGroupImagesPage: Integrate description editing into main save flow
- Fix keyboard event propagation in textarea (spacebar issue)
- Remove separate 'Save Descriptions' button
- Add ESLint fixes for useCallback dependencies

Backend changes:
- Fix route order: batch-description route must come before :imageId route
- Ensure batch description update API works correctly

Build optimizations:
- Add .dockerignore to exclude development data (182MB reduction)
- Fix Dockerfile: Remove non-existent frontend/conf directory
- Reduce backend image size from 437MB to 247MB

Fixes:
- Fix route matching issue with batch-description endpoint
- Prevent keyboard events from triggering drag-and-drop
- Clean up unused functions and ESLint warnings
2025-11-07 23:20:50 +01:00
8323cec156 feat: Add image descriptions to Slideshow and Public views
- Slideshow: Display imageDescription below image (centered overlay)
- PublicGroupImagesPage: Show descriptions in single-image mode
- ImageGalleryCard: Support description display in single-image mode

Phase 5-6 complete: Slideshow + Public Display Integration
2025-11-07 18:36:57 +01:00
292d25f5b4 feat: Implement image descriptions - Backend & Core Frontend
- Database: Add image_description column to images table
- Repository: Add updateImageDescription & updateBatchImageDescriptions methods
- API: Add PATCH endpoints for single and batch description updates
- Upload: Support descriptions in batch upload
- Frontend: ImageGalleryCard with Edit mode and textarea
- Frontend: MultiUploadPage with description input
- Frontend: ModerationGroupImagesPage with description editing
- CSS: Styles for edit mode, textarea, and character counter

Phase 1-4 complete: Backend + Core Frontend + Upload + Moderation
2025-11-07 18:34:16 +01:00
7ea95341c0 🐛 Fix: Bildvorschau beim Upload wieder funktionsfähig
- Problem: getImageSrc() konnte nicht mit Blob-URLs von ausgewählten Upload-Dateien umgehen
- Lösung: Direkte Behandlung von Blob-URLs in ImageGalleryCard für Upload-Preview
- Erweitert: imageUtils.js um Blob-URL Unterstützung
- Hinzugefügt: Eindeutige IDs für Preview-Objekte in MultiUploadPage

Fixes #upload-preview-missing
2025-11-05 19:50:14 +01:00
7564525c7e feat: implement drag-and-drop reordering infrastructure
Phase 1 (Backend API):
 GroupRepository.updateImageOrder() with SQL transactions
 PUT /api/groups/:groupId/reorder API route with validation
 Manual testing: Reordering verified working (group qion_-lT1)
 Error handling: Invalid IDs, missing groups, empty arrays

Phase 2 (Frontend DnD):
 @dnd-kit/core packages installed
 ReorderService.js for API communication
 useReordering.js custom hook with optimistic updates
 ImageGalleryCard.js extended with drag handles & sortable
 ImageGallery.js with DndContext and SortableContext
 CSS styles for drag states, handles, touch-friendly mobile

Next: Integration with ModerationGroupImagesPage
2025-11-03 21:06:39 +01:00
04dca26d00 FIX: Wenn kein Name angegeben ist, wird nun auch nichts angezeigt, anstelle von null 2025-11-01 11:43:17 +01:00
aec9db2a76 feat(frontend): integrate preview images in gallery components
- Add imageUtils.js helper with getImageSrc() and getGroupPreviewSrc()
- Update ImageGalleryCard to use preview images for galleries
- Update ModerationGroupsPage to show preview images in modal
- Update ModerationGroupImagesPage to use preview images
- Update PublicGroupImagesPage to pass all image fields
- SlideshowPage continues using original images (full quality)
- Update nginx.dev.conf with /api/previews and /api/download routes
- Update start-dev.sh to generate correct nginx config
- Fix GroupRepository.getAllGroupsWithModerationInfo() to return full image data
- Remove obsolete version from docker-compose.override.yml
- Update TODO.md: mark frontend cleanup as completed

Performance: Gallery load times reduced by ~96% (100KB vs 3MB per image)
2025-10-31 18:20:50 +01:00
a44a85be73 chore(frontend): remove @mui/styles, replace react-lottie with lottie-react and remove legacy-peer-deps in Dockerfile 2025-10-29 21:49:09 +01:00
494c09e062 refactor(frontend): migrate MultiImageDropzone to MUI sx 2025-10-29 21:31:02 +01:00
4aac9dae4e refactor(frontend): migrate DescriptionInput to MUI sx 2025-10-29 21:26:51 +01:00
8535e8fafe refactor(frontend): migrate UploadProgress to MUI sx (remove makeStyles) 2025-10-29 21:18:44 +01:00
5c6f0ce061 feat(frontend): migrate to MUI v5 (phase 4 step 1)
- Replace @material-ui/core -> @mui/material
- Replace @material-ui/icons -> @mui/icons-material
- Switch makeStyles imports to @mui/styles (compat)
- Add @mui/material, @mui/icons-material, @mui/styles, @emotion/react, @emotion/styled to package.json

Notes: Kept makeStyles via @mui/styles for incremental migration; next: replace makeStyles usage with sx/styled where needed.
2025-10-29 20:10:33 +01:00
9406b725c1 removed old css in ImageGallery.css 2025-10-28 20:04:42 +01:00
a0d74f795a feat: Complete frontend refactoring and development environment setup
Major Frontend Refactoring:
- Replace ImagePreviewGallery with unified ImageGallery/ImageGalleryCard components
  - Support 4 display modes: group, moderation, preview, single-image
  - Add hidePreview prop to conditionally hide group preview images
  - Unified grid layout with responsive 3/2/1 column design

- Remove 15+ legacy files and components
  - Delete UploadedImagePage, SocialMedia components, old upload components
  - Remove unused CSS files (GroupCard.css, Image.css/scss)
  - Clean up /upload/:image_url route from App.js

- Fix image preview functionality in MultiUploadPage
  - Convert File objects to blob URLs with URL.createObjectURL()
  - Add proper memory cleanup with URL.revokeObjectURL()

- Improve page navigation and layout
  - Fix GroupsOverviewPage to route to /groups/:groupId detail page
  - Adjust PublicGroupImagesPage spacing and layout
  - Fix ModerationGroupsPage duplicate stats section

CSS Refactoring:
- Rename GroupCard.css → ImageGallery.css with updated class names
- Maintain backward compatibility with legacy class names
- Fix grid stretching with fixed 3-column layout

Development Environment:
- Add docker-compose.override.yml for local development
- Create Dockerfile.dev with hot-reload support
- Add start-dev.sh and nginx.dev.conf
- Update README.dev.md with development setup instructions

Production Build:
- Fix frontend/Dockerfile multi-stage build (as → AS)
- Update prod.sh to explicitly use docker-compose.yml (ignore override)
- Resolve node:18-alpine image corruption issue
- Backend Dockerfile improvements for Node 14 compatibility

Documentation:
- Update TODO.md marking completed frontend tasks
- Clean up docs/images directory
- Update README.md with current project status

All changes tested and verified in both development and production environments.
2025-10-27 22:22:52 +01:00
237c776ddc CSS Cleanup 2025-10-26 11:52:14 +01:00
aec0be8982 tut wieder 2025-10-20 21:18:44 +02:00
c7f75a4bd8 Renaming GroupImagePage -> ModerationGroupImagesPage.js 2025-10-20 19:47:06 +02:00
0c0547b4f5 css 2025-10-20 19:19:21 +02:00
bf4ff75ce5 CSS Anpassungen, noch nicht gut 2025-10-19 21:59:37 +02:00
2a8cedd512 CSS Style Anpassungen 2025-10-19 20:34:51 +02:00
8d2d27c71d speichern ohne funktion 2025-10-19 19:56:13 +02:00
48bf6f2074 Initial Commit 2025-10-15 21:33:00 +02:00