1. Setup redirect flow (setup -> loading -> login):
- Add /loading to exempt paths
- Redirect setup to login after completion
- Redirect loading to login when initialization complete
2. Close pages after completion:
- Block access to /setup after setup is done
- Block access to /loading after initialization complete
- Proper redirect handling prevents re-access
3. Fix WebSocket 403 error:
- Change /ws/progress to /ws/connect (correct endpoint)
- Add /ws/connect to exempt paths
- Subscribe to 'system' room for progress updates
- Fix message data handling format
- Create loading.html template with WebSocket-based progress updates
- Update initialization_service to emit progress events via ProgressService
- Modify setup endpoint to run initialization in background and redirect to loading page
- Add /loading route in page_controller
- Show real-time progress for series sync, NFO scan, and media scan steps
- Display completion message with button to continue to app
- Handle errors with visual feedback
- Extended SetupRequest model to include all configuration fields
- Updated setup API endpoint to handle comprehensive configuration
- Created new setup.html with organized configuration sections
- Enhanced config modal in index.html with all settings
- Updated JavaScript modules to use unified config API
- Added backup configuration section
- Documented new features in features.md and instructions.md
- Added NFOConfig model with TMDB API key, auto-create, media downloads, image size settings
- Created NFO settings section in UI with form fields and validation
- Implemented nfo-config.js module for loading, saving, and testing TMDB connection
- Added TMDB API key validation endpoint (POST /api/config/tmdb/validate)
- Integrated NFO config into AppConfig and ConfigUpdate models
- Added 5 unit tests for NFO config model validation
- Added API test for TMDB validation endpoint
- All 16 config model tests passing, all 10 config API tests passing
- Documented in docs/task7_status.md (100% complete)
- Extended AnimeSummary model with NFO fields (has_nfo, nfo_created_at, nfo_updated_at, tmdb_id, tvdb_id)
- Updated list_anime endpoint to fetch and return NFO data from database
- Added NFO status badges to series cards (green=exists, gray=missing)
- Created nfo-manager.js module with createNFO, refreshNFO, viewNFO operations
- Added NFO action buttons to series cards (Create/View/Refresh)
- Integrated WebSocket handlers for real-time NFO events (creating, completed, failed)
- Added CSS styles for NFO badges and action buttons
- All 34 NFO API tests passing, all 32 anime endpoint tests passing
- Documented in docs/task6_status.md (90% complete, NFO status page deferred)
- Created SetupRedirectMiddleware to redirect unconfigured apps to /setup
- Enhanced /api/auth/setup endpoint to save anime_directory to config
- Updated SetupRequest model to accept optional anime_directory parameter
- Modified setup.html to send anime_directory in setup API call
- Added @pytest.mark.requires_clean_auth marker for tests needing unconfigured state
- Modified conftest.py to conditionally setup auth based on test marker
- Fixed all test failures (846/846 tests now passing)
- Updated instructions.md to mark setup tasks as complete
This implementation ensures users are guided through initial setup
before accessing the application, while maintaining test isolation
and preventing auth state leakage between tests.
Implemented full JWT-based authentication integration between frontend and backend:
Frontend Changes:
- Updated login.html to store JWT tokens in localStorage after successful login
- Updated setup.html to use correct API payload format (master_password)
- Modified app.js and queue.js to include Bearer tokens in all authenticated requests
- Updated makeAuthenticatedRequest() to add Authorization header with JWT token
- Enhanced checkAuthentication() to verify token and redirect on 401 responses
- Updated logout() to clear tokens from localStorage
API Endpoint Updates:
- Mapped queue API endpoints to new backend structure
- /api/queue/clear → /api/queue/completed (DELETE) for clearing completed
- /api/queue/remove → /api/queue/{item_id} (DELETE) for single removal
- /api/queue/retry payload changed to {item_ids: []} array format
- /api/download/pause|resume|cancel → /api/queue/pause|resume|stop
Testing:
- Created test_frontend_integration_smoke.py with JWT token validation tests
- Verified login returns access_token, token_type, and expires_at
- Tested Bearer token authentication on protected endpoints
- Smoke tests passing for authentication flow
Documentation:
- Updated infrastructure.md with JWT authentication implementation details
- Documented token storage, API endpoint changes, and response formats
- Marked Frontend Integration task as completed in instructions.md
- Added frontend integration testing section
WebSocket:
- Verified WebSocket integration with new backend (already functional)
- Dual event handlers support both old and new message types
- Room-based subscriptions working correctly
This completes Task 7: Frontend Integration from the development instructions.
- Created websocket_client.js: Native WebSocket wrapper with Socket.IO-compatible interface
- Automatic reconnection with exponential backoff
- Room-based subscriptions for targeted updates
- Message queueing during disconnection
- Updated HTML templates (index.html, queue.html):
- Replaced Socket.IO CDN with native websocket_client.js
- No external dependencies needed
- Updated JavaScript files (app.js, queue.js):
- Added room subscriptions on WebSocket connect (scan_progress, download_progress, downloads)
- Added dual event handlers for backward compatibility
- Support both old (scan_completed) and new (scan_complete) message types
- Support both old (download_error) and new (download_failed) message types
- Support both old (queue_updated) and new (queue_status) message types
- Registered anime router in fastapi_app.py:
- Added anime_router import and registration
- All API routers now properly included
- Documentation:
- Created FRONTEND_INTEGRATION.md with comprehensive integration guide
- Updated infrastructure.md with frontend integration section
- Updated instructions.md to mark task as completed
- Testing:
- Verified anime endpoint tests pass (pytest)
- API endpoint mapping documented
- WebSocket message format changes documented
Benefits:
- Native WebSocket API (faster, smaller footprint)
- No external CDN dependencies
- Full backward compatibility with existing code
- Proper integration with backend services
- Real-time updates via room-based messaging
- Fix setup.html to use redirect_url from API response instead of hardcoded '/'
- Add database creation (aniworld.db, cache.db) during setup process
- Setup now properly creates all required files for validation
- After setup completion, users are correctly redirected to /login
- Tested: setup API returns correct redirect_url, database files created, redirect works
- Replace Flask url_for() with direct /static/ paths in all HTML templates
- Update CSS and JavaScript file references to use FastAPI static mount
- Convert Flask-specific template patterns to FastAPI-compatible syntax
- Update JavaScript API endpoints to match new FastAPI route structure:
* /api/series -> /api/v1/anime
* /api/search -> /api/v1/anime/search
* /api/rescan -> /api/v1/anime/rescan
- Add web interface routes for serving HTML templates
- Add template response endpoints for /app, /login, /setup, /queue
- Mark HTML template and JavaScript migration tasks as completed
- Maintain Jinja2 template compatibility with FastAPI
