114 lines
3.9 KiB
TypeScript
114 lines
3.9 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
import { Formik, FormikHelpers } from 'formik';
|
|
import { DeadCenter } from 'pages/gallery';
|
|
import React, { useRef, useState } from 'react';
|
|
import { Form } from 'react-bootstrap';
|
|
import OtpInput from 'react-otp-input';
|
|
import constants from 'utils/strings/constants';
|
|
import SubmitButton from './SubmitButton';
|
|
|
|
interface formValues {
|
|
otp: string;
|
|
}
|
|
interface Props {
|
|
onSubmit: any;
|
|
back: any;
|
|
buttonText: string;
|
|
}
|
|
|
|
export default function VerifyTwoFactor(props: Props) {
|
|
const [waiting, setWaiting] = useState(false);
|
|
const otpInputRef = useRef(null);
|
|
const submitForm = async (
|
|
{ otp }: formValues,
|
|
{ setFieldError, resetForm }: FormikHelpers<formValues>
|
|
) => {
|
|
try {
|
|
setWaiting(true);
|
|
await props.onSubmit(otp);
|
|
} catch (e) {
|
|
resetForm();
|
|
for (let i = 0; i < 6; i++) {
|
|
otpInputRef.current?.focusPrevInput();
|
|
}
|
|
setFieldError('otp', `${constants.UNKNOWN_ERROR} ${e.message}`);
|
|
}
|
|
setWaiting(false);
|
|
};
|
|
|
|
const onChange = (
|
|
otp: string,
|
|
callback: Function,
|
|
triggerSubmit: Function
|
|
) => {
|
|
callback(otp);
|
|
if (otp.length === 6) {
|
|
triggerSubmit(otp);
|
|
}
|
|
};
|
|
return (
|
|
<>
|
|
<p style={{ marginBottom: '30px' }}>
|
|
enter the 6-digit code from your authenticator app.
|
|
</p>
|
|
<Formik<formValues>
|
|
initialValues={{ otp: '' }}
|
|
validateOnChange={false}
|
|
validateOnBlur={false}
|
|
onSubmit={submitForm}>
|
|
{({
|
|
values,
|
|
errors,
|
|
handleChange,
|
|
handleSubmit,
|
|
submitForm,
|
|
}) => (
|
|
<Form
|
|
noValidate
|
|
onSubmit={handleSubmit}
|
|
style={{ width: '100%' }}>
|
|
<Form.Group
|
|
style={{ marginBottom: '32px' }}
|
|
controlId="formBasicEmail">
|
|
<DeadCenter>
|
|
<OtpInput
|
|
placeholder="123456"
|
|
ref={otpInputRef}
|
|
shouldAutoFocus
|
|
value={values.otp}
|
|
onChange={(otp) => {
|
|
onChange(
|
|
otp,
|
|
handleChange('otp'),
|
|
submitForm
|
|
);
|
|
}}
|
|
numInputs={6}
|
|
separator={'-'}
|
|
isInputNum
|
|
className={'otp-input'}
|
|
/>
|
|
{errors.otp && (
|
|
<div
|
|
style={{
|
|
display: 'block',
|
|
marginTop: '16px',
|
|
}}
|
|
className="invalid-feedback">
|
|
{constants.INCORRECT_CODE}
|
|
</div>
|
|
)}
|
|
</DeadCenter>
|
|
</Form.Group>
|
|
<SubmitButton
|
|
buttonText={props.buttonText}
|
|
loading={waiting}
|
|
disabled={values.otp.length < 6}
|
|
/>
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
</>
|
|
);
|
|
}
|