fixed

ipi-survey-platform/src/App.jsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { requestOtp } from '@/services/auth/authService';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import Dashboard from '@/pages/Dashboard/Dashboard';
 import AdminDashboard from '@/pages/Admin/AdminDashboard';
@@ -18,6 +20,53 @@ import EditCompanyProfile from '@/pages/Admin/configuration/EditCompanyProfile';
 import Navbar from './pages/LandingPage/component/Navbar';
 import ManufacturingIndex from '@/pages/ManufacturingIndex/ManufacturingIndex';
 
+const RequireOTPVerification = ({ children }) => {
+  const [isVerified, setIsVerified] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    const checkVerification = async () => {
+      try {
+        const userProfile = JSON.parse(localStorage.getItem('user_profile') || '{}');
+        
+        // Check if user is logged in and has a valid role
+        const role = localStorage.getItem('user_role');
+        const allowedRoles = ['EstablishmentUser', 'Admin'];
+        
+        if (!role || !allowedRoles.includes(role)) {
+          navigate('/index', { replace: true });
+          return;
+        }
+
+        // Check if user is OTP verified
+        if (userProfile.isOtpVerified) {
+          setIsVerified(true);
+        } else {
+          // If not verified, redirect to index page
+          navigate('/index', { replace: true });
+        }
+      } catch (error) {
+        console.error('Verification check failed:', error);
+        navigate('/index', { replace: true });
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    checkVerification();
+  }, [navigate]);
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center min-h-screen">
+      <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
+    </div>;
+  }
+
+  return isVerified ? children : null;
+};
+
 const RequireRole = ({ allowedRoles = [], children }) => {
   let role;
 
@@ -206,33 +255,41 @@ function App() {
         <Route
           path="/dashboard"
           element={
+            <RequireOTPVerification>
               <RequireRole allowedRoles={['EstablishmentUser']}>
                 <Dashboard />
               </RequireRole>
+            </RequireOTPVerification>
           }
         />
         <Route
           path="/admin/dashboard"
           element={
+            <RequireOTPVerification>
               <RequireRole allowedRoles={['Admin']}>
                 <AdminDashboard />
               </RequireRole>
+            </RequireOTPVerification>
           }
         />
         <Route
           path="/admin/validations"
           element={
+            <RequireOTPVerification>
               <RequireRole allowedRoles={['Admin']}>
                 <Validations />
               </RequireRole>
+            </RequireOTPVerification>
           }
         />
         <Route
           path="/admin/validations/:id"
           element={
+            <RequireOTPVerification>
               <RequireRole allowedRoles={['Admin']}>
                 <ValidationReview />
               </RequireRole>
+            </RequireOTPVerification>
           }
         />
         {/* <Route path="/admin/configuration">
@@ -246,9 +303,11 @@ function App() {
           />
         </Route> */}
           <Route path="/admin/configuration/*" element={
+            <RequireOTPVerification>
               <RequireRole allowedRoles={['Admin', 'EstablishmentUser']}>
                 <Configuration />
               </RequireRole>
+            </RequireOTPVerification>
           } />
         {/* /> */}
       {/* </Route> */}
@@ -263,26 +322,32 @@ function App() {
         <Route
           path="/admin/users"
           element={
+            <RequireOTPVerification>
               <RequireRole allowedRoles={['Admin']}>
                 <AdminUsers />
               </RequireRole>
+            </RequireOTPVerification>
           }
         />
         <Route path="/" element={<Navigate to="/dashboard" replace />} />
         <Route
           path="/survey"
           element={
+            <RequireOTPVerification>
               <RequireRole allowedRoles={['EstablishmentUser']}>
                 <Survey />
               </RequireRole>
+            </RequireOTPVerification>
           }
         />
         <Route
           path="/overview"
           element={
+            <RequireOTPVerification>
               <RequireRole allowedRoles={['EstablishmentUser']}>
                 <Overview />
               </RequireRole>
+            </RequireOTPVerification>
           }
         />
         {/* <Route path="profile">
@@ -311,9 +376,11 @@ function App() {
         <Route
           path="/edit-profile/:id"
           element={
+            <RequireOTPVerification>
               <RequireRole allowedRoles={['EstablishmentUser']}>
                 <EditCompanyProfile />
               </RequireRole>
+            </RequireOTPVerification>
           }
         />
         <Route path="/change-password" element={<ChangePassword />} />

ipi-survey-platform/src/pages/OTPVerification/OTPVerification.jsx

@@ -106,20 +106,45 @@ const OTPVerification = () => {
         // Show success message immediately
         showToast('success', 'Verified! You are signed in. Redirecting to your dashboard.');
         
-        // Check for admin role in multiple possible locations
+        // Get the user role from the most reliable source
-        const userRole = localStorage.getItem('user_role') || 
+        const userRole = response?.data?.user?.role || 
-                        response?.data?.user?.role || 
+                        response?.data?.role || 
-                        response?.data?.role;
+                        localStorage.getItem('user_role');
+        
+        // Set the role in localStorage if not already set
+        if (userRole && !localStorage.getItem('user_role')) {
+          localStorage.setItem('user_role', userRole);
+        }
+        
+        // Update user profile in local storage with OTP verification status
+        try {
+          const userProfile = JSON.parse(localStorage.getItem('user_profile') || '{}');
+          localStorage.setItem('user_profile', JSON.stringify({
+            ...userProfile,
+            isOtpVerified: true,
+            email: location.state?.email || userProfile.email,
+            role: userRole || userProfile.role
+          }));
+        } catch (error) {
+          console.error('Failed to update user profile:', error);
+        }
+        
+        // Determine the appropriate dashboard based on user role
+        let redirectPath = '/dashboard';
         
         // Check if user is admin (case-insensitive check)
-        const isAdmin = userRole?.toLowerCase() === 'admin' || 
+        if (userRole && userRole.toLowerCase() === 'admin') {
-                       response?.data?.isAdmin === true;
+          redirectPath = '/admin/dashboard';
+          console.log('Admin user detected, redirecting to admin dashboard');
+        }
         
-        // Use the redirect path from location state if available, otherwise determine based on role
+        // If there's a saved path from before login, use that
-        const redirectPath = location.state?.from || 
+        const savedPath = location.state?.from?.pathname;
-                           (isAdmin ? '/admin/dashboard' : '/dashboard');
+        if (savedPath) {
+          redirectPath = savedPath;
+        }
         
-        // Wait for 5 seconds before redirecting
+        // Redirect after a short delay
         setLoading(true);
         setTimeout(() => {
           navigate(redirectPath, { replace: true });