Implement advanced URL fixing by modifying JS files directly and handling login/signup requests more robustly

app.py

@@ -2,6 +2,7 @@ import os
 import sys
 import shutil
 import logging
+import re
 from pathlib import Path
 
 # Set up logging
@@ -16,6 +17,48 @@ os.makedirs("./temp_audio", exist_ok=True)
 os.makedirs("./temp", exist_ok=True)
 os.makedirs("./static", exist_ok=True)
 
+# Function to fix localhost URLs in JavaScript files
+def fix_js_files():
+    """Fix all JS files in the static directory to replace localhost:8000 with relative URLs"""
+    assets_dir = Path("./static/assets")
+    if not assets_dir.exists():
+        logger.warning(f"Assets directory not found at {assets_dir}")
+        return
+    
+    logger.info(f"Searching for JS files in {assets_dir}")
+    js_files = list(assets_dir.glob("*.js"))
+    logger.info(f"Found {len(js_files)} JS files")
+    
+    for js_file in js_files:
+        try:
+            logger.info(f"Processing {js_file}")
+            with open(js_file, "r", encoding="utf-8") as f:
+                content = f.read()
+            
+            # Count occurrences before replacement
+            count_before = content.count("localhost:8000")
+            if count_before > 0:
+                logger.info(f"Found {count_before} instances of localhost:8000 in {js_file}")
+                
+                # Replace localhost URLs with relative ones
+                modified_content = content.replace("http://localhost:8000", "")
+                modified_content = modified_content.replace("https://localhost:8000", "")
+                
+                # Create a backup just in case
+                backup_file = js_file.with_suffix(".js.bak")
+                shutil.copy(js_file, backup_file)
+                
+                # Write the modified content back
+                with open(js_file, "w", encoding="utf-8") as f:
+                    f.write(modified_content)
+                
+                logger.info(f"Fixed {count_before} localhost URLs in {js_file}")
+        except Exception as e:
+            logger.error(f"Error processing {js_file}: {str(e)}")
+
+# Run the JS file fixer at startup
+fix_js_files()
+
 # Check for index.html and create a simple one if it doesn't exist
 static_path = Path("./static")
 index_path = static_path / "index.html"
@@ -87,12 +130,77 @@ async def root():
     logger.info("Root route accessed, serving index.html")
     html_content = get_index_html()
     
-    # Check if this is the React app by looking for specific markers
-    if "<div id=\"root\"></div>" in html_content:
-        logger.info("Detected React app, injecting URL fixer")
-        # Inject our URL fixer script before the closing body tag
-        script_tag = '<script src="/api/fix-client-urls"></script>'
+    # Inject our URL rewriter scripts
+    script_tag = '''
+    <script>
+    (function() {
+        console.log("Advanced URL Fixer running...");
+        
+        // Intercept all network requests
+        const originalFetch = window.fetch;
+        window.fetch = function(url, options) {
+            if (typeof url === 'string') {
+                // Rewrite localhost:8000
+                if (url.includes('localhost:8000')) {
+                    url = url.replace('http://localhost:8000', '');
+                    url = url.replace('https://localhost:8000', '');
+                    console.log(`Rewriting URL from localhost:8000 to ${url}`);
+                }
+                
+                // Handle relative URLs for API endpoints
+                if (url.startsWith('/')) {
+                    if (!url.startsWith('/static/') && !url.startsWith('/assets/')) {
+                        console.log(`Using relative URL: ${url}`);
+                    }
+                }
+            }
+            return originalFetch(url, options);
+        };
+        
+        // Override XMLHttpRequest
+        const originalOpen = XMLHttpRequest.prototype.open;
+        XMLHttpRequest.prototype.open = function(method, url, ...args) {
+            if (typeof url === 'string') {
+                // Rewrite localhost:8000
+                if (url.includes('localhost:8000')) {
+                    url = url.replace('http://localhost:8000', '');
+                    url = url.replace('https://localhost:8000', '');
+                    console.log(`Rewriting XHR URL from localhost:8000 to ${url}`);
+                }
+            }
+            return originalOpen.call(this, method, url, ...args);
+        };
+        
+        // Attempt to hook into axios if it's being used
+        if (window.axios) {
+            const originalAxiosGet = window.axios.get;
+            window.axios.get = function(url, config) {
+                if (typeof url === 'string' && url.includes('localhost:8000')) {
+                    url = url.replace('http://localhost:8000', '');
+                    console.log(`Rewriting axios URL from localhost:8000 to ${url}`);
+                }
+                return originalAxiosGet(url, config);
+            };
+            
+            const originalAxiosPost = window.axios.post;
+            window.axios.post = function(url, data, config) {
+                if (typeof url === 'string' && url.includes('localhost:8000')) {
+                    url = url.replace('http://localhost:8000', '');
+                    console.log(`Rewriting axios POST URL from localhost:8000 to ${url}`);
+                }
+                return originalAxiosPost(url, data, config);
+            };
+        }
+        
+        console.log("Advanced URL Fixer installed");
+    })();
+    </script>
+    '''
+    
+    if '</body>' in html_content:
         html_content = html_content.replace('</body>', f'{script_tag}</body>')
+    else:
+        html_content = html_content + script_tag
     
     return HTMLResponse(content=html_content)
 
@@ -129,31 +237,60 @@ async def serve_assets(file_path: str):
 # Special handlers for API routes that the React app calls directly
 @app.post("/login")
 async def login_proxy(request: Request):
-    logger.info("Received login request, proxying to backend")
+    logger.info("Received login request at /login endpoint")
     if backend_available:
-        # Forward the request to the backend
         try:
-            # Get the raw request body and headers
-            body = await request.body()
-            json_data = await request.json()
-            
-            # Import the actual login route from backend
-            from backend.app.main import login
+            # Read request body as bytes
+            body_bytes = await request.body()
             
-            # Create a mock request with the same data
-            mock_request = Request(scope=request.scope)
-            setattr(mock_request, "_json", json_data)
-            
-            # Call the backend login route directly
-            response = await login(mock_request)
-            return response
+            # Try to parse as JSON
+            try:
+                from fastapi.encoders import jsonable_encoder
+                # Use backend login function directly
+                from backend.app.main import login
+                
+                # Parse the request body
+                user_data = await request.json()
+                logger.info(f"Login request data: {user_data}")
+                
+                # Call the backend function
+                result = await login(request)
+                return result
+            except Exception as json_error:
+                logger.error(f"Error parsing JSON in login request: {str(json_error)}")
+                
+                # If JSON parsing fails, try using the raw request
+                try:
+                    # Forward to the backend as a new request
+                    from starlette.requests import Request as StarletteRequest
+                    
+                    # Create a new scope
+                    scope = {
+                        "type": "http",
+                        "method": "POST",
+                        "path": "/login",
+                        "headers": [[k.lower().encode(), v.encode()] for k, v in request.headers.items()],
+                    }
+                    
+                    # Create a new request with the same body
+                    from starlette.datastructures import Headers
+                    new_req = StarletteRequest(scope=scope, receive=lambda: {"type": "http.request", "body": body_bytes})
+                    
+                    # Call backend login function
+                    from backend.app.main import login
+                    result = await login(new_req)
+                    return result
+                except Exception as raw_error:
+                    logger.error(f"Error forwarding raw request to login: {str(raw_error)}")
+                    raise HTTPException(status_code=500, detail=f"Login processing error: {str(raw_error)}")
         except Exception as e:
-            logger.error(f"Error proxying login request: {str(e)}")
+            logger.error(f"General error in login_proxy: {str(e)}")
             return JSONResponse(
                 content={"error": "Login failed", "message": str(e)},
                 status_code=500
             )
     else:
+        logger.error("Backend not available for login")
         return JSONResponse(
             content={"error": "Backend API not available for login"},
             status_code=503
@@ -161,25 +298,59 @@ async def login_proxy(request: Request):
 
 @app.post("/signup")
 async def signup_proxy(request: Request):
-    logger.info("Received signup request, proxying to backend")
+    logger.info("Received signup request at /signup endpoint")
     if backend_available:
         try:
-            # Get the JSON data from the request
-            json_data = await request.json()
-            
-            # Import the actual signup route from backend
-            from backend.app.main import signup
+            # Read request body as bytes
+            body_bytes = await request.body()
             
-            # Call the backend signup route
-            response = await signup(json_data)
-            return response
+            # Try to parse as JSON
+            try:
+                from fastapi.encoders import jsonable_encoder
+                # Use backend signup function directly
+                from backend.app.main import signup
+                
+                # Parse the request body
+                user_data = await request.json()
+                logger.info(f"Signup request data: {user_data}")
+                
+                # Call the backend function
+                result = await signup(user_data)
+                return result
+            except Exception as json_error:
+                logger.error(f"Error parsing JSON in signup request: {str(json_error)}")
+                
+                # If JSON parsing fails, try using the raw request
+                try:
+                    # Forward to the backend as a new request
+                    from starlette.requests import Request as StarletteRequest
+                    
+                    # Create a new scope
+                    scope = {
+                        "type": "http",
+                        "method": "POST",
+                        "path": "/signup",
+                        "headers": [[k.lower().encode(), v.encode()] for k, v in request.headers.items()],
+                    }
+                    
+                    # Create a new request with the same body
+                    new_req = StarletteRequest(scope=scope, receive=lambda: {"type": "http.request", "body": body_bytes})
+                    
+                    # Call backend signup function
+                    from backend.app.main import signup
+                    result = await signup(new_req)
+                    return result
+                except Exception as raw_error:
+                    logger.error(f"Error forwarding raw request to signup: {str(raw_error)}")
+                    raise HTTPException(status_code=500, detail=f"Signup processing error: {str(raw_error)}")
         except Exception as e:
-            logger.error(f"Error proxying signup request: {str(e)}")
+            logger.error(f"General error in signup_proxy: {str(e)}")
             return JSONResponse(
                 content={"error": "Signup failed", "message": str(e)},
                 status_code=500
             )
     else:
+        logger.error("Backend not available for signup")
         return JSONResponse(
             content={"error": "Backend API not available for signup"},
             status_code=503
@@ -187,69 +358,61 @@ async def signup_proxy(request: Request):
 
 @app.post("/token")
 async def token_proxy(request: Request):
-    logger.info("Received token request, proxying to backend")
+    logger.info("Received token request at /token endpoint")
     if backend_available:
         try:
-            # Get form data from the request
-            form_data = await request.form()
-            
-            # Import the actual token route from backend
-            from backend.app.main import login_for_access_token
+            # Read request body as bytes
+            body_bytes = await request.body()
             
-            # Call the backend token route
-            response = await login_for_access_token(form_data)
-            return response
+            # Try to get form data
+            try:
+                form_data = await request.form()
+                
+                # Import the token handler
+                from backend.app.main import login_for_access_token
+                
+                # Call the backend function
+                result = await login_for_access_token(form_data)
+                return result
+            except Exception as form_error:
+                logger.error(f"Error processing form data in token request: {str(form_error)}")
+                
+                # If form parsing fails, try forwarding the raw request
+                try:
+                    # Forward to the backend as a new request
+                    from starlette.requests import Request as StarletteRequest
+                    
+                    # Create a new scope
+                    scope = {
+                        "type": "http",
+                        "method": "POST",
+                        "path": "/token",
+                        "headers": [[k.lower().encode(), v.encode()] for k, v in request.headers.items()],
+                    }
+                    
+                    # Create a new request with the same body
+                    new_req = StarletteRequest(scope=scope, receive=lambda: {"type": "http.request", "body": body_bytes})
+                    
+                    # Call backend token function
+                    from backend.app.main import login_for_access_token
+                    result = await login_for_access_token(new_req)
+                    return result
+                except Exception as raw_error:
+                    logger.error(f"Error forwarding raw request to token: {str(raw_error)}")
+                    raise HTTPException(status_code=500, detail=f"Token processing error: {str(raw_error)}")
         except Exception as e:
-            logger.error(f"Error proxying token request: {str(e)}")
+            logger.error(f"General error in token_proxy: {str(e)}")
             return JSONResponse(
                 content={"error": "Token request failed", "message": str(e)},
                 status_code=500
             )
     else:
+        logger.error("Backend not available for token request")
         return JSONResponse(
             content={"error": "Backend API not available for token request"},
             status_code=503
         )
 
-# Post-fix: Add a helper function to fix the client-side JS
-@app.get("/api/fix-client-urls")
-async def fix_client_urls():
-    """
-    This endpoint returns JavaScript to inject into the page that rewrites
-    hardcoded localhost URLs to relative URLs
-    """
-    return HTMLResponse(content="""
-    <script>
-    (function() {
-        console.log("URL Fixer running...");
-        
-        // Override fetch to rewrite localhost URLs
-        const originalFetch = window.fetch;
-        window.fetch = function(url, options) {
-            if (typeof url === 'string' && url.includes('localhost:8000')) {
-                const newUrl = url.replace('http://localhost:8000', '');
-                console.log(`Rewriting URL from ${url} to ${newUrl}`);
-                return originalFetch(newUrl, options);
-            }
-            return originalFetch(url, options);
-        };
-        
-        // Override XMLHttpRequest to rewrite localhost URLs
-        const originalOpen = XMLHttpRequest.prototype.open;
-        XMLHttpRequest.prototype.open = function(method, url, ...args) {
-            if (typeof url === 'string' && url.includes('localhost:8000')) {
-                const newUrl = url.replace('http://localhost:8000', '');
-                console.log(`Rewriting XHR URL from ${url} to ${newUrl}`);
-                return originalOpen.call(this, method, newUrl, ...args);
-            }
-            return originalOpen.call(this, method, url, ...args);
-        };
-        
-        console.log("URL Fixer installed");
-    })();
-    </script>
-    """)
-
 # Mount the static directory for other static files
 if static_path.exists():
     app.mount("/static", StaticFiles(directory=str(static_path)), name="static")