@antscorp/antsomi-ui 2.0.101 → 2.0.103

package/es/components/organism/ActivityTimeline/components/Slide/styled.js

@@ -1,25 +1,25 @@
 import { Button } from 'antd';
 import styled from 'styled-components';
 import { Swiper } from 'swiper/react';
-export const StyledBtnNavigation = styled(Button) `
-  &.antsomi-btn {
-    position: absolute;
-    top: 50%;
-    z-index: 1000;
-
-    &.next {
-      transform: translateY(-50%) rotate(-90deg);
-      right: 4px;
-    }
-
-    &.prev {
-      transform: translateY(-50%) rotate(-90deg);
-      left: 4px;
-    }
-  }
+export const StyledBtnNavigation = styled(Button) `
+  &.antsomi-btn {
+    position: absolute;
+    top: 50%;
+    z-index: 1000;
+
+    &.next {
+      transform: translateY(-50%) rotate(-90deg);
+      right: 4px;
+    }
+
+    &.prev {
+      transform: translateY(-50%) rotate(-90deg);
+      left: 4px;
+    }
+  }
 `;
-export const StyledSwiper = styled(Swiper) `
-  &:not(:hover) ${StyledBtnNavigation}.antsomi-btn {
-    display: none !important;
-  }
+export const StyledSwiper = styled(Swiper) `
+  &:not(:hover) ${StyledBtnNavigation}.antsomi-btn {
+    display: none !important;
+  }
 `;

package/es/components/organism/ActivityTimeline/components/TimeLineTitle/styled.js

@@ -1,11 +1,11 @@
 import { Typography } from 'antd';
 import styled from 'styled-components';
-export const TimelineTitleRoot = styled.div `
-  font-size: 12px;
-  line-height: 1.0625rem;
-  margin-top: 12px;
-  margin-bottom: 16px;
-  padding-left: 0.375rem;
-  font-size: 0.75rem;
+export const TimelineTitleRoot = styled.div `
+  font-size: 12px;
+  line-height: 1.0625rem;
+  margin-top: 12px;
+  margin-bottom: 16px;
+  padding-left: 0.375rem;
+  font-size: 0.75rem;
 `;
 export const DateTitle = styled(Typography.Text) ``;

package/es/components/organism/ActivityTimeline/components/TimelineSection/styled.js

@@ -4,79 +4,79 @@ export const fonts = {
     roBold: 'Roboto-Bold',
     roMedium: 'Roboto-Medium',
 };
-export const TimelineContainer = styled.div `
-  position: relative;
-  padding-left: 0.25rem;
-  &:before {
-    content: '';
-    position: absolute;
-    top: -10px;
-    bottom: 0;
-    left: 1.188rem;
-    width: 0.063rem;
-    z-index: 1;
-    background-color: rgb(230, 230, 230);
-    height: calc(100% + 5px);
-  }
+export const TimelineContainer = styled.div `
+  position: relative;
+  padding-left: 0.25rem;
+  &:before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    bottom: 0;
+    left: 1.188rem;
+    width: 0.063rem;
+    z-index: 1;
+    background-color: rgb(230, 230, 230);
+    height: calc(100% + 5px);
+  }
 `;
-export const TimelinePanel = styled.div `
-  position: relative;
-  padding-left: 3rem;
-
-  &:not(:last-child) {
-    margin-bottom: 2.5rem;
-    margin-bottom: 2rem;
-  }
+export const TimelinePanel = styled.div `
+  position: relative;
+  padding-left: 3rem;
+
+  &:not(:last-child) {
+    margin-bottom: 2.5rem;
+    margin-bottom: 2rem;
+  }
 `;
-export const TimelineHead = styled.div `
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  padding-top: 15px;
-  margin-top: 5px;
-  flex-direction: column;
-  align-items: flex-start;
+export const TimelineHead = styled.div `
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  padding-top: 15px;
+  margin-top: 5px;
+  flex-direction: column;
+  align-items: flex-start;
 `;
-export const WrapIcon = styled.div `
-  border-radius: 50%;
-  width: 30px;
-  height: 30px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  z-index: 2;
-  top: 15px;
-  left: 0;
-  color: #fff !important;
-
-  span {
-    font-size: 1rem !important;
-  }
-
-  ${({ bgIcon }) => (bgIcon ? `background-color:${bgIcon};` : `background-color: #646fef;`)}
+export const WrapIcon = styled.div `
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: 2;
+  top: 15px;
+  left: 0;
+  color: #fff !important;
+
+  span {
+    font-size: 1rem !important;
+  }
+
+  ${({ bgIcon }) => (bgIcon ? `background-color:${bgIcon};` : `background-color: #646fef;`)}
 `;
-export const TimelineDate = styled.div `
-  font-size: 12px;
-  color: #595959;
-  line-height: 1.33;
-  line-height: 1rem;
+export const TimelineDate = styled.div `
+  font-size: 12px;
+  color: #595959;
+  line-height: 1.33;
+  line-height: 1rem;
 `;
-export const TitleTimeline = styled.div `
-  font-size: 14px;
-  color: #000;
-  font-weight: bold;
-  margin-right: 1rem;
-  line-height: 1.2rem;
-  display: flex;
-  flex-direction: column;
-  line-height: 1rem;
+export const TitleTimeline = styled.div `
+  font-size: 14px;
+  color: #000;
+  font-weight: bold;
+  margin-right: 1rem;
+  line-height: 1.2rem;
+  display: flex;
+  flex-direction: column;
+  line-height: 1rem;
 `;
-export const TimelineContent = styled.div `
-  padding: 0.5rem 1rem;
-  background-color: #deeffe;
-  border-radius: 10px;
-  font-size: 0.875rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
+export const TimelineContent = styled.div `
+  padding: 0.5rem 1rem;
+  background-color: #deeffe;
+  border-radius: 10px;
+  font-size: 0.875rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
 `;

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

@@ -1,47 +1,47 @@
 import { Flex } from 'antd';
 import styled from 'styled-components';
-export const StyledRoot = styled.div `
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: auto;
-
-  a.title-have-url {
-    font-weight: bold;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
+export const StyledRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+
+  a.title-have-url {
+    font-weight: bold;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 `;
-export const StyldTitle = styled.div `
-  font-size: 16px;
-  font-weight: bold;
+export const StyldTitle = styled.div `
+  font-size: 16px;
+  font-weight: bold;
 `;
-export const StyledNoData = styled(Flex) `
-  height: 100%;
+export const StyledNoData = styled(Flex) `
+  height: 100%;
 `;
-export const WrapperContainerRedeem = styled.div `
-  display: flex;
-  justify-content: space-between;
-  margin: 10px 0;
+export const WrapperContainerRedeem = styled.div `
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 0;
 `;
-export const TimelineContainer = styled.div `
-  position: relative;
-  padding-left: 0.25rem;
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: -10px;
-    bottom: 0;
-    left: 1.188rem;
-    width: 0.063rem;
-    z-index: 1;
-    background-color: rgb(230, 230, 230);
-    height: calc(100% + 5px);
-  }
+export const TimelineContainer = styled.div `
+  position: relative;
+  padding-left: 0.25rem;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    bottom: 0;
+    left: 1.188rem;
+    width: 0.063rem;
+    z-index: 1;
+    background-color: rgb(230, 230, 230);
+    height: calc(100% + 5px);
+  }
 `;
-export const TimelineBottom = styled(Flex) `
-  margin-top: 10px;
+export const TimelineBottom = styled(Flex) `
+  margin-top: 10px;
 `;

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

@@ -6,41 +6,41 @@ import { Tabs } from '@antscorp/antsomi-ui/es/components/molecules/Tabs';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const AlgorithmsSettingWrapper = styled.div ``;
-export const StyledTabs = styled(Tabs) `
-  margin-top: 8px !important;
-  width: 100%;
-
-  & .antsomi-tabs-nav {
-    margin-bottom: 16px !important;
-  }
-
-  .antsomi-tabs-nav-list {
-    height: 36px;
-
-    .antsomi-tabs-tab {
-      padding: 0px 1.25rem;
-    }
-  }
-  .antsomi-tabs-tab-btn {
-    font-size: ${THEME.token?.fontSize}px;
-  }
+export const StyledTabs = styled(Tabs) `
+  margin-top: 8px !important;
+  width: 100%;
+
+  & .antsomi-tabs-nav {
+    margin-bottom: 16px !important;
+  }
+
+  .antsomi-tabs-nav-list {
+    height: 36px;
+
+    .antsomi-tabs-tab {
+      padding: 0px 1.25rem;
+    }
+  }
+  .antsomi-tabs-tab-btn {
+    font-size: ${THEME.token?.fontSize}px;
+  }
 `;
-export const AlgorithmWrapper = styled.div `
-  display: grid;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 4px 8px;
-
-  margin-top: 0;
-  grid-template-columns: ${props => (props.mode === 'CDP' ? '192px 1fr 30px' : '1fr 1fr 30px')};
-  .antsomi-select-selector {
-    border-top: 0 !important;
-    border-left: 0 !important;
-    border-right: 0 !important;
-  }
+export const AlgorithmWrapper = styled.div `
+  display: grid;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 4px 8px;
+
+  margin-top: 0;
+  grid-template-columns: ${props => (props.mode === 'CDP' ? '192px 1fr 30px' : '1fr 1fr 30px')};
+  .antsomi-select-selector {
+    border-top: 0 !important;
+    border-left: 0 !important;
+    border-right: 0 !important;
+  }
 `;
-export const StyledSelect = styled(Select) `
-  .antsomi-select-selector {
-    height: auto;
-  }
+export const StyledSelect = styled(Select) `
+  .antsomi-select-selector {
+    height: auto;
+  }
 `;

package/es/components/organism/BasicLogin/BasicLogin.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LoginComponentProps } from './types';
+export declare const BasicLogin: React.FC<LoginComponentProps>;

package/es/components/organism/BasicLogin/BasicLogin.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-return-assign */
+/// Libraries
+import { useState, useRef } from 'react';
+import { get, isFunction } from 'lodash';
+import { isMobile } from 'react-device-detect';
+import { LOGIN_METHODS, STEPS } from './constants';
+import { LoginMain, WrapperLogin } from './styled';
+import { AuthenticateResult, ChooseMethod, LoginWithEmail, LoginWithGG, SignIn, } from './components';
+export const BasicLogin = props => {
+    const { loginDomain = 'http://khanhhv.platform-ants.adxdev.vn', onLoginSuccess, onChooseDifferentAccount, u_ogs, apiDomain = '', onVerifySuccess, } = 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.STEP_SIGN_IN);
+    const [loginData, setLoginData] = useState({});
+    const selectedNetworkRef = useRef(null);
+    const authenInfoRef = useRef(null);
+    const loginRef = useRef(null);
+    const setAuthenInfo = (info) => (authenInfoRef.current = info);
+    const handleLoginSuccess = (data = null) => {
+        if (data && data.isCheckG2FA && data.G2FA === 1) {
+            setLoginData(data);
+            if (isFunction(onLoginSuccess)) {
+                onLoginSuccess(data);
+            }
+            setStep(STEPS.STEP_CHOOSE_METHOD);
+        }
+    };
+    const sendCodeVerifyToEmail = async () => {
+        if (!authenInfoRef.current || !authenInfoRef.current.email) {
+            return;
+        }
+        const loginUrl = `${domainLogin}api/account/send-email-code`;
+        const data = {
+            token: loginData.token,
+        };
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', loginUrl, true);
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        xhr.withCredentials = false;
+        xhr.onreadystatechange = () => {
+            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 onVerifyEmailSuccess = data => {
+        setStep(STEPS.STEP_RESULT);
+        if (isFunction(onVerifySuccess)) {
+            onVerifySuccess(data);
+        }
+    };
+    const onVerifyGGAthenticatorSuccess = data => {
+        setStep(STEPS.STEP_RESULT);
+        if (isFunction(onVerifySuccess)) {
+            onVerifySuccess(data);
+        }
+    };
+    const backLogin = () => {
+        selectedNetworkRef.current = null;
+        setLoginData({});
+        authenInfoRef.current = null;
+        setStep(STEPS.STEP_SIGN_IN);
+        if (isFunction(onChooseDifferentAccount)) {
+            onChooseDifferentAccount();
+        }
+    };
+    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 signInProps = {
+        domainLogin,
+        networkId,
+        u_ogs,
+        setAuthenInfo,
+        onLoginSuccess: handleLoginSuccess,
+    };
+    const stepChooseMethodProps = {
+        domainLogin,
+        token: loginData.token || '',
+        username: get(loginData, 'personal.email') || '',
+        userId: get(loginData, 'personal.user_id') || 0,
+        loginData,
+        onChooseMethod,
+        backLogin,
+    };
+    const stepLoginWithGGProps = {
+        domainLogin,
+        token: loginData.token || '',
+        username: get(loginData, 'personal.email') || '',
+        userId: get(loginData, 'personal.user_id') || 0,
+        loginData,
+        onLoginSuccess: onVerifyGGAthenticatorSuccess,
+        backLogin,
+        networkId,
+    };
+    const stepLoginWithEmailProps = {
+        domainLogin,
+        token: loginData.token || '',
+        username: get(loginData, 'personal.email') || '',
+        userId: get(loginData, 'personal.user_id') || 0,
+        loginData,
+        onLoginSuccess: onVerifyEmailSuccess,
+        backLogin,
+        onResendEmail: sendCodeVerifyToEmail,
+        onResetErrorSendEmail: () => setLoginData({ ...loginData, errorCode: '' }),
+        networkId,
+    };
+    const renderContent = () => {
+        switch (step) {
+            case STEPS.STEP_SIGN_IN:
+                return _jsx(SignIn, { ...signInProps });
+            case STEPS.STEP_CHOOSE_METHOD:
+                return _jsx(ChooseMethod, { ...stepChooseMethodProps });
+            case STEPS.STEP_LOGIN_WITH_GG:
+                return _jsx(LoginWithGG, { ...stepLoginWithGGProps });
+            case STEPS.STEP_LOGIN_WITH_EMAIL:
+                return _jsx(LoginWithEmail, { ...stepLoginWithEmailProps });
+            case STEPS.STEP_RESULT:
+                return _jsx(AuthenticateResult, { loginData: loginData, backLogin: backLogin });
+            default:
+                return null;
+        }
+    };
+    return (_jsx(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: renderContent() }) }));
+};

package/es/components/organism/BasicLogin/__tests__/index.spec.js

@@ -0,0 +1,46 @@
+"use strict";
+// import React from 'react';
+// import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+// import userEvent from '@testing-library/user-event';
+// import { BasicLogin } from '../BasicLogin';
+// const defaultProps = {
+//   loginDomain: 'https://iam.ants.tech/',
+//   onLoginSuccess: jest.fn(),
+//   onLoginFail: jest.fn(),
+//   p_id: '',
+//   u_ogs: '',
+//   width: 400,
+//   theme: 'white',
+//   apiDomain: '//permission.antsomi.com',
+//   usePrivilege: true,
+//   networkId: undefined,
+// };
+// describe('BasicLogin Component', async () => {
+//   beforeEach(() => {
+//     // Clear all mocks before each test
+//     jest.clearAllMocks();
+//   });
+//   test('renders login form correctly', async () => {
+//     const { getByTestId } = render(<BasicLogin {...defaultProps} />);
+//     // Check if login form elements are present
+//     const userNameEle = getByTestId('username');
+//     const passwordEle = getByTestId('password');
+//     const buttonSignIn = getByTestId('button__sign-in');
+//     userEvent.type(userNameEle, 'vothanhtinh147@gmail.com');
+//     userEvent.type(userNameEle, '123456789');
+//     expect(userNameEle).toHaveValue('vothanhtinh147@gmail.com');
+//     expect(passwordEle).toHaveValue('123456789');
+//     // Check if the password has been typed correctly
+//     expect(passwordEle).toHaveValue('123456789');
+//     buttonSignIn.click();
+//     await waitFor(() => {
+//       expect(defaultProps.onLoginSuccess).toHaveBeenCalledTimes(1);
+//     });
+//     // Check if login button is present
+//     expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument();
+//     expect(
+//       screen.getByRole('button', { name: /login/i }) ||
+//         screen.getByRole('button', { name: /sign in/i }),
+//     ).toBeInTheDocument();
+//   });
+// });

package/es/components/organism/BasicLogin/components/AuthenticateResult/AuthenticateResult.d.ts

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

package/es/components/organism/BasicLogin/components/AuthenticateResult/AuthenticateResult.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react-hooks/exhaustive-deps */
+// Libraries
+import { Button, Flex } from 'antd';
+import { isMobile } from 'react-device-detect';
+// Components
+import { WidgetLayout } from '../WidgetLayout';
+// Images
+import authenSuccessImg from '../../../../../assets/images/components/Login/AuthenSuccess.png';
+import { Title } from '../WidgetLayout/styled';
+import { Text } from '../../styled';
+import { get } from 'lodash';
+export const AuthenticateResult = props => {
+    const { loginData = {}, backLogin } = props;
+    const handleBack = () => {
+        if (backLogin && typeof backLogin === 'function') {
+            backLogin();
+        }
+    };
+    return (_jsx(WidgetLayout, { header: null, isShowLogo: false, title: _jsx("div", { style: { marginBottom: 100 } }), gapContent: 40, content: _jsx(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: _jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: authenSuccessImg, alt: "" }), _jsx(Title, { isMobile: isMobile, children: "Authenticated!" }), _jsxs(Text, { isMobile: isMobile, children: ["Sign in as ", get(loginData, 'personal.full_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/BasicLogin/components/AuthenticateResult/index.d.ts

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

package/es/components/organism/BasicLogin/components/AuthenticateResult/index.js

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

package/es/components/organism/BasicLogin/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 {};