Update backend and server frontend for OAuth JSON response, client-side navigation, and add .gitignore

api/auth.py

@@ -182,36 +182,40 @@ async def custom_oauth_callback(
     redirect_url: str = GOOGLE_REDIRECT_URL,
     response: Response = None,
 ):
-    # جلب access token من Google
-    token_data = await oauth_client.get_access_token(code, redirect_url)
-    access_token = token_data["access_token"]
-    user_info = await oauth_client.get_user_info(access_token)
-
-    # استدعاء oauth_callback من UserManager
-    user = await user_manager.oauth_callback(
-        oauth_name="google",
-        access_token=access_token,
-        account_id=user_info["sub"],
-        account_email=user_info["email"],
-        expires_at=token_data.get("expires_in"),
-        refresh_token=token_data.get("refresh_token"),
-        associate_by_email=True,
-        is_verified_by_default=True,
-    )
-
-    # إنشاء JWT token
-    jwt_strategy = get_jwt_strategy()
-    token = await jwt_strategy.write(user)
-
-    # تعيين الـ token في الكوكيز
-    cookie_transport.set_cookie(response, token)
-
-    # رجع JSON بدل redirect – الـ frontend هيتحكم في التوجيه
-    return JSONResponse(content={
-        "message": "Google login successful",
-        "access_token": token
-    }, status_code=200)
+    logger.debug(f"Processing Google callback with code: {code}")
+    try:
+        # جلب access token من Google
+        token_data = await oauth_client.get_access_token(code, redirect_url)
+        access_token = token_data["access_token"]
+        user_info = await oauth_client.get_user_info(access_token)
+
+        # استدعاء oauth_callback من UserManager
+        user = await user_manager.oauth_callback(
+            oauth_name="google",
+            access_token=access_token,
+            account_id=user_info["sub"],
+            account_email=user_info["email"],
+            expires_at=token_data.get("expires_in"),
+            refresh_token=token_data.get("refresh_token"),
+            associate_by_email=True,
+            is_verified_by_default=True,
+        )
 
+        # إنشاء JWT token
+        jwt_strategy = get_jwt_strategy()
+        token = await jwt_strategy.write(user)
+
+        # تعيين الـ token في الكوكيز
+        cookie_transport.set_cookie(response, token)
+
+        # رجع JSON بدل redirect
+        return JSONResponse(content={
+            "message": "Google login successful",
+            "access_token": token
+        }, status_code=200)
+    except Exception as e:
+        logger.error(f"Error in Google OAuth callback: {str(e)}")
+        raise HTTPException(status_code=400, detail=str(e))
 # تعديل الـ OAuth Callback لـ GitHub
 async def custom_github_oauth_callback(
     code: str,
@@ -220,36 +224,40 @@ async def custom_github_oauth_callback(
     redirect_url: str = GITHUB_REDIRECT_URL,
     response: Response = None,
 ):
-    # جلب access token من GitHub
-    token_data = await oauth_client.get_access_token(code, redirect_url)
-    access_token = token_data["access_token"]
-    user_info = await oauth_client.get_user_info(access_token)
-
-    # استدعاء oauth_callback من UserManager
-    user = await user_manager.oauth_callback(
-        oauth_name="github",
-        access_token=access_token,
-        account_id=str(user_info["id"]),
-        account_email=user_info.get("email") or f"{user_info['login']}@github.com",
-        expires_at=token_data.get("expires_in"),
-        refresh_token=token_data.get("refresh_token"),
-        associate_by_email=True,
-        is_verified_by_default=True,
-    )
-
-    # إنشاء JWT token
-    jwt_strategy = get_jwt_strategy()
-    token = await jwt_strategy.write(user)
-
-    # تعيين الـ token في الكوكيز
-    cookie_transport.set_cookie(response, token)
-
-    # رجع JSON بدل redirect – الـ frontend هيتحكم في التوجيه
-    return JSONResponse(content={
-        "message": "GitHub login successful",
-        "access_token": token
-    }, status_code=200)
+    logger.debug(f"Processing GitHub callback with code: {code}")
+    try:
+        # جلب access token من GitHub
+        token_data = await oauth_client.get_access_token(code, redirect_url)
+        access_token = token_data["access_token"]
+        user_info = await oauth_client.get_user_info(access_token)
+
+        # استدعاء oauth_callback من UserManager
+        user = await user_manager.oauth_callback(
+            oauth_name="github",
+            access_token=access_token,
+            account_id=str(user_info["id"]),
+            account_email=user_info.get("email") or f"{user_info['login']}@github.com",
+            expires_at=token_data.get("expires_in"),
+            refresh_token=token_data.get("refresh_token"),
+            associate_by_email=True,
+            is_verified_by_default=True,
+        )
 
+        # إنشاء JWT token
+        jwt_strategy = get_jwt_strategy()
+        token = await jwt_strategy.write(user)
+
+        # تعيين الـ token في الكوكيز
+        cookie_transport.set_cookie(response, token)
+
+        # رجع JSON بدل redirect
+        return JSONResponse(content={
+            "message": "GitHub login successful",
+            "access_token": token
+        }, status_code=200)
+    except Exception as e:
+        logger.error(f"Error in GitHub OAuth callback: {str(e)}")
+        raise HTTPException(status_code=400, detail=str(e))
 # تضمين الراوترات داخل التطبيق
 def get_auth_router(app: FastAPI):
     app.include_router(fastapi_users.get_auth_router(auth_backend), prefix="/auth/jwt", tags=["auth"])

main.py

@@ -13,7 +13,7 @@ from starlette.middleware.sessions import SessionMiddleware
 from fastapi.openapi.docs import get_swagger_ui_html
 from fastapi.middleware.cors import CORSMiddleware
 from api.endpoints import router as api_router
-from api.auth import fastapi_users, auth_backend, current_active_user, get_auth_router
+from api.auth import fastapi_users, auth_backend, current_active_user, get_auth_router , google_oauth_router, github_oauth_router
 from api.database import User, Conversation, get_db, init_db
 from api.models import UserRead, UserCreate, UserUpdate
 from motor.motor_asyncio import AsyncIOMotorClient
@@ -102,7 +102,12 @@ async def lifespan(app: FastAPI):
     yield
     logger.info("Shutting down application...")
 
-app = FastAPI(title="MGZon Chatbot API", lifespan=lifespan)
+app = FastAPI(
+    title="MGZon Chatbot API",
+    lifespan=lifespan,
+    docs_url=None,  # تعطيل Swagger UI الافتراضي على /docs
+    redoc_url=None   # تعطيل ReDoc الافتراضي لو مش عايزه
+)
 
 # Add SessionMiddleware
 app.add_middleware(SessionMiddleware, secret_key=JWT_SECRET)
@@ -136,8 +141,10 @@ logger.debug("CORS middleware configured with allowed origins")
 
 # Include routers
 app.include_router(api_router)
-get_auth_router(app)
-logger.debug("API and auth routers included")
+app.include_router(google_oauth_router, prefix="/auth", tags=["auth"])  # إضافة Google OAuth router
+app.include_router(github_oauth_router, prefix="/auth", tags=["auth"])  # إضافة GitHub OAuth router
+get_auth_router(app)  # الراوترات الأخرى (JWT, register, etc.)
+logger.debug("API, Google OAuth, GitHub OAuth, and auth routers included")
 
 # Add logout endpoint
 @app.post("/logout")

templates/login.html

@@ -378,85 +378,100 @@
             📲 Install MG Chat
         </button>
     </footer>
-
-    <script>
-        // Particles.js initialization
-        particlesJS('particles-js', {
-            particles: {
-                number: { value: 80, density: { enable: true, value_area: 800 } },
-                color: { value: ['#00f0ff', '#ff007a', '#6b21a8'] },
-                shape: { type: 'circle' },
-                opacity: { value: 0.5, random: true },
-                size: { value: 3, random: true },
-                line_linked: { enable: true, distance: 150, color: '#00f0ff', opacity: 0.4, width: 1 },
-                move: { enable: true, speed: 3, direction: 'none', random: true }
-            },
-            interactivity: {
-                detect_on: 'canvas',
-                events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' } },
-                modes: { repulse: { distance: 100 }, push: { particles_nb: 4 } }
-            },
-            retina_detect: true
-        });
-
-        function toggleTheme() {
-            const html = document.documentElement;
-            const button = document.querySelector('.theme-toggle');
-            if (html.classList.contains('dark')) {
-                html.classList.remove('dark');
-                html.classList.add('light');
-                button.textContent = '☀️';
-                localStorage.setItem('theme', 'light');
-            } else {
-                html.classList.remove('light');
-                html.classList.add('dark');
-                button.textContent = '🌙';
-                localStorage.setItem('theme', 'dark');
-            }
-        }
-
-        // Load saved theme preference or system preference
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme) {
-            document.documentElement.classList.remove('dark', 'light');
-            document.documentElement.classList.add(savedTheme);
-            document.querySelector('.theme-toggle').textContent = savedTheme === 'dark' ? '🌙' : '☀️';
-        } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
-            document.documentElement.classList.remove('dark');
-            document.documentElement.classList.add('light');
-            document.querySelector('.theme-toggle').textContent = '☀️';
+<script>
+    // Particles.js initialization
+    particlesJS('particles-js', {
+        particles: {
+            number: { value: 80, density: { enable: true, value_area: 800 } },
+            color: { value: ['#00f0ff', '#ff007a', '#6b21a8'] },
+            shape: { type: 'circle' },
+            opacity: { value: 0.5, random: true },
+            size: { value: 3, random: true },
+            line_linked: { enable: true, distance: 150, color: '#00f0ff', opacity: 0.4, width: 1 },
+            move: { enable: true, speed: 3, direction: 'none', random: true }
+        },
+        interactivity: {
+            detect_on: 'canvas',
+            events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' } },
+            modes: { repulse: { distance: 100 }, push: { particles_nb: 4 } }
+        },
+        retina_detect: true
+    });
+
+    function toggleTheme() {
+        const html = document.documentElement;
+        const button = document.querySelector('.theme-toggle');
+        if (html.classList.contains('dark')) {
+            html.classList.remove('dark');
+            html.classList.add('light');
+            button.textContent = '☀️';
             localStorage.setItem('theme', 'light');
+        } else {
+            html.classList.remove('light');
+            html.classList.add('dark');
+            button.textContent = '🌙';
+            localStorage.setItem('theme', 'dark');
         }
+    }
 
-        // Check authentication status on page load
-        async function checkAuthStatus() {
-            try {
-                const response = await fetch('/api/check-auth', {
-                    method: 'GET',
-                    credentials: 'include',
-                    headers: { 'Accept': 'application/json' }
-                });
-                const data = await response.json();
-                if (data.is_authenticated) {
-                    console.log('User is authenticated, redirecting to /chat');
-                    window.location.href = '/chat';
+    // Load saved theme preference or system preference
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+        document.documentElement.classList.remove('dark', 'light');
+        document.documentElement.classList.add(savedTheme);
+        document.querySelector('.theme-toggle').textContent = savedTheme === 'dark' ? '🌙' : '☀️';
+    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+        document.documentElement.classList.remove('dark');
+        document.documentElement.classList.add('light');
+        document.querySelector('.theme-toggle').textContent = '☀️';
+        localStorage.setItem('theme', 'light');
+    }
+
+    // Check authentication status on page load
+    async function checkAuthStatus() {
+        try {
+            const token = localStorage.getItem('token');
+            if (!token) {
+                console.log('No token found in localStorage');
+                return;
+            }
+            const response = await fetch('/api/verify-token', {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Accept': 'application/json'
                 }
-            } catch (error) {
-                console.error('Error checking auth status:', error);
+            });
+            if (response.ok) {
+                console.log('User is authenticated, redirecting to /chat');
+                window.location.href = '/chat';
+            } else {
+                console.log('Token verification failed, clearing token');
+                localStorage.removeItem('token');
             }
+        } catch (error) {
+            console.error('Error checking auth status:', error);
+            localStorage.removeItem('token');
         }
+    }
 
-        // Handle email/password login
-        const loginForm = document.getElementById('loginForm');
-        const loginBtn = document.getElementById('loginBtn');
-        const spinner = document.getElementById('spinner');
-        const errorMsg = document.getElementById('errorMsg');
-        const googleLoginBtn = document.getElementById('googleLoginBtn');
-        const githubLoginBtn = document.getElementById('githubLoginBtn');
+    // Handle email/password login
+    const loginForm = document.getElementById('loginForm');
+    const loginBtn = document.getElementById('loginBtn');
+    const spinner = document.getElementById('spinner');
+    const errorMsg = document.getElementById('errorMsg');
+    const googleLoginBtn = document.getElementById('googleLoginBtn');
+    const githubLoginBtn = document.getElementById('githubLoginBtn');
 
+    if (loginForm) {
         loginForm.addEventListener('submit', async (e) => {
             e.preventDefault();
             console.log('Login form submitted');
+            if (!navigator.onLine) {
+                errorMsg.textContent = 'You are offline. Please connect to the internet and try again.';
+                errorMsg.classList.remove('hidden');
+                return;
+            }
             spinner.classList.remove('hidden');
             errorMsg.classList.add('hidden');
             const formData = new FormData(loginForm);
@@ -467,6 +482,8 @@
                 });
                 spinner.classList.add('hidden');
                 if (response.ok) {
+                    const data = await response.json();
+                    localStorage.setItem('token', data.access_token);
                     console.log('Login successful, redirecting to /chat');
                     window.location.href = '/chat';
                 } else {
@@ -482,148 +499,160 @@
                 console.error('Error during login:', error);
             }
         });
+    }
 
-        // Handle Google OAuth login
-googleLoginBtn.addEventListener('click', async (e) => {
-    e.preventDefault();
-    console.log('Google login button clicked');
-    spinner.classList.remove('hidden');
-    errorMsg.classList.add('hidden');
-    try {
-        const response = await fetch('/auth/google/authorize', {
-            method: 'GET',
-            headers: { 'Accept': 'application/json' }
+    // Handle Google OAuth login
+    if (googleLoginBtn) {
+        googleLoginBtn.addEventListener('click', async (e) => {
+            e.preventDefault();
+            console.log('Google login button clicked');
+            spinner.classList.remove('hidden');
+            errorMsg.classList.add('hidden');
+            try {
+                const response = await fetch('/auth/google/authorize', {
+                    method: 'GET',
+                    headers: { 'Accept': 'application/json' }
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                const data = await response.json();
+                if (data.authorization_url) {
+                    console.log('Redirecting to Google:', data.authorization_url);
+                    window.location.href = data.authorization_url;
+                } else {
+                    throw new Error('No authorization URL received');
+                }
+            } catch (error) {
+                spinner.classList.add('hidden');
+                errorMsg.textContent = 'Failed to initiate Google login. Please try again.';
+                errorMsg.classList.remove('hidden');
+                console.error('Error initiating Google login:', error);
+            }
         });
-        if (!response.ok) {
-            throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-        const data = await response.json();
-        if (data.authorization_url) {
-            console.log('Redirecting to Google:', data.authorization_url);
-            window.location.href = data.authorization_url;
-        } else {
-            throw new Error('No authorization URL received');
-        }
-    } catch (error) {
-        spinner.classList.add('hidden');
-        errorMsg.textContent = 'Failed to initiate Google login. Please try again.';
-        errorMsg.classList.remove('hidden');
-        console.error('Error initiating Google login:', error);
     }
-});
-
-// Handle GitHub OAuth login
-githubLoginBtn.addEventListener('click', async (e) => {
-    e.preventDefault();
-    console.log('GitHub login button clicked');
-    spinner.classList.remove('hidden');
-    errorMsg.classList.add('hidden');
-    try {
-        const response = await fetch('/auth/github/authorize', {
-            method: 'GET',
-            headers: { 'Accept': 'application/json' }
+
+    // Handle GitHub OAuth login
+    if (githubLoginBtn) {
+        githubLoginBtn.addEventListener('click', async (e) => {
+            e.preventDefault();
+            console.log('GitHub login button clicked');
+            spinner.classList.remove('hidden');
+            errorMsg.classList.add('hidden');
+            try {
+                const response = await fetch('/auth/github/authorize', {
+                    method: 'GET',
+                    headers: { 'Accept': 'application/json' }
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                const data = await response.json();
+                if (data.authorization_url) {
+                    console.log('Redirecting to GitHub:', data.authorization_url);
+                    window.location.href = data.authorization_url;
+                } else {
+                    throw new Error('No authorization URL received');
+                }
+            } catch (error) {
+                spinner.classList.add('hidden');
+                errorMsg.textContent = 'Failed to initiate GitHub login. Please try again.';
+                errorMsg.classList.remove('hidden');
+                console.error('Error initiating GitHub login:', error);
+            }
         });
-        if (!response.ok) {
-            throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-        const data = await response.json();
-        if (data.authorization_url) {
-            console.log('Redirecting to GitHub:', data.authorization_url);
-            window.location.href = data.authorization_url;
-        } else {
-            throw new Error('No authorization URL received');
-        }
-    } catch (error) {
-        spinner.classList.add('hidden');
-        errorMsg.textContent = 'Failed to initiate GitHub login. Please try again.';
-        errorMsg.classList.remove('hidden');
-        console.error('Error initiating GitHub login:', error);
     }
-});
-
-// Check for OAuth callback on load (for web)
-window.addEventListener('load', async () => {
-  const urlParams = new URLSearchParams(window.location.search);
-  const code = urlParams.get('code');
-  const error = urlParams.get('error');
-  if (error) {
-    errorMsg.textContent = decodeURIComponent(error);
-    errorMsg.classList.remove('hidden');
-    console.error('OAuth error from URL:', error);
-  } else if (code) {
-    console.log('OAuth code detected in URL, processing callback');
-    const provider = window.location.pathname.includes('google') ? 'google' : 'github';
-    const callbackEndpoint = `/auth/${provider}/callback?code=${code}`;
-    try {
-      const response = await fetch(callbackEndpoint, {
-        method: 'GET',
-        headers: { 'Accept': 'application/json' }
-      });
-      if (response.ok) {
-        const data = await response.json();
-        if (data.access_token) {
-          localStorage.setItem('token', data.access_token);  // Store token in localStorage for web
-          console.log(`${provider} login successful, token saved`);
-          window.location.href = '/chat';  // Redirect to server's /chat
-        } else {
-          throw new Error('No access token received');
-        }
-      } else {
-        const errorData = await response.json();
-        errorMsg.textContent = errorData.detail || `Failed to complete ${provider} login`;
-        errorMsg.classList.remove('hidden');
-        console.error(`Failed to complete ${provider} login:`, errorData);
-      }
-    } catch (error) {
-      errorMsg.textContent = `Failed to process ${provider} login. Please try again.`;
-      errorMsg.classList.remove('hidden');
-      console.error(`Error processing ${provider} callback:`, error);
-    }
-  }
-});
 
-        // Handle card details toggle
-        function showCardDetails(cardId) {
-            console.log('Showing card details:', cardId);
-            document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    // Check for OAuth callback on load (for web)
+    window.addEventListener('load', async () => {
+        console.log('Page loaded, checking for auth status and OAuth callback');
+        if (!navigator.onLine) {
+            errorMsg.textContent = 'You are offline. Please connect to the internet and try again.';
+            errorMsg.classList.remove('hidden');
+            return;
+        }
+        await checkAuthStatus();
+        const urlParams = new URLSearchParams(window.location.search);
+        const code = urlParams.get('code');
+        const error = urlParams.get('error');
+        if (error) {
+            errorMsg.textContent = decodeURIComponent(error);
+            errorMsg.classList.remove('hidden');
+            console.error('OAuth error from URL:', error);
+        } else if (code) {
+            console.log('OAuth code detected in URL, processing callback');
+            const provider = window.location.pathname.includes('google') ? 'google' : 'github';
+            const callbackEndpoint = `/auth/${provider}/callback?code=${code}`;
+            try {
+                const response = await fetch(callbackEndpoint, {
+                    method: 'GET',
+                    headers: { 'Accept': 'application/json' }
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data.access_token) {
+                        localStorage.setItem('token', data.access_token);
+                        console.log(`${provider} login successful, token saved`);
+                        window.location.href = '/chat';
+                    } else {
+                        throw new Error('No access token received');
+                    }
+                } else {
+                    const errorData = await response.json();
+                    errorMsg.textContent = errorData.detail || `Failed to complete ${provider} login`;
+                    errorMsg.classList.remove('hidden');
+                    console.error(`Failed to complete ${provider} login:`, errorData);
+                }
+            } catch (error) {
+                errorMsg.textContent = `Failed to process ${provider} login. Please try again.`;
+                errorMsg.classList.remove('hidden');
+                console.error(`Error processing ${provider} callback:`, error);
+            }
         }
+    });
 
-        function closeCardDetails(cardId) {
-            console.log('Closing card details:', cardId);
-            document.getElementById(`${cardId}-details`).classList.add('hidden');
-        }
+    // Handle card details toggle
+    function showCardDetails(cardId) {
+        console.log('Showing card details:', cardId);
+        document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
 
-        // Service Worker for PWA
-        if ('serviceWorker' in navigator) {
-            console.log('Registering service worker');
-            navigator.serviceWorker.register('/static/js/sw.js')
-                .then(reg => console.log('✅ Service Worker Registered', reg))
-                .catch(err => console.error('❌ Service Worker registration failed', err));
-        }
+    function closeCardDetails(cardId) {
+        console.log('Closing card details:', cardId);
+        document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
 
-        // Handle PWA install prompt
-        let deferredPrompt;
-        window.addEventListener('beforeinstallprompt', (e) => {
-            console.log('Before install prompt triggered');
-            e.preventDefault();
-            deferredPrompt = e;
-            const installBtn = document.getElementById('installAppBtn');
-            if (installBtn) {
-                installBtn.style.display = 'block';
-                installBtn.addEventListener('click', () => {
-                    console.log('Install button clicked');
-                    deferredPrompt.prompt();
-                    deferredPrompt.userChoice.then(choice => {
-                        if (choice.outcome === 'accepted') {
-                            console.log('✅ User accepted the install prompt');
-                        } else {
-                            console.log('❌ User dismissed the install prompt');
-                        }
-                        deferredPrompt = null;
-                    });
+    // Service Worker for PWA
+    if ('serviceWorker' in navigator) {
+        console.log('Registering service worker');
+        navigator.serviceWorker.register('/static/js/sw.js')
+            .then(reg => console.log('✅ Service Worker Registered', reg))
+            .catch(err => console.error('❌ Service Worker registration failed', err));
+    }
+
+    // Handle PWA install prompt
+    let deferredPrompt;
+    window.addEventListener('beforeinstallprompt', (e) => {
+        console.log('Before install prompt triggered');
+        e.preventDefault();
+        deferredPrompt = e;
+        const installBtn = document.getElementById('installAppBtn');
+        if (installBtn) {
+            installBtn.style.display = 'block';
+            installBtn.addEventListener('click', () => {
+                console.log('Install button clicked');
+                deferredPrompt.prompt();
+                deferredPrompt.userChoice.then(choice => {
+                    if (choice.outcome === 'accepted') {
+                        console.log('✅ User accepted the install prompt');
+                    } else {
+                        console.log('❌ User dismissed the install prompt');
+                    }
+                    deferredPrompt = null;
                 });
-            }
-        });
-    </script>
+            });
+        }
+    });
+</script>
 </body>
 </html>