115 lines
3.6 KiB
TypeScript
115 lines
3.6 KiB
TypeScript
import { Link as RouterLink, useLocation } from 'react-router-dom';
|
||
// @mui
|
||
import { styled } from '@mui/material/styles';
|
||
import { Box, Button, Link, Container, Typography } from '@mui/material';
|
||
// layouts
|
||
import LogoOnlyLayout from '@/layouts/LogoOnlyLayout';
|
||
// routes
|
||
import { PATH_AUTH } from '@/routes/paths';
|
||
// components
|
||
import Page from '@/components/Page';
|
||
import Iconify from '@/components/Iconify';
|
||
// sections
|
||
import { VerifyCodeForm } from '@/sections/auth/verify-code';
|
||
import { useState, useContext, useEffect } from 'react';
|
||
import { LanguageContext } from '@/contexts/LanguageContext';
|
||
import axios from '@/utils/axios';
|
||
|
||
// ----------------------------------------------------------------------
|
||
|
||
const RootStyle = styled('div')(({ theme }) => ({
|
||
display: 'flex',
|
||
height: '100%',
|
||
alignItems: 'center',
|
||
padding: theme.spacing(12, 0),
|
||
}));
|
||
|
||
function useQuery() {
|
||
return new URLSearchParams(useLocation().search);
|
||
}
|
||
|
||
// ----------------------------------------------------------------------
|
||
|
||
export default function VerifyCode() {
|
||
const { localeData } = useContext(LanguageContext);
|
||
const query = useQuery();
|
||
const email = query.get('email');
|
||
const [timer, setTimer] = useState(60); // Initialize timer with 60 seconds
|
||
const [canResend, setCanResend] = useState(false); // State to control resend button visibility
|
||
useEffect(() => {
|
||
const interval = setInterval(() => {
|
||
setTimer((prev) => {
|
||
if (prev > 0) {
|
||
return prev - 1;
|
||
} else {
|
||
clearInterval(interval);
|
||
setCanResend(true); // Enable resend button when timer reaches 0
|
||
return 0;
|
||
}
|
||
});
|
||
}, 1000);
|
||
|
||
return () => clearInterval(interval); // Cleanup interval on component unmount
|
||
}, []);
|
||
|
||
const handleResend = () => {
|
||
setCanResend(false);
|
||
setTimer(60); // Reset timer to 60 seconds
|
||
// Add logic to resend the code here
|
||
axios.post('/verify-email', {email: email});
|
||
};
|
||
|
||
return (
|
||
<Page title="Verify" sx={{ height: 1 }}>
|
||
<RootStyle>
|
||
<LogoOnlyLayout />
|
||
|
||
<Container>
|
||
<Box sx={{ maxWidth: 480, mx: 'auto' }}>
|
||
<Button
|
||
size="small"
|
||
component={RouterLink}
|
||
to={PATH_AUTH.resetPassword}
|
||
startIcon={<Iconify icon={'eva:arrow-ios-back-fill'} width={20} height={20} />}
|
||
sx={{ mb: 3 }}
|
||
>
|
||
{localeData.txtBack}
|
||
</Button>
|
||
|
||
<Typography variant="h3" paragraph>
|
||
{localeData.txtCheckEmail}
|
||
</Typography>
|
||
<Typography variant='subtitle1'>{email}</Typography>
|
||
<Typography sx={{ color: 'text.secondary' }}>
|
||
{localeData.txtEmail}
|
||
</Typography>
|
||
|
||
<Box sx={{ mt: 5, mb: 3 }}>
|
||
<VerifyCodeForm
|
||
onGetEmail={email}
|
||
/>
|
||
</Box>
|
||
|
||
{/* <Typography variant="body2" align="center">
|
||
Don’t have a code?
|
||
<Link variant="subtitle2" underline="none" onClick={() => {}}>
|
||
Resend code
|
||
</Link>
|
||
</Typography> */}
|
||
<Typography variant="body2" align="center">
|
||
{localeData.txtDont}
|
||
{canResend ? (
|
||
<Link sx={{cursor: 'pointer'}} variant="subtitle2" underline="none" onClick={handleResend}>
|
||
{localeData.txtResendCode}
|
||
</Link>
|
||
) : (
|
||
<span>{`${localeData.txtResendCode} ${timer} ${localeData.txtSecond}`}</span>
|
||
)}
|
||
</Typography>
|
||
</Box>
|
||
</Container>
|
||
</RootStyle>
|
||
</Page>
|
||
);
|
||
}
|