67 lines
2.0 KiB
JavaScript
67 lines
2.0 KiB
JavaScript
import { useState } from 'react';
|
|
|
|
// material-ui
|
|
import { useTheme } from '@mui/material/styles';
|
|
import { Button, Grid, Stack, Typography } from '@mui/material';
|
|
|
|
// third-party
|
|
import OtpInput from 'react18-input-otp';
|
|
|
|
// project import
|
|
import AnimateButton from 'components/@extended/AnimateButton';
|
|
import { ThemeMode } from 'config';
|
|
|
|
// ============================|| STATIC - CODE VERIFICATION ||============================ //
|
|
|
|
const AuthCodeVerification = () => {
|
|
const theme = useTheme();
|
|
const [otp, setOtp] = useState();
|
|
|
|
const borderColor = theme.palette.mode === ThemeMode.DARK ? theme.palette.grey[200] : theme.palette.grey[300];
|
|
|
|
return (
|
|
<Grid container spacing={3}>
|
|
<Grid item xs={12}>
|
|
<OtpInput
|
|
value={otp}
|
|
onChange={(otp) => setOtp(otp)}
|
|
numInputs={4}
|
|
containerStyle={{ justifyContent: 'space-between' }}
|
|
inputStyle={{
|
|
width: '100%',
|
|
margin: '8px',
|
|
padding: '10px',
|
|
border: `1px solid ${borderColor}`,
|
|
borderRadius: 4,
|
|
':hover': {
|
|
borderColor: theme.palette.primary.main
|
|
}
|
|
}}
|
|
focusStyle={{
|
|
outline: 'none',
|
|
boxShadow: theme.customShadows.primary,
|
|
border: `1px solid ${theme.palette.primary.main}`
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<AnimateButton>
|
|
<Button disableElevation fullWidth size="large" type="submit" variant="contained">
|
|
Continue
|
|
</Button>
|
|
</AnimateButton>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="baseline">
|
|
<Typography>Did not receive the email? Check your spam filter, or</Typography>
|
|
<Typography variant="body1" sx={{ minWidth: 85, ml: 2, textDecoration: 'none', cursor: 'pointer' }} color="primary">
|
|
Resend code
|
|
</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default AuthCodeVerification;
|