@stokr/components-library 3.0.77 → 3.1.0-alpha.1

package/dist/components/2FA/login-with-otp-flow.js

@@ -1,262 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import PropTypes from "prop-types";
-import stdin_default$2 from "./EnterCode.js";
-import stdin_default$3 from "./ResetCode.js";
-import { Layout } from "../Layout/Layout.js";
-import { useNavigate } from "react-router-dom";
-import stdin_default$1 from "../LoginModal/LoginModal.js";
-import { AuthContext } from "../../context/AuthContext.js";
-import background from "../../static/images/background3.png.js";
-import { hasLoggedInSession } from "../../utils/user-identity.js";
-import { authenticationApi } from "../../api/authenticationApi.js";
-import { getConfig, getPlatformURL } from "../../runtime-config.js";
-import { useContext, useRef, useState, useEffect } from "react";
-import stdin_default$4 from "../ForgotPasswordModal/ForgotPasswordModal.js";
-import { isAccountLockedError, showAccountLockedModal } from "../../utils/show-account-locked-modal.js";
-import { navigateToHref } from "../../routing/navigate-app.js";
-const closedModalsState = {
-  login: false,
-  enter2fa: false,
-  forgot: false,
-  resetCode: false
-};
-const LoginWithOTP = ({ withBackground, useRelativePathForMenu = false, onLoginSuccess }) => {
-  const navigate = useNavigate();
-  const { user, loginUser, getUser, waitingFor2fa, firebaseError, loginUserWithTotp, reset2faFlow, logoutUser } = useContext(AuthContext);
-  const loginSuccessHandledRef = useRef(false);
-  const [isModalOpen, setIsModalOpen] = useState({
-    login: true,
-    enter2fa: false,
-    forgot: false,
-    resetCode: false
-  });
-  const [isActionLoading, setIsActionLoading] = useState();
-  const [popupError, setPopupError] = useState({
-    popup: void 0,
-    message: void 0
-  });
-  const [popupSuccess, setPopupSuccess] = useState({
-    popup: void 0,
-    message: void 0
-  });
-  const switchOpenModal = (prevModalId, nextModalId) => {
-    setIsModalOpen((prev) => ({
-      ...prev,
-      [prevModalId]: false,
-      [nextModalId]: true
-    }));
-  };
-  useEffect(() => {
-    if (waitingFor2fa) {
-      setIsModalOpen((prev) => ({
-        ...prev,
-        login: false,
-        enter2fa: true
-      }));
-    }
-  }, [waitingFor2fa]);
-  useEffect(() => {
-    if (!hasLoggedInSession(user) || waitingFor2fa) {
-      loginSuccessHandledRef.current = false;
-      return;
-    }
-    setIsModalOpen(closedModalsState);
-    if (onLoginSuccess && !loginSuccessHandledRef.current) {
-      loginSuccessHandledRef.current = true;
-      onLoginSuccess(user);
-    }
-  }, [user, waitingFor2fa, onLoginSuccess]);
-  const handleSetPopupSuccess = (popup, message) => {
-    setPopupSuccess({ popup, message });
-  };
-  const clearPopupSuccess = () => {
-    setPopupSuccess({
-      popup: void 0,
-      message: void 0
-    });
-  };
-  const handleSetPopupError = (popup, message) => {
-    setPopupError({ popup, message });
-  };
-  const clearPopupError = () => {
-    setPopupError({
-      popup: void 0,
-      message: void 0
-    });
-  };
-  const backgroundProp = `url(${background}) left top no-repeat`;
-  return /* @__PURE__ */ jsxs(Layout, { noHeader: true, noFooter: true, useRelativePathForMenu, children: [
-    /* @__PURE__ */ jsx(
-      stdin_default$1,
-      {
-        isActionLoading,
-        popupError,
-        background: withBackground && backgroundProp,
-        isModalOpen: isModalOpen.login,
-        onModalClose: () => {
-          navigateToHref(navigate, getPlatformURL());
-        },
-        onModalSwitch: () => {
-          navigateToHref(navigate, getConfig("registerUrl"));
-        },
-        onForgotPassword: () => {
-          switchOpenModal("login", "forgot");
-          clearPopupError();
-          setIsActionLoading(void 0);
-        },
-        logoutUser,
-        onFormSend: async ({ email, password }) => {
-          clearPopupError();
-          setIsActionLoading("login");
-          try {
-            if (password.length > 128) {
-              handleSetPopupError("login", "Your password cannot exceed 128 characters");
-              return;
-            }
-            await loginUser(email, password);
-            await getUser();
-            clearPopupError();
-          } catch (error) {
-            const errorMessage = error?.message;
-            if (error?.code === "auth/multi-factor-auth-required") {
-              clearPopupError();
-              return;
-            }
-            if (isAccountLockedError(error)) {
-              clearPopupError();
-              setIsModalOpen((prev) => ({
-                ...prev,
-                login: false
-              }));
-              await showAccountLockedModal({
-                background: withBackground ? backgroundProp : void 0
-              });
-              setIsModalOpen((prev) => ({
-                ...prev,
-                login: true
-              }));
-              return;
-            }
-            if (errorMessage) {
-              handleSetPopupError("login", errorMessage);
-            } else {
-              handleSetPopupError("login", "Oops. Something's not right there. Try again?");
-            }
-          } finally {
-            setIsActionLoading(void 0);
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      stdin_default$2,
-      {
-        isModal: true,
-        isActionLoading,
-        popupError,
-        isModalOpen: isModalOpen.enter2fa,
-        background: withBackground && backgroundProp,
-        onModalClose: () => {
-          reset2faFlow();
-          switchOpenModal("enter2fa", "login");
-          clearPopupError();
-          setIsActionLoading(void 0);
-        },
-        onModalSwitch: () => {
-          switchOpenModal("enter2fa", "resetCode");
-          clearPopupError();
-          setIsActionLoading(void 0);
-        },
-        onFormSend: async ({ otpInput }) => {
-          setIsActionLoading("enter2fa");
-          try {
-            await loginUserWithTotp(otpInput, firebaseError);
-            await getUser();
-            clearPopupError();
-            setIsModalOpen(closedModalsState);
-          } catch (error) {
-            if (error?.code === "auth/invalid-verification-code") {
-              handleSetPopupError("enter2fa", "The verification code is not correct. Try again?");
-            } else if (error?.code === "auth/code-expired") {
-              handleSetPopupError("enter2fa", "Time out. Please restart the flow and log in again");
-            } else {
-              handleSetPopupError("enter2fa", error?.message);
-            }
-          } finally {
-            setIsActionLoading(void 0);
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      stdin_default$3,
-      {
-        isModalOpen: isModalOpen.resetCode,
-        background: withBackground && backgroundProp,
-        onModalClose: () => {
-          switchOpenModal("resetCode", "login");
-          clearPopupError();
-          setIsActionLoading(void 0);
-        },
-        onModalSwitch: () => {
-          switchOpenModal("resetCode", "enter2fa");
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      stdin_default$4,
-      {
-        isActionLoading,
-        popupError,
-        background: withBackground && backgroundProp,
-        popupSuccess,
-        isModalOpen: isModalOpen.forgot,
-        onModalClose: () => {
-          switchOpenModal("forgot", "login");
-          clearPopupError();
-          clearPopupSuccess();
-          setIsActionLoading(void 0);
-        },
-        onModalSwitch: () => {
-          switchOpenModal("forgot", "login");
-          clearPopupError();
-          clearPopupSuccess();
-          setIsActionLoading(void 0);
-        },
-        onFormSend: async ({ email }) => {
-          clearPopupError();
-          setIsActionLoading("forgot");
-          try {
-            await authenticationApi.post("forgotPass", {
-              email
-            });
-            handleSetPopupSuccess(
-              "forgot",
-              `We sent a message to ${email} (you might need to check your junk or spam folder) — tap the link inside to create a new password.`
-            );
-            setIsActionLoading(void 0);
-          } catch (error) {
-            let errorMessage = `Too many requests. Please try again later.`;
-            console.log(error?.response);
-            if (error?.response?.status === 429) {
-              errorMessage = error.response.data?.message;
-            }
-            handleSetPopupError("forgot", errorMessage);
-            setIsActionLoading(void 0);
-          }
-        }
-      }
-    )
-  ] });
-};
-LoginWithOTP.propTypes = {
-  withBackground: PropTypes.bool,
-  useRelativePathForMenu: PropTypes.bool,
-  /** Called once when login (and optional 2FA) completes and the user session is ready. */
-  onLoginSuccess: PropTypes.func
-};
-var stdin_default = LoginWithOTP;
-export {
-  LoginWithOTP,
-  stdin_default as default
-};

package/dist/components/2FA/main-flow.js

@@ -1,273 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React__default, { useContext, useState, useRef, useEffect } from "react";
-import PropTypes from "prop-types";
-import { AuthContext } from "../../context/AuthContext.js";
-import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
-import stdin_default$1 from "../Switch/Switch.js";
-import { Text } from "../Text/Text.styles.js";
-import stdin_default$5 from "./login-with-otp-flow.js";
-import stdin_default$2 from "./enable-2fa-flow.js";
-import stdin_default$3 from "./disable-2fa-flow.js";
-import { colors } from "../../styles/colors.js";
-import { InfoIcon } from "../InfoIcon/InfoIcon.js";
-import { Modal } from "../Modal/Modal.js";
-import stdin_default$4 from "./Sucess2FA.js";
-import { ModalInner } from "../Modal/Modal.styles.js";
-import { showProgress } from "../Modal/SuccessModal/SuccessModal.js";
-const SUPPORT_URL = "https://support.stokr.io/";
-const Main2FAFlow = ({
-  onRequiresRecentLoginError,
-  open2faflow,
-  onLoginAgainClick,
-  openDisable2faflow,
-  allowDisable2FA = false,
-  title = "SET UP YOUR LOG IN TWO FACTOR AUTHENTICATION",
-  subtitle = "Protect your account with an additional layer of security to log in",
-  showSwitch = true,
-  customComponent,
-  onFlowClose,
-  recentLoginTitle = "LOG IN AGAIN",
-  recentLoginSubtitle = "To continue please log in again and set up your two factor authentication",
-  recentLoginCTA = "Log in again",
-  showInlineLoginOnLogout = true
-}) => {
-  const { user, checkMfaEnrollment, userMfaEnrollment, generateTotpSecret, logoutUser } = useContext(AuthContext);
-  const [isFlowopen, setIsFlowOpen] = useState({
-    enable2fa: open2faflow || false,
-    disable2fa: allowDisable2FA && (openDisable2faflow || false),
-    requiresRecentLogin: false
-  });
-  const [is2FAEnabled, setis2FAEnabled] = useState(false);
-  const [successMessage, setsuccessMessage] = useState();
-  const [isLoginRequired, setisLoginRequired] = useState(false);
-  const [totpData, settotpData] = useState();
-  const [awaitingReauthFor2fa, setAwaitingReauthFor2fa] = useState(false);
-  const enable2faCompletedRef = useRef(false);
-  const disable2faCompletedRef = useRef(false);
-  const onRequiresRecentLoginErrorHandler = () => {
-    setIsFlowOpen({
-      requiresRecentLogin: true,
-      enable2fa: false,
-      disable2fa: false
-    });
-    onRequiresRecentLoginError?.();
-  };
-  const generateTotp = async () => {
-    try {
-      const response = await generateTotpSecret();
-      settotpData(response);
-    } catch (error) {
-      if (error.code === "auth/requires-recent-login" || error.code === "auth/unsupported-first-factor") {
-        setisLoginRequired(true);
-        if (isFlowopen.enable2fa && !isFlowopen.requiresRecentLogin) {
-          onRequiresRecentLoginErrorHandler();
-        }
-      }
-    }
-  };
-  useEffect(() => {
-    if (userMfaEnrollment?.length > 0) {
-      setis2FAEnabled(true);
-    } else if (user && !awaitingReauthFor2fa) {
-      checkMfaEnrollment();
-      generateTotp();
-    }
-  }, [user, userMfaEnrollment, awaitingReauthFor2fa]);
-  useEffect(() => {
-    if (!user || !awaitingReauthFor2fa) return;
-    setAwaitingReauthFor2fa(false);
-    setisLoginRequired(false);
-    setIsFlowOpen((prev) => ({
-      ...prev,
-      requiresRecentLogin: false,
-      enable2fa: true
-    }));
-    checkMfaEnrollment();
-    generateTotp();
-  }, [user, awaitingReauthFor2fa]);
-  useEffect(() => {
-    let timeoutId;
-    if (successMessage) {
-      timeoutId = setTimeout(setsuccessMessage, 400);
-    }
-    return () => {
-      if (timeoutId != null) clearTimeout(timeoutId);
-    };
-  }, [successMessage]);
-  const switchOpenFlow = (prevFlowId, nextFlowId) => {
-    setIsFlowOpen((prev) => ({
-      ...prev,
-      [prevFlowId]: false,
-      [nextFlowId]: true
-    }));
-  };
-  const showDisable2faBlockedModal = () => showProgress({
-    title: "TWO-FACTOR AUTHENTICATION REQUIRED",
-    subtitle: /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Under our security policy, two-factor authentication is required on all accounts and cannot be turned off. To reset your method, contact our",
-      " ",
-      /* @__PURE__ */ jsx("a", { href: SUPPORT_URL, target: "_blank", rel: "noreferrer", style: { textDecoration: "underline" }, children: /* @__PURE__ */ jsx("u", { children: "support team" }) }),
-      "."
-    ] }),
-    maxWidth: "820px"
-  });
-  const handleFlowClose = (flowId, completed = false) => {
-    setIsFlowOpen((prev) => ({ ...prev, [flowId]: false }));
-    if (onFlowClose) onFlowClose({ flow: flowId, completed });
-  };
-  const onEnable2FASuccess = async () => {
-    enable2faCompletedRef.current = true;
-    setis2FAEnabled(true);
-    checkMfaEnrollment();
-    setsuccessMessage("Your log in 2FA authentication is now set");
-  };
-  const onDisable2FASuccess = async () => {
-    disable2faCompletedRef.current = true;
-    setis2FAEnabled(false);
-    checkMfaEnrollment();
-    setsuccessMessage("Your log in 2FA authentication is removed");
-  };
-  const handleLoginAgain = async () => {
-    setIsFlowOpen((prev) => ({
-      ...prev,
-      requiresRecentLogin: false,
-      enable2fa: false,
-      disable2fa: false
-    }));
-    await logoutUser();
-    setAwaitingReauthFor2fa(true);
-    onLoginAgainClick?.();
-  };
-  const flowActions = {
-    openEnable2FA: () => switchOpenFlow("disable2fa", "enable2fa"),
-    openDisable2FA: () => {
-      if (!is2FAEnabled) return;
-      if (!allowDisable2FA) {
-        void showDisable2faBlockedModal();
-        return;
-      }
-      switchOpenFlow("enable2fa", "disable2fa");
-    },
-    closeFlows: () => {
-      const wasOpen = Object.keys(isFlowopen).find((key) => isFlowopen[key]);
-      setIsFlowOpen({
-        enable2fa: false,
-        disable2fa: false,
-        requiresRecentLogin: false
-      });
-      if (wasOpen) {
-        onFlowClose?.(wasOpen);
-      }
-    },
-    is2FAEnabled,
-    isFlowOpen: isFlowopen
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ComponentWrapper, { alignVertically: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("h5", { children: title }) }) }),
-    /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("p", { children: subtitle }) }),
-    showSwitch && /* @__PURE__ */ jsxs(ComponentWrapper, { noPaddingHorizontal: true, children: [
-      /* @__PURE__ */ jsx(
-        InfoIcon,
-        {
-          position: "top",
-          html: is2FAEnabled ? "Enabled" : "Disabled",
-          noIcon: true,
-          noMarginLeft: true,
-          disabled: isFlowopen.enable2fa || isFlowopen.disable2fa,
-          children: /* @__PURE__ */ jsx(
-            stdin_default$1,
-            {
-              dataCy: "2fa-settings-toggle",
-              value1: "disabled",
-              value2: "enabled",
-              value1Color: colors.orangishRed,
-              value2Color: colors.freshGreen,
-              value: is2FAEnabled ? "enabled" : "disabled",
-              revertToPrevious: true,
-              hideValues: true,
-              indicatorStyle: { margin: 0 },
-              handleChange: (value) => {
-                if (isLoginRequired && value === "enabled") {
-                  setIsFlowOpen({
-                    requiresRecentLogin: true,
-                    enable2fa: false,
-                    disable2fa: false
-                  });
-                } else if (value === "enabled") {
-                  switchOpenFlow("disable2fa", "enable2fa");
-                } else if (value === "disabled") {
-                  if (!allowDisable2FA) {
-                    void showDisable2faBlockedModal();
-                    return;
-                  }
-                  switchOpenFlow("enable2fa", "disable2fa");
-                }
-              }
-            }
-          )
-        }
-      ),
-      successMessage && /* @__PURE__ */ jsx(Text, { small: true, success: true, style: { position: "absolute", bottom: 0, left: 0 }, children: /* @__PURE__ */ jsx("p", { children: successMessage }) })
-    ] }),
-    customComponent && (typeof customComponent === "function" ? customComponent(flowActions) : React__default.isValidElement(customComponent) ? React__default.createElement(customComponent.type, {
-      ...customComponent.props,
-      flowActions
-    }) : customComponent),
-    isFlowopen.enable2fa && /* @__PURE__ */ jsx(
-      stdin_default$2,
-      {
-        showFlow: isFlowopen.enable2fa,
-        setShowFlow: (value) => {
-          if (!value) {
-            handleFlowClose("enable2fa", enable2faCompletedRef.current);
-          } else {
-            setIsFlowOpen({ ...isFlowopen, enable2fa: value });
-          }
-        },
-        totpData,
-        onRequiresRecentLoginError: onRequiresRecentLoginErrorHandler,
-        onSuccess: onEnable2FASuccess
-      }
-    ),
-    allowDisable2FA && isFlowopen.disable2fa && /* @__PURE__ */ jsx(
-      stdin_default$3,
-      {
-        showFlow: isFlowopen.disable2fa,
-        setShowFlow: (value) => {
-          if (!value) {
-            handleFlowClose("disable2fa", disable2faCompletedRef.current);
-          } else {
-            setIsFlowOpen({ ...isFlowopen, disable2fa: value });
-          }
-        },
-        onRequiresRecentLoginError: onRequiresRecentLoginErrorHandler,
-        onSuccess: onDisable2FASuccess
-      }
-    ),
-    isFlowopen.requiresRecentLogin && /* @__PURE__ */ jsx(Modal, { isOpen: isFlowopen.requiresRecentLogin, onClose: () => handleFlowClose("requiresRecentLogin"), children: /* @__PURE__ */ jsx(ModalInner, { noPadding: true, children: /* @__PURE__ */ jsx(
-      stdin_default$4,
-      {
-        continueButtonId: "2fa-requires-recent-login-btn",
-        continueButtonDataCy: "2fa-requires-recent-login-submit",
-        onClick: () => {
-          void handleLoginAgain();
-        },
-        titleText: recentLoginTitle,
-        subTitleLeft: recentLoginSubtitle,
-        buttonText: recentLoginCTA
-      }
-    ) }) }),
-    !showInlineLoginOnLogout ? null : !user && /* @__PURE__ */ jsx(stdin_default$5, {})
-  ] });
-};
-Main2FAFlow.propTypes = {
-  onRequiresRecentLoginError: PropTypes.func,
-  allowDisable2FA: PropTypes.bool,
-  /** Called when any flow/modal is closed. Receives the flowId: 'enable2fa' | 'disable2fa' | 'requiresRecentLogin' */
-  onFlowClose: PropTypes.func
-};
-var stdin_default = Main2FAFlow;
-export {
-  Main2FAFlow,
-  stdin_default as default
-};

package/dist/components/Footer/Footer.js

@@ -1,69 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import PropTypes from "prop-types";
-import "react";
-import { Wrapper } from "../Grid/Grid.styles.js";
-import { StyledFooter, FooterInner, PartnerWrap, Partner, PartnerLine, PartnerLineBreak, LogoWrap, PoweredWrap, Copyright } from "./Footer.styles.js";
-import MangoPayLogo from "../../static/images/mangopay.svg.js";
-const Footer = ({ color = "primary", hasSidebar = false, isSidebarExpanded }) => /* @__PURE__ */ jsx(StyledFooter, { color, isSidebarExpanded, hasSidebar, children: /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(FooterInner, { hasSidebar, children: [
-  /* @__PURE__ */ jsx(PartnerWrap, { children: /* @__PURE__ */ jsxs(Partner, { children: [
-    /* @__PURE__ */ jsxs(PartnerLine, { children: [
-      "STOKR is a crypto asset service provider (",
-      /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: "https://edesk.apps.cssf.lu/search-entities/entite/details/7079114?lng=en&q=&st=advanced&entType=CASP&entDate=2020-08-01",
-          title: "CASP",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          style: { textDecoration: "underline", color: "white" },
-          children: "CASP"
-        }
-      ),
-      ") ",
-      /* @__PURE__ */ jsx(PartnerLineBreak, {}),
-      "and payment institution (",
-      /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: "https://edesk.apps.cssf.lu/search-entities/entite/details/7079119?lng=en&q=&st=advanced&entType=PI&entDate=2020-08-01",
-          title: "PI",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          style: { textDecoration: "underline", color: "white" },
-          children: "PI"
-        }
-      ),
-      "),"
-    ] }),
-    /* @__PURE__ */ jsx(PartnerLine, { children: "registered with the Luxembourg regulator CSSF." })
-  ] }) }),
-  /* @__PURE__ */ jsx(LogoWrap, { children: /* @__PURE__ */ jsx(
-    "img",
-    {
-      style: {
-        verticalAlign: "middle",
-        minWidth: 44,
-        maxWidth: 120
-      },
-      loading: "lazy",
-      src: MangoPayLogo,
-      alt: "Mangopay logo"
-    }
-  ) }),
-  /* @__PURE__ */ jsx(PoweredWrap, { children: /* @__PURE__ */ jsxs(Copyright, { children: [
-    "Copyright ",
-    (/* @__PURE__ */ new Date()).getFullYear(),
-    " STOKR. All rights reserved."
-  ] }) })
-] }) }) });
-Footer.propTypes = {
-  color: PropTypes.oneOf(["primary", "red"]),
-  lemonwayLogo: PropTypes.string,
-  hasSidebar: PropTypes.bool,
-  isSidebarExpanded: PropTypes.bool
-};
-var stdin_default = Footer;
-export {
-  Footer,
-  stdin_default as default
-};