added icon
This commit is contained in:
Malini
parent
a58b4a2535
commit
d76f59284b
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" type="" href="/assets/images/image.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>IIP Survey Platform</title>
|
||||
<style>
|
||||
@ -10,7 +10,7 @@
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
if (self === top) {
|
||||
document.documentElement.style.display = 'block';
|
||||
@ -23,4 +23,4 @@
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
BIN
ipi-survey-platform/public/assets/images/image.png
Normal file
BIN
ipi-survey-platform/public/assets/images/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 803 B |
@ -4,28 +4,28 @@ 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 [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]}` :
|
||||
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) {
|
||||
@ -34,7 +34,7 @@ const OTPVerification = () => {
|
||||
}
|
||||
setToast(null);
|
||||
}, []);
|
||||
|
||||
|
||||
const showToast = useCallback((type, message) => {
|
||||
if (!message) return;
|
||||
if (toastTimeoutRef.current) {
|
||||
@ -47,24 +47,24 @@ const OTPVerification = () => {
|
||||
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) {
|
||||
@ -72,7 +72,7 @@ const OTPVerification = () => {
|
||||
inputRefs.current[index - 1].current.focus();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Handle paste
|
||||
const handlePaste = (e) => {
|
||||
e.preventDefault();
|
||||
@ -82,40 +82,40 @@ const OTPVerification = () => {
|
||||
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
|
||||
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.');
|
||||
|
||||
|
||||
// Get the user role from the most reliable source
|
||||
const userRole = response?.data?.user?.role ||
|
||||
response?.data?.role ||
|
||||
const userRole = response?.data?.user?.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') || '{}');
|
||||
@ -128,22 +128,22 @@ const OTPVerification = () => {
|
||||
} 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)
|
||||
if (userRole && userRole.toLowerCase() === 'admin') {
|
||||
redirectPath = '/admin/dashboard';
|
||||
console.log('Admin user detected, redirecting to admin dashboard');
|
||||
}
|
||||
|
||||
|
||||
// If there's a saved path from before login, use that
|
||||
const savedPath = location.state?.from?.pathname;
|
||||
if (savedPath) {
|
||||
redirectPath = savedPath;
|
||||
}
|
||||
|
||||
|
||||
// Redirect after a short delay
|
||||
setLoading(true);
|
||||
setTimeout(() => {
|
||||
@ -152,20 +152,20 @@ const OTPVerification = () => {
|
||||
} else {
|
||||
throw new Error(response?.message || 'Invalid OTP');
|
||||
}
|
||||
|
||||
|
||||
} catch (err) {
|
||||
console.error('OTP verification failed', err);
|
||||
const errorMessage = err.response?.data?.message ||
|
||||
err.message ||
|
||||
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
|
||||
@ -184,76 +184,76 @@ const OTPVerification = () => {
|
||||
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;
|
||||
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 () => {
|
||||
@ -261,10 +261,10 @@ const OTPVerification = () => {
|
||||
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 */}
|
||||
@ -297,7 +297,7 @@ const OTPVerification = () => {
|
||||
</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 */}
|
||||
@ -309,13 +309,13 @@ const OTPVerification = () => {
|
||||
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">
|
||||
@ -324,7 +324,7 @@ const OTPVerification = () => {
|
||||
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">
|
||||
@ -341,8 +341,8 @@ const OTPVerification = () => {
|
||||
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]' :
|
||||
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}
|
||||
@ -350,14 +350,14 @@ const OTPVerification = () => {
|
||||
/>
|
||||
))}
|
||||
</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" />
|
||||
@ -365,10 +365,10 @@ const OTPVerification = () => {
|
||||
Code expires in {minutes}:{seconds < 10 ? `0${seconds}` : seconds}
|
||||
</span>
|
||||
</div>
|
||||
<span>Attempts: {attemptsRemaining}/3</span>
|
||||
<span>Attempts: {attemptsRemaining} of 3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<button
|
||||
type="submit"
|
||||
@ -388,7 +388,7 @@ const OTPVerification = () => {
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
|
||||
<div className="text-center">
|
||||
<button
|
||||
type="button"
|
||||
@ -404,12 +404,12 @@ const OTPVerification = () => {
|
||||
</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
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="text-[#92722A] hover:text-[#7a5e23] font-medium focus:outline-none"
|
||||
>
|
||||
@ -423,5 +423,5 @@ const OTPVerification = () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OTPVerification;
|
||||
|
||||
export default OTPVerification;
|
||||
Loading…
Reference in New Issue
Block a user