@antscorp/antsomi-ui 2.0.101 → 2.0.103

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

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

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

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

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

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

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

@@ -1,34 +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 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%;
+export const BlockEnd = styled.div `
+  border-top: 1px solid #b8cfe6;
+  overflow: hidden;
+  width: 100%;
 `;

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-export const WrapperList = styled.div `
-  padding: 10px;
-  height: 100%;
+export const WrapperList = styled.div `
+  padding: 10px;
+  height: 100%;
 `;

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

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

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

@@ -0,0 +1,211 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useCallback } from 'react';
+import { Button, Checkbox, Flex, Typography } from 'antd';
+import { get, isEmpty } from 'lodash';
+import { useImmer } from 'use-immer';
+import { useCookies } from 'react-cookie';
+import { isMobile } from 'react-device-detect';
+import { useCountdown } from '@antscorp/antsomi-ui/es/hooks';
+// Components
+import { WidgetLayout } from '../WidgetLayout';
+import { Avatar } from '../Avatar';
+// Images
+import loginStep2Image from '../../../../../assets/images/components/Login/loginStep2.png';
+import { StyleButton, StyleInput, Text } from '../../styled';
+import { TextInfo } from './styled';
+import { Title } from '../WidgetLayout/styled';
+import { maskEmail } from '../ChooseMethod/utils';
+import { generateGuid } from '../../utils';
+import { LOGIN_ERROR_TYPES } from '../../constants';
+// Constants
+const COUNTDOWN_SECONDS = 59;
+const CODE_LENGTH = 6;
+const { Text: TextAntsomiUI } = Typography;
+const initialState = {
+    code: '',
+    isTrust: false,
+    codeError: false,
+    isLoading: false,
+    countResend: 0,
+    isShowResend: false,
+    isDisableResend: false,
+    isTooManyMistakes: false,
+};
+export const LoginWithEmail = ({ loginData, domainLogin, codeKey = 'code', token = '', username = '', onLoginSuccess, onLoginFail, backLogin, sendCodeVerifyToEmail, }) => {
+    const [state, setState] = useImmer(initialState);
+    const [cookies, setCookie] = useCookies();
+    const errorRef = useRef(false);
+    const [errorMessageCode, setErrorMessageCode] = React.useState(null);
+    const errorCodeSend = get(loginData, 'errorCode', '');
+    const retryAfter = get(loginData, 'retryAfter');
+    const userEmail = get(loginData, 'personal.email', '');
+    const userAvatar = get(loginData, 'personal.avatar');
+    const userFullName = get(loginData, 'personal.full_name');
+    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 handleTrustDevice = useCallback((trustKey) => {
+        const trustKeyCookieName = `ogs-${btoa(username)}`;
+        localStorage.setItem(trustKeyCookieName, trustKey);
+        setCookie(trustKeyCookieName, trustKey, { path: '/' });
+    }, [username, setCookie]);
+    const handleAuthenticationSuccess = useCallback((response, trustKey) => {
+        if (response.code === 200) {
+            if (trustKey) {
+                handleTrustDevice(trustKey);
+            }
+            onLoginSuccess?.(response.data);
+        }
+        else {
+            if (LOGIN_ERROR_TYPES[response.data.error]) {
+                setErrorMessageCode(response.data.error);
+                if (response.data.error === 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);
+                }
+            }
+            onLoginFail?.();
+        }
+    }, [onLoginSuccess, onLoginFail, handleTrustDevice, setState, resetCountDownIncorrectAttempts]);
+    const makeAuthenticationRequest = useCallback((verificationParams, trustKey) => {
+        const url = `${domainLogin}api/account/authenticate`;
+        const request = new XMLHttpRequest();
+        request.open('POST', url, true);
+        request.setRequestHeader('Content-Type', 'application/json');
+        request.withCredentials = false;
+        request.onreadystatechange = () => {
+            if (request.readyState === XMLHttpRequest.DONE) {
+                setState(draft => {
+                    draft.isLoading = false;
+                });
+                if (request.status === 200) {
+                    const response = JSON.parse(request.responseText);
+                    handleAuthenticationSuccess(response, trustKey);
+                }
+            }
+        };
+        request.send(JSON.stringify(verificationParams));
+    }, [domainLogin, setState, handleAuthenticationSuccess]);
+    const signIn = useCallback(() => {
+        errorRef.current = true;
+        if (!token) {
+            return;
+        }
+        if (isEmpty(state.code)) {
+            setState(draft => {
+                draft.codeError = true;
+            });
+            return;
+        }
+        const trustKey = state.isTrust ? generateGuid() : null;
+        const verificationParams = {
+            [codeKey]: state.code,
+            token,
+            auth_type: 'email',
+            trust_key: trustKey,
+        };
+        setState(draft => {
+            draft.isLoading = true;
+        });
+        makeAuthenticationRequest(verificationParams, trustKey);
+    }, [token, state.code, state.isTrust, codeKey, setState, makeAuthenticationRequest]);
+    const handleBack = useCallback(() => {
+        backLogin?.();
+    }, [backLogin]);
+    const onResendCode = useCallback(() => {
+        setState(draft => {
+            draft.isShowResend = false;
+            draft.code = '';
+            draft.codeError = false;
+            draft.countResend += 1;
+        });
+        resetAndStartWithTime(COUNTDOWN_SECONDS);
+        sendCodeVerifyToEmail();
+    }, [setState, resetAndStartWithTime, sendCodeVerifyToEmail]);
+    const handleCodeChange = useCallback((e) => {
+        const newCode = e.target.value;
+        setState(draft => {
+            draft.code = newCode;
+        });
+        errorRef.current = true;
+    }, [setState]);
+    const handleTrustChange = useCallback((e) => {
+        setState(draft => {
+            draft.isTrust = e.target.checked;
+        });
+    }, [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.`)] }) }));
+    };
+    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: userAvatar, name: userFullName, email: userEmail }), 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: "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(), _jsxs(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: [_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()] }), _jsx(Checkbox, { checked: state.isTrust, onChange: handleTrustChange, disabled: state.isTooManyMistakes, children: _jsx(TextInfo, { isMobile: isMobile, children: "Remember this browser for future logins" }) })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { marginTop: isMobile ? 20 : 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" })] })] })] }), footer: _jsx(Flex, { vertical: true, gap: 115, children: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
+                        fontSize: isMobile ? '16px' : '14px',
+                    }, children: "Sign in with a different account" }) }) }) }));
+};

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

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

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

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

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

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

package/es/components/organism/Login/components/LoginWithEmail/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/Login/components/{LoginStep2/LoginStep2.d.ts → LoginWithGG/LoginWithGG.d.ts}

@@ -10,5 +10,5 @@ interface TLoginStep2 {
     backLogin?: () => void;
     loginData?: Partial<LoginData>;
 }
-export declare const LoginStep2: React.FC<TLoginStep2>;
+export declare const LoginWithGG: React.FC<TLoginStep2>;
 export {};

package/es/components/organism/Login/components/{LoginStep2/LoginStep2.js → LoginWithGG/LoginWithGG.js}

@@ -17,8 +17,9 @@ import step2 from '../../../../../assets/images/components/Login/step2.png';
 import { StyleButton, StyleInput, Text } from '../../styled';
 import { TextInfo } from './styled';
 import { Title } from '../WidgetLayout/styled';
+import { generateGuid } from '../../utils';
 const { Text: TextAntsomiUI } = Typography;
-export const LoginStep2 = props => {
+export const LoginWithGG = props => {
     const { loginData, domainLogin, codeKey = 'code', token = '', username = '', onLoginSuccess, onLoginFail, backLogin, } = props;
     const [state, setState] = useImmer({
         code: '',
@@ -43,13 +44,6 @@ export const LoginStep2 = props => {
             trust_key: state.isTrust ? generateGuid() : null,
         };
         const url = `${domainLogin}api/account/authenticate`;
-        const data = {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(verificationParams),
-        };
         setState(draft => {
             draft.isLoading = true;
         });
@@ -87,14 +81,6 @@ export const LoginStep2 = props => {
         };
         request.send(JSON.stringify(verificationParams));
     };
-    const generateGuid = () => {
-        function s4() {
-            return Math.floor((1 + Math.random()) * 0x10000)
-                .toString(16)
-                .substring(1);
-        }
-        return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
-    };
     const handleBack = () => {
         if (backLogin && typeof backLogin === 'function') {
             backLogin();
@@ -112,7 +98,7 @@ export const LoginStep2 = props => {
             });
         }
     }, [state.code]);
-    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: [_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: {
+    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 : 15, children: [_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" })] }) }) })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: [_jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(StyleInput, { isMobile: isMobile, maxLength: 6, placeholder: "Input your code", value: state.code, onChange: e => {
@@ -124,7 +110,7 @@ export const LoginStep2 = props => {
                                         setState(draft => {
                                             draft.isTrust = e.target.checked;
                                         });
-                                    }, children: _jsx(TextInfo, { isMobile: isMobile, children: "Remember this browser for future logins" }) })] })] })] }), footer: _jsxs(Flex, { vertical: true, gap: 115, children: [_jsxs(Flex, { vertical: true, gap: isMobile ? 30 : 15, children: [_jsx(StyleButton, { isMobile: isMobile, type: "primary", onClick: signIn, children: "Verify" }), _jsx(StyleButton, { isMobile: isMobile, onClick: handleBack, type: "text", children: "Back to login" })] }), _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
-                            fontSize: isMobile ? '16px' : '14px',
-                        }, children: "Sign in with a different account" }) })] }) }));
+                                    }, children: _jsx(TextInfo, { isMobile: isMobile, children: "Remember this browser for future logins" }) })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { marginTop: isMobile ? 20 : 15 }, children: [_jsx(StyleButton, { isMobile: isMobile, type: "primary", onClick: signIn, children: "Verify" }), _jsx(StyleButton, { isMobile: isMobile, onClick: handleBack, type: "text", children: "Back to login" })] })] })] }), footer: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
+                    fontSize: isMobile ? '16px' : '14px',
+                }, children: "Sign in with a different account" }) }) }));
 };

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

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

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

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

package/es/components/organism/Login/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/Login/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/Login/components/SetupGGAuthenticator/SetupGGAuthenticator.js

@@ -88,7 +88,7 @@ const SetupGGAuthenticator = props => {
                                     borderRadius: 10,
                                 } }) })) : null] }), _jsxs(Flex, { vertical: true, gap: 13, children: [_jsx(LabelStep, { isMobile: isMobile, children: "STEP 2" }), _jsxs(Flex, { align: "center", gap: 5, children: [_jsxs(Text, { isMobile: isMobile, color: "#595959", children: ["Enter the 6-digit code from ", _jsx("span", { style: { fontWeight: 'bold' }, children: "antsomi.com" })] }), _jsx(IconInfo, { image: imageStep2, title: _jsx(TextAntsomiUI, { style: {
                                             marginTop: 20,
-                                        }, children: _jsx(Text, { isMobile: isMobile, children: "Enter the code to confirm the connection to this account" }) }) })] }), _jsx(StyleInput, { isMobile: isMobile, placeholder: "Input your code", onChange: e => {
+                                        }, children: _jsx(Text, { isMobile: isMobile, children: "Enter the code to confirm the connection to this account" }) }) })] }), _jsx(StyleInput, { isMobile: isMobile, maxLength: 6, placeholder: "Input your code", onChange: e => {
                                 setG2faCode(e.target.value.trim());
                                 if (e.target.value.trim().length) {
                                     setCodeError(false);

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

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
-export const LabelStep = styled.span `
-  color: #005eb8;
-  font-size: ${(props) => (props.isMobile ? '16px' : '14px')};
-  font-weight: 500;
+export const LabelStep = styled.span `
+  color: #005eb8;
+  font-size: ${(props) => (props.isMobile ? '16px' : '14px')};
+  font-weight: 500;
 `;
-export const Link = styled.a `
-  text-decoration: underline;
-  padding-right: 4px;
+export const Link = styled.a `
+  text-decoration: underline;
+  padding-right: 4px;
 `;

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

@@ -1,10 +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'}
+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/Login/components/VerifyAccount/styled.js

@@ -1,17 +1,17 @@
 import { Form } from 'antd';
 import styled from 'styled-components';
-export const WrapperForm = styled(Form) `
-  .antsomi-form-item-row {
-    flex-direction: column;
-  }
-
-  .antsomi-form-item .antsomi-form-item-label > label::after {
-    content: '' !important;
-  }
+export const WrapperForm = styled(Form) `
+  .antsomi-form-item-row {
+    flex-direction: column;
+  }
+
+  .antsomi-form-item .antsomi-form-item-label > label::after {
+    content: '' !important;
+  }
 `;
-export const LabelRequire = styled.span `
-  color: #595959;
-  .icon {
-    color: red;
-  }
+export const LabelRequire = styled.span `
+  color: #595959;
+  .icon {
+    color: red;
+  }
 `;

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

@@ -12,7 +12,7 @@ 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 }), content, _jsx(Flex, { vertical: true, style: {
-                            paddingBottom: '40px',
-                        }, children: footer })] })] }));
+                        }, 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/Login/components/WidgetLayout/styled.js

@@ -1,22 +1,22 @@
 import { Flex } from 'antd';
 import styled from 'styled-components';
-export const Title = styled.div `
-  font-size: ${(props) => (props.isMobile ? '20px' : '18px')};
-  font-weight: 700;
-  color: #005eb8;
-  text-align: center;
+export const Title = styled.div `
+  font-size: ${(props) => (props.isMobile ? '20px' : '18px')};
+  font-weight: 700;
+  color: #005eb8;
+  text-align: center;
 `;
-export const WidgetLayoutMain = styled(Flex) `
-  position: relative;
-
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-
-  .sticky-footer {
-    margin-top: 50px;
-    bottom: 0px;
-    width: 100%;
-    z-index: 100;
-  }
+export const WidgetLayoutMain = styled(Flex) `
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  .sticky-footer {
+    margin-top: 50px;
+    bottom: 0px;
+    width: 100%;
+    z-index: 100;
+  }
 `;

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

@@ -3,6 +3,8 @@ export * from './ForgotPassword';
 export * from './SignIn';
 export * from './VerifyAccount';
 export * from './SetupGGAuthenticator';
-export * from './LoginStep2';
+export * from './LoginWithGG';
 export * from './LoginSelectPortal';
 export * from './Logo';
+export * from './ChooseMethod';
+export * from './LoginWithEmail';

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

@@ -3,6 +3,8 @@ export * from './ForgotPassword';
 export * from './SignIn';
 export * from './VerifyAccount';
 export * from './SetupGGAuthenticator';
-export * from './LoginStep2';
+export * from './LoginWithGG';
 export * from './LoginSelectPortal';
 export * from './Logo';
+export * from './ChooseMethod';
+export * from './LoginWithEmail';