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

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

@@ -0,0 +1,3 @@
+export * from './OryMfa';
+export * from './OryRecovery';
+export * from './OryStatus';

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

@@ -0,0 +1,3 @@
+export * from './OryMfa';
+export * from './OryRecovery';
+export * from './OryStatus';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { LoginData } from '../../types';
+interface SetupGGAuthenticatorProps {
+    domainLogin: string;
+    token?: string;
+    userId: string;
+    loginData: Partial<LoginData>;
+    onSkipSetupGGAuthenticator?: () => void;
+    onSetupGGAuthenticatorDone?: (data: any) => void;
+    backLogin: () => void;
+    loadingSkip: boolean;
+}
+declare const SetupGGAuthenticator: React.FC<SetupGGAuthenticatorProps>;
+export default SetupGGAuthenticator;

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useState, useEffect, useRef } from 'react';
+import axios from 'axios';
+import { Button, Flex, Typography } from 'antd';
+import { get } from 'lodash';
+import { isAndroid, isMobile } from 'react-device-detect';
+// Components
+import { WidgetLayout } from '../WidgetLayout';
+import { Avatar } from '../Avatar';
+import { IconInfo } from '../IconInfo';
+import imageStep1 from '../../../../../assets/images/components/Login/step1.png';
+import imageStep2 from '../../../../../assets/images/components/Login/step2.png';
+// Styled
+import { LabelStep, Link } from './styled';
+import { StyleButton, StyleInput, Text } from '../../styled';
+const { Text: TextAntsomiUI } = Typography;
+const SetupGGAuthenticator = props => {
+    const { domainLogin, token = '', userId, loginData, onSkipSetupGGAuthenticator, onSetupGGAuthenticatorDone, backLogin, loadingSkip, } = props;
+    const [codeError, setCodeError] = useState(true);
+    const [count, setCount] = useState(0);
+    const [isLoading, setLoading] = useState(false);
+    const [qrCode, setQRCode] = useState('');
+    const [g2faCode, setG2faCode] = useState('');
+    const errorRef = useRef(false);
+    useEffect(() => {
+        getQRCode();
+    }, []);
+    const updateG2FA = () => {
+        errorRef.current = true;
+        setCount(prev => prev + 1);
+        if (!token || !userId || codeError) {
+            return;
+        }
+        const verifyParam = {
+            g2fa: 1,
+            g2fa_code: g2faCode,
+        };
+        const url = `${domainLogin}api/account/index/${userId}?_token=${token}&_user_id=${userId}&_account_id=${userId}`;
+        setLoading(true);
+        const xhr = new XMLHttpRequest();
+        xhr.open('PUT', url, true);
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        xhr.withCredentials = false;
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === XMLHttpRequest.DONE) {
+                setLoading(false);
+            }
+            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+                const res = JSON.parse(xhr.responseText);
+                if (res && res.code === 200 && res.data && res.data.userId) {
+                    if (onSetupGGAuthenticatorDone && typeof onSetupGGAuthenticatorDone === 'function') {
+                        onSetupGGAuthenticatorDone(res.data);
+                    }
+                }
+                else {
+                    setCodeError(true);
+                }
+            }
+        };
+        xhr.send(JSON.stringify(verifyParam));
+    };
+    const getQRCode = () => {
+        const { personal, token } = loginData;
+        const { user_id: userId } = personal || {};
+        axios
+            .get(`${domainLogin}api/account/info?_token=${token}&_user_id=${userId}&_account_id=${userId}&type=get-qr-code`)
+            .then(res => {
+            if (res && res.data && res.data.data) {
+                setQRCode(res.data.data);
+            }
+        });
+    };
+    const handleBack = () => {
+        if (backLogin && typeof backLogin === 'function') {
+            backLogin();
+        }
+    };
+    return (_jsx(WidgetLayout, { title: "Enable two-step authentication", isShowLogo: false, header: _jsx(Avatar, { image: get(loginData, 'personal.avatar'), name: get(loginData, 'personal.full_name'), email: get(loginData, 'personal.email') }), content: _jsxs(Flex, { vertical: true, gap: 30, children: [_jsxs(Flex, { vertical: true, gap: 13, children: [_jsx(LabelStep, { isMobile: isMobile, children: "STEP 1" }), _jsxs(Flex, { align: "center", gap: 5, children: [_jsx(Text, { isMobile: isMobile, color: "#595959", children: isMobile ? (_jsxs("span", { children: [_jsx(Link, { href: isAndroid
+                                                    ? 'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2'
+                                                    : 'https://apps.apple.com/us/app/google-authenticator/id388497605 ', target: "_blank", rel: "noreferrer", children: "Install Google Authenticator" }), "& scan the code"] })) : ('Install Google Authenticator on your phone & scan the code') }), _jsx(IconInfo, { image: imageStep1, title: _jsx(TextAntsomiUI, { style: {
+                                            marginTop: 20,
+                                        }, children: _jsxs(Text, { isMobile: isMobile, style: { textAlign: 'center' }, children: ["Open ", _jsx("b", { children: "Google Authenticator" }), " app on your phone and scan the QR code."] }) }) })] }), qrCode ? (_jsx(Flex, { vertical: true, align: "center", style: {
+                                background: '#EEF5FC',
+                                padding: 10,
+                                borderRadius: 10,
+                            }, children: _jsx("img", { src: `data:image/gif;base64,${qrCode}`, alt: "QR Code", height: 160, style: {
+                                    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, maxLength: 6, placeholder: "Input your code", onChange: e => {
+                                setG2faCode(e.target.value.trim());
+                                if (e.target.value.trim().length) {
+                                    setCodeError(false);
+                                }
+                            }, status: errorRef.current && codeError ? 'error' : '' }), errorRef.current && codeError ? (_jsx(TextAntsomiUI, { type: "danger", children: "Invalid code, please try again" })) : null] })] }), footer: _jsxs(Flex, { vertical: true, gap: 92, children: [_jsxs(Flex, { vertical: true, gap: isMobile ? 30 : 15, children: [_jsx(StyleButton, { isMobile: isMobile, loading: isLoading, type: "primary", onClick: updateG2FA, children: "Complete" }), _jsx(StyleButton, { isMobile: isMobile, type: "text", onClick: onSkipSetupGGAuthenticator, loading: loadingSkip, children: "Skip" })] }), _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
+                            fontSize: isMobile ? '16px' : '14px',
+                        }, children: "Sign in with a different account" }) })] }) }));
+};
+export default SetupGGAuthenticator;

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

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

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

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

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

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

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

@@ -0,0 +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 Link = styled.a `
+  text-decoration: underline;
+  padding-right: 4px;
+`;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { LoginData } from '../../types';
+type TSignIn = {
+    domainLogin: string;
+    networkId?: string;
+    urlLogo?: string;
+    onForgotPassword?: () => void;
+    onLoginSuccess?: (data: Partial<LoginData>) => void;
+    onLoginFail?: (data: any) => void;
+    userNameKey?: string;
+    passwordKey?: string;
+    setAuthenInfo: (info: {
+        email: string;
+    }) => void;
+    /** Optional browser-session adapter used by the Ory challenge flow. */
+    onOrySubmit?: (credentials: {
+        email: string;
+        password: string;
+    }) => Promise<void>;
+};
+export declare const SignIn: React.FC<TSignIn>;
+export {};

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useState } from 'react';
+import { useCookies } from 'react-cookie';
+import { isEmpty } from 'lodash';
+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, urlLogo, onForgotPassword, onLoginSuccess, onLoginFail, userNameKey = 'user_name', passwordKey = 'password', setAuthenInfo, onOrySubmit, } = props;
+    const [form] = Form.useForm();
+    const loginUrl = `${domainLogin}api/account/authenticate`;
+    const [cookies, setCookie] = useCookies();
+    const [loginError, setLoginError] = useState(false);
+    const [loginErrorMessage, setLoginErrorMessage] = useState('Email or password is invalid');
+    const [isLoading, setLoading] = useState(false);
+    const goForgotPassword = e => {
+        e.preventDefault();
+        if (onForgotPassword && typeof onForgotPassword === 'function') {
+            onForgotPassword();
+        }
+    };
+    const onFinish = async (values) => {
+        const { password, email } = values;
+        if (onOrySubmit) {
+            setAuthenInfo({ email });
+            setLoginError(false);
+            setLoading(true);
+            try {
+                await onOrySubmit({ email, password });
+            }
+            catch (error) {
+                setLoginError(true);
+                setLoginErrorMessage(error?.userMessage ||
+                    (error?.code === 'ORY_MFA_REQUIRED'
+                        ? 'Additional verification is required to finish signing in.'
+                        : 'Email or password is invalid'));
+                if (onLoginFail && typeof onLoginFail === 'function') {
+                    onLoginFail({ code: error?.code || 'ORY_LOGIN_FAILED' });
+                }
+            }
+            finally {
+                setLoading(false);
+            }
+            return;
+        }
+        const keyName = `ogs-${btoa(email)}`;
+        const trustKey = cookies[keyName] || localStorage.getItem(keyName);
+        const params = {
+            [userNameKey]: email,
+            [passwordKey]: password,
+            app_id: networkId,
+        };
+        setAuthenInfo({
+            email,
+        });
+        if (trustKey) {
+            params.trust_key = trustKey;
+        }
+        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 });
+                    }
+                }
+                else {
+                    setLoginError(true);
+                    setLoginErrorMessage('Email or password is invalid');
+                    if (onLoginFail && typeof onLoginFail === 'function') {
+                        onLoginFail(response);
+                    }
+                }
+            }
+        };
+        xhr.send(JSON.stringify(params));
+    };
+    return (_jsxs(Wrapper, { isMobile: isMobile, children: [_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(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, { autoComplete: "username", name: "email", type: "text", 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, { name: "password", autoComplete: "current-password", placeholder: "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", { role: "alert", style: { color: 'red', fontSize: 11 }, children: loginErrorMessage })), _jsxs(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, children: "Sign in" }) }), _jsx(StyleButton, { isMobile: isMobile, type: "text", onClick: goForgotPassword, disabled: !onForgotPassword, children: "Forgot password?" })] })] })] }));
+};

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

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

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { LoginData } from '../../types';
+type TVerifyAccount = {
+    loginData: {
+        personal?: Partial<LoginData>;
+        token?: string;
+    };
+    domainLogin: string;
+    networkId?: string;
+    listNetworks: any;
+    u_ogs?: string;
+    urlLogo?: string;
+    authenInfo: any;
+    callbackSelectNetwork?: (data: any) => void;
+    backLogin: () => void;
+    onLoginSuccess: (data: any) => void;
+    onLoginFail: () => void;
+    onForgotPassword: () => void;
+    handleLoginData: (data: Partial<LoginData> | null | undefined, doPostEvent: boolean | undefined, doSelectNetwork: number | null) => void;
+    sendMailValidateAccount: (callback: (data: any) => void) => Promise<void>;
+    isLoginGG?: boolean;
+    callbackUrl?: string;
+};
+export declare const VerifyAccount: React.FC<TVerifyAccount>;
+export {};

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { WidgetLayout } from '../WidgetLayout';
+import { StyleButton, WrapperContent } from '../../styled';
+import { Flex, Typography } from 'antd';
+import { isMobile } from 'react-device-detect';
+import { STATUS } from '../../constants';
+import NOT_AUTHENTICATED from '../../../../../assets/images/components/Login/ICON.png';
+import EMAIL_SENT from '../../../../../assets/images/components/Login/email.png';
+import RECENT_EMAIL from '../../../../../assets/images/components/Login/RECENT_EMAIL.png';
+import { Logo } from '../Logo';
+const { Text } = Typography;
+export const VerifyAccount = props => {
+    const { backLogin, sendMailValidateAccount, authenInfo, urlLogo } = props;
+    const [init, setInit] = useState(false);
+    const [status, setStatus] = useState(STATUS.ACCOUNT_NOT_VERIFIED);
+    const handleSendMail = () => {
+        sendMailValidateAccount(data => {
+            if (data && data.status) {
+                setStatus(STATUS.CHECK_YOUR_EMAIL);
+            }
+        });
+    };
+    useEffect(() => {
+        setTimeout(() => setInit(true), 1000);
+    }, []);
+    const renderContent = () => {
+        switch (status) {
+            case STATUS.ACCOUNT_NOT_VERIFIED:
+                return (_jsx(WidgetLayout, { title: "This account is not authenticated", header: _jsxs(Flex, { vertical: true, gap: 40, align: "center", style: {
+                            paddingTop: 60,
+                        }, children: [_jsx(Logo, { urlLogo: urlLogo }), _jsx("img", { src: NOT_AUTHENTICATED, width: 100, height: 100, alt: "" })] }), content: _jsx(WrapperContent, { className: "verify_account", children: "Please click the button below to receive an account verification email. Thank you." }), footer: _jsxs(Flex, { vertical: true, gap: 15, children: [_jsx(StyleButton, { isMobile: isMobile, type: "primary", onClick: handleSendMail, children: "SEND VALIDATE EMAIL" }), _jsxs(StyleButton, { isMobile: isMobile, type: "text", onClick: backLogin, children: ["Back to login", ' '] })] }), isShowLogo: false }));
+            case STATUS.CHECK_YOUR_EMAIL:
+                return (_jsx(WidgetLayout, { title: "Email sent", header: _jsx("img", { src: EMAIL_SENT, width: 200, height: 200, alt: "", style: { marginTop: 100 } }), content: _jsx(WrapperContent, { className: "verify_account", children: "Check your email and follow the instruction to retrieve your password" }), footer: _jsxs(Flex, { vertical: true, gap: 15, children: [_jsx(StyleButton, { isMobile: isMobile, type: "primary", onClick: backLogin, children: "Back to login" }), _jsx(StyleButton, { isMobile: isMobile, type: "text", onClick: () => setStatus(STATUS.RESEND_EMAIL), children: "Resend" })] }), isShowLogo: false }));
+            case STATUS.RESEND_EMAIL:
+                return (_jsx(WidgetLayout, { title: "Email sent", header: _jsx("img", { src: RECENT_EMAIL, width: 200, height: 200, alt: "", style: { marginTop: 100 } }), content: _jsx(WrapperContent, { className: "verify_account", children: "Check your email and follow the instruction to retrieve your password" }), footer: _jsxs(Flex, { vertical: true, gap: 15, children: [_jsx(StyleButton, { isMobile: isMobile, type: "primary", onClick: backLogin, children: "Back to login" }), _jsx(StyleButton, { isMobile: isMobile, type: "text", onClick: handleSendMail, children: "Resend" })] }), isShowLogo: false }));
+            default:
+                return null;
+        }
+    };
+    return renderContent();
+};

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

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

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

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

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare const WrapperForm: import("styled-components").StyledComponent<(<Values = any>(props: import("antd").FormProps<Values> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("antd").FormInstance<Values>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
+} & {
+    useForm: typeof import("antd/es/form/Form").useForm;
+    useFormInstance: typeof import("antd/es/form/hooks/useFormInstance").default;
+    useWatch: typeof import("rc-field-form").useWatch;
+    Item: (<Values_1 = any>(props: import("antd").FormItemProps<Values_1>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        useStatus: () => {
+            status?: "" | "warning" | "error" | "success" | "validating" | undefined;
+            errors: import("react").ReactNode[];
+            warnings: import("react").ReactNode[];
+        };
+    };
+    List: import("react").FC<import("antd/es/form").FormListProps>;
+    ErrorList: import("react").FC<import("antd/es/form").ErrorListProps>;
+    Provider: import("react").FC<import("antd/es/form/context").FormProviderProps>;
+    create: () => void;
+}, any, {}, never>;
+export declare const LabelRequire: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +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 LabelRequire = styled.span `
+  color: #595959;
+  .icon {
+    color: red;
+  }
+`;

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

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

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

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Title: import("styled-components").StyledComponent<"div", any, {
+    isMobile: boolean;
+}, never>;
+export declare const WidgetLayoutMain: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

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

@@ -0,0 +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 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/LoginV2/components/index.d.ts

@@ -0,0 +1,11 @@
+export * from './WidgetLayout';
+export * from './ForgotPassword';
+export * from './SignIn';
+export * from './OryConsent';
+export * from './VerifyAccount';
+export * from './SetupGGAuthenticator';
+export * from './LoginWithGG';
+export * from './LoginSelectPortal';
+export * from './Logo';
+export * from './ChooseMethod';
+export * from './LoginWithEmail';

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

@@ -0,0 +1,11 @@
+export * from './WidgetLayout';
+export * from './ForgotPassword';
+export * from './SignIn';
+export * from './OryConsent';
+export * from './VerifyAccount';
+export * from './SetupGGAuthenticator';
+export * from './LoginWithGG';
+export * from './LoginSelectPortal';
+export * from './Logo';
+export * from './ChooseMethod';
+export * from './LoginWithEmail';

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

@@ -0,0 +1,48 @@
+export declare const TYPE_VIEW: {
+    LOGIN: string;
+    FORGOT_PASSWORD: string;
+    VALIDATE: string;
+    EMAIL_SENT: string;
+    NOT_AUTHEN: string;
+    VALIDATE_ACCOUNT: string;
+};
+export declare const STEPS: {
+    readonly STEP1: 1;
+    readonly STEP_LOGIN_WITH_GG: 2;
+    readonly STEP_SETUP_GG_AUTHENTICATOR: 3;
+    readonly STEP_SELECT_NETWORK: 4;
+    readonly STEP_SELECT_ACCOUNT: 5;
+    readonly STEP_VERIFY_ACCOUNT: 6;
+    readonly STEP_CHOOSE_METHOD: 7;
+    readonly STEP_LOGIN_WITH_EMAIL: 8;
+    readonly STEP_FORGOT: 999;
+    readonly STEP_FORGOT_RESEND: 1000;
+};
+export declare const STATUS: {
+    readonly ACCOUNT_NOT_VERIFIED: 1;
+    readonly RESEND_EMAIL: 2;
+    readonly CHECK_YOUR_EMAIL: 3;
+    readonly SESSION_EXPIRED: 4;
+};
+export declare const LOGIN_METHODS: {
+    readonly GOOGLE_AUTHENTICATOR: "google";
+    readonly EMAIL: "email";
+};
+export declare const LOGIN_ERROR_TYPES: {
+    VERIFY_FAILED: {
+        type: string;
+        message: string;
+    };
+    SEND_LIMIT_REACHED: {
+        type: string;
+        message: string;
+    };
+    TOO_MANY_ATTEMPTS: {
+        type: string;
+        message: string;
+    };
+    INVALID_CODE: {
+        type: string;
+        message: string;
+    };
+};

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

@@ -0,0 +1,48 @@
+export const TYPE_VIEW = {
+    LOGIN: 'LOGIN',
+    FORGOT_PASSWORD: 'FORGOT_PASSWORD',
+    VALIDATE: 'VALIDATE',
+    EMAIL_SENT: 'EMAIL_SENT',
+    NOT_AUTHEN: 'NOT_AUTHEN',
+    VALIDATE_ACCOUNT: 'VALIDATE_ACCOUNT',
+};
+export const STEPS = {
+    STEP1: 1,
+    STEP_LOGIN_WITH_GG: 2,
+    STEP_SETUP_GG_AUTHENTICATOR: 3,
+    STEP_SELECT_NETWORK: 4,
+    STEP_SELECT_ACCOUNT: 5,
+    STEP_VERIFY_ACCOUNT: 6,
+    STEP_CHOOSE_METHOD: 7,
+    STEP_LOGIN_WITH_EMAIL: 8,
+    STEP_FORGOT: 999,
+    STEP_FORGOT_RESEND: 1000,
+};
+export const STATUS = {
+    ACCOUNT_NOT_VERIFIED: 1,
+    RESEND_EMAIL: 2,
+    CHECK_YOUR_EMAIL: 3,
+    SESSION_EXPIRED: 4,
+};
+export const LOGIN_METHODS = {
+    GOOGLE_AUTHENTICATOR: 'google',
+    EMAIL: 'email',
+};
+export const LOGIN_ERROR_TYPES = {
+    VERIFY_FAILED: {
+        type: 'VERIFY_FAILED',
+        message: 'Missing userId or code',
+    },
+    SEND_LIMIT_REACHED: {
+        type: 'SEND_LIMIT_REACHED',
+        message: 'Too many requests. Please contact Antsomi Support.',
+    },
+    TOO_MANY_ATTEMPTS: {
+        type: 'TOO_MANY_ATTEMPTS',
+        message: 'Too many incorrect attempts. Please try again later.',
+    },
+    INVALID_CODE: {
+        type: 'INVALID_CODE',
+        message: 'Invalid code, please try again.',
+    },
+};

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

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

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

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

package/es/components/organism/LoginV2/hooks/useResize.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+interface Dimensions {
+    width: number;
+    height: number;
+}
+export declare const useContainerDimensions: (myRef: RefObject<HTMLElement>) => Dimensions;
+export {};