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

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

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

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Typography } from 'antd';
+import { AvatarImage } from '../../styled';
+import { isMobile } from 'react-device-detect';
+const { Text } = Typography;
+export const Avatar = props => {
+    const { image, email, name } = props;
+    return (_jsxs(Flex, { vertical: true, gap: 5, align: "center", children: [_jsx(AvatarImage, { src: image, alt: "" }), _jsx(Text, { style: {
+                    fontSize: isMobile ? 16 : 14,
+                }, children: name }), _jsxs(Text, { style: { color: '#595959', fontSize: isMobile ? 14 : 12 }, children: [" ", email, " "] })] }));
+};

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

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

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

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

package/es/components/organism/LoginV2/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/LoginV2/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/LoginV2/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/LoginV2/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/LoginV2/components/ChooseMethod/index.d.ts

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

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

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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const TextInfo: import("styled-components").StyledComponent<"span", any, {
+    isMobile: boolean;
+}, never>;
+export declare const SubTitle: import("styled-components").StyledComponent<"span", any, {
+    isMobile: boolean;
+}, never>;
+export declare const BlockMethod: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    disable?: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,24 @@
+import { Flex } from 'antd';
+import styled from 'styled-components';
+export const TextInfo = styled.span `
+  color: #7f7f7f;
+  font-size: ${(props) => (props.isMobile ? ' 13px !important' : '11px')};
+`;
+export const SubTitle = styled.span `
+  color: #005eb8;
+  font-size: ${(props) => (props.isMobile ? ' 16px ' : '14px')};
+  font-weight: 500;
+`;
+export const BlockMethod = styled(Flex) `
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  cursor: ${props => (props.disable ? 'not-allowed' : 'pointer')};
+  border-radius: 10px;
+
+  opacity: ${props => (props.disable ? '0.5' : '1')};
+
+  &:hover {
+    background-color: ${props => (props.disable ? '#f2f2f2' : '#e6f0ff')};
+  }
+`;

package/es/components/organism/LoginV2/components/ChooseMethod/utils.d.ts

@@ -0,0 +1 @@
+export declare const maskEmail: (email: string) => string;

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

@@ -0,0 +1 @@
+export const maskEmail = (email) => email.replace(/(.)[^@]*(.@.).*(.)/, '$1****$2*******$3.');

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

@@ -0,0 +1,14 @@
+import React from 'react';
+type TForgotPassword = {
+    domainLogin: string;
+    networkId?: string;
+    reCaptchaKey: string;
+    p_id?: string;
+    callbackUrl?: string;
+    onResendSuccess?: (data: any) => void;
+    backLogin?: () => void;
+    onResendFail?: (data?: any) => void;
+    scaleCaptcha?: number;
+};
+declare const ForgotPassword: React.FC<TForgotPassword>;
+export default ForgotPassword;

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

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useImmer } from 'use-immer';
+import ReCAPTCHA from 'react-google-recaptcha';
+import axios from 'axios';
+import { Flex, Typography } from 'antd';
+import { isMobile } from 'react-device-detect';
+import qs from 'qs';
+// Components
+import { WidgetLayout } from '../WidgetLayout';
+import forgotPasswordImage from '../../../../../assets/images/components/Login/forgot_password.png';
+import emailSentImage from '../../../../../assets/images/components/Login/email.png';
+// Styled
+import { Image, StyleButton, StyleInput, WrapperContent } from '../../styled';
+// Utils
+import { isUrl } from '../../utils';
+const { Text } = Typography;
+const ForgotPassword = props => {
+    const { domainLogin, reCaptchaKey, backLogin, callbackUrl, onResendSuccess, onResendFail, p_id, networkId, scaleCaptcha, } = props;
+    const errorRef = useRef({
+        email: false,
+        captcha: false,
+    });
+    const forgotUrl = `${domainLogin}api/account/forgot`;
+    const [state, setState] = useImmer({
+        reCaptcha: '',
+        errors: {
+            email: '',
+            captcha: '',
+        },
+        loginError: null,
+        email: '',
+        isSendDone: false,
+        loading: false,
+    });
+    const validate = (field) => {
+        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',
+                        };
+                    });
+                }
+                else {
+                    setState(draft => {
+                        draft.errors = {
+                            ...draft.errors,
+                            email: '',
+                        };
+                    });
+                }
+            }
+            else {
+                setState(draft => {
+                    draft.errors = {
+                        ...draft.errors,
+                        email: 'Please enter your email',
+                    };
+                });
+            }
+        }
+    };
+    useEffect(() => {
+        validate('email');
+    }, [state.email]);
+    const onCaptchaChange = (value) => {
+        setState(draft => {
+            draft.reCaptcha = value;
+            draft.errors.captcha = false;
+            draft.loginError = null;
+        });
+    };
+    const onExpiredCaptcha = () => {
+        setState(draft => {
+            draft.reCaptcha = '';
+            draft.errors.captcha = true;
+            draft.loginError = null;
+        });
+    };
+    const onChangeLoading = value => {
+        setState(draft => {
+            draft.loading = value;
+        });
+    };
+    const setIsSendDone = value => {
+        setState(draft => {
+            draft.isSendDone = value;
+        });
+    };
+    const setLoginError = (value) => {
+        setState(draft => {
+            draft.loginError = value;
+        });
+    };
+    const handleBack = () => {
+        if (backLogin && typeof backLogin === 'function') {
+            backLogin();
+        }
+    };
+    const signIn = (event, isResend = false) => {
+        const { email, reCaptcha } = state;
+        errorRef.current = {
+            email: true,
+            captcha: true,
+        };
+        validate();
+        if (!isResend && (!reCaptcha || !reCaptcha.trim())) {
+            setState(prevState => ({
+                ...prevState,
+                errors: {
+                    ...prevState.errors,
+                    captcha: true,
+                },
+            }));
+            return;
+        }
+        if (state.errors.email) {
+            return;
+        }
+        const requestParams = {
+            action: isResend ? 're-sendmail' : undefined,
+            email,
+            reCaptchaResponse: !isResend ? reCaptcha : undefined,
+            network_id: networkId,
+            p_id: p_id || null,
+            callbackUrl: isUrl(callbackUrl)
+                ? callbackUrl
+                : `${window.location.origin}${window.location.pathname}`,
+        };
+        const url = forgotUrl;
+        const request = {
+            url,
+            data: qs.stringify(requestParams),
+            method: 'POST',
+        };
+        onChangeLoading(true);
+        axios(request)
+            .then(response => {
+            onChangeLoading(false);
+            const { data } = response;
+            if (data && data.data) {
+                if (onResendSuccess && typeof onResendSuccess === 'function') {
+                    onResendSuccess(data.data);
+                }
+                if (!isResend) {
+                    setIsSendDone(true);
+                }
+                else {
+                    handleBack();
+                }
+            }
+            else {
+                const errorMessage = +data.code === 132 ? 'Email does not exist in this portal' : 'Cannot send email';
+                setLoginError(errorMessage);
+                if (onResendFail && typeof onResendFail === 'function') {
+                    onResendFail(data.data);
+                }
+            }
+        })
+            .catch(() => {
+            setLoginError('Cannot send email');
+            if (onResendFail && typeof onResendFail === 'function') {
+                onResendFail();
+            }
+        })
+            .finally(() => {
+            onChangeLoading(false);
+        });
+    };
+    if (state.isSendDone) {
+        return (_jsx(WidgetLayout, { paddingContent: isMobile ? '0 30px' : '0 50px', title: "Email sent", header: _jsx(Image, { src: emailSentImage, alt: "email sent", width: 200, height: 200, style: {
+                    marginTop: 60,
+                } }), isShowLogo: false, content: _jsx(Text, { style: {
+                    fontSize: 14,
+                    color: '#595959',
+                    textAlign: 'center',
+                }, children: "Check your email and follow the instruction to retrieve your password" }), footer: _jsx(Flex, { vertical: true, gap: isMobile ? 30 : 15, children: _jsx(StyleButton, { isMobile: isMobile, onClick: handleBack, type: "primary", children: "Back to login" }) }) }));
+    }
+    return (_jsx(WidgetLayout, { paddingContent: isMobile ? '0 30px' : '0 50px', header: _jsx(Image, { src: forgotPasswordImage, alt: "forgot password", width: 200, height: 200, style: {
+                marginTop: 60,
+            } }), title: "Forgot your password?", content: _jsx(WrapperContent, { className: "forgot-password", children: _jsxs(Flex, { vertical: true, gap: 15, children: ["Enter your email and we\u2019ll help you reset the password.", _jsxs(Flex, { vertical: true, gap: 15, children: [_jsxs(Flex, { vertical: true, children: [_jsx(StyleInput, { isMobile: isMobile, maxLength: 255, placeholder: "Your email", value: state.email, onChange: e => {
+                                            setState(draft => {
+                                                draft.email = e.target.value;
+                                            });
+                                            errorRef.current.email = false;
+                                            setLoginError('');
+                                        }, status: errorRef.current.email && state.errors.email ? 'error' : undefined }), errorRef.current.email && state.errors.email ? (_jsx(Text, { type: "danger", style: { marginTop: 5 }, children: state.errors.email })) : null, state.loginError && (_jsx(Text, { type: "danger", style: { marginTop: 5 }, children: state.loginError }))] }), _jsxs(Flex, { vertical: true, gap: 5, children: [_jsx(Flex, { justify: "center", style: {
+                                            transform: isMobile ? 'scale(1)' : `scale(${scaleCaptcha})`,
+                                            transformOrigin: !isMobile ? '' : '0 0',
+                                        }, children: _jsx(ReCAPTCHA, { sitekey: reCaptchaKey, onChange: onCaptchaChange, onExpired: onExpiredCaptcha, size: "normal" }) }), state.errors.captcha && _jsx(Text, { type: "danger", children: "Please verify you are human" })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { paddingBottom: 40 }, children: [_jsx(StyleButton, { isMobile: isMobile, onClick: signIn, type: "primary", children: "Continue" }), _jsx(StyleButton, { isMobile: isMobile, type: "text", onClick: handleBack, children: "Back to login" })] })] })] }) }), isShowLogo: false, footer: null }));
+};
+export default ForgotPassword;

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

@@ -0,0 +1,2 @@
+import ForgotPassword from './ForgotPassword';
+export { ForgotPassword };

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

@@ -0,0 +1,2 @@
+import ForgotPassword from './ForgotPassword';
+export { ForgotPassword };

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

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

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+export const TextButton = styled.div `
+  text-align: center;
+  color: #005eb8;
+  font-weight: 700;
+
+  :hover {
+    cursor: pointer;
+  }
+`;

package/es/components/organism/LoginV2/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/LoginV2/components/IconInfo/IconInfo.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ModalV2 } from '@antscorp/antsomi-ui/es/components/molecules/ModalV2';
+import Icon from '@antscorp/icons';
+import { Flex, Tooltip, Typography } from 'antd';
+import { 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 (_jsxs(_Fragment, { children: [_jsx(ModalV2, { open: open, onCancel: () => setOpen(false), centered: true, footer: null, children: _jsxs(Flex, { vertical: true, align: "center", gap: 10, children: [_jsx("img", { src: image, alt: "", width: 200 }), title] }) }), _jsx(Icon, { type: "icon-ants-info-outline", onClick: () => setOpen(true), style: { fontSize: 20, color: '#595959' } })] }));
+    }
+    return (_jsx(Tooltip, { overlayInnerStyle: {
+            width: 350,
+            padding: 20,
+        }, title: _jsxs(Flex, { vertical: true, align: "center", gap: 10, children: [_jsx("img", { src: image, alt: "", width: 200 }), title] }), color: "#fff", placement: "top", children: _jsx(Icon, { type: "icon-ants-info-outline", style: { fontSize: 16, color: '#595959' } }) }));
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+type TItem = {
+    networkId: number;
+    networkName: string;
+    homePage: string;
+    logo: string;
+    onSelect: (data: TItem) => void;
+};
+export declare const Item: React.FC<TItem>;
+export {};

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Typography } from 'antd';
+import { BlockEnd, WrapperItem } from './styled';
+const { Text } = Typography;
+export const Item = props => {
+    const { networkId, networkName, homePage, logo, onSelect } = props;
+    return (_jsxs(WrapperItem, { onClick: () => onSelect(props), children: [_jsx("img", { src: logo, alt: "", width: "100%", height: 39 }), _jsx(BlockEnd, { children: _jsx(Flex, { align: "end", justify: "center", style: {
+                        marginTop: 10,
+                    }, children: _jsx(Text, { color: "#595959", ellipsis: {
+                            tooltip: networkName,
+                        }, children: networkName }) }) })] }));
+};

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+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-radius: 10px;
+  padding: 10px 10px 0 10px;
+
+  border: 1px solid #b8cfe6;
+  cursor: pointer;
+
+  img {
+    margin-bottom: 10px;
+    object-fit: contain;
+  }
+
+  &:hover {
+    background-color: #f2f9ff !important;
+  }
+
+  .antsomi-typography {
+    color: #595959 !important;
+  }
+`;
+export const BlockEnd = styled.div `
+  border-top: 1px solid #b8cfe6;
+  overflow: hidden;
+  width: 100%;
+`;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { LoginData } from '../../types';
+interface LoginSelectPortalProps {
+    loginData?: {
+        personal: Partial<LoginData>;
+        token?: string;
+    };
+    domainLogin: string;
+    networkId?: string;
+    listNetworks: any;
+    callbackSelectNetwork?: (data: any) => void;
+    backLogin: () => void;
+    onLoginSuccess: (data: any) => void;
+    onLoginFail: () => void;
+    userNameKey?: string;
+    passwordKey?: string;
+}
+export declare const LoginSelectPortal: React.FC<LoginSelectPortalProps>;
+export {};