ente/src/components/VerifyTwoFactor.tsx

/* 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>
        </>
    );
}