@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.71

package/es/components/organism/LoginV2/LoginV2.js

@@ -0,0 +1,957 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* 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 */
+/// Libraries
+import { 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, LoginWithGG, SignIn, VerifyAccount, SetupGGAuthenticator, ForgotPassword, ChooseMethod, LoginWithEmail, OryConsent, } from './components';
+import { OryThemeProvider } from './components/OryConsent/OryThemeProvider';
+import { describeOryFailure, OryMfa, OryRecovery, OryStatus, } from './components/OrySignIn';
+// Hooks
+import { useContainerDimensions } from './hooks';
+// Utils
+import { checkURL, navigateTo } from './utils';
+import { createCrossSubdomainCookieOptions } from '@antscorp/antsomi-ui/es/utils/crossSubdomainCookieOptions';
+import { checkOrySession, completeOryAuthorization, DEFAULT_OAUTH_STORAGE_KEY, DEFAULT_OAUTH_TOKEN_URL, getOAuthBridgeURL, isOryCallbackRequest, isOryLoginRequest, resolveOryLogin, startOryAuthorization, submitOryPasswordLogin, startOryLogout, } from './utils/ory';
+import { isOryRecoveryRequest } from './utils/oryFlows';
+import { LOGIN_METHODS, STEPS } from './constants';
+import { LoginBannerZone, LoginMain, WrapperLogin } from './styled';
+export const LoginV2 = props => {
+    const { loginDomain = 'http://khanhhv.platform-ants.adxdev.vn', onLoginSuccess, onLoginFail, reCaptchaKey = '6LfqGF0UAAAAAFJri0tlp8eCNbWZdJv1eAyF4oIo', p_id, onResendPassFail, u_ogs, callbackUrl, apiDomain = '', usePrivilege, useOry = false, oauthAutoStart = false, oauthLoginUrl, oauthAuthorizeUrl, oauthTokenUrl, oauthClientId, oauthRedirectUri, oauthScope, oauthAudience, oauthStorageKey, kratosLoginUrl, kratosLogoutUrl, kratosRecoveryUrl, sessionUrl, oauthConsentUrl = '/oauth2/consent', oauthCsrfUrl, oauthScopeCatalog, oauthConsentPreview, onOAuthSuccess, onOryAuthenticated, } = 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);
+    const explicitOry = useOry === true || useOry === 'true';
+    const hasOAuthConfig = Boolean(oauthClientId || oauthAuthorizeUrl || oauthTokenUrl || oauthRedirectUri || oauthScope);
+    // A generic `?code` or `?error` belongs to the legacy login flow unless this
+    // package was explicitly configured for OAuth. Challenge URLs can enter the
+    // bridge path, where the server validates the Ory challenge and session.
+    const oryRecoveryRequest = explicitOry && isOryRecoveryRequest(window.location);
+    const oryCallback = !oryRecoveryRequest && (explicitOry || hasOAuthConfig) && isOryCallbackRequest({ location: window.location });
+    const oryBridgeRequest = !oryRecoveryRequest && isOryLoginRequest({ location: window.location });
+    const oryConsentRequest = explicitOry && !oryRecoveryRequest && (Boolean(searchParams.get('consent_challenge')) || Boolean(oauthConsentPreview));
+    const oryEnabled = explicitOry || oryCallback || oryBridgeRequest;
+    const [oryChallengeState, setOryChallengeState] = useState('checking');
+    const oryPasswordForm = !oryCallback &&
+        !oryConsentRequest &&
+        explicitOry &&
+        (oryRecoveryRequest || (oauthAutoStart === false && !oryBridgeRequest) ||
+            (oryBridgeRequest && oryChallengeState === 'sign-in'));
+    const [oryError, setOryError] = useState(null);
+    // Which step of the Ory sign-in column is showing: the form, the second factor,
+    // or password recovery.
+    const [oryView, setOryView] = useState(oryRecoveryRequest ? 'recovery' : 'password');
+    const oryFlowStarted = useRef(false);
+    const oryFlowActive = useRef(false);
+    const beginOryAuthorization = () => startOryAuthorization({
+        location: window.location,
+        authorizeUrl: oauthAuthorizeUrl || `${domainLogin.replace(/\/$/, '')}/api/account/oauth-authenticate`,
+        clientId: oauthClientId,
+        redirectUri: oauthRedirectUri,
+        scope: oauthScope,
+        audience: oauthAudience,
+        storageKey: oauthStorageKey,
+        assign: url => window.location.assign(url),
+    });
+    const continueAfterMfa = async () => {
+        if (oryBridgeRequest) {
+            window.location.assign(getOAuthBridgeURL({
+                location: window.location,
+                oauthLoginUrl: oauthLoginUrl || `${domainLogin.replace(/\/$/, '')}/oauth2/login`,
+            }));
+            return;
+        }
+        if (onOryAuthenticated) {
+            await onOryAuthenticated(await checkOrySession({ sessionUrl }));
+            return;
+        }
+        await beginOryAuthorization();
+    };
+    const handleOryPasswordSubmit = async ({ email, password, }) => {
+        if (oryBridgeRequest) {
+            const result = await submitOryPasswordLogin({
+                location: window.location,
+                email,
+                password,
+                kratosLoginUrl,
+                sessionUrl,
+                oauthLoginUrl: oauthLoginUrl || `${domainLogin.replace(/\/$/, '')}/oauth2/login`,
+                inlineMfa: true,
+                assign: url => window.location.assign(url),
+            });
+            if (result.status === 'mfa-required')
+                setOryView('mfa');
+            return;
+        }
+        const result = await submitOryPasswordLogin({
+            location: window.location,
+            email,
+            password,
+            kratosLoginUrl,
+            sessionUrl,
+            returnToBridge: false,
+            inlineMfa: true,
+        });
+        if (result.status === 'mfa-required') {
+            setOryView('mfa');
+            return;
+        }
+        if (onOryAuthenticated && result.status === 'authenticated') {
+            await onOryAuthenticated(result.session);
+            return;
+        }
+        await beginOryAuthorization();
+    };
+    // Where "try again" leads: the page that started the flow, without callback parameters.
+    const restartOryFlow = () => window.location.assign(oauthRedirectUri || window.location.pathname);
+    useEffect(() => {
+        if (!oryEnabled || oryConsentRequest || (oryPasswordForm && !oryBridgeRequest)) {
+            return undefined;
+        }
+        if (oryBridgeRequest && explicitOry && oryChallengeState !== 'checking') {
+            return undefined;
+        }
+        oryFlowActive.current = true;
+        if (oryFlowStarted.current) {
+            return () => {
+                oryFlowActive.current = false;
+            };
+        }
+        oryFlowStarted.current = true;
+        const configuredOAuthLoginUrl = oauthLoginUrl || `${domainLogin.replace(/\/$/, '')}/oauth2/login`;
+        const configuredOAuthAuthorizeUrl = oauthAuthorizeUrl || `${domainLogin.replace(/\/$/, '')}/api/account/oauth-authenticate`;
+        const finishWithError = (error) => {
+            if (!oryFlowActive.current) {
+                return;
+            }
+            const code = error?.code || 'ORY_LOGIN_FAILED';
+            setOryError(describeOryFailure(code));
+            handleLoginFail({ code, message: error?.message });
+        };
+        let flow;
+        if (oryCallback) {
+            flow = completeOryAuthorization({
+                location: window.location,
+                tokenUrl: oauthTokenUrl || DEFAULT_OAUTH_TOKEN_URL,
+                clientId: oauthClientId,
+                redirectUri: oauthRedirectUri,
+                storageKey: oauthStorageKey,
+            }).then(async (tokenResponse) => {
+                if (!oryFlowActive.current) {
+                    return;
+                }
+                if (!onOAuthSuccess) {
+                    const missingHandler = new Error('OAuth success handler is required');
+                    missingHandler.code = 'ORY_SUCCESS_HANDLER_REQUIRED';
+                    throw missingHandler;
+                }
+                return onOAuthSuccess(tokenResponse);
+            });
+        }
+        else if (oryBridgeRequest && explicitOry) {
+            flow = checkOrySession({ sessionUrl })
+                .then(() => {
+                if (!oryFlowActive.current)
+                    return;
+                window.location.assign(getOAuthBridgeURL({
+                    location: window.location,
+                    oauthLoginUrl: configuredOAuthLoginUrl,
+                }));
+            })
+                .catch(error => {
+                if (error?.code === 'ORY_MFA_REQUIRED') {
+                    if (oryFlowActive.current) {
+                        setOryView('mfa');
+                        setOryChallengeState('sign-in');
+                    }
+                    return;
+                }
+                if (error?.status === 401 || error?.code === 'ORY_SESSION_REQUIRED') {
+                    if (oryFlowActive.current)
+                        setOryChallengeState('sign-in');
+                    return;
+                }
+                throw error;
+            });
+        }
+        else if (oryBridgeRequest) {
+            flow = resolveOryLogin({
+                location: window.location,
+                oauthLoginUrl: configuredOAuthLoginUrl,
+                kratosLoginUrl,
+                sessionUrl,
+                assign: url => window.location.assign(url),
+            });
+        }
+        else if (!onOAuthSuccess) {
+            const missingHandler = new Error('OAuth success handler is required');
+            missingHandler.code = 'ORY_SUCCESS_HANDLER_REQUIRED';
+            flow = Promise.reject(missingHandler);
+        }
+        else {
+            flow = startOryAuthorization({
+                location: window.location,
+                authorizeUrl: configuredOAuthAuthorizeUrl,
+                clientId: oauthClientId,
+                redirectUri: oauthRedirectUri,
+                scope: oauthScope,
+                audience: oauthAudience,
+                storageKey: oauthStorageKey,
+                assign: url => window.location.assign(url),
+            });
+        }
+        flow.catch(finishWithError);
+        return () => {
+            oryFlowActive.current = false;
+        };
+    }, [
+        oryEnabled,
+        hasOAuthConfig,
+        oryCallback,
+        oryBridgeRequest,
+        oryPasswordForm,
+        oryConsentRequest,
+        oryChallengeState,
+        oauthLoginUrl,
+        oauthAuthorizeUrl,
+        oauthTokenUrl,
+        oauthClientId,
+        oauthRedirectUri,
+        oauthScope,
+        oauthAudience,
+        oauthStorageKey,
+        kratosLoginUrl,
+        sessionUrl,
+        onOAuthSuccess,
+        domainLogin,
+        oauthAutoStart,
+    ]);
+    useEffect(() => {
+        if (oryEnabled)
+            return;
+        if (searchParams.get('ui') === 'forgot') {
+            setStep(STEPS.STEP_FORGOT);
+            searchParams.delete('ui');
+            const newSearch = searchParams.toString();
+            history.pushState({}, '', `?${newSearch}`);
+        }
+    }, [searchParams, oryEnabled]);
+    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 => {
+        if (res?.data?.networkInfo?.logo) {
+            setUrlLogo(res.data.networkInfo.logo);
+        }
+        if (res?.data?.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 = async (redirectAccountId, token) => {
+        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) => {
+        // check setup loading skip
+        if (data && data.isCheckSkip) {
+            setLoadingSkip(true);
+        }
+        if (data && data.isCheckG2FA && data.G2FA === 1) {
+            setLoginData(data);
+            setStep(STEPS.STEP_CHOOSE_METHOD);
+        }
+        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: dataLogin?.personal?.user_id,
+                            accountId: dataLogin?.personal?.user_id,
+                        }, res => {
+                            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,
+                                        networkId: selectedNetworkRef.current?.networkId ?? networkId,
+                                    });
+                                    setLoadingSkip(false);
+                                }
+                                else if (isCallbackUrl && callbackUrl) {
+                                    navigateTo(callbackUrl);
+                                    setLoadingSkip(false);
+                                }
+                                else if (isHomePageUrl) {
+                                    checkRedirectHomePage(selectedNetworkRef.current?.homePage, menus, dataLogin.personal?.user_id);
+                                    setLoadingSkip(false);
+                                }
+                            }
+                            else {
+                                // Get user share
+                                getListAccountSharing({
+                                    token: dataLogin.token,
+                                    userId: dataLogin.personal?.user_id,
+                                    accountId: dataLogin.personal?.user_id,
+                                }).then(res => {
+                                    if (getObjectPropSafely(() => res.data.data.list_access.length, 0) &&
+                                        res.data.data.list_access.some(account => account.user_id.toString() !== dataLogin.personal?.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 => account.user_id.toString() !== dataLogin.personal?.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,
+                                                networkId: selectedNetworkRef.current?.networkId ?? networkId,
+                                            });
+                                        }
+                                        else if (isCallbackUrl && callbackUrl) {
+                                            navigateTo(callbackUrl);
+                                        }
+                                        else if (isHomePageUrl) {
+                                            navigateTo(selectedNetworkRef.current?.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,
+                                networkId: selectedNetworkRef.current?.networkId ?? networkId,
+                            });
+                        }
+                        else if (isCallbackUrl && callbackUrl) {
+                            navigateTo(callbackUrl);
+                        }
+                        else if (isHomePageUrl) {
+                            navigateTo(selectedNetworkRef.current?.homePage);
+                        }
+                    }
+                }
+                else {
+                    setLoadingSkip(false);
+                    if (data) {
+                        setLoginData(data);
+                    }
+                    getListNetworkSelect(dataLogin.token, networkId);
+                }
+            }
+            else {
+                setLoadingSkip(false);
+                if (data) {
+                    setLoginData(data);
+                }
+                getListNetworkSelect(dataLogin.token);
+            }
+        }
+    };
+    const loginNetworkWithToken = async (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 = () => {
+            setLoading(false);
+            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+                const response = JSON.parse(xhr.responseText);
+                if (response?.data?.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 => {
+                if (res?.data?.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?.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.STEP_LOGIN_WITH_GG);
+    };
+    const onSkipSetupGGAuthenticator = () => {
+        handleLoginSuccess({
+            ...(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) => {
+        if (postParam.error && postParam.error !== '') {
+        }
+        else {
+            if (postParam.action === 'ogs-authenticate') {
+                const loginData = { ...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(() => selectedNetworkRef.current?.networkId || 0, networkId);
+                    const cookieKey = u_ogs.includes(replaceNetwork)
+                        ? u_ogs
+                        : `${u_ogs}_${selectedNetworkRef.current?.networkId}`;
+                    const maxAge = 30 * 24 * 3600;
+                    const cookieOptions = createCrossSubdomainCookieOptions({
+                        hostname: window.location.hostname,
+                        protocol: window.location.protocol,
+                        maxAge,
+                    });
+                    setCookie(cookieKey, JSON.stringify(loginData), cookieOptions);
+                }
+            }
+            if (doPostEvent) {
+                if (parent && parent.postMessage) {
+                    parent.postMessage(JSON.stringify(postParam), '*');
+                }
+                else {
+                    postMessage(JSON.stringify(postParam), '*');
+                }
+            }
+        }
+    };
+    const handleLoginData = (data = null, doPostEvent = true, doSelectNetwork) => {
+        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: data?.personal?.user_id,
+            account_id: data?.personal?.user_id,
+            full_name: data?.personal?.full_name,
+            role: data?.personal?.role,
+            seller_role: data?.personal?.seller_role,
+            conversion_id: data?.personal?.conversion_id,
+            email: data?.personal?.email,
+            avatar: data?.personal?.avatar,
+            token: data?.token,
+            language: data?.personal?.language,
+        };
+        postMessage(postParam, doPostEvent);
+        postMessage(postParam, doPostEvent);
+    };
+    const handleSelectAccount = (account) => {
+        if (account && account.user_id) {
+            handleLoginSuccess(null, null, account);
+        }
+    };
+    const sendMailValidateAccount = async (callback) => {
+        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 sendCodeVerifyToEmail = async () => {
+        if (!authenInfoRef.current || !authenInfoRef.current.email) {
+            return;
+        }
+        const loginUrl = `${domainLogin}api/account/send-email-code`;
+        const data = {
+            token: loginData.token,
+        };
+        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, code } = response;
+                if (code !== 200) {
+                    setLoginData({
+                        ...loginData,
+                        errorCode: data.error,
+                        retryAfter: data.retryAfter,
+                    });
+                }
+            }
+        };
+        xhr.send(JSON.stringify(data));
+    };
+    const onChooseMethod = (method) => {
+        switch (method) {
+            case LOGIN_METHODS.GOOGLE_AUTHENTICATOR:
+                setStep(STEPS.STEP_LOGIN_WITH_GG);
+                break;
+            case LOGIN_METHODS.EMAIL:
+                sendCodeVerifyToEmail();
+                setStep(STEPS.STEP_LOGIN_WITH_EMAIL);
+                break;
+            default:
+                break;
+        }
+    };
+    const { width } = useContainerDimensions(loginRef);
+    const scaleCaptcha = useMemo(() => +((+width * 1.02) / 400).toFixed(2), [width]);
+    const errorCodeSend = get(loginData, 'errorCode', '');
+    const retryAfter = get(loginData, 'retryAfter');
+    const step1Config = {
+        domainLogin,
+        networkId,
+        u_ogs,
+        urlLogo,
+        isLoginGG,
+        callbackUrl,
+        loadingNetwork: isLoading,
+        handleLoginData,
+        setAuthenInfo,
+        onForgotPassword: oryEnabled
+            ? oryPasswordForm
+                ? () => setOryView('recovery')
+                : undefined
+            : onForgotPassword,
+        onLoginSuccess: handleLoginSuccess,
+        onOrySubmit: oryPasswordForm ? handleOryPasswordSubmit : undefined,
+        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 stepChooseMethodConfig = {
+        domainLogin,
+        token: loginData.token || '',
+        username: get(loginData, 'personal.email') || '',
+        userId: get(loginData, 'personal.user_id') || 0,
+        urlLogo,
+        loginData,
+        backLogin,
+        onChooseMethod,
+    };
+    const stepVerifyWithEmailConfig = {
+        ...stepChooseMethodConfig,
+        sendCodeVerifyToEmail,
+        onLoginSuccess: handleLoginSuccess,
+        onLoginFail: handleLoginFail,
+    };
+    const forgotConfig = {
+        domainLogin,
+        networkId,
+        reCaptchaKey,
+        p_id,
+        urlLogo,
+        callbackUrl,
+        onResendSuccess,
+        backLogin,
+        onResendFail: onResendPassFail,
+        scaleCaptcha,
+    };
+    const stepSelectNetworkConfig = {
+        domainLogin,
+        networkId,
+        u_ogs,
+        urlLogo,
+        isLoginGG,
+        callbackUrl,
+        loginData: {
+            ...loginData,
+            personal: loginData.personal || {
+                avatar: '',
+                full_name: '',
+                email: '',
+                user_id: '',
+            },
+        },
+        listNetworks: listNetworkRef.current,
+        callbackSelectNetwork,
+        handleLoginData,
+        backLogin,
+        onForgotPassword,
+        onLoginSuccess: handleLoginSuccess,
+        onLoginFail: handleLoginFail,
+    };
+    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 _jsx(SignIn, { ...step1Config });
+            case STEPS.STEP_CHOOSE_METHOD:
+                return _jsx(ChooseMethod, { ...stepChooseMethodConfig });
+            case STEPS.STEP_LOGIN_WITH_EMAIL:
+                return _jsx(LoginWithEmail, { ...stepVerifyWithEmailConfig });
+            case STEPS.STEP_LOGIN_WITH_GG:
+                return _jsx(LoginWithGG, { ...step2Config });
+            case STEPS.STEP_SELECT_NETWORK:
+                return _jsx(LoginSelectPortal, { ...stepSelectNetworkConfig });
+            case STEPS.STEP_SETUP_GG_AUTHENTICATOR:
+                return _jsx(SetupGGAuthenticator, { ...step2Config });
+            case STEPS.STEP_VERIFY_ACCOUNT:
+                return _jsx(VerifyAccount, { ...stepVerifyAccount });
+            default:
+                return _jsx(ForgotPassword, { ...forgotConfig });
+        }
+    };
+    // The portal and consent screens are full pages, not part of the 404px login column.
+    if (oryConsentRequest) {
+        return (_jsx(OryThemeProvider, { children: _jsx(OryConsent, { consentUrl: oauthConsentUrl, csrfUrl: oauthCsrfUrl, sessionUrl: sessionUrl, scopeCatalog: oauthScopeCatalog, preview: oauthConsentPreview, onCancel: () => {
+                    window.sessionStorage.removeItem(oauthStorageKey || DEFAULT_OAUTH_STORAGE_KEY);
+                    window.location.assign(oauthRedirectUri || window.location.pathname);
+                }, onSwitchAccount: () => startOryLogout({
+                    location: window.location,
+                    returnTo: oauthRedirectUri || `${window.location.origin}${window.location.pathname}`,
+                    kratosLogoutUrl,
+                    assign: url => window.location.assign(url),
+                }) }) }));
+    }
+    const loginTree = (_jsx(CookiesProvider, { children: _jsxs(LoginMain, { justify: isMobile ? 'center' : 'start', id: "login_container", children: [_jsx(WrapperLogin, { isMobile: isMobile, vertical: true, align: "center", gap: 40, flex: 1, ref: loginRef, id: "login_main", children: oryEnabled && !oryPasswordForm ? (_jsx(OryStatus, { error: oryError, onRetry: restartOryFlow })) : oryPasswordForm && oryView === 'mfa' ? (_jsx(OryMfa, { kratosLoginUrl: kratosLoginUrl, sessionUrl: sessionUrl, onVerified: continueAfterMfa, onBack: () => setOryView('password') })) : oryPasswordForm && oryView === 'recovery' ? (_jsx(OryRecovery, { kratosRecoveryUrl: kratosRecoveryUrl, initialFlowId: oryRecoveryRequest ? searchParams.get('flow') || undefined : undefined, onBack: () => oryRecoveryRequest
+                            ? window.location.assign(`${window.location.origin}/login`)
+                            : setOryView('password') })) : (renderMain()) }), !isMobile && _jsx(LoginBannerZone, { className: "login-banner-zone", id: "login_banner_zone" })] }) }));
+    // Ory mode is opt-in, so the legacy login keeps the host's own theme.
+    return explicitOry ? _jsx(OryThemeProvider, { children: loginTree }) : loginTree;
+};