@antscorp/antsomi-ui 1.3.6-beta.231 → 1.3.6-beta.232

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

@@ -17,7 +17,7 @@ export const AuthenticateResult = props => {
             backLogin();
         }
     };
-    return (_jsx(WidgetLayout, { header: null, isShowLogo: false, title: _jsx("div", { style: { marginBottom: 100 } }), gapContent: 100, content: _jsx(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: _jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: authenSuccessImg, alt: "" }), _jsx(Title, { isMobile: isMobile, children: "Authenticated!" }), _jsxs(Text, { isMobile: isMobile, children: ["Sign in in as ", get(loginData, 'personal.email')] })] }) }), footer: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
+    return (_jsx(WidgetLayout, { header: null, isShowLogo: false, title: _jsx("div", { style: { marginBottom: 100 } }), gapContent: 100, content: _jsx(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: _jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: authenSuccessImg, alt: "" }), _jsx(Title, { isMobile: isMobile, children: "Authenticated!" }), _jsxs(Text, { isMobile: isMobile, children: ["Sign in in as ", get(loginData, 'personal.full_name')] })] }) }), footer: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
                     fontSize: isMobile ? '16px' : '14px',
                 }, children: "Sign in with a different account" }) }) }));
 };

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

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

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

@@ -1,7 +1,7 @@
 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 } from 'lodash';
+import { get, isEmpty } from 'lodash';
 import { useImmer } from 'use-immer';
 import { isMobile } from 'react-device-detect';
 import { useCountdown } from '@antscorp/antsomi-ui/es/hooks';
@@ -22,7 +22,6 @@ const initialState = {
     isTrust: false,
     codeError: true,
     isLoading: false,
-    count: 0,
     isShowResend: true,
     isDisableResend: false,
 };
@@ -91,10 +90,13 @@ export const LoginWithEmail = ({ loginData, domainLogin, codeKey = 'code', token
     }, [setState]);
     const signIn = useCallback(() => {
         errorRef.current = true;
-        setState(draft => {
-            draft.count += 1;
-        });
-        if (!token || state.codeError) {
+        if (!token) {
+            return;
+        }
+        if (isEmpty(state.code)) {
+            setState(draft => {
+                draft.codeError = true;
+            });
             return;
         }
         const verificationParams = {
@@ -113,13 +115,13 @@ export const LoginWithEmail = ({ loginData, domainLogin, codeKey = 'code', token
         });
     }, [
         token,
-        state.codeError,
         state.code,
         codeKey,
         onChangeLoading,
         domainLogin,
         handleAuthenticationSuccess,
         setState,
+        networkId,
     ]);
     const handleBack = useCallback(() => {
         backLogin?.();
@@ -140,17 +142,20 @@ export const LoginWithEmail = ({ loginData, domainLogin, codeKey = 'code', token
         });
         errorRef.current = true;
     }, [setState]);
-    // Validate code on change
-    useEffect(() => {
-        setState(draft => {
-            draft.codeError = !state.code?.trim();
-        });
-    }, [state.code, setState]);
-    const renderErrorMessages = () => errorMessageCode && (_jsx(TextAntsomiUI, { type: "danger", children: LOGIN_ERROR_TYPES[errorMessageCode].message }));
+    const renderErrorMessages = () => {
+        let errMsg = null;
+        if (state.codeError && isEmpty(state.code)) {
+            errMsg = _jsx(TextAntsomiUI, { type: "danger", children: "Invalid code, please try again." });
+        }
+        if (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: 'pointer' }, children: "Resend code" })) : (`You can resend the code in ${seconds} seconds`)] }) }));
+        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." })) : (`You can resend the 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 }), renderErrorMessages()] }));
     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" })] }));

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

@@ -1 +1,2 @@
 export * from './BasicLogin';
+export * from './components';

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

@@ -1 +1,2 @@
 export * from './BasicLogin';
+export * from './components';

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

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

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

@@ -1,7 +1,7 @@
 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 } from 'lodash';
+import { get, isEmpty } from 'lodash';
 import { useImmer } from 'use-immer';
 import { useCookies } from 'react-cookie';
 import { isMobile } from 'react-device-detect';
@@ -24,7 +24,7 @@ const { Text: TextAntsomiUI } = Typography;
 const initialState = {
     code: '',
     isTrust: false,
-    codeError: true,
+    codeError: false,
     isLoading: false,
     countResend: 0,
     isShowResend: true,
@@ -88,7 +88,7 @@ export const LoginWithEmail = ({ loginData, domainLogin, codeKey = 'code', token
             }
             onLoginFail?.();
         }
-    }, [state.isTrust, onLoginSuccess, onLoginFail, handleTrustDevice, setState]);
+    }, [onLoginSuccess, onLoginFail, handleTrustDevice, setState]);
     const makeAuthenticationRequest = useCallback((verificationParams, trustKey) => {
         const url = `${domainLogin}api/account/authenticate`;
         const request = new XMLHttpRequest();
@@ -110,7 +110,13 @@ export const LoginWithEmail = ({ loginData, domainLogin, codeKey = 'code', token
     }, [domainLogin, setState, handleAuthenticationSuccess]);
     const signIn = useCallback(() => {
         errorRef.current = true;
-        if (!token || state.codeError) {
+        if (!token) {
+            return;
+        }
+        if (isEmpty(state.code)) {
+            setState(draft => {
+                draft.codeError = true;
+            });
             return;
         }
         const trustKey = state.isTrust ? generateGuid() : null;
@@ -124,15 +130,7 @@ export const LoginWithEmail = ({ loginData, domainLogin, codeKey = 'code', token
             draft.isLoading = true;
         });
         makeAuthenticationRequest(verificationParams, trustKey);
-    }, [
-        token,
-        state.codeError,
-        state.code,
-        state.isTrust,
-        codeKey,
-        setState,
-        makeAuthenticationRequest,
-    ]);
+    }, [token, state.code, state.isTrust, codeKey, setState, makeAuthenticationRequest]);
     const handleBack = useCallback(() => {
         backLogin?.();
     }, [backLogin]);
@@ -158,17 +156,20 @@ export const LoginWithEmail = ({ loginData, domainLogin, codeKey = 'code', token
             draft.isTrust = e.target.checked;
         });
     }, [setState]);
-    // Validate code on change
-    useEffect(() => {
-        setState(draft => {
-            draft.codeError = !state.code || !state.code.trim();
-        });
-    }, [state.code, setState]);
-    const renderErrorMessages = () => errorMessageCode && (_jsx(TextAntsomiUI, { type: "danger", children: LOGIN_ERROR_TYPES[errorMessageCode].message }));
+    const renderErrorMessages = () => {
+        let errMsg = null;
+        if (state.codeError && isEmpty(state.code)) {
+            errMsg = _jsx(TextAntsomiUI, { type: "danger", children: "Invalid code, please try again." });
+        }
+        if (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: 'pointer' }, children: "Resend code" })) : (`You can resend the code in ${seconds} seconds`)] }) }));
+        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." })) : (`You can resend the 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 : 13, 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 }), renderErrorMessages()] }), _jsx(Checkbox, { checked: state.isTrust, onChange: handleTrustChange, 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, loading: state.isLoading, 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',

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

@@ -35,18 +35,18 @@ export const LOGIN_ERROR_TYPES = {
     },
     SEND_LIMIT_REACHED: {
         type: 'SEND_LIMIT_REACHED',
-        message: 'Requested too many times. Please try again tomorrow.',
+        message: 'Requested too many times. Please try again.',
     },
     TOO_MANY_ATTEMPTS: {
         type: 'TOO_MANY_ATTEMPTS',
-        message: 'Too many incorrect codes. Please try again in a few minutes.',
+        message: 'Too many incorrect codes. Try again in a few minutes.',
     },
     INVALID_CODE: {
         type: 'INVALID_CODE',
-        message: 'Invalid verification code',
+        message: 'Invalid code, please try again.',
     },
     RESEND_TOO_SOON: {
         type: 'RESEND_TOO_SOON',
-        message: 'Too many resends. Please try again in a few minutes.',
+        message: 'Too many requests. Please contact Antsomi Support.',
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.6-beta.231",
+  "version": "1.3.6-beta.232",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",