@antscorp/antsomi-ui 1.3.5-beta.72 → 1.3.5-beta.721

package/es/components/organism/Login/Login.js

@@ -0,0 +1,700 @@
+/* eslint-disable func-names */
+/* eslint-disable no-empty */
+/* eslint-disable no-return-assign */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/* eslint-disable no-prototype-builtins */
+/* eslint-disable react-hooks/exhaustive-deps */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/// Libraries
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { CookiesProvider, useCookies } from 'react-cookie';
+import { get } from 'lodash';
+import axios from 'axios';
+import { isMobile } from 'react-device-detect';
+// Components
+import { LoginSelectPortal, LoginStep2, SignIn, VerifyAccount, SetupGGAuthenticator, ForgotPassword, } from './components';
+// Hooks
+import { useContainerDimensions } from './hooks';
+// Utils
+import { checkURL, navigateTo } from './utils';
+import { STEPS } from './constants';
+import { LoginBannerZone, LoginMain, WrapperLogin } from './styled';
+export const Login = props => {
+    const { loginDomain = 'http://khanhhv.platform-ants.adxdev.vn', onLoginSuccess, onLoginFail, reCaptchaKey = '6LfqGF0UAAAAAFJri0tlp8eCNbWZdJv1eAyF4oIo', p_id, onResendPassFail, u_ogs, callbackUrl, apiDomain = '', usePrivilege, } = props;
+    let { networkId } = props;
+    networkId = !networkId || typeof networkId === 'boolean' ? undefined : networkId;
+    const domainLogin = loginDomain.endsWith('/') ? loginDomain : `${loginDomain}/`;
+    const loginUrl = `${domainLogin}api/account/authenticate`;
+    const [step, setStep] = useState(STEPS.STEP1);
+    const [loginData, setLoginData] = useState({});
+    const [isLoginGG, setIsLoginGG] = useState(false);
+    const [urlLogo, setUrlLogo] = useState('');
+    const [isLoading, setLoading] = useState(false);
+    const [isLoadingSkip, setLoadingSkip] = useState(false);
+    const [cookies, setCookie] = useCookies();
+    const selectedNetworkRef = useRef(null);
+    const listNetworkRef = useRef(null);
+    const listAccountsRef = useRef(null);
+    const authenInfoRef = useRef(null);
+    const loginRef = useRef(null);
+    const searchParams = new URLSearchParams(window.location.search);
+    useEffect(() => {
+        if (searchParams.get('ui') === 'forgot') {
+            setStep(STEPS.STEP_FORGOT);
+            searchParams.delete('ui');
+            const newSearch = searchParams.toString();
+            history.pushState({}, '', `?${newSearch}`);
+        }
+    }, [searchParams]);
+    const getObjectPropSafely = (fn, defaultValue) => {
+        try {
+            return fn();
+        }
+        catch (e) {
+            return defaultValue;
+        }
+    };
+    const getMenuUrl = (menu, userId = '') => {
+        if (!menu || !menu.menu_path) {
+            return '';
+        }
+        const { app_domain: appDomain, app_path: appPath, menu_path: menuPath } = menu;
+        return (appDomain + appPath + menuPath).replace(/:user_id/g, userId);
+    };
+    const getNetworkInfo = (app_id) => fetch(`${domainLogin}api/network/info?app_id=${app_id}`)
+        .then(response => response.json())
+        .then(res => {
+        var _a, _b, _c;
+        if ((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.networkInfo) === null || _b === void 0 ? void 0 : _b.logo) {
+            setUrlLogo(res.data.networkInfo.logo);
+        }
+        if (((_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.use_google_login) && +res.data.use_google_login === 1) {
+            setIsLoginGG(true);
+        }
+    });
+    useEffect(() => {
+        if (networkId) {
+            getNetworkInfo(networkId);
+        }
+    }, [networkId]);
+    const getAppsMenus = ({ token, userId, accountId }, callback) => {
+        if (apiDomain && token && userId && accountId) {
+            const apiUrl = `${apiDomain}${usePrivilege ? '/api/privilege/index' : '/api/permission/index'}`;
+            axios({
+                url: apiUrl,
+                params: {
+                    type: 'list-app',
+                    _token: token,
+                    _user_id: userId,
+                    _account_id: accountId,
+                    _lang: 'en',
+                    hasChild: true,
+                    from: 'login',
+                },
+            }).then(res => {
+                callback(res);
+            });
+        }
+    };
+    const getListAccountSharing = ({ token, userId, accountId }) => {
+        const params = {
+            type: 'get-list-access',
+            _token: token,
+            _user_id: userId,
+            _account_id: accountId,
+            _lang: 'en',
+            limit: 1000,
+            search: '',
+        };
+        return axios.get(`${apiDomain}/api/account/share-access`, { params });
+    };
+    const redirectFirstMenuAccount = (redirectAccountId, token) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!redirectAccountId) {
+            return;
+        }
+        axios
+            .get(`${apiDomain}/api/privilege/index`, {
+            params: {
+                _token: token,
+                _user_id: redirectAccountId,
+                _account_id: redirectAccountId,
+                _lang: 'en',
+                hasChild: true,
+                type: 'list-app',
+                from: 'header',
+            },
+        })
+            .then(res => {
+            if (res && res.data) {
+                redirectFirstMenu(res.data.data, redirectAccountId);
+            }
+        });
+    });
+    const redirectFirstMenu = (data, redirectAccountId) => {
+        if (!Array.isArray(data)) {
+            return false;
+        }
+        const arrMenus = getObjectPropSafely(() => [...data].sort((first, second) => first.app_order - second.app_order)[0].childs, []);
+        if (arrMenus.length) {
+            const firstMenu = arrMenus
+                .filter(menu => +menu.show_hide)
+                .sort((first, second) => first.menu_order - second.menu_order)[0];
+            if (firstMenu) {
+                const redirectUrl = getMenuUrl(firstMenu, redirectAccountId);
+                navigateTo(redirectUrl);
+            }
+        }
+    };
+    const checkRedirectHomePage = (homePage, data, userId) => {
+        const convertedHomePage = String(homePage).replace(/:user_id/g, userId || '');
+        if (!Array.isArray(data) || !data.length) {
+            return navigateTo(convertedHomePage);
+        }
+        const arrMenus = buildListAppMenus(data, userId);
+        if (!arrMenus.some(url => convertedHomePage.includes(url))) {
+            return redirectFirstMenu(data, userId);
+        }
+        navigateTo(convertedHomePage);
+    };
+    const buildListAppMenus = (data, userId) => {
+        if (!Array.isArray(data) || !data.length) {
+            return [];
+        }
+        let arrMenus = [];
+        data.forEach(item => {
+            if (item.menu_id) {
+                arrMenus.push(getMenuUrl(item, userId));
+            }
+            if (item.childs && item.childs.length) {
+                arrMenus = arrMenus.concat(buildListAppMenus(item.childs, userId));
+            }
+        });
+        return arrMenus;
+    };
+    const handleLoginSuccess = (data = null, networkRedirect = null, accountRedirect = null) => {
+        var _a, _b, _c;
+        // check setup loading skip
+        if (data && data.isCheckSkip) {
+            setLoadingSkip(true);
+        }
+        if (data && data.isCheckG2FA && data.G2FA_user === 0) {
+            setLoginData(data);
+            setStep(STEPS.STEP_SETUP_GG_AUTHENTICATOR);
+        }
+        else if (data && data.G2FA === 1) {
+            setLoginData(data);
+            setStep(STEPS.STEP2);
+        }
+        else {
+            const dataLogin = data || loginData;
+            if (accountRedirect) {
+                return redirectFirstMenuAccount(accountRedirect.user_id, dataLogin.token);
+            }
+            let isCallbackUrl = false;
+            let isHomePageUrl = false;
+            if (callbackUrl && checkURL(callbackUrl)) {
+                isCallbackUrl = true;
+            }
+            if (selectedNetworkRef.current && selectedNetworkRef.current.homePage) {
+                isHomePageUrl = true;
+            }
+            if (networkId || selectedNetworkRef.current) {
+                if ((onLoginSuccess && typeof onLoginSuccess === 'function') ||
+                    isCallbackUrl ||
+                    isHomePageUrl ||
+                    networkRedirect ||
+                    selectedNetworkRef.current) {
+                    if (apiDomain) {
+                        getAppsMenus({
+                            token: dataLogin.token,
+                            userId: (_a = dataLogin === null || dataLogin === void 0 ? void 0 : dataLogin.personal) === null || _a === void 0 ? void 0 : _a.user_id,
+                            accountId: (_b = dataLogin === null || dataLogin === void 0 ? void 0 : dataLogin.personal) === null || _b === void 0 ? void 0 : _b.user_id,
+                        }, res => {
+                            var _a, _b, _c, _d;
+                            const menus = getObjectPropSafely(() => res.data.data, []);
+                            if (menus && menus.length) {
+                                handleLoginData(dataLogin, !isCallbackUrl && !isHomePageUrl, selectedNetworkRef.current && selectedNetworkRef.current.networkId);
+                                if (onLoginSuccess && typeof onLoginSuccess === 'function') {
+                                    onLoginSuccess(dataLogin);
+                                    setLoadingSkip(false);
+                                }
+                                else if (isCallbackUrl && callbackUrl) {
+                                    navigateTo(callbackUrl);
+                                    setLoadingSkip(false);
+                                }
+                                else if (isHomePageUrl) {
+                                    checkRedirectHomePage((_a = selectedNetworkRef.current) === null || _a === void 0 ? void 0 : _a.homePage, menus, (_b = dataLogin.personal) === null || _b === void 0 ? void 0 : _b.user_id);
+                                    setLoadingSkip(false);
+                                }
+                            }
+                            else {
+                                // Get user share
+                                getListAccountSharing({
+                                    token: dataLogin.token,
+                                    userId: (_c = dataLogin.personal) === null || _c === void 0 ? void 0 : _c.user_id,
+                                    accountId: (_d = dataLogin.personal) === null || _d === void 0 ? void 0 : _d.user_id,
+                                }).then(res => {
+                                    var _a;
+                                    if (getObjectPropSafely(() => res.data.data.list_access.length, 0) &&
+                                        res.data.data.list_access.some(account => { var _a; return account.user_id.toString() !== ((_a = dataLogin.personal) === null || _a === void 0 ? void 0 : _a.user_id.toString()); })) {
+                                        handleLoginData(dataLogin, false, selectedNetworkRef.current && selectedNetworkRef.current.networkId);
+                                        if (data) {
+                                            setLoginData(data);
+                                        }
+                                        listAccountsRef.current = getObjectPropSafely(() => res.data.data.list_access.filter(account => { var _a; return account.user_id.toString() !== ((_a = dataLogin.personal) === null || _a === void 0 ? void 0 : _a.user_id.toString()); }), 0);
+                                        setStep(STEPS.STEP_SELECT_ACCOUNT);
+                                        setLoadingSkip(false);
+                                    }
+                                    else {
+                                        // No menu, no share access, just redirect to home page
+                                        handleLoginData(dataLogin, !isCallbackUrl && !isHomePageUrl, selectedNetworkRef.current && selectedNetworkRef.current.networkId);
+                                        setLoadingSkip(false);
+                                        if (onLoginSuccess && typeof onLoginSuccess === 'function') {
+                                            onLoginSuccess(dataLogin);
+                                        }
+                                        else if (isCallbackUrl && callbackUrl) {
+                                            navigateTo(callbackUrl);
+                                        }
+                                        else if (isHomePageUrl) {
+                                            navigateTo((_a = selectedNetworkRef.current) === null || _a === void 0 ? void 0 : _a.homePage);
+                                        }
+                                    }
+                                });
+                                // if (res && res.data && res.data.data && res.data.data.length) {
+                                //   const appData = res.data.data
+                                //   setApps(appData)
+                                // }
+                            }
+                        });
+                    }
+                    else {
+                        setLoadingSkip(false);
+                        handleLoginData(dataLogin, !isCallbackUrl && !isHomePageUrl, selectedNetworkRef.current && selectedNetworkRef.current.networkId);
+                        if (onLoginSuccess && typeof onLoginSuccess === 'function') {
+                            onLoginSuccess(dataLogin);
+                        }
+                        else if (isCallbackUrl && callbackUrl) {
+                            navigateTo(callbackUrl);
+                        }
+                        else if (isHomePageUrl) {
+                            navigateTo((_c = selectedNetworkRef.current) === null || _c === void 0 ? void 0 : _c.homePage);
+                        }
+                    }
+                }
+                else {
+                    setLoadingSkip(false);
+                    if (data) {
+                        setLoginData(data);
+                    }
+                    getListNetworkSelect(dataLogin.token, networkId);
+                }
+            }
+            else {
+                setLoadingSkip(false);
+                if (data) {
+                    setLoginData(data);
+                }
+                getListNetworkSelect(dataLogin.token);
+            }
+        }
+    };
+    const loginNetworkWithToken = (token_1, networkItem_1, ...args_1) => __awaiter(void 0, [token_1, networkItem_1, ...args_1], void 0, function* (token, networkItem, networkRedirect = null) {
+        if (!token || !networkItem || !networkItem.networkId) {
+            return;
+        }
+        selectedNetworkRef.current = networkItem;
+        const { networkId: networkIdSelected } = networkItem;
+        const data = {
+            token,
+            app_id: networkIdSelected,
+        };
+        setLoading(true);
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', loginUrl, true);
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        xhr.withCredentials = false;
+        xhr.onreadystatechange = () => {
+            var _a;
+            setLoading(false);
+            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+                const response = JSON.parse(xhr.responseText);
+                if ((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.token) {
+                    handleLoginSuccess(response.data, networkRedirect);
+                }
+                else {
+                    handleLoginFail();
+                }
+            }
+        };
+        xhr.send(JSON.stringify(data));
+    });
+    const getListNetworkSelect = (token, networkRedirect = '') => {
+        if (selectedNetworkRef.current && selectedNetworkRef.current.networkId) {
+            return;
+        }
+        if (token) {
+            setLoading(true);
+            fetch(`${domainLogin}api/network/info?type=get-list-network&token=${token}`)
+                .then(response => response.json())
+                .then(res => {
+                var _a;
+                if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.length) {
+                    listNetworkRef.current = res.data.map((network) => ({
+                        networkId: network.network_id,
+                        networkName: network.network_name,
+                        homePage: network.home_page,
+                        logo: network.logo,
+                    }));
+                    if (!res.data.length) {
+                        return;
+                    }
+                    if (networkRedirect) {
+                        const redirectNetwork = res.data.find((network) => +network.network_id === +networkRedirect);
+                        if (redirectNetwork) {
+                            loginNetworkWithToken(token, {
+                                networkId: redirectNetwork.network_id,
+                                networkName: redirectNetwork.network_name,
+                                homePage: redirectNetwork.home_page,
+                                logo: redirectNetwork.logo,
+                            }, networkRedirect);
+                        }
+                        else {
+                            if (res.data.length > 1) {
+                                setStep(STEPS.STEP_SELECT_NETWORK);
+                            }
+                            else {
+                                loginNetworkWithToken(token, {
+                                    networkId: res.data[0].network_id,
+                                    networkName: res.data[0].network_name,
+                                    homePage: res.data[0].home_page,
+                                    logo: res.data[0].logo,
+                                });
+                            }
+                        }
+                    }
+                    else {
+                        if (res.data.length > 1) {
+                            setStep(STEPS.STEP_SELECT_NETWORK);
+                        }
+                        else {
+                            loginNetworkWithToken(token, {
+                                networkId: res.data[0].network_id,
+                                networkName: res.data[0].network_name,
+                                homePage: res.data[0].home_page,
+                                logo: res.data[0].logo,
+                            });
+                        }
+                    }
+                }
+            })
+                .finally(() => {
+                setLoading(false);
+            });
+        }
+    };
+    const callbackSelectNetwork = (networkItem) => {
+        loginNetworkWithToken(loginData.token, networkItem);
+    };
+    const handleLoginFail = (data) => {
+        if (data === null || data === void 0 ? void 0 : data.code) {
+            switch (data.code) {
+                case 106:
+                    setStep(STEPS.STEP_VERIFY_ACCOUNT);
+                    break;
+                default:
+                    break;
+            }
+        }
+        if (onLoginFail && typeof onLoginFail === 'function') {
+            onLoginFail(data);
+        }
+    };
+    const onSetupGGAuthenticatorDone = () => {
+        setStep(STEPS.STEP2);
+    };
+    const onSkipSetupGGAuthenticator = () => {
+        handleLoginSuccess(Object.assign(Object.assign({}, (loginData || {})), { isCheckG2FA: false, isCheckSkip: true }));
+    };
+    const onForgotPassword = () => {
+        setStep(STEPS.STEP_FORGOT);
+    };
+    const onResendSuccess = () => {
+        setStep(STEPS.STEP_FORGOT_RESEND);
+    };
+    const backLogin = () => {
+        selectedNetworkRef.current = null;
+        setLoginData({});
+        authenInfoRef.current = null;
+        setStep(STEPS.STEP1);
+    };
+    const setAuthenInfo = (info) => (authenInfoRef.current = info);
+    // eslint-disable-next-line @typescript-eslint/dot-notation
+    window['popupCallbackLoginUser'] = function (data) {
+        postMessage(data);
+    };
+    const postMessage = (postParam, doPostEvent = true) => {
+        var _a;
+        if (postParam.error && postParam.error !== '') {
+        }
+        else {
+            const arrTmp = window.location.hostname.split('.');
+            if (postParam.action === 'ogs-authenticate') {
+                const loginData = Object.assign(Object.assign({}, postParam), { type: 'all_account' });
+                if (loginData.hasOwnProperty('full_name')) {
+                    delete loginData.full_name;
+                }
+                if (loginData.hasOwnProperty('email')) {
+                    delete loginData.email;
+                }
+                if (loginData.hasOwnProperty('avatar')) {
+                    delete loginData.avatar;
+                }
+                if (loginData.hasOwnProperty('action')) {
+                    delete loginData.action;
+                }
+                if (loginData.hasOwnProperty('env')) {
+                    delete loginData.env;
+                }
+                if (u_ogs && typeof u_ogs === 'string' && u_ogs.trim()) {
+                    const replaceNetwork = getObjectPropSafely(() => { var _a; return ((_a = selectedNetworkRef.current) === null || _a === void 0 ? void 0 : _a.networkId) || 0; }, networkId);
+                    const cookieKey = u_ogs.includes(replaceNetwork)
+                        ? u_ogs
+                        : `${u_ogs}_${(_a = selectedNetworkRef.current) === null || _a === void 0 ? void 0 : _a.networkId}`;
+                    const maxAge = 30 * 24 * 3600;
+                    if (window.location.protocol !== 'https:') {
+                        if (arrTmp.length < 4) {
+                            setCookie(cookieKey, JSON.stringify(loginData), {
+                                domain: arrTmp.slice(-2).join('.'),
+                                path: '/; samesite=None',
+                                maxAge,
+                            });
+                        }
+                        else {
+                            setCookie(cookieKey, JSON.stringify(loginData), {
+                                domain: arrTmp.slice(-3).join('.'),
+                                path: '/; samesite=None',
+                                maxAge,
+                            });
+                        }
+                    }
+                    else {
+                        if (arrTmp.length < 4) {
+                            setCookie(cookieKey, JSON.stringify(loginData), {
+                                domain: arrTmp.slice(-2).join('.'),
+                                path: '/; samesite=None; secure',
+                                maxAge,
+                            });
+                        }
+                        else {
+                            setCookie(cookieKey, JSON.stringify(loginData), {
+                                domain: arrTmp.slice(-3).join('.'),
+                                path: '/; samesite=None; secure',
+                                maxAge,
+                            });
+                        }
+                    }
+                }
+            }
+            if (doPostEvent) {
+                if (parent && parent.postMessage) {
+                    parent.postMessage(JSON.stringify(postParam), '*');
+                }
+                else {
+                    postMessage(JSON.stringify(postParam), '*');
+                }
+            }
+        }
+    };
+    const handleLoginData = (data = null, doPostEvent = true, doSelectNetwork) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        data = data || loginData;
+        if (!data.token) {
+            return;
+        }
+        if (data && data.personal) {
+            localStorage.setItem('user_logged_in_full_name', data.personal.full_name);
+            localStorage.setItem('user_logged_in_avatar', data.personal.avatar);
+            localStorage.setItem('user_logged_in_email', data.personal.email);
+        }
+        if (u_ogs && typeof u_ogs === 'string' && u_ogs.trim()) {
+            const userData = {};
+            Object.assign(userData, data.personal);
+            if (userData.hasOwnProperty('full_name')) {
+                delete userData.full_name;
+            }
+            if (userData.hasOwnProperty('email')) {
+                delete userData.email;
+            }
+            if (userData.hasOwnProperty('avatar')) {
+                delete userData.avatar;
+            }
+            if (userData.hasOwnProperty('action')) {
+                delete userData.action;
+            }
+            userData.token = data.token;
+        }
+        const postParam = {
+            action: 'ogs-authenticate',
+            user_id: (_a = data === null || data === void 0 ? void 0 : data.personal) === null || _a === void 0 ? void 0 : _a.user_id,
+            account_id: (_b = data === null || data === void 0 ? void 0 : data.personal) === null || _b === void 0 ? void 0 : _b.user_id,
+            full_name: (_c = data === null || data === void 0 ? void 0 : data.personal) === null || _c === void 0 ? void 0 : _c.full_name,
+            role: (_d = data === null || data === void 0 ? void 0 : data.personal) === null || _d === void 0 ? void 0 : _d.role,
+            seller_role: (_e = data === null || data === void 0 ? void 0 : data.personal) === null || _e === void 0 ? void 0 : _e.seller_role,
+            conversion_id: (_f = data === null || data === void 0 ? void 0 : data.personal) === null || _f === void 0 ? void 0 : _f.conversion_id,
+            email: (_g = data === null || data === void 0 ? void 0 : data.personal) === null || _g === void 0 ? void 0 : _g.email,
+            avatar: (_h = data === null || data === void 0 ? void 0 : data.personal) === null || _h === void 0 ? void 0 : _h.avatar,
+            token: data === null || data === void 0 ? void 0 : data.token,
+            language: (_j = data === null || data === void 0 ? void 0 : data.personal) === null || _j === void 0 ? void 0 : _j.language,
+        };
+        postMessage(postParam, doPostEvent);
+        postMessage(postParam, doPostEvent);
+    };
+    const handleSelectAccount = (account) => {
+        if (account && account.user_id) {
+            handleLoginSuccess(null, null, account);
+        }
+    };
+    const sendMailValidateAccount = (callback) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!authenInfoRef.current || !authenInfoRef.current.email) {
+            return callback(null);
+        }
+        const loginUrl = `${domainLogin}account/resend-verify-account`;
+        const { email } = authenInfoRef.current;
+        const loginData = {
+            user_name: email,
+            app_id: networkId,
+        };
+        setLoading(true);
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', loginUrl, true);
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        xhr.withCredentials = false;
+        xhr.onreadystatechange = () => {
+            setLoading(false);
+            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+                const response = JSON.parse(xhr.responseText);
+                const { data } = response;
+                if (callback && typeof callback === 'function') {
+                    callback(data || response);
+                }
+            }
+        };
+        xhr.send(JSON.stringify(loginData));
+    });
+    const { width } = useContainerDimensions(loginRef);
+    const scaleCaptcha = useMemo(() => +((+width * 1.02) / 400).toFixed(2), [width]);
+    const step1Config = {
+        domainLogin,
+        networkId,
+        u_ogs,
+        urlLogo,
+        isLoginGG,
+        callbackUrl,
+        loadingNetwork: isLoading,
+        handleLoginData,
+        setAuthenInfo,
+        onForgotPassword,
+        onLoginSuccess: handleLoginSuccess,
+        onLoginFail: handleLoginFail,
+    };
+    const step2Config = {
+        domainLogin,
+        token: loginData.token || '',
+        username: get(loginData, 'personal.email') || '',
+        userId: get(loginData, 'personal.user_id') || 0,
+        urlLogo,
+        loginData,
+        handleLoginData,
+        onLoginSuccess: handleLoginSuccess,
+        backLogin,
+        onLoginFail: handleLoginFail,
+        onSetupGGAuthenticatorDone,
+        onSkipSetupGGAuthenticator,
+        loadingSkip: isLoadingSkip,
+    };
+    const forgotConfig = {
+        domainLogin,
+        networkId,
+        reCaptchaKey,
+        p_id,
+        urlLogo,
+        callbackUrl,
+        onResendSuccess,
+        backLogin,
+        onResendFail: onResendPassFail,
+        scaleCaptcha,
+    };
+    const stepSelectNetworkConfig = {
+        domainLogin,
+        networkId,
+        u_ogs,
+        urlLogo,
+        isLoginGG,
+        callbackUrl,
+        loginData: Object.assign(Object.assign({}, loginData), { personal: loginData.personal || {
+                avatar: '',
+                full_name: '',
+                email: '',
+                user_id: '',
+            } }),
+        listNetworks: listNetworkRef.current,
+        callbackSelectNetwork,
+        handleLoginData,
+        backLogin,
+        onForgotPassword,
+        onLoginSuccess: handleLoginSuccess,
+        onLoginFail: handleLoginFail,
+    };
+    const stepSelectAccountConfig = {
+        loginData,
+        urlLogo,
+        listAccounts: listAccountsRef.current,
+        handleSelectAccount,
+    };
+    const stepVerifyAccount = {
+        domainLogin,
+        networkId,
+        u_ogs,
+        urlLogo,
+        isLoginGG,
+        callbackUrl,
+        loginData,
+        listNetworks: listNetworkRef.current,
+        callbackSelectNetwork,
+        handleLoginData,
+        onForgotPassword,
+        onLoginSuccess: handleLoginSuccess,
+        onLoginFail: handleLoginFail,
+        authenInfo: authenInfoRef.current,
+        backLogin,
+        sendMailValidateAccount,
+    };
+    const renderMain = () => {
+        switch (step) {
+            case STEPS.STEP1:
+                return React.createElement(SignIn, Object.assign({}, step1Config));
+            case STEPS.STEP2:
+                return React.createElement(LoginStep2, Object.assign({}, step2Config));
+            case STEPS.STEP_SELECT_NETWORK:
+                return React.createElement(LoginSelectPortal, Object.assign({}, stepSelectNetworkConfig));
+            case STEPS.STEP_SETUP_GG_AUTHENTICATOR:
+                return React.createElement(SetupGGAuthenticator, Object.assign({}, step2Config));
+            case STEPS.STEP_VERIFY_ACCOUNT:
+                return React.createElement(VerifyAccount, Object.assign({}, stepVerifyAccount));
+            default:
+                return React.createElement(ForgotPassword, Object.assign({}, forgotConfig));
+        }
+    };
+    return (React.createElement(CookiesProvider, null,
+        React.createElement(LoginMain, { justify: isMobile ? 'center' : 'start', id: "login_container" },
+            React.createElement(WrapperLogin, { isMobile: isMobile, vertical: true, align: "center", gap: 40, flex: 1, ref: loginRef, id: "login_main" }, renderMain()),
+            !isMobile && React.createElement(LoginBannerZone, { className: "login-banner-zone", id: "login_banner_zone" }))));
+};