@antscorp/antsomi-ui 1.3.5-beta.648 → 1.3.5-beta.650

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

@@ -1,18 +1,3 @@
 import React from 'react';
-interface LoginComponentProps {
-    loginDomain: string;
-    apiDomain?: string;
-    networkId?: string | boolean;
-    onLoginSuccess?: (data: any) => void;
-    onLoginFail?: (data: any) => void;
-    reCaptchaKey?: string;
-    p_id?: string;
-    onResendPassFail?: () => void;
-    u_ogs?: string;
-    width?: number;
-    callbackUrl?: string;
-    theme?: string;
-    usePrivilege?: boolean;
-}
+import { LoginComponentProps } from './types';
 export declare const Login: React.FC<LoginComponentProps>;
-export {};

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

@@ -17,7 +17,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import React, { useState, useEffect, useRef } from 'react';
 import { CookiesProvider, useCookies } from 'react-cookie';
 import { get } from 'lodash';
-import { Flex } from 'antd';
 import axios from 'axios';
 // Components
 import ForgotPassword from './components/ForgotPassword';
@@ -26,7 +25,8 @@ import SetupGGAuthenticator from './components/SetupGGAuthenticator';
 // Utils
 import { checkURL, navigateTo } from './utils';
 import { STEPS } from './constants';
-import { WrapperLogin } from './styled';
+import { LoginBannerZone, LoginMain, WrapperLogin } from './styled';
+import { isMobile } from 'react-device-detect';
 export const Login = props => {
     const { loginDomain = 'http://khanhhv.platform-ants.adxdev.vn', onLoginSuccess, onLoginFail, reCaptchaKey = '6LfqGF0UAAAAAFJri0tlp8eCNbWZdJv1eAyF4oIo', p_id, onResendPassFail, u_ogs, width, callbackUrl, apiDomain = '//permission.antsomi.com', usePrivilege, } = props;
     let { networkId } = props;
@@ -122,7 +122,9 @@ export const Login = props => {
             },
         })
             .then(res => {
-            res && res.data && redirectFirstMenu(res.data.data, redirectAccountId);
+            if (res && res.data) {
+                redirectFirstMenu(res.data.data, redirectAccountId);
+            }
         });
     });
     const redirectFirstMenu = (data, redirectAccountId) => {
@@ -669,6 +671,7 @@ export const Login = props => {
         }
     };
     return (React.createElement(CookiesProvider, null,
-        React.createElement(Flex, { style: { background: '#EAF1FB', margin: ' auto' } },
-            React.createElement(WrapperLogin, { vertical: true, align: "center", gap: 40 }, renderMain()))));
+        React.createElement(LoginMain, { justify: isMobile ? 'center' : 'start' },
+            React.createElement(WrapperLogin, { isMobile: isMobile, vertical: true, align: "center", gap: 40 }, renderMain()),
+            !isMobile && React.createElement(LoginBannerZone, { className: "login-banner-zone", id: "login_banner_zone" }))));
 };

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

@@ -1,8 +1,8 @@
 import React from 'react';
 type TAvatar = {
-    image: string;
-    name: string;
-    email: string;
+    image?: string;
+    name?: string;
+    email?: string;
 };
 export declare const Avatar: React.FC<TAvatar>;
 export {};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type TIconInfo = {
+    image?: string;
+    title: React.ReactNode | string;
+};
+export declare const IconInfo: React.FC<TIconInfo>;
+export {};

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

@@ -0,0 +1,25 @@
+import { ModalV2 } from '@antscorp/antsomi-ui/es/components/molecules';
+import Icon from '@antscorp/icons';
+import { Flex, Tooltip, Typography } from 'antd';
+import React, { useState } from 'react';
+import { isMobile } from 'react-device-detect';
+const { Text } = Typography;
+export const IconInfo = props => {
+    const { image, title } = props;
+    const [open, setOpen] = useState(false);
+    if (isMobile) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(ModalV2, { open: open, onCancel: () => setOpen(false), centered: true, footer: null },
+                React.createElement(Flex, { vertical: true, align: "center", gap: 10 },
+                    React.createElement("img", { src: image, alt: "", width: 200 }),
+                    title)),
+            React.createElement(Icon, { type: "icon-ants-info-outline", onClick: () => setOpen(true) })));
+    }
+    return (React.createElement(Tooltip, { overlayInnerStyle: {
+            width: 350,
+            padding: 20,
+        }, title: React.createElement(Flex, { vertical: true, align: "center", gap: 10 },
+            React.createElement("img", { src: image, alt: "", width: 200 }),
+            title), color: "#fff", placement: "top" },
+        React.createElement(Icon, { type: "icon-ants-info-outline" })));
+};

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

@@ -0,0 +1 @@
+"use strict";

package/es/components/organism/Login/components/LoginSelectPortal/Item/styled.js

@@ -1,11 +1,18 @@
 import styled from 'styled-components';
 export const WrapperItem = styled.div `
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
   width: 100%;
   height: 119px;
-  border: 1px solid #b8cfe6;
   border-radius: 10px;
+  padding: 10px 10px 0 10px;
+
+  border: 1px solid #b8cfe6;
   cursor: pointer;
-  padding: 26px 10px 0 10px;
 
   img {
     margin-bottom: 10px;
@@ -22,4 +29,5 @@ export const WrapperItem = styled.div `
 export const BlockEnd = styled.div `
   border-top: 1px solid #b8cfe6;
   overflow: hidden;
+  width: 100%;
 `;

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

@@ -5,13 +5,10 @@ interface TLoginStep2 {
     codeKey?: string;
     token?: string;
     username?: string;
-    onLoginSuccess?: (data: any) => void;
+    onLoginSuccess?: (data: Partial<LoginData>) => void;
     onLoginFail?: () => void;
     backLogin?: () => void;
-    loginData: {
-        personal?: Partial<LoginData>;
-        token?: string;
-    };
+    loginData?: Partial<LoginData>;
 }
 export declare const LoginStep2: React.FC<TLoginStep2>;
 export {};

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

@@ -1,17 +1,17 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 // Libraries
-import { Button, Checkbox, Flex, Input, Tooltip, Typography } from 'antd';
+import { Button, Checkbox, Flex, Input, Typography } from 'antd';
 import { get } from 'lodash';
 import React, { useEffect, useRef } from 'react';
 import { useImmer } from 'use-immer';
 import { useCookies } from 'react-cookie';
-import Icon from '@antscorp/icons';
 // Components
 import { WidgetLayout } from '../WidgetLayout';
 import { Avatar } from '../Avatar';
 import loginStep2Image from '../../../../../assets/images/components/Login/loginStep2.png';
 import step2 from '../../../../../assets/images/components/Login/step2.png';
 import { TextButton } from '../ForgotPassword/styled';
+import { IconInfo } from '../IconInfo/IconInfo';
 const { Text } = Typography;
 export const LoginStep2 = props => {
     const { loginData, domainLogin, codeKey = 'code', token = '', username = '', onLoginSuccess, onLoginFail, backLogin, } = props;
@@ -114,18 +114,12 @@ export const LoginStep2 = props => {
             React.createElement(Flex, { vertical: true, gap: 10 },
                 React.createElement(Flex, { gap: 10, align: "center" },
                     React.createElement(Text, null, "Please enter the 6-digit code registered to your device."),
-                    React.createElement(Tooltip, { overlayInnerStyle: {
-                            width: 350,
-                            padding: 20,
-                        }, title: React.createElement(Flex, { vertical: true, align: "center", gap: 10 },
-                            React.createElement("img", { src: step2, alt: "", width: 200 }),
-                            React.createElement(Text, { style: {
-                                    marginTop: 20,
-                                    textAlign: 'center',
-                                } },
-                                "Open Google Authenticator and enter the code from ",
-                                React.createElement("b", null, "antsomi.com"))), color: "#fff", placement: "top" },
-                        React.createElement(Icon, { type: "icon-ants-info-outline" }))),
+                    React.createElement(IconInfo, { image: step2, title: React.createElement(Text, { style: {
+                                marginTop: 20,
+                                textAlign: 'center',
+                            } },
+                            "Open Google Authenticator and enter the code from ",
+                            React.createElement("b", null, "antsomi.com")) })),
                 React.createElement(Input, { maxLength: 6, placeholder: "Enter Code Here", value: state.code, onChange: e => {
                         setState(draft => {
                             draft.code = e.target.value;
@@ -138,7 +132,7 @@ export const LoginStep2 = props => {
                             draft.isTrust = e.target.checked;
                         });
                     } },
-                    React.createElement(Text, null, "Don't ask again on this browser")))), footer: React.createElement(Flex, { vertical: true, gap: 50 },
+                    React.createElement(Text, null, `Don't ask again on this browser`)))), footer: React.createElement(Flex, { vertical: true, gap: 50 },
             React.createElement(Flex, { vertical: true, gap: 15 },
                 React.createElement(Button, { type: "primary", onClick: signIn }, "Verify"),
                 React.createElement(Button, { onClick: handleBack }, "Back to login")),

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

@@ -4,10 +4,7 @@ interface SetupGGAuthenticatorProps {
     domainLogin: string;
     token?: string;
     userId: string;
-    loginData: {
-        personal?: Partial<LoginData>;
-        token?: string;
-    };
+    loginData: Partial<LoginData>;
     onSkipSetupGGAuthenticator?: () => void;
     onSetupGGAuthenticatorDone?: (data: any) => void;
 }

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

@@ -1,9 +1,8 @@
 // Libraries
 import React, { useState, useEffect, useRef } from 'react';
 import axios from 'axios';
-import { Button, Flex, Input, Tooltip, Typography } from 'antd';
+import { Button, Flex, Input, Typography } from 'antd';
 import { get } from 'lodash';
-import Icon from '@antscorp/icons';
 // Components
 import { WidgetLayout } from '../WidgetLayout';
 import { Avatar } from '../Avatar';
@@ -11,6 +10,7 @@ import imageStep1 from '../../../../../assets/images/components/Login/step1.png'
 import imageStep2 from '../../../../../assets/images/components/Login/step2.png';
 // Styled
 import { LabelStep } from './styled';
+import { IconInfo } from '../IconInfo/IconInfo';
 const { Text } = Typography;
 const SetupGGAuthenticator = props => {
     const { domainLogin, token = '', userId, loginData, onSkipSetupGGAuthenticator, onSetupGGAuthenticatorDone, } = props;
@@ -73,18 +73,12 @@ const SetupGGAuthenticator = props => {
                 React.createElement(LabelStep, null, "STEP 1"),
                 React.createElement(Flex, { align: "center", gap: 5 },
                     "Install Google Authenticator on your phone scan the code",
-                    React.createElement(Tooltip, { overlayInnerStyle: {
-                            width: 350,
-                            padding: 20,
-                        }, title: React.createElement(Flex, { vertical: true, align: "center" },
-                            React.createElement("img", { src: imageStep1, alt: "", width: 200 }),
-                            React.createElement(Text, { style: {
-                                    marginTop: 20,
-                                } },
-                                "Open ",
-                                React.createElement("b", null, "Google Authenticator"),
-                                " app on your phone and scan QR code.")), color: "#fff", placement: "top" },
-                        React.createElement(Icon, { type: "icon-ants-info-outline", color: "#595959" }))),
+                    React.createElement(IconInfo, { image: imageStep1, title: React.createElement(Text, { style: {
+                                marginTop: 20,
+                            } },
+                            "Open ",
+                            React.createElement("b", null, "Google Authenticator"),
+                            " app on your phone and scan QR code.") })),
                 qrCode ? (React.createElement(Flex, { vertical: true, align: "center", style: {
                         background: '#EEF5FC',
                         padding: 10,
@@ -98,15 +92,9 @@ const SetupGGAuthenticator = props => {
                 React.createElement(Flex, { align: "center", gap: 4 },
                     "Enter the 6-digit code from ",
                     React.createElement("span", { style: { fontWeight: 'bold' } }, "antsomi.com"),
-                    React.createElement(Tooltip, { overlayInnerStyle: {
-                            width: 350,
-                            padding: 20,
-                        }, title: React.createElement(Flex, { vertical: true, align: "center" },
-                            React.createElement("img", { src: imageStep2, alt: "", width: 200 }),
-                            React.createElement(Text, { style: {
-                                    marginTop: 20,
-                                } }, "Enter the code to confirm the connection to this account")), color: "#fff", placement: "top" },
-                        React.createElement(Icon, { type: "icon-ants-info-outline", color: "#595959" }))),
+                    React.createElement(IconInfo, { image: imageStep2, title: React.createElement(Text, { style: {
+                                marginTop: 20,
+                            } }, "Enter the code to confirm the connection to this account") })),
                 React.createElement(Input, { placeholder: "Input your code", onChange: e => {
                         setG2faCode(e.target.value.trim());
                         if (e.target.value.trim().length) {

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

@@ -1,10 +1,11 @@
 import React from 'react';
+import { LoginData } from '../../types';
 type TSignIn = {
     domainLogin: string;
     networkId?: string;
     urlLogo?: string;
     onForgotPassword?: () => void;
-    onLoginSuccess?: (data: any) => void;
+    onLoginSuccess?: (data: Partial<LoginData>) => void;
     onLoginFail?: (data: any) => void;
     userNameKey?: string;
     passwordKey?: string;

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

@@ -8,6 +8,7 @@ import { Label, WrapperImage } from '../../styled';
 // Images
 import logoAntsomi from '../../../../../assets/images/logo/antsomi_logo.png';
 import { Wrapper } from './styled';
+import { isMobile } from 'react-device-detect';
 export const SignIn = props => {
     const { domainLogin, networkId, urlLogo, onForgotPassword, onLoginSuccess, onLoginFail, userNameKey = 'user_name', passwordKey = 'password', } = props;
     const [form] = Form.useForm();
@@ -61,7 +62,8 @@ export const SignIn = props => {
         };
         xhr.send(JSON.stringify(params));
     };
-    return (React.createElement(Wrapper, null,
+    console.log({ isMobile });
+    return (React.createElement(Wrapper, { isMobile: isMobile },
         React.createElement(Flex, { align: "center", justify: "center" }, !isEmpty(urlLogo) ? (React.createElement("img", { src: urlLogo, style: { maxHeight: 39 }, alt: "" })) : typeof LOGO_NETWORK_DOMAIN !== 'undefined' && LOGO_NETWORK_DOMAIN !== '' ? (React.createElement("img", { src: LOGO_NETWORK_DOMAIN, style: { maxHeight: 39 }, alt: "" })) : (React.createElement(WrapperImage, { src: logoAntsomi, alt: "logosaS" }))),
         React.createElement(Form, { form: form, name: "login_form", onFinish: onFinish, scrollToFirstError: true, style: { width: '100%' } },
             React.createElement(Form.Item, { name: "email", rules: [

package/es/components/organism/Login/components/SignIn/styled.d.ts

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

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

@@ -4,6 +4,7 @@ export const Wrapper = styled.div `
   flex-direction: column;
   gap: 40px;
 
-  padding: 60px 20px;
   width: 100%;
+
+  ${(props) => !props.isMobile ? 'padding: 60px 20px' : ' padding: 60px 0px'}
 `;

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

@@ -1,5 +1,9 @@
 /// <reference types="react" />
-export declare const WrapperLogin: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const LoginMain: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const LoginBannerZone: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperLogin: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    isMobile: boolean;
+}, never>;
 export declare const WrapperImage: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Image: import("styled-components").StyledComponent<"img", any, {}, never>;

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

@@ -1,12 +1,22 @@
 import { Flex } from 'antd';
 import styled from 'styled-components';
+export const LoginMain = styled(Flex) `
+  background: #eaf1fb;
+  height: 100vh;
+  width: 100%;
+`;
+export const LoginBannerZone = styled.div `
+  display: flex;
+  flex: 1;
+`;
 export const WrapperLogin = styled(Flex) `
   width: 400px;
   height: 100%;
   overflow-y: auto;
   background-color: white;
   padding: 40px 30px;
-  box-shadow: 3px 0px 9px 0px #002e5926;
+
+  ${(props) => !props.isMobile ? 'box-shadow: 3px 0px 9px 0px #002e5926' : ''}
 `;
 export const WrapperImage = styled.img `
   width: 180px;

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

@@ -11,8 +11,13 @@ export interface LoginData {
         email: string;
         avatar: string;
         user_id: string;
+        role: string;
+        language: string;
         [key: string]: any;
     };
+    G2FA_user: number;
+    G2FA: number;
+    status: boolean;
     [key: string]: any;
 }
 export interface Account {
@@ -23,7 +28,7 @@ export interface LoginComponentProps {
     loginDomain: string;
     apiDomain?: string;
     networkId?: string | boolean;
-    onLoginSuccess?: (data: any) => void;
+    onLoginSuccess?: (data: Partial<LoginData>) => void;
     onLoginFail?: (data: any) => void;
     reCaptchaKey?: string;
     p_id?: string;

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -391,6 +391,15 @@ export const GlobalStyle = () => {
       .antsomi-picker {
         border-width: 0 0 1px 0 !important;
         box-shadow: none !important;
+
+        > .antsomi-picker-input {
+          input {
+            &::placeholder {
+              font-style: normal !important;
+              font-size: ${fontSize}px !important;
+            }
+          }
+        }
       }
 
       .antsomi-picker:hover,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.648",
+  "version": "1.3.5-beta.650",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -113,6 +113,7 @@
     "react-color": "2.19.3",
     "react-cookie": "^7.1.4",
     "react-custom-scrollbars": "^4.2.1",
+    "react-device-detect": "^2.2.3",
     "react-draggable": "^4.4.5",
     "react-frame-component": "^5.2.6",
     "react-google-recaptcha": "^3.1.0",