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

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

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useMemo, useRef } from 'react';
+import { Button, Col, Flex, Row, Typography } from 'antd';
+import { useImmer } from 'use-immer';
+import Icon from '@antscorp/icons';
+import { useCookies } from 'react-cookie';
+import { get, isEmpty } from 'lodash';
+// Components
+import { WidgetLayout } from '../WidgetLayout';
+import { Item } from './Item';
+import { Avatar } from '../Avatar';
+import { Scrollbars } from '@antscorp/antsomi-ui/es/components/atoms/Scrollbars';
+import NoData from '../../../../../assets/images/components/Login/NoData.png';
+// Styled
+import { WrapperList } from './styled';
+import { Image, StyleInput } from '../../styled';
+import { isMobile } from 'react-device-detect';
+const { Text } = Typography;
+export const LoginSelectPortal = props => {
+    const { loginData, listNetworks, domainLogin, userNameKey = 'user_name', passwordKey = 'password', networkId, onLoginSuccess, onLoginFail, backLogin, callbackSelectNetwork, } = props;
+    const [state, setState] = useImmer({
+        portalSearch: '',
+        password: '',
+        email: '',
+        isLoading: false,
+        errors: {
+            email: '',
+            password: '',
+        },
+        loginError: false,
+    });
+    const [cookies, setCookie] = useCookies();
+    const errorRef = useRef({
+        email: false,
+        password: false,
+    });
+    const loginUrl = `${domainLogin}api/account/authenticate`;
+    const selectNetwork = network => {
+        if (callbackSelectNetwork && typeof callbackSelectNetwork === 'function') {
+            callbackSelectNetwork(network);
+        }
+    };
+    const navigateLogin = () => {
+        if (backLogin && typeof backLogin === 'function') {
+            backLogin();
+        }
+    };
+    const validate = (field = null) => {
+        let isValid = true;
+        if (!field || field === 'email') {
+            if (state.email && state.email.trim()) {
+                if (!/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,8})$/i.test(state.email)) {
+                    setState(draft => {
+                        draft.errors = {
+                            ...draft.errors,
+                            email: 'Please enter valid email',
+                        };
+                    });
+                    isValid = false;
+                }
+                else {
+                    setState(draft => {
+                        draft.errors = {
+                            ...draft.errors,
+                            email: '',
+                        };
+                    });
+                }
+            }
+            else {
+                setState(draft => {
+                    draft.errors = {
+                        ...draft.errors,
+                        email: 'Please enter valid email',
+                    };
+                });
+                isValid = false;
+            }
+        }
+        if (!field || field === 'password') {
+            if (state.password && state.password.trim()) {
+                if (state.password.trim().length < 6) {
+                    setState(draft => {
+                        draft.errors = {
+                            ...draft.errors,
+                            password: 'Your password too short',
+                        };
+                    });
+                    isValid = false;
+                }
+                else {
+                    setState(draft => {
+                        draft.errors = {
+                            ...draft.errors,
+                            password: '',
+                        };
+                    });
+                }
+            }
+            else {
+                setState(draft => {
+                    draft.errors = {
+                        ...draft.errors,
+                        password: 'Your password too short',
+                    };
+                });
+                isValid = false;
+            }
+        }
+        return isValid;
+    };
+    const onChangeLoading = (value) => {
+        setState(draft => {
+            draft.isLoading = value;
+        });
+    };
+    const signIn = async () => {
+        errorRef.current = {
+            email: true,
+            password: true,
+        };
+        if (!validate()) {
+            return;
+        }
+        const keyName = `ogs-${btoa(state.email)}`;
+        const trustKey = cookies[keyName] || localStorage.getItem(keyName);
+        const params = {
+            [userNameKey]: state.email,
+            [passwordKey]: state.password,
+            app_id: networkId,
+        };
+        if (trustKey) {
+            params.trust_key = trustKey;
+        }
+        const dataPost = {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(params),
+        };
+        onChangeLoading(true);
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', loginUrl, true);
+        // Send the proper header information along with the request
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        xhr.withCredentials = false;
+        xhr.onreadystatechange = () => {
+            if (xhr.readyState === XMLHttpRequest.DONE) {
+                onChangeLoading(false);
+            }
+            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+                const response = JSON.parse(xhr.responseText);
+                const { token } = response?.data || {};
+                if (token) {
+                    onLoginSuccess(response.data);
+                }
+                else {
+                    setState(draft => {
+                        draft.loginError = true;
+                    });
+                    onLoginFail();
+                }
+            }
+        };
+        xhr.send(JSON.stringify(params));
+    };
+    const setPortalSearch = (value) => {
+        setState(draft => {
+            draft.portalSearch = value;
+        });
+    };
+    const filterListNetworks = useMemo(() => {
+        const draftListNetwork = [...listNetworks];
+        return draftListNetwork.filter(netWork => netWork.networkName.toLocaleLowerCase().indexOf(state.portalSearch.toLocaleLowerCase()) !==
+            -1);
+    }, [listNetworks, state.portalSearch]);
+    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: get(loginData, 'personal.avatar'), name: get(loginData, 'personal.full_name'), email: get(loginData, 'personal.email') }), gapContent: 30, isShowLogo: false, title: "Select Portal", content: _jsxs(Flex, { vertical: true, gap: 30, children: [_jsxs(Flex, { vertical: true, gap: 20, children: [_jsx(StyleInput, { isMobile: isMobile, placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2", style: {
+                                    fontSize: 24,
+                                }, color: "#595959" }), onChange: e => setPortalSearch(e.target.value) }), isEmpty(filterListNetworks) ? (_jsxs(Flex, { vertical: true, align: "center", justify: "center", style: { height: 514 }, gap: 15, children: [!isMobile && _jsx(Image, { src: NoData, alt: "", width: 80, height: 80 }), _jsx(Text, { style: {
+                                        color: '#595959',
+                                        fontSize: 11,
+                                    }, children: "No portal matches your keyword" })] })) : (_jsx(Scrollbars, { style: {
+                                height: `calc(100vh - 410px)`,
+                                width: '100%',
+                                minHeight: `145px`,
+                            }, children: _jsx(WrapperList, { children: _jsx(Row, { gutter: [20, 20], children: filterListNetworks.map((network) => (_jsx(Col, { span: 12, children: _jsx(Item, { networkId: network.networkId, networkName: network.networkName, homePage: network.homePage, logo: network.logo, onSelect: selectNetwork }) }))) }) }) }))] }), _jsx(Flex, { justify: "center", style: {
+                        paddingBottom: 40,
+                    }, children: _jsx(Button, { type: "text", onClick: navigateLogin, style: {
+                            fontSize: isMobile ? '16px' : '14px',
+                        }, children: "Sign in with a different account" }) })] }) }));
+};

package/es/components/organism/LoginV2/components/LoginSelectPortal/index.d.ts

@@ -0,0 +1 @@
+export * from './LoginSelectPortal';

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

@@ -0,0 +1 @@
+export * from './LoginSelectPortal';

package/es/components/organism/LoginV2/components/LoginSelectPortal/styled.d.ts

@@ -0,0 +1 @@
+export declare const WrapperList: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const WrapperList = styled.div `
+  padding: 10px;
+  height: 100%;
+`;

package/es/components/organism/LoginV2/components/LoginWithEmail/LoginWithEmail.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { LoginData } from '../../types';
+interface LoginWithEmailProps {
+    domainLogin: string;
+    codeKey?: string;
+    token?: string;
+    username?: string;
+    onLoginSuccess?: (data: Partial<LoginData>) => void;
+    onLoginFail?: () => void;
+    backLogin?: () => void;
+    loginData?: Partial<LoginData>;
+    sendCodeVerifyToEmail: () => void;
+}
+export declare const LoginWithEmail: React.FC<LoginWithEmailProps>;
+export {};

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

@@ -0,0 +1,211 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useCallback } from 'react';
+import { Button, Checkbox, Flex, Typography } from 'antd';
+import { get, isEmpty } from 'lodash';
+import { useImmer } from 'use-immer';
+import { useCookies } from 'react-cookie';
+import { isMobile } from 'react-device-detect';
+import { useCountdown } from '@antscorp/antsomi-ui/es/hooks';
+// Components
+import { WidgetLayout } from '../WidgetLayout';
+import { Avatar } from '../Avatar';
+// Images
+import loginStep2Image from '../../../../../assets/images/components/Login/loginStep2.png';
+import { StyleButton, StyleInput, Text } from '../../styled';
+import { TextInfo } from './styled';
+import { Title } from '../WidgetLayout/styled';
+import { maskEmail } from '../ChooseMethod/utils';
+import { generateGuid } from '../../utils';
+import { LOGIN_ERROR_TYPES } from '../../constants';
+// Constants
+const COUNTDOWN_SECONDS = 59;
+const CODE_LENGTH = 6;
+const { Text: TextAntsomiUI } = Typography;
+const initialState = {
+    code: '',
+    isTrust: false,
+    codeError: false,
+    isLoading: false,
+    countResend: 0,
+    isShowResend: false,
+    isDisableResend: false,
+    isTooManyMistakes: false,
+};
+export const LoginWithEmail = ({ loginData, domainLogin, codeKey = 'code', token = '', username = '', onLoginSuccess, onLoginFail, backLogin, sendCodeVerifyToEmail, }) => {
+    const [state, setState] = useImmer(initialState);
+    const [cookies, setCookie] = useCookies();
+    const errorRef = useRef(false);
+    const [errorMessageCode, setErrorMessageCode] = React.useState(null);
+    const errorCodeSend = get(loginData, 'errorCode', '');
+    const retryAfter = get(loginData, 'retryAfter');
+    const userEmail = get(loginData, 'personal.email', '');
+    const userAvatar = get(loginData, 'personal.avatar');
+    const userFullName = get(loginData, 'personal.full_name');
+    const countdownOptions = {
+        autoStart: true,
+        onComplete: () => {
+            setState(draft => {
+                draft.isShowResend = true;
+            });
+        },
+    };
+    const countdownIncorrectAttempts = {
+        autoStart: false,
+        onComplete: () => {
+            setState(draft => {
+                draft.isDisableResend = false;
+                draft.isShowResend = true;
+                draft.isTooManyMistakes = false;
+            });
+            setErrorMessageCode('');
+        },
+    };
+    const { resetAndStartWithTime, seconds } = useCountdown(COUNTDOWN_SECONDS, countdownOptions);
+    const { resetAndStartWithTime: resetCountDownIncorrectAttempts } = useCountdown(0, countdownIncorrectAttempts);
+    useEffect(() => {
+        if (errorCodeSend) {
+            if (errorCodeSend === LOGIN_ERROR_TYPES.SEND_LIMIT_REACHED.type) {
+                setState(draft => {
+                    draft.isDisableResend = true;
+                    draft.isShowResend = true;
+                });
+            }
+            if (errorCodeSend === LOGIN_ERROR_TYPES.TOO_MANY_ATTEMPTS.type && retryAfter > 0) {
+                setState(draft => {
+                    draft.isDisableResend = true;
+                    draft.isShowResend = true;
+                    draft.isTooManyMistakes = true;
+                });
+                resetCountDownIncorrectAttempts(+retryAfter);
+            }
+            setErrorMessageCode(errorCodeSend);
+        }
+        if (+retryAfter > 0 && errorCodeSend === LOGIN_ERROR_TYPES.SEND_LIMIT_REACHED.type) {
+            resetAndStartWithTime(+retryAfter);
+            setState(draft => {
+                draft.isShowResend = false;
+            });
+        }
+        if (errorCodeSend === 'RESEND_TOO_SOON' && +retryAfter > 0) {
+            resetAndStartWithTime(+retryAfter);
+        }
+    }, [errorCodeSend, retryAfter, resetAndStartWithTime, resetCountDownIncorrectAttempts, setState]);
+    const handleTrustDevice = useCallback((trustKey) => {
+        const trustKeyCookieName = `ogs-${btoa(username)}`;
+        localStorage.setItem(trustKeyCookieName, trustKey);
+        setCookie(trustKeyCookieName, trustKey, { path: '/' });
+    }, [username, setCookie]);
+    const handleAuthenticationSuccess = useCallback((response, trustKey) => {
+        if (response.code === 200) {
+            if (trustKey) {
+                handleTrustDevice(trustKey);
+            }
+            onLoginSuccess?.(response.data);
+        }
+        else {
+            if (LOGIN_ERROR_TYPES[response.data.error]) {
+                setErrorMessageCode(response.data.error);
+                if (response.data.error === LOGIN_ERROR_TYPES.SEND_LIMIT_REACHED.type) {
+                    setState(draft => {
+                        draft.isDisableResend = true;
+                    });
+                }
+                if (response.data.error === LOGIN_ERROR_TYPES.TOO_MANY_ATTEMPTS.type &&
+                    +response.data.retryAfter > 0) {
+                    setState(draft => {
+                        draft.isDisableResend = true;
+                        draft.isShowResend = true;
+                        draft.isTooManyMistakes = true;
+                    });
+                    resetCountDownIncorrectAttempts(+response.data.retryAfter);
+                }
+            }
+            onLoginFail?.();
+        }
+    }, [onLoginSuccess, onLoginFail, handleTrustDevice, setState, resetCountDownIncorrectAttempts]);
+    const makeAuthenticationRequest = useCallback((verificationParams, trustKey) => {
+        const url = `${domainLogin}api/account/authenticate`;
+        const request = new XMLHttpRequest();
+        request.open('POST', url, true);
+        request.setRequestHeader('Content-Type', 'application/json');
+        request.withCredentials = false;
+        request.onreadystatechange = () => {
+            if (request.readyState === XMLHttpRequest.DONE) {
+                setState(draft => {
+                    draft.isLoading = false;
+                });
+                if (request.status === 200) {
+                    const response = JSON.parse(request.responseText);
+                    handleAuthenticationSuccess(response, trustKey);
+                }
+            }
+        };
+        request.send(JSON.stringify(verificationParams));
+    }, [domainLogin, setState, handleAuthenticationSuccess]);
+    const signIn = useCallback(() => {
+        errorRef.current = true;
+        if (!token) {
+            return;
+        }
+        if (isEmpty(state.code)) {
+            setState(draft => {
+                draft.codeError = true;
+            });
+            return;
+        }
+        const trustKey = state.isTrust ? generateGuid() : null;
+        const verificationParams = {
+            [codeKey]: state.code,
+            token,
+            auth_type: 'email',
+            trust_key: trustKey,
+        };
+        setState(draft => {
+            draft.isLoading = true;
+        });
+        makeAuthenticationRequest(verificationParams, trustKey);
+    }, [token, state.code, state.isTrust, codeKey, setState, makeAuthenticationRequest]);
+    const handleBack = useCallback(() => {
+        backLogin?.();
+    }, [backLogin]);
+    const onResendCode = useCallback(() => {
+        setState(draft => {
+            draft.isShowResend = false;
+            draft.code = '';
+            draft.codeError = false;
+            draft.countResend += 1;
+        });
+        resetAndStartWithTime(COUNTDOWN_SECONDS);
+        sendCodeVerifyToEmail();
+    }, [setState, resetAndStartWithTime, sendCodeVerifyToEmail]);
+    const handleCodeChange = useCallback((e) => {
+        const newCode = e.target.value;
+        setState(draft => {
+            draft.code = newCode;
+        });
+        errorRef.current = true;
+    }, [setState]);
+    const handleTrustChange = useCallback((e) => {
+        setState(draft => {
+            draft.isTrust = e.target.checked;
+        });
+    }, [setState]);
+    const renderErrorMessages = () => {
+        let errMsg = null;
+        if (state.codeError && isEmpty(state.code)) {
+            errMsg = _jsx(TextAntsomiUI, { type: "danger", children: "Invalid code, please try again." });
+        }
+        if (errorMessageCode && LOGIN_ERROR_TYPES[errorMessageCode]) {
+            errMsg = (_jsx(TextAntsomiUI, { type: "danger", children: LOGIN_ERROR_TYPES[errorMessageCode].message }));
+        }
+        return errMsg;
+    };
+    const renderResendSection = () => {
+        const maskedEmail = maskEmail(userEmail);
+        const baseText = `Please enter the 6-digit code send to ${maskedEmail} Haven't received it? `;
+        return (_jsx(Flex, { gap: 5, align: "center", children: _jsxs(Text, { isMobile: isMobile, color: "#595959", children: [baseText, state.isShowResend ? (_jsx(Text, { color: state.isDisableResend ? '#a2a2a2' : '#005eb8', onClick: state.isDisableResend ? undefined : onResendCode, isMobile: isMobile, style: { cursor: state.isDisableResend ? 'not-allowed' : 'pointer' }, children: "Resend." })) : (`Resend code in ${seconds}s.`)] }) }));
+    };
+    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: userAvatar, name: userFullName, email: userEmail }), isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 30, content: _jsxs(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "Identity Verification" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For added security, we need to verify your identity." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [renderResendSection(), _jsxs(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: [_jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(StyleInput, { isMobile: isMobile, maxLength: CODE_LENGTH, placeholder: "Input your code", value: state.code, onChange: handleCodeChange, status: errorRef.current && state.codeError ? 'error' : undefined, disabled: state.isTooManyMistakes }), renderErrorMessages()] }), _jsx(Checkbox, { checked: state.isTrust, onChange: handleTrustChange, disabled: state.isTooManyMistakes, children: _jsx(TextInfo, { isMobile: isMobile, children: "Remember this browser for future logins" }) })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { marginTop: isMobile ? 20 : 15 }, children: [_jsx(StyleButton, { isMobile: isMobile, type: "primary", onClick: signIn, loading: state.isLoading, disabled: state.isTooManyMistakes, children: "Verify" }), _jsx(StyleButton, { isMobile: isMobile, onClick: handleBack, type: "text", children: "Back to login" })] })] })] }), footer: _jsx(Flex, { vertical: true, gap: 115, children: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
+                        fontSize: isMobile ? '16px' : '14px',
+                    }, children: "Sign in with a different account" }) }) }) }));
+};

package/es/components/organism/LoginV2/components/LoginWithEmail/index.d.ts

@@ -0,0 +1 @@
+export * from './LoginWithEmail';

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

@@ -0,0 +1 @@
+export * from './LoginWithEmail';

package/es/components/organism/LoginV2/components/LoginWithEmail/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const TextInfo: import("styled-components").StyledComponent<"span", any, {
+    isMobile: boolean;
+}, never>;

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const TextInfo = styled.span `
+  color: #7f7f7f;
+  font-size: ${props => (props.isMobile ? ' 13px !important' : '11px')};
+`;

package/es/components/organism/LoginV2/components/LoginWithGG/LoginWithGG.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { LoginData } from '../../types';
+interface TLoginStep2 {
+    domainLogin: string;
+    codeKey?: string;
+    token?: string;
+    username?: string;
+    onLoginSuccess?: (data: Partial<LoginData>) => void;
+    onLoginFail?: () => void;
+    backLogin?: () => void;
+    loginData?: Partial<LoginData>;
+}
+export declare const LoginWithGG: React.FC<TLoginStep2>;
+export {};

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

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react-hooks/exhaustive-deps */
+// Libraries
+import { Button, Checkbox, Flex, Typography } from 'antd';
+import { get } from 'lodash';
+import { useEffect, useRef } from 'react';
+import { useImmer } from 'use-immer';
+import { useCookies } from 'react-cookie';
+import { isMobile } from 'react-device-detect';
+// Components
+import { WidgetLayout } from '../WidgetLayout';
+import { Avatar } from '../Avatar';
+import { IconInfo } from '../IconInfo';
+// Images
+import loginStep2Image from '../../../../../assets/images/components/Login/loginStep2.png';
+import step2 from '../../../../../assets/images/components/Login/step2.png';
+import { StyleButton, StyleInput, Text } from '../../styled';
+import { TextInfo } from './styled';
+import { Title } from '../WidgetLayout/styled';
+import { generateGuid } from '../../utils';
+const { Text: TextAntsomiUI } = Typography;
+export const LoginWithGG = props => {
+    const { loginData, domainLogin, codeKey = 'code', token = '', username = '', onLoginSuccess, onLoginFail, backLogin, } = props;
+    const [state, setState] = useImmer({
+        code: '',
+        isTrust: false,
+        codeError: true,
+        isLoading: false,
+        count: 0,
+    });
+    const errorRef = useRef(false);
+    const [cookies, setCookie] = useCookies();
+    const signIn = () => {
+        errorRef.current = true;
+        setState(draft => {
+            draft.count += 1;
+        });
+        if (!token || state.codeError) {
+            return;
+        }
+        const verificationParams = {
+            [codeKey]: state.code,
+            token,
+            trust_key: state.isTrust ? generateGuid() : null,
+        };
+        const url = `${domainLogin}api/account/authenticate`;
+        setState(draft => {
+            draft.isLoading = true;
+        });
+        const request = new XMLHttpRequest();
+        request.open('POST', url, true);
+        request.setRequestHeader('Content-Type', 'application/json');
+        request.withCredentials = false;
+        request.onreadystatechange = () => {
+            if (request.readyState === XMLHttpRequest.DONE) {
+                setState(draft => {
+                    draft.isLoading = false;
+                });
+            }
+            if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
+                const response = JSON.parse(request.responseText);
+                if (response.code === 200) {
+                    if (verificationParams.trust_key) {
+                        const trustKeyCookieName = `ogs-${btoa(username)}`;
+                        localStorage.setItem(trustKeyCookieName, verificationParams.trust_key);
+                        setCookie(trustKeyCookieName, verificationParams.trust_key, { path: '/' });
+                    }
+                    if (onLoginSuccess && typeof onLoginSuccess === 'function') {
+                        onLoginSuccess(response.data);
+                    }
+                }
+                else {
+                    setState(draft => {
+                        draft.codeError = true;
+                    });
+                    if (onLoginFail && typeof onLoginFail === 'function') {
+                        onLoginFail();
+                    }
+                }
+            }
+        };
+        request.send(JSON.stringify(verificationParams));
+    };
+    const handleBack = () => {
+        if (backLogin && typeof backLogin === 'function') {
+            backLogin();
+        }
+    };
+    useEffect(() => {
+        if (state.code && state.code.trim()) {
+            setState(draft => {
+                draft.codeError = false;
+            });
+        }
+        else {
+            setState(draft => {
+                draft.codeError = true;
+            });
+        }
+    }, [state.code]);
+    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: get(loginData, 'personal.avatar'), name: get(loginData, 'personal.full_name'), email: get(loginData, 'personal.email') }), isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 30, content: _jsxs(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For added security, we need to verify your identity." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [_jsxs(Flex, { gap: 5, align: "center", children: [_jsx(Text, { isMobile: isMobile, color: "#595959", children: "Please enter the 6-digit code registered to your device." }), _jsx(IconInfo, { image: step2, title: _jsx(TextAntsomiUI, { style: {
+                                            marginTop: 20,
+                                            textAlign: 'center',
+                                        }, children: _jsxs(Text, { isMobile: isMobile, children: ["Open Google Authenticator and enter the code from ", _jsx("b", { children: "antsomi.com" })] }) }) })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: [_jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(StyleInput, { isMobile: isMobile, maxLength: 6, placeholder: "Input your code", value: state.code, onChange: e => {
+                                                setState(draft => {
+                                                    draft.code = e.target.value;
+                                                });
+                                                errorRef.current = true;
+                                            }, status: errorRef.current && state.codeError ? 'error' : undefined }), errorRef.current && state.codeError ? (_jsx(TextAntsomiUI, { type: "danger", children: "Invalid code, please try again" })) : null] }), _jsx(Checkbox, { checked: state.isTrust, onChange: e => {
+                                        setState(draft => {
+                                            draft.isTrust = e.target.checked;
+                                        });
+                                    }, children: _jsx(TextInfo, { isMobile: isMobile, children: "Remember this browser for future logins" }) })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { marginTop: isMobile ? 20 : 15 }, children: [_jsx(StyleButton, { isMobile: isMobile, type: "primary", onClick: signIn, children: "Verify" }), _jsx(StyleButton, { isMobile: isMobile, onClick: handleBack, type: "text", children: "Back to login" })] })] })] }), footer: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
+                    fontSize: isMobile ? '16px' : '14px',
+                }, children: "Sign in with a different account" }) }) }));
+};

package/es/components/organism/LoginV2/components/LoginWithGG/index.d.ts

@@ -0,0 +1 @@
+export * from './LoginWithGG';

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

@@ -0,0 +1 @@
+export * from './LoginWithGG';

package/es/components/organism/LoginV2/components/LoginWithGG/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const TextInfo: import("styled-components").StyledComponent<"span", any, {
+    isMobile: boolean;
+}, never>;

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const TextInfo = styled.span `
+  color: #7f7f7f;
+  font-size: ${(props) => (props.isMobile ? ' 13px !important' : '11px')};
+`;

package/es/components/organism/LoginV2/components/Logo/Logo.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type TLogo = {
+    urlLogo?: string;
+};
+export declare const Logo: React.FC<TLogo>;
+export {};

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from 'antd';
+import { isEmpty } from 'lodash';
+import { WrapperImage } from '../../styled';
+import logoAntsomi from '../../../../../assets/images/logo/antsomi_logo.png';
+export const Logo = props => {
+    const { urlLogo } = props;
+    return (_jsx(Flex, { align: "center", justify: "center", children: !isEmpty(urlLogo) ? (_jsx(WrapperImage, { src: urlLogo, alt: "" })) : typeof LOGO_NETWORK_DOMAIN !== 'undefined' && LOGO_NETWORK_DOMAIN !== '' ? (_jsx(WrapperImage, { src: LOGO_NETWORK_DOMAIN, alt: "" })) : (_jsx(WrapperImage, { src: logoAntsomi, alt: "logosaS" })) }));
+};

package/es/components/organism/LoginV2/components/Logo/index.d.ts

@@ -0,0 +1 @@
+export * from './Logo';

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

@@ -0,0 +1 @@
+export * from './Logo';

package/es/components/organism/LoginV2/components/OryConsent/OryAuthLayout.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type OryAuthLayoutProps = {
+    title: string;
+    description?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+};
+export declare const OryAuthLayout: React.FC<OryAuthLayoutProps>;
+export {};

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import logoAntsomi from '../../../../../assets/images/logo/antsomi_logo.png';
+import { AuthHeader, Banner, Body, Footer, HeaderLogo, Page, Panel } from './styled';
+export const OryAuthLayout = ({ title, description, footer, children, }) => (_jsxs(Page, { children: [_jsxs(Panel, { "aria-label": title, children: [_jsxs(Body, { children: [_jsxs(AuthHeader, { children: [_jsx(HeaderLogo, { src: logoAntsomi, alt: "Antsomi" }), _jsxs("div", { children: [_jsx("h1", { children: title }), description ? _jsx("p", { children: description }) : null] })] }), children] }), footer ? _jsx(Footer, { children: footer }) : null] }), _jsx(Banner, { className: "login-banner-zone", id: "login_banner_zone", "aria-hidden": "true" })] }));