@antscorp/antsomi-ui 2.0.101 → 2.0.102

package/es/components/organism/BasicLogin/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';
+import { EmailTemplateIcon, KeyValueIcon } from '@antscorp/antsomi-ui/es/components/icons';
+// Components
+import { WidgetLayout } from '../WidgetLayout';
+import { Method } from './Method';
+// Images
+import verifyImage from '../../../../../assets/images/components/Login/loginStep2.png';
+// Utils
+import { maskEmail } from './utils';
+import { Title } from '../WidgetLayout/styled';
+import { Text } from '../../styled';
+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: null, 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: verifyImage, 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(name), 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/BasicLogin/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/BasicLogin/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/BasicLogin/components/ChooseMethod/index.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback, useState } from 'react';
+import { Button, Flex, Typography } from 'antd';
+import { get, isEmpty } from 'lodash';
+import { useImmer } from 'use-immer';
+import { isMobile } from 'react-device-detect';
+import { useCountdown } from '@antscorp/antsomi-ui/es/hooks';
+// Components
+import { WidgetLayout } from '../WidgetLayout';
+import loginStep2Image from '../../../../../assets/images/components/Login/loginStep2.png';
+import { StyleButton, StyleInput, Text } from '../../styled';
+import { Title } from '../WidgetLayout/styled';
+import { maskEmail } from '../ChooseMethod/utils';
+import { LOGIN_ERROR_TYPES } from '../../../Login/constants';
+import { makeAuthenticationRequest } from '../../utils';
+// Constants
+const COUNTDOWN_SECONDS = 59;
+const CODE_LENGTH = 6;
+const { Text: TextAntsomiUI } = Typography;
+const initialState = {
+    code: '',
+    isTrust: false,
+    codeError: false,
+    isLoading: false,
+    isShowResend: false,
+    isDisableResend: false,
+    isTooManyMistakes: false,
+};
+export const LoginWithEmail = ({ loginData, domainLogin, codeKey = 'code', token = '', onLoginSuccess, backLogin, onResendEmail, networkId, }) => {
+    const [state, setState] = useImmer(initialState);
+    const errorRef = useRef(false);
+    const [errorMessageCode, setErrorMessageCode] = useState(null);
+    const errorCodeSend = get(loginData, 'errorCode', '');
+    const retryAfter = get(loginData, 'retryAfter');
+    const userEmail = get(loginData, 'personal.email', '');
+    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 handleAuthenticationSuccess = useCallback((response) => {
+        if (response.code === 200) {
+            onLoginSuccess?.(response.data);
+        }
+        else {
+            const errorCode = LOGIN_ERROR_TYPES[response.data.error];
+            if (errorCode) {
+                if (errorCode.type === 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);
+                }
+                setErrorMessageCode(errorCode.type);
+            }
+        }
+    }, [onLoginSuccess, setState, resetCountDownIncorrectAttempts]);
+    const onChangeLoading = useCallback((isLoading) => {
+        setState(draft => {
+            draft.isLoading = isLoading;
+        });
+    }, [setState]);
+    const signIn = useCallback(() => {
+        errorRef.current = true;
+        if (!token) {
+            return;
+        }
+        if (isEmpty(state.code)) {
+            setState(draft => {
+                draft.codeError = true;
+            });
+            return;
+        }
+        const verificationParams = {
+            auth_type: 'email',
+            [codeKey]: state.code,
+            token,
+            trust_key: null,
+            app_id: networkId,
+        };
+        onChangeLoading(true);
+        makeAuthenticationRequest({
+            verificationParams,
+            domainLogin,
+            onLoading: onChangeLoading,
+            handleAuthenticationSuccess,
+        });
+    }, [
+        token,
+        state.code,
+        codeKey,
+        onChangeLoading,
+        domainLogin,
+        handleAuthenticationSuccess,
+        setState,
+        networkId,
+    ]);
+    const handleBack = useCallback(() => {
+        backLogin?.();
+    }, [backLogin]);
+    const onResendCode = useCallback(() => {
+        onResendEmail();
+        setState(draft => {
+            draft.isShowResend = false;
+            draft.code = '';
+            draft.codeError = false;
+        });
+        resetAndStartWithTime(COUNTDOWN_SECONDS);
+    }, [onResendEmail, setState, resetAndStartWithTime]);
+    const handleCodeChange = useCallback((e) => {
+        const newCode = e.target.value;
+        setState(draft => {
+            draft.code = newCode;
+        });
+        errorRef.current = true;
+    }, [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.`)] }) }));
+    };
+    const renderCodeInput = () => (_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()] }));
+    const renderActionButtons = () => (_jsxs(Flex, { vertical: true, gap: isMobile ? 30 : 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" })] }));
+    const renderAlternativeSignIn = () => (_jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
+                fontSize: isMobile ? '16px' : '14px',
+            }, children: "Sign in with a different account" }) }));
+    const renderContent = () => (_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(), _jsx(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: renderCodeInput() }), _jsx(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { marginTop: isMobile ? 20 : 15 }, children: renderActionButtons() })] })] }));
+    const renderFooter = () => renderAlternativeSignIn();
+    return (_jsx(WidgetLayout, { header: null, isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 30, content: renderContent(), footer: renderFooter() }));
+};

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

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

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

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

package/es/components/organism/{Login/components/LoginStep2 → BasicLogin/components/LoginWithEmail}/styled.js

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

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

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

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback } from 'react';
+import { Button, Flex, Typography } from 'antd';
+import { useImmer } from 'use-immer';
+import { isMobile } from 'react-device-detect';
+// Components
+import { WidgetLayout } from '../WidgetLayout';
+import { IconInfo } from '../../../Login/components/IconInfo';
+// Images
+import step2 from '../../../../../assets/images/components/Login/step2.png';
+import loginStep2Image from '../../../../../assets/images/components/Login/loginStep2.png';
+import { StyleButton, StyleInput, Text } from '../../styled';
+import { Title } from '../WidgetLayout/styled';
+import { makeAuthenticationRequest } from '../../utils';
+// Constants
+const CODE_LENGTH = 6;
+const { Text: TextAntsomiUI } = Typography;
+const initialState = {
+    code: '',
+    isTrust: false,
+    codeError: true,
+    isLoading: false,
+    count: 0,
+};
+export const LoginWithGG = ({ domainLogin, codeKey = 'code', token = '', onLoginSuccess, backLogin, networkId, }) => {
+    const [state, setState] = useImmer(initialState);
+    const errorRef = useRef(false);
+    const handleAuthenticationSuccess = useCallback((response) => {
+        if (response.code === 200) {
+            onLoginSuccess?.(response.data);
+        }
+        else {
+            setState(draft => {
+                draft.codeError = true;
+            });
+        }
+    }, [onLoginSuccess, setState]);
+    const onChangeLoading = useCallback((isLoading) => {
+        setState(draft => {
+            draft.isLoading = isLoading;
+        });
+    }, [setState]);
+    const signIn = useCallback(() => {
+        errorRef.current = true;
+        setState(draft => {
+            draft.count += 1;
+        });
+        if (!token || state.codeError) {
+            return;
+        }
+        const verificationParams = {
+            [codeKey]: state.code,
+            token,
+            trust_key: null,
+            app_id: networkId,
+        };
+        setState(draft => {
+            draft.isLoading = true;
+        });
+        makeAuthenticationRequest({
+            verificationParams,
+            domainLogin,
+            onLoading: onChangeLoading,
+            handleAuthenticationSuccess,
+        });
+    }, [
+        token,
+        state.codeError,
+        state.code,
+        codeKey,
+        networkId,
+        setState,
+        domainLogin,
+        onChangeLoading,
+        handleAuthenticationSuccess,
+    ]);
+    const handleBack = useCallback(() => {
+        backLogin?.();
+    }, [backLogin]);
+    const handleCodeChange = useCallback((e) => {
+        const newCode = e.target.value;
+        setState(draft => {
+            draft.code = newCode;
+        });
+        errorRef.current = true;
+    }, [setState]);
+    // Validate code on change
+    useEffect(() => {
+        setState(draft => {
+            draft.codeError = !state.code?.trim();
+        });
+    }, [state.code, setState]);
+    const renderInstructionSection = () => (_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" })] }) }) })] }));
+    const renderCodeInput = () => (_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 }), errorRef.current && state.codeError && (_jsx(TextAntsomiUI, { type: "danger", children: "Invalid code, please try again" }))] }));
+    const renderActionButtons = () => (_jsxs(Flex, { vertical: true, gap: isMobile ? 30 : 15, children: [_jsx(StyleButton, { isMobile: isMobile, type: "primary", onClick: signIn, loading: state.isLoading, children: "Verify" }), _jsx(StyleButton, { isMobile: isMobile, onClick: handleBack, type: "text", children: "Back to login" })] }));
+    const renderAlternativeSignIn = () => (_jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
+                fontSize: isMobile ? '16px' : '14px',
+            }, children: "Sign in with a different account" }) }));
+    const renderHeaderSection = () => (_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "Identity Verification Step" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For added security, we need to verify your identity." })] }));
+    const renderInputSection = () => (_jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [renderInstructionSection(), _jsx(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: renderCodeInput() }), _jsx(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { marginTop: isMobile ? 20 : 15 }, children: renderActionButtons() })] }));
+    const renderContent = () => (_jsxs(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: [renderHeaderSection(), renderInputSection()] }));
+    const renderFooter = () => renderAlternativeSignIn();
+    return (_jsx(WidgetLayout, { header: null, isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 30, content: renderContent(), footer: renderFooter() }));
+};

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

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

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

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

package/es/components/organism/BasicLogin/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/BasicLogin/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/BasicLogin/components/SignIn/SignIn.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { LoginData } from '../../types';
+type TSignIn = {
+    domainLogin: string;
+    networkId?: string;
+    onLoginSuccess?: (data: Partial<LoginData>) => void;
+    userNameKey?: string;
+    passwordKey?: string;
+    setAuthenInfo: (info: {
+        email: string;
+    }) => void;
+};
+export declare const SignIn: React.FC<TSignIn>;
+export {};

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useState } from 'react';
+import { Flex, Form } from 'antd';
+// Styled
+import { StyleButton, StyledForm, StyleInput, WrapperImage } from '../../styled';
+// Images
+import logoAntsomi from '../../../../../assets/images/logo/antsomi_logo.png';
+import { Wrapper } from './styled';
+import { isMobile } from 'react-device-detect';
+import Icon from '@antscorp/icons';
+export const SignIn = props => {
+    const { domainLogin, networkId, onLoginSuccess, userNameKey = 'user_name', passwordKey = 'password', setAuthenInfo, } = props;
+    const [form] = Form.useForm();
+    const loginUrl = `${domainLogin}api/account/authenticate`;
+    const [loginError, setLoginError] = useState(false);
+    const [isLoading, setLoading] = useState(false);
+    const onFinish = values => {
+        const { password, email } = values;
+        const params = {
+            [userNameKey]: email,
+            [passwordKey]: password,
+            app_id: networkId,
+        };
+        setAuthenInfo({
+            email,
+        });
+        setLoading(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) {
+                setLoading(false);
+            }
+            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+                const response = JSON.parse(xhr.responseText);
+                if (response?.data?.token) {
+                    if (onLoginSuccess && typeof onLoginSuccess === 'function') {
+                        onLoginSuccess({ ...response.data, isCheckG2FA: true, password });
+                    }
+                }
+                else {
+                    setLoginError(true);
+                }
+            }
+        };
+        xhr.send(JSON.stringify(params));
+    };
+    return (_jsxs(Wrapper, { isMobile: isMobile, children: [_jsx(Flex, { align: "center", justify: "center", children: _jsx(WrapperImage, { src: logoAntsomi, alt: "logosaS" }) }), _jsxs(StyledForm, { form: form, name: "login_form", onFinish: onFinish, scrollToFirstError: true, style: { width: '100%' }, isMobile: isMobile, validateTrigger: "onSubmit", children: [_jsx(Form.Item, { name: "email", rules: [
+                            {
+                                required: true,
+                                message: 'Please enter your email',
+                                pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+                            },
+                        ], children: _jsx(StyleInput, { "data-test-id": "email", isMobile: isMobile, placeholder: "Email" }) }), _jsx(Form.Item, { name: "password", rules: [
+                            { required: true, message: 'Please enter your password' },
+                            { min: 6, message: 'Password must be at least 6 characters long' },
+                        ], style: { marginTop: 15 }, children: _jsx(StyleInput.Password, { placeholder: "Password", "data-test-id": "password", iconRender: visible => visible ? (_jsx(Icon, { type: "icon-ants-eye", style: {
+                                    color: '#595959',
+                                } })) : (_jsx(Icon, { type: "icon-ants-invisible", style: {
+                                    color: '#595959',
+                                } })) }) }), loginError && (_jsx("span", { style: { color: 'red', fontSize: 11 }, children: "Email or password is invalid" })), _jsx(Flex, { style: { width: '100%', marginTop: '40px' }, vertical: true, className: "", children: _jsx(Form.Item, { children: _jsx(StyleButton, { isMobile: isMobile, type: "primary", htmlType: "submit", style: { width: '100%', marginBottom: isMobile ? 15 : 0 }, loading: isLoading, "data-test-id": "button__sign-in", children: "Sign in" }) }) })] })] }));
+};

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+export const Wrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+
+  width: 100%;
+
+  ${(props) => !props.isMobile ? 'padding: 100px 50px' : ' padding: 100px 30px'}
+`;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+type TWidgetLayout = {
+    header?: React.ReactNode | string;
+    title?: React.ReactNode | string;
+    content?: React.ReactNode | string;
+    isShowLogo?: boolean;
+    footer?: React.ReactNode;
+    urlLogo?: string;
+    gapContent?: number;
+    paddingContent?: string | number;
+};
+export declare const WidgetLayout: React.FC<TWidgetLayout>;
+export {};

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { Flex } from 'antd';
+import { isEmpty } from 'lodash';
+import { isMobile } from 'react-device-detect';
+// Styled
+import { Title, WidgetLayoutMain } from './styled';
+import { WrapperImage } from '../../styled';
+// Images
+import logoAntsomi from '../../../../../assets/images/logo/antsomi_logo.png';
+export const WidgetLayout = props => {
+    const { header, title, content, isShowLogo = true, footer, urlLogo, gapContent = 40, paddingContent = '0 30px', } = props;
+    return (_jsxs(WidgetLayoutMain, { vertical: true, gap: 40, children: [isShowLogo && (_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" })) })), _jsxs(Flex, { vertical: true, gap: gapContent, style: { height: '100%', padding: paddingContent }, children: [_jsx(Flex, { align: "center", justify: "center", style: {
+                            paddingTop: '40px',
+                        }, children: header }), _jsx(Title, { isMobile: isMobile, children: title }), _jsxs(Flex, { vertical: true, justify: "space-between", flex: 1, gap: gapContent, children: [content, _jsx(Flex, { vertical: true, style: {
+                                    paddingBottom: '40px',
+                                }, children: footer })] })] })] }));
+};

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

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

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

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