2faConfirmationDialog.js

import React, {useState, useEffect, useRef, useCallback} from 'react';
import ReactFileViewDialog from '../../../ReactFileViewDialog/ReactFileViewDialog';
import {generateTwoFaConfirmationCode, checkTwoFaConfirmationCode} from './2faConfirmationApi';

const {__, sprintf} = wp.i18n;

/**
 * @param {object} props
 * @param {boolean} props.isOpen
 * @param {function(): void} props.onCancel
 * @param {function(): void} props.onVerified
 * @param {string} props.verificationEmail
 * @return {JSX.Element|null}
 */
export default function TwoFaConfirmationDialog(props) {
    const {isOpen, onCancel, onVerified, verificationEmail} = props;
    const [code, setCode] = useState('');
    const [resendBusy, setResendBusy] = useState(false);
    const [resendCooldown, setResendCooldown] = useState(false);
    const [okBusy, setOkBusy] = useState(false);
    const resendTimerRef = useRef(null);

    const clearResendTimer = useCallback(() => {
        if (resendTimerRef.current) {
            clearTimeout(resendTimerRef.current);
            resendTimerRef.current = null;
        }
    }, []);

    const startResendCooldown = useCallback(() => {
        clearResendTimer();
        setResendCooldown(true);
        resendTimerRef.current = setTimeout(() => {
            setResendCooldown(false);
            resendTimerRef.current = null;
        }, 30000);
    }, [clearResendTimer]);

    useEffect(() => {
        if (!isOpen) {
            setCode('');
            setResendBusy(false);
            setResendCooldown(false);
            setOkBusy(false);
            clearResendTimer();
            return;
        }
        startResendCooldown();
        return () => {
            clearResendTimer();
        };
    }, [isOpen, clearResendTimer, startResendCooldown]);

    const handleResend = async () => {
        if (resendBusy || resendCooldown) {
            return;
        }
        setResendBusy(true);
        try {
            const res = await generateTwoFaConfirmationCode();
            if (res.success) {
                setCode('');
                startResendCooldown();
            } else {
                const msg = typeof res.data === 'string' ?
                    res.data :
                    __('Request failed.', 'security-malware-firewall');
                alert(msg);
            }
        } finally {
            setResendBusy(false);
        }
    };

    const handleOk = async () => {
        if (okBusy) {
            return;
        }
        setOkBusy(true);
        try {
            const res = await checkTwoFaConfirmationCode(code.trim());
            if (res.success) {
                clearResendTimer();
                onVerified();
            } else {
                const msg = typeof res.data === 'string' ?
                    res.data :
                    __('Code verification failed!', 'security-malware-firewall');
                alert(msg);
            }
        } finally {
            setOkBusy(false);
        }
    };

    const email = verificationEmail || '';
    const checkInboxMsg = __(
        'Check %s inbox for the confirmation code.',
        'security-malware-firewall',
    );
    /* eslint-disable max-len */
    const codeValidityNote = __(
        'The code is valid for 10 minutes. If you want to change the status in this period, the new code won\'t be sent, please, use the code you\'ve already received.',
        'security-malware-firewall',
    );
    /* eslint-enable max-len */

    return (
        <ReactFileViewDialog
            isOpen={isOpen}
            onClose={onCancel}
            title={__('Confirmation code', 'security-malware-firewall')}
            maxWidth="360px"
        >
            <p>
                {sprintf(
                    /* translators: %s: email address */
                    checkInboxMsg,
                    email,
                )}
            </p>
            <p>
                <em>
                    {codeValidityNote}
                </em>
            </p>
            <p>
                <input
                    type="text"
                    name="spbct-confirmation-code"
                    value={code}
                    onChange={(e) => setCode(e.target.value)}
                    className="regular-text"
                    autoComplete="one-time-code"
                />
                &nbsp;&nbsp;
                <button
                    type="button"
                    className="button button-primary spbc-2fa-confirmation-resend"
                    onClick={handleResend}
                    disabled={resendBusy || resendCooldown}
                >
                    {__('Resend', 'security-malware-firewall')}
                    {resendCooldown && (
                        <span className="circle circle--small -animation--circle -animation--30s">
                            <span className="circle-inner"></span>
                        </span>
                    )}
                </button>
            </p>
            <p style={{marginTop: 16, textAlign: 'right'}}>
                <button type="button" className="button" onClick={onCancel} disabled={okBusy}>
                    {__('Cancel', 'security-malware-firewall')}
                </button>
                &nbsp;
                <button type="button" className="button button-primary" onClick={handleOk} disabled={okBusy}>
                    {__('OK', 'security-malware-firewall')}
                </button>
            </p>
        </ReactFileViewDialog>
    );
}