vfi-2fa/dist/hooks/useOtpListener.js

- Headless (100% customizable, Bring-your-own-UI) - Auto out of the box, fully controllable API - Sorting (Multi and Stable) - Filters - Row Selection - Row Expansion - Column Ordering - Animatable - Resizable - Server-side/controlled data/state

import { useState, useEffect } from "react";
export const useOtpListener = () => {
    const [failedRequestConfig, setFailedRequestConfig] = useState(undefined);
    const [otpData, setOtpData] = useState(undefined);
    const [isOtpModalVisible, setOtpModalVisible] = useState(false);
    const handleOtpRequired = (e) => {
        const model = e.detail;
        setFailedRequestConfig(model.errorConfig);
        const currentData = model.otpData;
        if (currentData && !model.otpData?.type) {
            if (model.otpData?.user2FAConfigDto?.enableTOTP) {
                currentData.type = "TOTP";
            }
            else {
                if (currentData.user2FAConfigDto?.enableEmail) {
                    currentData.type = "EMAIL_OTP";
                }
                else if (currentData.user2FAConfigDto?.enableSms) {
                    currentData.type = "SMS_OTP";
                }
            }
        }
        setOtpData(currentData);
        setOtpModalVisible(true); // Hiển thị Modal khi yêu cầu OTP
    };
    const handleOtpSubmit = async (otp, secret, type) => {
        if (!failedRequestConfig) {
            return;
        }
        const otpSuccessEvent = new CustomEvent("otp-success", {
            detail: {
                otp,
                secret,
                type
            }
        });
        document.dispatchEvent(otpSuccessEvent);
    };
    const handleCloseModal = () => {
        const otpSuccessEvent = new CustomEvent("otp-success", {
            detail: {
                isCancel: true
            }
        });
        document.dispatchEvent(otpSuccessEvent);
        setOtpModalVisible(false);
    };
    const hideModal = () => setOtpModalVisible(false);
    useEffect(() => {
        document.addEventListener("otp-required", handleOtpRequired);
        document.addEventListener("otp-modal-hide", hideModal);
        return () => {
            document.removeEventListener("otp-required", handleOtpRequired);
            document.removeEventListener("otp-modal-hide", hideModal);
        };
    }, []);
    return {
        isOtpModalVisible,
        handleOtpSubmit,
        handleCloseModal,
        otpData
    };
};
// export default useOtpListener;