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

package/dist/components/2FA/disable-2fa-flow.js

@@ -1,104 +0,0 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useContext, useState, useEffect } from "react";
-import { AuthContext } from "../../context/AuthContext.js";
-import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
-import { Modal } from "../Modal/Modal.js";
-import { ModalInner, ModalWrapper } from "../Modal/Modal.styles.js";
-import { Text } from "../Text/Text.styles.js";
-import stdin_default$2 from "../Button/Button.styles.js";
-import { Row, Column } from "../Grid/Grid.styles.js";
-import stdin_default$1 from "./Sucess2FA.js";
-import fetchData from "../../api/fetchData.js";
-const Disable2FA = ({ showFlow, setShowFlow, onSuccess, onRequiresRecentLoginError }) => {
-  const { unenrollUser2FA, refreshIdToken } = useContext(AuthContext);
-  const [isModalOpen, setIsModalOpen] = useState({
-    confirmDisable: false,
-    sucess: false
-  });
-  const refreshToken = async () => {
-    try {
-      refreshIdToken();
-    } catch (error) {
-      console.log("🚀 ~ error in refreshToken:", error);
-    }
-  };
-  useEffect(() => {
-    if (showFlow) {
-      refreshToken();
-      setIsModalOpen({
-        ...isModalOpen,
-        confirmDisable: true
-      });
-    }
-  }, [showFlow]);
-  const handleDisableClick = async () => {
-    try {
-      await unenrollUser2FA();
-      setIsModalOpen({
-        ...isModalOpen,
-        sucess: true
-      });
-      try {
-        await fetchData("auth/disable-2fa-email");
-      } catch (error) {
-        console.log("🚀 ~ error while sending email:", error);
-      }
-    } catch (error) {
-      console.log("🚀 ~ file: disable-2fa-flow.js ~ error:", error);
-      if (error.code === "auth/requires-recent-login") {
-        onRequiresRecentLoginError?.();
-      }
-    }
-  };
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    Modal,
-    {
-      isOpen: isModalOpen.confirmDisable,
-      onClose: () => {
-        setShowFlow(false);
-      },
-      children: /* @__PURE__ */ jsx(ModalInner, { noPadding: true, children: isModalOpen.sucess ? /* @__PURE__ */ jsx(
-        stdin_default$1,
-        {
-          continueButtonId: "disable-2fa-success-continue-btn",
-          continueButtonDataCy: "disable-2fa-success-continue",
-          onClick: () => {
-            setShowFlow(false);
-            onSuccess?.();
-          },
-          subTitleLeft: "Your log in 2FA authentication is removed",
-          textRight: "You will not be asked for your 2FA code next time you log in."
-        }
-      ) : /* @__PURE__ */ jsx(ModalWrapper, { children: /* @__PURE__ */ jsxs(Row, { children: [
-        /* @__PURE__ */ jsxs(Column, { part: 8, children: [
-          /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
-            /* @__PURE__ */ jsx("h3", { children: "Remove your log in 2FA authentication? " }),
-            /* @__PURE__ */ jsx("p", { children: "We recommend you to keep 2FA authentication and protect your account with an additional layer of security" })
-          ] }) }),
-          /* @__PURE__ */ jsx(ModalInner, { modalBot: true })
-        ] }),
-        /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsxs(ModalInner, { children: [
-          /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("p", { children: "Do you want to remove your log in 2FA authentication?" }) }) }),
-          /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-            stdin_default$2,
-            {
-              secondary: true,
-              style: { marginRight: 20 },
-              id: "disable-2fa-confirm-no-btn",
-              "data-cy": "disable-2fa-confirm-no",
-              onClick: () => setShowFlow(false),
-              fluid: true,
-              children: "NO"
-            }
-          ) }),
-          /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingTop: true, children: /* @__PURE__ */ jsx(stdin_default$2, { id: "disable-2fa-confirm-yes-btn", "data-cy": "disable-2fa-confirm-yes", onClick: handleDisableClick, fluid: true, children: "Yes" }) })
-        ] }) })
-      ] }) }) })
-    }
-  ) });
-};
-var stdin_default = Disable2FA;
-export {
-  Disable2FA,
-  stdin_default as default
-};

package/dist/components/2FA/enable-2fa-flow.js

@@ -1,167 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useContext, useState, useRef, useLayoutEffect, useEffect } from "react";
-import { Modal } from "../Modal/Modal.js";
-import stdin_default$2 from "../StepController/StepController.js";
-import { StepControllerProvider, StepControllerConsumer } from "../StepController/StepControllerContext.js";
-import stdin_default$3 from "./InstallAuthApp.js";
-import stdin_default$4 from "./Connect2FA.js";
-import stdin_default$5 from "./EnterCode.js";
-import { AuthContext } from "../../context/AuthContext.js";
-import stdin_default$1 from "./Sucess2FA.js";
-import fetchData from "../../api/fetchData.js";
-import { getFirebaseAuth } from "../../firebase-config.js";
-import { ModalInner, ModalBack } from "../Modal/Modal.styles.js";
-const stepsNames = ["app", "connect", "enter-code"];
-const Enable2FAFlow = ({ showFlow, setShowFlow, onSuccess, totpData, onRequiresRecentLoginError }) => {
-  const { user, firebaseUser, enrollUserToTotp, refreshIdToken } = useContext(AuthContext);
-  const [showSuccess, setshowSuccess] = useState(false);
-  const [flowKey, setFlowKey] = useState(0);
-  const prevShowFlowRef = useRef(showFlow);
-  const isFirstMountRef = useRef(true);
-  const [popupError, setpopupError] = useState({
-    popup: void 0,
-    message: void 0
-  });
-  useLayoutEffect(() => {
-    if (isFirstMountRef.current) {
-      isFirstMountRef.current = false;
-      prevShowFlowRef.current = showFlow;
-      return;
-    }
-    if (showFlow && !prevShowFlowRef.current) {
-      setFlowKey((key) => key + 1);
-      setshowSuccess(false);
-      setpopupError({ popup: void 0, message: void 0 });
-    }
-    prevShowFlowRef.current = showFlow;
-  }, [showFlow]);
-  const refreshToken = async () => {
-    try {
-      refreshIdToken();
-    } catch (error) {
-      console.log("🚀 ~ error in refreshToken:", error);
-    }
-  };
-  useEffect(() => {
-    if (user) {
-      refreshToken();
-    }
-  }, [user]);
-  const onSubmit = async (data) => {
-    if (!data) return console.log("not enough data");
-    const mfaUser = firebaseUser || getFirebaseAuth()?.currentUser || user;
-    if (!mfaUser) {
-      setpopupError({
-        popup: "enter2fa",
-        message: "Unable to complete 2FA setup. Please log in again and retry."
-      });
-      return;
-    }
-    try {
-      await enrollUserToTotp(mfaUser, totpData.totpSecret, data.otpInput, user?.displayName || mfaUser?.displayName);
-      setshowSuccess(true);
-      try {
-        await fetchData("auth/enable-2fa-email");
-      } catch (error) {
-        console.log("🚀 ~ error while sending email:", error);
-      }
-    } catch (error) {
-      console.log("🚀 ~ file: enable-2fa-flow.js:60 ~ error:", error);
-      if (error.code === "auth/invalid-verification-code") {
-        setpopupError({
-          popup: "enter2fa",
-          message: "That’s not the right 2FA code. Try again"
-        });
-        return { otpInput: "Invalid code" };
-      } else if (error.code === "auth/requires-recent-login") {
-        onRequiresRecentLoginError?.();
-      } else {
-        setpopupError({
-          popup: "enter2fa",
-          message: `${error?.message ? error?.message : "Something went wrong. Try again?"}`
-        });
-      }
-    }
-  };
-  const onBackButtonClick = (stepController, prevStepIndex) => {
-    stepController.changeStep(stepsNames[prevStepIndex], prevStepIndex);
-  };
-  return /* @__PURE__ */ jsx(Modal, { isOpen: showFlow, onClose: () => setShowFlow(false), children: /* @__PURE__ */ jsx(ModalInner, { noPadding: true, children: showSuccess ? /* @__PURE__ */ jsx(
-    stdin_default$1,
-    {
-      continueButtonId: "enable-2fa-success-continue-btn",
-      continueButtonDataCy: "enable-2fa-success-continue",
-      onClick: () => {
-        if (onSuccess) onSuccess();
-        setshowSuccess(false);
-        setShowFlow(false);
-      },
-      subTitleLeft: "Your log in 2FA authentication is now set",
-      textRight: "You will now be asked for your 2FA code next time you log in."
-    }
-  ) : /* @__PURE__ */ jsx(StepControllerProvider, { initialStep: stepsNames[0], children: /* @__PURE__ */ jsx(StepControllerConsumer, { children: (stepController) => {
-    const prevStepIndex = stepController.activeStepIndex - 1;
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        ModalBack,
-        {
-          onClick: () => onBackButtonClick(stepController, prevStepIndex),
-          hide: stepController.activeStepIndex === 0
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        stdin_default$2,
-        {
-          stepsProgressList: [
-            {
-              id: "app",
-              dataCy: "enable-2fa-progress-app",
-              handleClick: () => {
-                stepController.changeStep("app", 0);
-              }
-            },
-            {
-              id: "connect",
-              dataCy: "enable-2fa-progress-connect",
-              handleClick: () => {
-                stepController.changeStep("connect", 1);
-              }
-            },
-            {
-              id: "enter-code",
-              dataCy: "enable-2fa-progress-enter-code",
-              handleClick: () => stepController.changeStep("enter-code", 2)
-            }
-          ],
-          ...stepController,
-          children: [
-            /* @__PURE__ */ jsx(stdin_default$3, { id: "app", changeStep: () => stepController.changeStep("connect", 1, 0) }),
-            /* @__PURE__ */ jsx(
-              stdin_default$4,
-              {
-                id: "connect",
-                changeStep: () => stepController.changeStep("enter-code", 2, 1),
-                totpData,
-                user
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              stdin_default$5,
-              {
-                id: "enter-code",
-                changeStep: () => {
-                },
-                popupError,
-                onFormSend: onSubmit
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  } }) }, flowKey) }) });
-};
-var stdin_default = Enable2FAFlow;
-export {
-  stdin_default as default
-};

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
-};