Commit Graph

12 Commits

Author SHA1 Message Date
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
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
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
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
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
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
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
5ba463427b feat(frontend): upgrade react-router-dom 5→6 (Phase 3)
- Update package.json: react-router-dom ^5.2.0→^6.28.0
- Migrate App.js: Switch→Routes, component→element props, path="*" for 404
- Migrate 5 pages: useHistory→useNavigate, history.push()→navigate()
  - GroupsOverviewPage.js (4x navigate)
  - ModerationGroupsPage.js (1x navigate)
  - ModerationGroupImagesPage.js (2x navigate)
  - PublicGroupImagesPage.js (import updated)
  - SlideshowPage.js (4x navigate + keyboard handler)
- Regenerate package-lock.json with react-router v6

 Tested: Production build 254.46 KB gzip (+1.17 KB)
 Manual test: Navigation, moderation routing, slideshow ESC - all working

Phase 3 complete: Modern react-router v6 with improved routing API.
2025-10-28 22:59:59 +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
c7f75a4bd8 Renaming GroupImagePage -> ModerationGroupImagesPage.js 2025-10-20 19:47:06 +02:00