added oyp

ipi-survey-platform/src/App.jsx

@@ -9,6 +9,7 @@ import Configuration from '@/pages/Admin/Configuration';
 import Survey from '@/pages/Survey/Survey';
 import Overview from '@/pages/Overview/Overview';
 import Login from '@/pages/Login/Login';
+import OTPVerification from '@/pages/OTPVerification/OTPVerification';
 import History from '@/pages/History/History';
 import ChangePassword from '@/pages/ChangePassword/ChangePassword';
 import ForgotPassword from '@/pages/ForgotPassword/ForgotPassword';
@@ -186,6 +187,14 @@ function App() {
       
       <Routes>
         <Route path="/login" element={<Login />} />
+        <Route
+          path="/verify-otp"
+          element={
+            <RequireRole allowedRoles={['EstablishmentUser', 'Admin']}>
+              <OTPVerification />
+            </RequireRole>
+          }
+        />
         <Route
           path="/history"
           element={

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { login } from '@/services/auth/authService.js';
+import { login, requestOtp } from '@/services/auth/authService.js';
 import { AlertCircle, Clock } from "lucide-react";
  
 const logoSrc = '/assets/images/FCSCLogo.svg';
@@ -206,14 +206,55 @@ const submit = async (e) => {
         countdownIntervalRef.current = null;
       }
 
-      // Show success message
+      try {
-      showToast('success', response.message || 'Login successful');
+        // Request OTP after successful login
-      
+        const otpResponse = await requestOtp(email);
-      // Redirect based on role
+        
-      if (userData.role === 'Admin') {
+        if (otpResponse.status === 'success' && otpResponse.message === 'OTP sent successfully to your registered email') {
-        navigate('/admin/dashboard', { replace: true });
+          // Store user data in localStorage
-      } else {
+          localStorage.setItem('user_role', userData.role);
-        navigate('/dashboard');
+          localStorage.setItem('user_profile', JSON.stringify({
+            id: userData.id,
+            name: userData.name,
+            email: userData.email
+          }));
+          
+          // Store establishment_id if user is an EstablishmentUser
+          if (userData.role === 'EstablishmentUser' && userData.establishment_id) {
+            localStorage.setItem('establishment_id', userData.establishment_id);
+          }
+
+          // Show success message
+          showToast('success', 'OTP sent successfully to your registered email');
+
+          // Add a small delay before navigation to allow toast to be visible
+          setTimeout(() => {
+            // Calculate OTP expiration time (3 minutes from now)
+            const otpExpiryTime = Date.now() + (3 * 60 * 1000);
+
+            // Navigate to OTP verification with email and expiry time
+            navigate('/verify-otp', {
+              state: {
+                email,
+                otpExpiryTime,
+                from: location.state?.from || (userData.role === 'Admin' ? '/admin/dashboard' : '/dashboard')
+              }
+            });
+          }, 1000); // 1 second delay
+        } else {
+          throw new Error('Failed to send OTP');
+        }
+      } catch (otpError) {
+        console.error('OTP request failed:', otpError);
+        showToast('error', 'Login successful but failed to send OTP. Please try again.');
+        // Still navigate to OTP page but show error
+        navigate('/verify-otp', { 
+          state: { 
+            email,
+            from: location.state?.from || (userData.role === 'Admin' ? '/admin/dashboard' : '/dashboard'),
+            error: 'Failed to send OTP. Please request a new one.'
+          } 
+        });
       }
     } else {
       throw new Error(response?.message || 'Invalid credentials');

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

@@ -0,0 +1,402 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { requestOtp, verifyOtp } from '@/services/auth/authService';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { AlertCircle, Clock, CheckCircle } from "lucide-react";
+ 
+const logoSrc = '/assets/images/FCSCLogo.svg';
+
+const OTPVerification = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  
+  const [otp, setOtp] = useState(['', '', '', '', '', '']);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [toast, setToast] = useState(null);
+  const [resendDisabled, setResendDisabled] = useState(false);
+  const [countdown, setCountdown] = useState(600); 
+  const [attemptsRemaining, setAttemptsRemaining] = useState(3);
+  
+  const inputRefs = useRef(Array(6).fill(null).map(() => React.createRef()));
+  const toastTimeoutRef = useRef(null);
+  const countdownRef = useRef(null);
+  
+  // Get email from location state or use a default
+  const maskedEmail = location.state?.email ? 
+    `${location.state.email.split('@')[0].substring(0, 2)}***@${location.state.email.split('@')[1]}` : 
+    'na***@company.com';
+
+  // Toast handling
+  const closeToast = useCallback(() => {
+    if (toastTimeoutRef.current) {
+      clearTimeout(toastTimeoutRef.current);
+      toastTimeoutRef.current = null;
+    }
+    setToast(null);
+  }, []);
+
+  const showToast = useCallback((type, message) => {
+    if (!message) return;
+    if (toastTimeoutRef.current) {
+      clearTimeout(toastTimeoutRef.current);
+      toastTimeoutRef.current = null;
+    }
+    setToast({ type, message });
+    toastTimeoutRef.current = setTimeout(() => {
+      setToast(null);
+      toastTimeoutRef.current = null;
+    }, 4000);
+  }, []);
+
+  // Handle OTP input change
+  const handleOtpChange = (e, index) => {
+    const value = e.target.value;
+    
+    // Only allow numbers and limit to 1 character
+    if (value && !/^\d*$/.test(value)) return;
+    
+    const newOtp = [...otp];
+    newOtp[index] = value.slice(-1);
+    setOtp(newOtp);
+    
+    // Move to next input if there's a value and we're not on the last input
+    if (value && index < 5 && inputRefs.current[index + 1]?.current) {
+      inputRefs.current[index + 1].current.focus();
+    }
+  };
+
+  // Handle backspace
+  const handleKeyDown = (e, index) => {
+    if (e.key === 'Backspace' && !otp[index] && index > 0 && inputRefs.current[index - 1]?.current) {
+      // Move to previous input on backspace
+      inputRefs.current[index - 1].current.focus();
+    }
+  };
+
+  // Handle paste
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasteData = e.clipboardData.getData('text/plain').trim();
+    if (/^\d{6}$/.test(pasteData)) {
+      const newOtp = pasteData.split('').slice(0, 6);
+      setOtp([...newOtp, ...Array(6 - newOtp.length).fill('')]);
+    }
+  };
+
+  // Handle verify OTP
+  const handleVerify = async (e) => {
+    e.preventDefault();
+    const otpValue = otp.join('');
+    
+    if (otpValue.length !== 6) {
+      setError('Please enter a valid 6-digit code');
+      return;
+    }
+    
+    setLoading(true);
+    setError('');
+    
+    try {
+      const response = await verifyOtp({ 
+        registered_email: location.state?.email, 
+        otp: otpValue 
+      });
+            
+      if (response?.status === 'success') {
+        // Show success message immediately
+        showToast('success', 'Verified! You are signed in. Redirecting to your dashboard.');
+        
+        // Check for admin role in multiple possible locations
+        const userRole = localStorage.getItem('user_role') || 
+                        response?.data?.user?.role || 
+                        response?.data?.role;
+        
+        // Check if user is admin (case-insensitive check)
+        const isAdmin = userRole?.toLowerCase() === 'admin' || 
+                       response?.data?.isAdmin === true;
+        
+        // Use the redirect path from location state if available, otherwise determine based on role
+        const redirectPath = location.state?.from || 
+                           (isAdmin ? '/admin/dashboard' : '/dashboard');
+        
+        // Wait for 5 seconds before redirecting
+        setLoading(true);
+        setTimeout(() => {
+          navigate(redirectPath, { replace: true });
+        }, 1000);
+      } else {
+        throw new Error(response?.message || 'Invalid OTP');
+      }
+      
+    } catch (err) {
+      console.error('OTP verification failed', err);
+      const errorMessage = err.response?.data?.message || 
+                         err.message || 
+                         'An error occurred during OTP verification. Please try again.';
+      
+      const newAttempts = attemptsRemaining - 1;
+      setAttemptsRemaining(newAttempts);
+      
+      // Set the error message for incorrect OTP
+      const displayError = errorMessage || 'Invalid verification code';
+      setError(displayError);
+      
+      if (newAttempts <= 0) {
+        setOtp(Array(6).fill(''));
+        // Show error message and redirect to login after a short delay
+        setError('Maximum attempts reached. Redirecting to login...');
+        setTimeout(() => {
+          navigate('/login', { replace: true });
+        }, 2000);
+      } else {
+        setOtp(Array(6).fill(''));
+        // Focus the first input if it exists
+        if (inputRefs.current[0]) {
+          inputRefs.current[0].focus();
+        }
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  
+  // Handle resend OTP
+  const handleResend = async () => {
+    if (resendDisabled) return;
+    
+    // Show loading state immediately
+    setResendDisabled(true);
+    setLoading(true);
+    
+    try {
+      // Call the API to resend OTP
+      const response = await requestOtp(location.state?.email);
+      
+      // Update state and show success toast immediately
+      const tenMinutesInSeconds = 10 * 60; 
+      setCountdown(tenMinutesInSeconds);
+      setAttemptsRemaining(3);
+      setError('');
+      setOtp(Array(6).fill(''));
+      
+      // Use setTimeout to ensure the toast shows up in the next tick
+      setTimeout(() => {
+        showToast('success', response.message || 'A new OTP has been sent to your email.');
+      }, 0);
+      
+    } catch (error) {
+      console.error('Error resending OTP:', error);
+      showToast('error', 'An error occurred while sending OTP. Please try again.');
+    } finally {
+      setLoading(false);
+      
+      // Re-enable resend after 60 seconds
+      const timer = setTimeout(() => {
+        setResendDisabled(false);
+      }, 60000);
+      
+      // Cleanup timer on component unmount
+      return () => clearTimeout(timer);
+    }
+  };
+  
+  // Start countdown on component mount
+  useEffect(() => {
+    // Always use 10 minutes for the countdown
+    const tenMinutesInMs = 10 * 60 * 1000;
+    const expiryTime = Date.now() + tenMinutesInMs;
+    
+    const updateCountdown = () => {
+      const now = Date.now();
+      const remainingSeconds = Math.max(0, Math.floor((expiryTime - now) / 1000));
+      
+      setCountdown(remainingSeconds);
+      
+      if (remainingSeconds <= 0) {
+        clearInterval(countdownRef.current);
+        setResendDisabled(false);
+      }
+    };
+    
+    // Initial update
+    updateCountdown();
+    
+    // Set up interval for countdown updates
+    countdownRef.current = setInterval(updateCountdown, 1000);
+
+    return () => {
+      if (countdownRef.current) clearInterval(countdownRef.current);
+    };
+  }, []);
+  
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (toastTimeoutRef.current) clearTimeout(toastTimeoutRef.current);
+      if (countdownRef.current) clearInterval(countdownRef.current);
+    };
+  }, []);
+  
+  const minutes = Math.floor(countdown / 60);
+  const seconds = countdown % 60;
+
+  return (
+    <div className="min-h-screen bg-[#F7F7F7] flex items-center justify-center px-4">
+      {/* Toast Notification */}
+      {toast && (
+        <div className="fixed top-6 inset-x-0 z-50 flex justify-center px-4">
+          <div
+            className={`text-sm rounded-lg px-4 py-3 border flex items-center justify-between gap-3 shadow-lg max-w-md ${
+              toast.type === 'success'
+                ? 'bg-green-100 border-green-400 text-green-800'
+                : toast.type === 'error'
+                ? 'bg-[#FEF2F2] border-[#FECACA] text-[#B91C1C]'
+                : 'bg-blue-100 border-blue-200 text-blue-800'
+            }`}
+          >
+            <div className="flex items-center gap-2">
+              {toast.type === 'error' ? (
+                <AlertCircle className="h-5 w-5 flex-shrink-0" />
+              ) : toast.type === 'success' ? (
+                <CheckCircle className="h-5 w-5 flex-shrink-0 text-green-600" />
+              ) : null}
+              <span>{toast.message}</span>
+            </div>
+            <button
+              type="button"
+              className="flex h-6 w-6 items-center justify-center rounded hover:bg-black/5"
+              onClick={closeToast}
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="w-full max-w-md">
+        <div className="bg-white rounded-lg shadow-sm ring-1 ring-gray-200 overflow-hidden">
+          {/* Logo Section */}
+          <div className="px-7 py-6 border-b border-gray-200 bg-[#F2ECCF] text-center">
+            <div className="mb-2">
+              <img src={logoSrc} alt="FCSC Logo" className="mx-auto h-16 w-auto" />
+            </div>
+            <h1 className="text-[17px] font-semibold text-[#1F2937] mt-0">
+              IIP (Index of Industrial Production)
+            </h1>
+          </div>
+
+          <div className="p-7">
+            {/* <div className="text-center mb-6">
+              <h2 className="text-xl font-bold text-gray-800">Email OTP</h2>
+              <p className="text-gray-600 mt-1">Step 2 of 2</p>
+            </div> */}
+
+            <form onSubmit={handleVerify}>
+              <div className="space-y-6">
+                <div className="text-center">
+                  <h3 className="text-lg font-medium text-gray-800">Verify your sign-in</h3>
+                  <p className="text-gray-600 mt-1">
+                    We sent a 6-digit authentication code to <span className="font-medium">{maskedEmail}</span>
+                  </p>
+                </div>
+                
+                {/* OTP Inputs */}
+                <div className="space-y-4">
+                  <div className="flex justify-center space-x-3">
+                    {otp.map((digit, index) => (
+                      <input
+                        key={index}
+                        ref={(el) => { inputRefs.current[index] = { current: el } }}
+                        type="text"
+                        inputMode="numeric"
+                        pattern="[0-9]*"
+                        maxLength={1}
+                        value={digit}
+                        onChange={(e) => handleOtpChange(e, index)}
+                        onKeyDown={(e) => handleKeyDown(e, index)}
+                        onPaste={handlePaste}
+                        className={`w-12 h-12 text-center text-xl bg-transparent border-2 rounded focus:outline-none focus:ring-0 ${
+                          error ? 'border-red-500' : 
+                          digit ? 'border-[#92722A]' : 
+                          'border-gray-300 hover:border-gray-400 focus:border-[#92722A] focus:border-b-2 focus:border-b-[#92722A]'
+                        }`}
+                        autoFocus={index === 0}
+                        disabled={loading || attemptsRemaining <= 0}
+                      />
+                    ))}
+                  </div>
+                  
+                  {error && (
+                    <div className="text-red-600 text-sm flex items-center justify-center">
+                      <AlertCircle className="h-4 w-4 mr-1" />
+                      {error}
+                    </div>
+                  )}
+                  
+                  <div className="flex justify-between items-center text-sm text-gray-600">
+                   <div className="flex items-center space-x-2 leading-none">
+                    <Clock className="h-4 w-4 flex-shrink-0 -mt-0.5" />
+                    <span className="text-sm -ml-1">
+                        Code expires in {minutes}:{seconds < 10 ? `0${seconds}` : seconds}
+                    </span>
+                    </div>
+                    <span>Attempts: {attemptsRemaining}/3</span>
+                  </div>
+                </div> 
+
+                <div className="space-y-4">
+                  <button
+                    type="submit"
+                    disabled={loading || otp.join('').length !== 6 || attemptsRemaining <= 0}
+                    className={`w-full py-3 px-4 rounded-md font-medium bg-[#92722A] text-white ${
+                      loading || attemptsRemaining <= 0 || otp.join('').length !== 6
+                        ? 'opacity-50 cursor-not-allowed'
+                        : 'hover:bg-[#7a5e23] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#92722A]'
+                    }`}
+                  >
+                    {loading ? 'Verifying...' : 'Verify'}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => navigate('/login')}
+                    className="w-full py-3 px-4 rounded-md font-medium border border-[#92722A] bg-white text-[#92722A] hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#92722A]"
+                  >
+                    Cancel
+                  </button>
+                  
+                  <div className="text-center">
+                    <button
+                      type="button"
+                      onClick={handleResend}
+                      disabled={resendDisabled}
+                      className={`text-sm font-medium ${
+                        resendDisabled ? 'text-gray-400' : 'text-[#92722A] hover:text-[#7a5e23]'
+                      }`}
+                    >
+                      {resendDisabled ? `Resend code (${Math.ceil(countdown/60)}:${(countdown%60).toString().padStart(2, '0')})` : 'Resend code'}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </form>
+            
+            <div className="mt-6 pt-6 border-t border-gray-200 text-center">
+             
+              <p className="mt-2 text-sm text-gray-600">
+                Having trouble?{' '}
+                <button 
+                  onClick={() => navigate('/')}
+                  className="text-[#92722A] hover:text-[#7a5e23] font-medium focus:outline-none"
+                >
+                  Contact support
+                </button>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OTPVerification;

ipi-survey-platform/src/services/auth/authService.js

@@ -34,10 +34,28 @@ export const logout = async () => {
   return response.data;
 };
 
+export const requestOtp = async (email) => {
+  const response = await apiClient.post(
+    '/auth/request-otp',
+    { registered_email: email },
+    { skipAuth: true, withCredentials: true }
+  );
+  return response.data;
+};
+
+export const verifyOtp = async ({ registered_email, otp }) => {
+  const response = await apiClient.post(
+    '/auth/verify-otp',
+    { registered_email, otp },
+    { skipAuth: true, withCredentials: true }
+  );
+  return response.data;
+};
 
 export default {
   login,
   changePassword,
   requestPasswordReset,
   logout,
+  requestOtp,
 };