@antscorp/antsomi-ui 2.0.101 → 2.0.102

package/es/components/organism/LeftMenu/styled.js

@@ -7,229 +7,229 @@ import { ICON_SIZE } from './constants';
 // Components
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 const { bw8, bw3, borderRadiusXL, blue1_2, blue7 } = globalToken || {};
-export const IconWrapper = styled.div `
-  width: 30px;
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  i {
-    font-size: ${ICON_SIZE}px;
-    color: ${bw8};
-  }
+export const IconWrapper = styled.div `
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  i {
+    font-size: ${ICON_SIZE}px;
+    color: ${bw8};
+  }
 `;
-export const PopoverWrapper = styled.div `
+export const PopoverWrapper = styled.div `
   ${({ show }) => show
-    ? `
-      opacity: 1;
-      visibility: visible;
+    ? `
+      opacity: 1;
+      visibility: visible;
       `
-    : `
-      opacity: 0;
-      visibility: hidden;
-    `}
-
-  &.antsomi-scroll-box {
-    margin-right: 0px !important;
-    &::-webkit-scrollbar {
-      display: none !important;
-    }
-  }
-
-  position: absolute;
-  background-color: white;
-  left: 65px;
-  border-radius: ${borderRadiusXL}px;
-  bottom: 15px;
-  box-shadow: 0px 3px 20px 0px #002e5933;
-  height: ${({ hasMarginTop }) => hasMarginTop ? `calc(100% - ${HEADER_HEIGHT + 15}px)` : `calc(100% - 15px)`};
-  transition:
-    visibility 0s,
-    opacity 0.2s ease-out;
-  z-index: 10;
-  padding: 10px;
-  box-sizing: border-box;
+    : `
+      opacity: 0;
+      visibility: hidden;
+    `}
+
+  &.antsomi-scroll-box {
+    margin-right: 0px !important;
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+  }
+
+  position: absolute;
+  background-color: white;
+  left: 65px;
+  border-radius: ${borderRadiusXL}px;
+  bottom: 15px;
+  box-shadow: 0px 3px 20px 0px #002e5933;
+  height: ${({ hasMarginTop }) => hasMarginTop ? `calc(100% - ${HEADER_HEIGHT + 15}px)` : `calc(100% - 15px)`};
+  transition:
+    visibility 0s,
+    opacity 0.2s ease-out;
+  z-index: 10;
+  padding: 10px;
+  box-sizing: border-box;
 `;
-export const FeatureMenuWrapper = styled(Flex) `
-  flex: 1 1 0%;
-  overflow: hidden;
+export const FeatureMenuWrapper = styled(Flex) `
+  flex: 1 1 0%;
+  overflow: hidden;
 `;
-export const ExpandWrapper = styled.div `
-  height: 35px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-top: 1px solid ${bw3};
-  padding: 0 10px;
+export const ExpandWrapper = styled.div `
+  height: 35px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid ${bw3};
+  padding: 0 10px;
 `;
-export const LeftMenuNavWrapper = styled.div `
-  height: 100vh;
-  display: flex;
-  transition: all 0.2s ease-out;
-
-  ${p => !p.$show && 'display: none;'}
-
-  ${p => (p.$isExpandMenu ? `gap: 10px;` : `gap: 15px;`)}
+export const LeftMenuNavWrapper = styled.div `
+  height: 100vh;
+  display: flex;
+  transition: all 0.2s ease-out;
+
+  ${p => !p.$show && 'display: none;'}
+
+  ${p => (p.$isExpandMenu ? `gap: 10px;` : `gap: 15px;`)}
 `;
-export const NavLogoWrapper = styled(Flex) `
-  height: ${HEADER_HEIGHT}px;
-  flex-shrink: 0;
-
-  .image-wrapper {
-    height: 30px;
-    width: 30px;
-
-    img {
-      height: 100%;
-      width: 100%;
-    }
-  }
+export const NavLogoWrapper = styled(Flex) `
+  height: ${HEADER_HEIGHT}px;
+  flex-shrink: 0;
+
+  .image-wrapper {
+    height: 30px;
+    width: 30px;
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
+  }
 `;
-export const LeftMenuNav = styled.nav `
-  position: relative;
-  width: 70px;
-  height: 100%;
-  background-color: ${blue1_2};
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  border-right: 1px solid ${bw3};
-
-  ${ExpandWrapper} {
-    flex-shrink: 0;
-  }
+export const LeftMenuNav = styled.nav `
+  position: relative;
+  width: 70px;
+  height: 100%;
+  background-color: ${blue1_2};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-right: 1px solid ${bw3};
+
+  ${ExpandWrapper} {
+    flex-shrink: 0;
+  }
 `;
-export const FeatureMenu = styled.ul `
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  flex: 1 1 0%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow-x: hidden;
-
-  &.antsomi-scroll-box {
-    &::-webkit-scrollbar {
-      display: none !important;
-    }
-  }
-
-  .menu-content {
-    flex-shrink: 0;
-
-    &.scroll-content {
-      margin-right: 0px !important;
-    }
-  }
-
-  .nav-blank {
-    flex: 1 1 0%;
-  }
+export const FeatureMenu = styled.ul `
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow-x: hidden;
+
+  &.antsomi-scroll-box {
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+  }
+
+  .menu-content {
+    flex-shrink: 0;
+
+    &.scroll-content {
+      margin-right: 0px !important;
+    }
+  }
+
+  .nav-blank {
+    flex: 1 1 0%;
+  }
 `;
-export const FeatureMenuItem = styled.div `
-  width: 100%;
-  padding: 5px;
-  box-sizing: border-box;
-
-  .menu-link {
-    width: 100% !important;
-    height: 100% !important;
-    display: flex !important;
-    color: inherit !important;
-    text-decoration: none !important;
-  }
-
-  li {
-    width: 100%;
-    cursor: pointer;
-    text-decoration: none;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-radius: ${borderRadiusXL}px;
-    padding: 5px 0;
-    position: relative;
-
-    &::before {
-      display: none !important;
-    }
-
-    span {
-      font-size: 11px !important;
-      font-weight: 500;
-      color: inherit;
-    }
-
-    .menu-item__icon {
-      color: ${globalToken?.bw8};
-      margin-bottom: 3px;
-    }
-
-    &.isHover,
-    &.isActive {
-      ${IconWrapper},
-      span {
-        color: ${blue7};
-
-        i {
-          color: inherit !important;
-        }
-      }
-
-      .menu-item__icon {
-        color: ${blue7};
-      }
-    }
-
-    &.isActive {
-      background-color: #d3e3fd !important;
-    }
-
-    &.isHover {
-      background-color: #ffffffcc;
-
-      .popup-triangle {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-
-    .popup-triangle {
-      opacity: 0;
-      visibility: hidden;
-      right: -6px;
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-style: solid;
-      border-width: 1px 9px 10px 10px;
-      border-color: transparent transparent white transparent;
-      transform: rotate(270deg);
-      z-index: 100;
-    }
-  }
+export const FeatureMenuItem = styled.div `
+  width: 100%;
+  padding: 5px;
+  box-sizing: border-box;
+
+  .menu-link {
+    width: 100% !important;
+    height: 100% !important;
+    display: flex !important;
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+
+  li {
+    width: 100%;
+    cursor: pointer;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: ${borderRadiusXL}px;
+    padding: 5px 0;
+    position: relative;
+
+    &::before {
+      display: none !important;
+    }
+
+    span {
+      font-size: 11px !important;
+      font-weight: 500;
+      color: inherit;
+    }
+
+    .menu-item__icon {
+      color: ${globalToken?.bw8};
+      margin-bottom: 3px;
+    }
+
+    &.isHover,
+    &.isActive {
+      ${IconWrapper},
+      span {
+        color: ${blue7};
+
+        i {
+          color: inherit !important;
+        }
+      }
+
+      .menu-item__icon {
+        color: ${blue7};
+      }
+    }
+
+    &.isActive {
+      background-color: #d3e3fd !important;
+    }
+
+    &.isHover {
+      background-color: #ffffffcc;
+
+      .popup-triangle {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    .popup-triangle {
+      opacity: 0;
+      visibility: hidden;
+      right: -6px;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 1px 9px 10px 10px;
+      border-color: transparent transparent white transparent;
+      transform: rotate(270deg);
+      z-index: 100;
+    }
+  }
 `;
-export const ChildMenuWrapper = styled.div `
-  height: ${({ isMarginTop }) => (isMarginTop ? `calc(100% - ${HEADER_HEIGHT}px)` : '100%')};
-  margin-top: ${({ isMarginTop }) => (isMarginTop ? `${HEADER_HEIGHT}px` : '0px')};
-  width: ${({ isExpand }) => (isExpand ? '210px' : '0px')};
-  padding: ${({ isExpand }) => (isExpand ? '10px' : '10px 0')};
-  transition:
-    width 0.2s,
-    padding 0.2s ease;
-  padding-left: 0px;
-  box-sizing: border-box;
-  z-index: 1;
-
-  &.antsomi-scroll-box {
-    margin-right: 0px !important;
-    &::-webkit-scrollbar {
-      display: none !important;
-    }
-  }
+export const ChildMenuWrapper = styled.div `
+  height: ${({ isMarginTop }) => (isMarginTop ? `calc(100% - ${HEADER_HEIGHT}px)` : '100%')};
+  margin-top: ${({ isMarginTop }) => (isMarginTop ? `${HEADER_HEIGHT}px` : '0px')};
+  width: ${({ isExpand }) => (isExpand ? '210px' : '0px')};
+  padding: ${({ isExpand }) => (isExpand ? '10px' : '10px 0')};
+  transition:
+    width 0.2s,
+    padding 0.2s ease;
+  padding-left: 0px;
+  box-sizing: border-box;
+  z-index: 1;
+
+  &.antsomi-scroll-box {
+    margin-right: 0px !important;
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+  }
 `;

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

@@ -12,12 +12,12 @@ import { get } from 'lodash';
 import axios from 'axios';
 import { isMobile } from 'react-device-detect';
 // Components
-import { LoginSelectPortal, LoginStep2, SignIn, VerifyAccount, SetupGGAuthenticator, ForgotPassword, } from './components';
+import { LoginSelectPortal, LoginWithGG, SignIn, VerifyAccount, SetupGGAuthenticator, ForgotPassword, ChooseMethod, LoginWithEmail, } from './components';
 // Hooks
 import { useContainerDimensions } from './hooks';
 // Utils
 import { checkURL, navigateTo } from './utils';
-import { STEPS } from './constants';
+import { LOGIN_METHODS, 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;
@@ -177,11 +177,11 @@ export const Login = props => {
         }
         if (data && data.isCheckG2FA && data.G2FA_user === 0) {
             setLoginData(data);
-            setStep(STEPS.STEP_SETUP_GG_AUTHENTICATOR);
+            setStep(STEPS.STEP_CHOOSE_METHOD);
         }
         else if (data && data.G2FA === 1) {
             setLoginData(data);
-            setStep(STEPS.STEP2);
+            setStep(STEPS.STEP_CHOOSE_METHOD);
         }
         else {
             const dataLogin = data || loginData;
@@ -404,7 +404,7 @@ export const Login = props => {
         }
     };
     const onSetupGGAuthenticatorDone = () => {
-        setStep(STEPS.STEP2);
+        setStep(STEPS.STEP_LOGIN_WITH_GG);
     };
     const onSkipSetupGGAuthenticator = () => {
         handleLoginSuccess({
@@ -577,8 +577,52 @@ export const Login = props => {
         };
         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,
@@ -608,6 +652,22 @@ export const Login = props => {
         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,
@@ -644,12 +704,6 @@ export const Login = props => {
         onLoginSuccess: handleLoginSuccess,
         onLoginFail: handleLoginFail,
     };
-    const stepSelectAccountConfig = {
-        loginData,
-        urlLogo,
-        listAccounts: listAccountsRef.current,
-        handleSelectAccount,
-    };
     const stepVerifyAccount = {
         domainLogin,
         networkId,
@@ -672,8 +726,12 @@ export const Login = props => {
         switch (step) {
             case STEPS.STEP1:
                 return _jsx(SignIn, { ...step1Config });
-            case STEPS.STEP2:
-                return _jsx(LoginStep2, { ...step2Config });
+            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:

package/es/components/organism/Login/components/ChooseMethod/ChooseMethod.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { LoginData } from '../../types';
+interface TLoginStep2 {
+    backLogin: () => void;
+    loginData: Partial<LoginData>;
+    onChooseMethod: (method: string) => void;
+}
+export declare const ChooseMethod: React.FC<TLoginStep2>;
+export {};

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react-hooks/exhaustive-deps */
+// Libraries
+import { Button, Flex } from 'antd';
+import { get } from 'lodash';
+import { useMemo } from 'react';
+import { isMobile } from 'react-device-detect';
+// Components
+import { WidgetLayout } from '../WidgetLayout';
+import { Avatar } from '../Avatar';
+import { Method } from './Method';
+// Images
+import loginStep2Image from '../../../../../assets/images/components/Login/loginStep2.png';
+import { Text } from '../../styled';
+import { Title } from '../WidgetLayout/styled';
+import { EmailTemplateIcon, KeyValueIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { maskEmail } from './utils';
+import { LOGIN_METHODS } from '../../constants';
+export const ChooseMethod = props => {
+    const { loginData = {}, onChooseMethod, backLogin } = props;
+    const handleBack = () => {
+        if (backLogin && typeof backLogin === 'function') {
+            backLogin();
+        }
+    };
+    const methods = useMemo(() => {
+        const options = loginData?.auth_options || [];
+        return options.map(opt => {
+            switch (opt.provider) {
+                case 'google':
+                    return {
+                        disable: opt.status !== 1,
+                        icon: _jsx(KeyValueIcon, { color: "#005eb8" }),
+                        name: LOGIN_METHODS.GOOGLE_AUTHENTICATOR,
+                        label: opt.status === 1
+                            ? 'Use your security code using Google Authenticator.'
+                            : 'Use your security code using Google Authenticator. Authenticator not available.',
+                    };
+                case 'email':
+                    return {
+                        disable: opt.status !== 1,
+                        icon: _jsx(EmailTemplateIcon, { color: "#005eb8" }),
+                        name: LOGIN_METHODS.EMAIL,
+                        label: `Get verification code at ${maskEmail(get(loginData, 'personal.email', ''))}`,
+                    };
+                default:
+                    return null;
+            }
+        });
+    }, [loginData]);
+    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 : 13, children: [_jsx(Flex, { gap: 5, align: "center", justify: "center", children: _jsx(Title, { isMobile: isMobile, children: "Choose how you want to sign in:" }) }), _jsx(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: methods.map(({ disable, icon, name, label }) => (_jsx(Method, { disable: disable, onClick: onChooseMethod, icon: icon, name: name, label: label }, name))) })] })] }), 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/Login/components/ChooseMethod/Method.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+type TMethod = {
+    onClick: (name: string) => void;
+    icon: React.ReactNode;
+    label: React.ReactNode;
+    disable?: boolean;
+    name: string;
+};
+export declare const Method: (props: TMethod) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isMobile } from 'react-device-detect';
+import { BlockMethod } from './styled';
+import { Text } from '../../styled';
+export const Method = (props) => {
+    const { onClick, icon, label, disable, name } = props;
+    const onChooseMethod = () => {
+        if (!disable && onClick) {
+            onClick(name);
+        }
+    };
+    return (_jsxs(BlockMethod, { onClick: onChooseMethod, disable: disable, "data-test": name, children: [_jsx("div", { children: icon }), _jsx(Text, { isMobile: isMobile, color: disable ? '#9C9B9B' : '#595959', children: label })] }));
+};

package/es/components/organism/Login/components/ChooseMethod/index.d.ts

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

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

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