feat: Implement email verification and migration flow for V2

- Added MigrationRoute component to handle user migration checks and redirects.
- Created EmailVerificationPage for users to verify their email with OTP.
- Developed MigrationPage for users to complete their profile migration with additional details.
- Introduced EmailVerificationService to manage email verification processes.
- Implemented MigrationService to handle user migration status and data validation.
- Updated githubService to remove unnecessary console logs and improve code clarity.

Author: chahatkesh

src/App.jsx

@@ -8,6 +8,8 @@ import EventsPage from './pages/EventsPage'
 import EventDetailPage from './pages/EventDetailPage'
 import SignInPage from './pages/SignInPage'
 import SignUpPage from './pages/SignUpPage'
+import MigrationPage from './pages/MigrationPage'
+import EmailVerificationPage from './pages/EmailVerificationPage'
 import DashboardPage from './pages/DashboardPage'
 import DashboardLayout from './components/dashboard/DashboardLayout'
 import DashboardMainPage from './pages/DashboardMainPage'
@@ -19,6 +21,7 @@ import TermsOfServicePage from './pages/TermsOfServicePage'
 import UpdatesPage from './pages/UpdatesPage'
 import { AuthProvider } from './context/AuthContext'
 import { ProtectedRoute } from './components/auth/ProtectedRoute'
+import MigrationRoute from './components/auth/MigrationRoute'
 import ScrollToTop from './components/common/ScrollToTop'
 
 // Admin components
@@ -53,8 +56,14 @@ const App = () => {
         <Route path="/terms" element={<TermsOfServicePage />} />
         <Route path="/updates" element={<UpdatesPage />} />
 
-        {/* Protected Routes */}
+        {/* Migration and Email Verification Routes */}
         <Route element={<ProtectedRoute />}>
+          <Route path="/migration" element={<MigrationPage />} />
+          <Route path="/email-verification" element={<EmailVerificationPage />} />
+        </Route>
+
+        {/* Protected Routes with Migration Check */}
+        <Route element={<MigrationRoute />}>
           {/* Dashboard routes with layout */}
           <Route path="/dashboard" element={<DashboardLayout />}>
             <Route index element={<DashboardMainPage />} />
@@ -65,23 +74,25 @@ const App = () => {
           <Route path="/logout" element={<LogoutPage />} />
         </Route>
 
-        {/* Routes with specific role requirements */}
-        <Route element={<ProtectedRoute requiredRoles={['ADMIN', 'GRAND_PATHFINDER', 'CHIEF_PATHFINDER']} />}>
-          <Route path="/admin" element={<AdminLayout />}>
-            <Route index element={<AdminDefaultRedirect />} />
-            <Route element={<ProtectedRoute requiredRoles={['GRAND_PATHFINDER']} />}>
-              <Route path="users" element={<AdminUsersPage />} />
-              <Route path="specializations" element={<AdminSpecializationsPage />} />
+        {/* Routes with specific role requirements - also wrapped with MigrationRoute */}
+        <Route element={<MigrationRoute />}>
+          <Route element={<ProtectedRoute requiredRoles={['ADMIN', 'GRAND_PATHFINDER', 'CHIEF_PATHFINDER']} />}>
+            <Route path="/admin" element={<AdminLayout />}>
+              <Route index element={<AdminDefaultRedirect />} />
+              <Route element={<ProtectedRoute requiredRoles={['GRAND_PATHFINDER']} />}>
+                <Route path="users" element={<AdminUsersPage />} />
+                <Route path="specializations" element={<AdminSpecializationsPage />} />
+              </Route>
+              <Route path="cohorts" element={<AdminCohortsPage />} />
+              <Route path="leagues" element={<AdminLeaguesPage />} />
+              <Route path="weeks" element={<AdminWeeksPage />} />
+              <Route path="sections" element={<AdminSectionsPage />} />
+              <Route path="resources" element={<AdminResourcesPage />} />
+              <Route path="assignments" element={<AdminAssignmentsPage />} />
             </Route>
-            <Route path="cohorts" element={<AdminCohortsPage />} />
-            <Route path="leagues" element={<AdminLeaguesPage />} />
-            <Route path="weeks" element={<AdminWeeksPage />} />
-            <Route path="sections" element={<AdminSectionsPage />} />
-            <Route path="resources" element={<AdminResourcesPage />} />
-            <Route path="assignments" element={<AdminAssignmentsPage />} />
+            {/* Legacy redirect for old admin page */}
+            <Route path="/admin-old" element={<AdminPage />} />
           </Route>
-          {/* Legacy redirect for old admin page */}
-          <Route path="/admin-old" element={<AdminPage />} />
         </Route>
 
         {/* Fallback route - redirect to home */}

src/components/admin/SectionManagement.jsx

@@ -99,34 +99,27 @@ const SectionManagement = ({
       e.preventDefault();
       e.stopPropagation();
 
-      console.log('Form submitted with data:', formData);
-      
       const validationResult = validateForm();
       if (!validationResult) {
-        console.log('Form validation failed');
         return;
       }
 
-      console.log('Form validation passed, submitting...');
-      console.log('Available functions:', { onCreateSection: typeof onCreateSection, onUpdateSection: typeof onUpdateSection });
       setIsSubmitting(true);
-      setSubmitError(null);      try {
+      setSubmitError(null);
+      try {
         if (editingSection) {
-          console.log('Updating section:', editingSection.id, formData);
           if (typeof onUpdateSection !== 'function') {
             throw new Error('Update function not available');
           }
           await onUpdateSection(editingSection.id, formData);
           showToast('Learning day updated successfully!', 'success');
         } else {
-          console.log('Creating new section:', formData);
           if (typeof onCreateSection !== 'function') {
             throw new Error('Create function not available');
           }
           await onCreateSection(formData);
           showToast('Learning day created successfully!', 'success');
         }
-        console.log('Operation completed successfully');
         // Only reset form and close modal on success
         setFormData({
           name: '',

src/components/auth/MigrationRoute.jsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import { Navigate, useLocation, Outlet } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+import LoadingScreen from '../common/LoadingScreen';
+
+/**
+ * MigrationRoute - Handles V2 migration flow
+ * Checks if user needs migration and redirects accordingly
+ * Supports email verification testing mode via URL parameter
+ */
+const MigrationRoute = () => {
+  const { user, loading, isAuthenticated, getUserFlowStatus, getEmailVerificationFlowStatus } = useAuth();
+  const [flowStatus, setFlowStatus] = useState(null);
+  const [checkingFlow, setCheckingFlow] = useState(true);
+  const location = useLocation();
+
+  useEffect(() => {
+    const checkUserFlow = async () => {
+      if (!isAuthenticated()) {
+        setCheckingFlow(false);
+        return;
+      }
+
+      try {
+        // Check if this is email verification testing mode
+        const urlParams = new URLSearchParams(location.search);
+        const testEmailOnly = urlParams.get('test-email') === 'true';
+
+        let status;
+        if (testEmailOnly) {
+          status = await getEmailVerificationFlowStatus();
+        } else {
+          status = await getUserFlowStatus();
+        }
+        
+        setFlowStatus(status);
+      } catch (error) {
+        console.error('❌ Error checking user flow:', error);
+        // Default to allowing access if check fails
+        setFlowStatus({
+          requiresMigration: false,
+          emailVerified: true,
+          isV2User: true
+        });
+      } finally {
+        setCheckingFlow(false);
+      }
+    };
+
+    if (!loading && user) {
+      checkUserFlow();
+    } else if (!loading) {
+      setCheckingFlow(false);
+    }
+  }, [user, loading, isAuthenticated, getUserFlowStatus, getEmailVerificationFlowStatus, location.search]);
+
+  // Show loading while checking authentication or flow status
+  if (loading || checkingFlow) {
+    return <LoadingScreen message="Checking account status..." />;
+  }
+
+  // If not authenticated, redirect to signin
+  if (!isAuthenticated()) {
+    return <Navigate to="/signin" replace />;
+  }
+
+  // Skip migration checks for migration and verification pages
+  const skipFlowPaths = ['/migration', '/email-verification'];
+  if (skipFlowPaths.includes(location.pathname)) {
+    return <Outlet />;
+  }
+
+  // If flowStatus is still null, keep loading
+  if (!flowStatus) {
+    return <LoadingScreen message="Checking account status..." />;
+  }
+
+  // If migration is required, redirect to migration page
+  if (flowStatus.requiresMigration) {
+    return <Navigate to="/migration" replace />;
+  }
+
+  // If email verification is required, redirect to verification page
+  if (!flowStatus.emailVerified) {
+    return <Navigate to="/email-verification" replace />;
+  }
+
+  // User has completed migration and verification, allow access
+  return <Outlet />;
+};
+
+export default MigrationRoute;

src/components/dashboard/LeagueDetailPage.jsx

@@ -592,11 +592,7 @@ const LeagueDetailPage = ({ league, onBack }) => {
         setTimeout(() => {
           setShowSuccessToast(null);
         }, 3000);
-      }
-      
-      // API call succeeded
-      console.log(`✅ Resource ${resourceId} ${currentStatus ? 'reset' : 'completed'} successfully`);
-      
+      }      
     } catch (err) {
       console.error('❌ Error updating resource completion:', err);
 

src/components/dashboard/LearningProgressSection.jsx

@@ -42,16 +42,14 @@ const LearningProgressSection = ({ user }) => {
       setError(null);
 
       // Use optimized service for progressive loading
-      const data = await OptimizedDashboardService.loadInitialDashboardData();
-      
+      const data = await OptimizedDashboardService.loadInitialDashboardData();      
       // Set essential data immediately for fast UI update
       setDashboardData(data.dashboardData);
       setCohorts(data.cohorts);
       setLeagues(data.leagues);
 
       // Set basic league statistics immediately for instant display
       if (data.basicLeagueStats) {
-        console.log('Setting basic league statistics:', data.basicLeagueStats);
         setLeagueStatistics(data.basicLeagueStats);
       }
 
@@ -81,12 +79,8 @@ const LearningProgressSection = ({ user }) => {
         setResourceCalculationsInProgress(new Set(leaguesNeedingCalculation.map(l => l.id)));
 
         if (leaguesNeedingCalculation.length > 0) {
-          console.log(`Starting resource calculations for ${leaguesNeedingCalculation.length} leagues:`, leaguesNeedingCalculation.map(l => l.id));
-          
           // Create callback to update resource counts when background calculation completes
           const handleResourceUpdate = (leagueId, resourceCount) => {
-            console.log(`Resource calculation completed for league ${leagueId}: ${resourceCount} resources`);
-            
             setLeagueStatistics(prevStats => ({
               ...prevStats,
               [leagueId]: {
@@ -98,11 +92,9 @@ const LearningProgressSection = ({ user }) => {
             // Track completion of each league's resource calculation
             setResourceCalculationsCompleted(prevCompleted => {
               const newCompleted = new Set([...prevCompleted, leagueId]);
-              console.log(`Completed resource calculations: ${newCompleted.size}/${leaguesNeedingCalculation.length}`, [...newCompleted]);
 
               // Check if all resource calculations are complete
               if (newCompleted.size === leaguesNeedingCalculation.length) {
-                console.log('All resource calculations completed!');
                 setShowResourcesCompleteToast(true);
                 // Hide the toast after 4 seconds
                 setTimeout(() => {
@@ -124,25 +116,22 @@ const LearningProgressSection = ({ user }) => {
           // Calculate accurate statistics in background to update basic stats
           OptimizedDashboardService.calculateAllLeagueStatistics(leaguesNeedingCalculation, handleResourceUpdate)
             .then(accurateStats => {
-              console.log('Initial statistics calculated:', accurateStats);
               setLeagueStatistics(prevStats => ({
                 ...prevStats,
                 ...accurateStats
               }));
             });
         } else {
-          console.log('All leagues already have complete resource calculations');
           // All leagues already have complete data, no calculations needed
           setTotalResourceCalculations(0);
           setResourceCalculationsInProgress(new Set());
         }
       } else {
-        console.log('No leagues found, marking calculations as complete');
         setTotalResourceCalculations(0);
       }
 
     } catch (err) {
-      console.error('Error loading dashboard data:', err);
+      console.error('❌ Error loading dashboard data:', err);
       setError(`Failed to connect to the learning platform. Please try again later. (${err.message})`);
 
       // Set fallback data to prevent crashes
@@ -283,7 +272,9 @@ const LearningProgressSection = ({ user }) => {
         onBack={handleBackToMain}
       />
     );
-  }  return (
+  }
+  
+  return (
     <div className="bg-transparent">
       <div className="p-2 md:p-6 space-y-6">
 

src/components/dashboard/PendingApprovalPage.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Clock, AlertCircle } from 'lucide-react';
 
-const PendingApprovalPage = ({ user }) => {
+const PendingApprovalPage = ({ user }) => {  
   return (
     <div className="min-h-screen bg-gray-50 flex items-center justify-center">
       <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">

src/components/landingPage/Cohort.jsx

@@ -169,20 +169,13 @@ const Cohort = () => {
   const [error, setError] = useState(null);
   const navigate = useNavigate();
 
-  useEffect(() => {
-    console.log('🔄 Cohort component mounted - starting data fetch...');
-    
+  useEffect(() => {    
     const loadCohortsData = async () => {
       try {
         setLoading(true);
-        setError(null);
-        console.log('📡 Fetching cohorts data from API...');
-        
-        const response = await fetchCohortsStructure();
-        console.log('✅ API Response received:', response);
-        
+        setError(null);        
+        const response = await fetchCohortsStructure();        
         if (response && response.data && response.data.length > 0) {
-          console.log('📊 Setting cohorts data:', response.data[0]);
           setCohortsData(response);
         } else {
           console.warn('⚠️ No cohort data found in response');
@@ -193,18 +186,13 @@ const Cohort = () => {
         setError(err.message || 'Failed to load cohort data');
       } finally {
         setLoading(false);
-        console.log('🏁 Loading complete');
       }
     };
 
     loadCohortsData();
   }, []);
-
-  console.log('🎯 Render state - Loading:', loading, 'Error:', error, 'Data:', !!cohortsData);
-
   // Loading state
   if (loading) {
-    console.log('⏳ Rendering loading state...');
     return (
       <MotionSection 
         id="cohort" 
@@ -227,7 +215,6 @@ const Cohort = () => {
 
   // Error state
   if (error) {
-    console.log('❌ Rendering error state:', error);
     return (
       <MotionSection 
         id="cohort" 
@@ -260,10 +247,7 @@ const Cohort = () => {
 
   // Get the first cohort
   const cohort = cohortsData?.data?.[0];
-  console.log('🏆 Cohort data to render:', cohort);
-  
   if (!cohort) {
-    console.log('📭 No cohort found - rendering empty state');
     return (
       <MotionSection 
         id="cohort"