@stokr/components-library 3.0.16 → 3.0.17

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

@@ -0,0 +1,137 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useContext, useState, 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 { ModalInner, ModalBack } from "../Modal/Modal.styles.js";
+const stepsNames = ["app", "connect", "enter-code"];
+const Enable2FAFlow = ({ showFlow, setShowFlow, onSuccess, totpData, onRequiresRecentLoginError }) => {
+  const { user, enrollUserToTotp, refreshIdToken } = useContext(AuthContext);
+  const [showSuccess, setshowSuccess] = useState(false);
+  const [popupError, setpopupError] = useState({
+    popup: void 0,
+    message: void 0
+  });
+  const refreshToken = async () => {
+    try {
+      refreshIdToken();
+    } catch (error) {
+      console.log("🚀 ~ error in refreshToken:", error);
+    }
+  };
+  useEffect(() => {
+    if (user) {
+      refreshToken();
+    }
+  }, [user]);
+  const onSubmit = async (data) => {
+    if (!user || !data) return console.log("not enough data");
+    try {
+      await enrollUserToTotp(user, totpData.totpSecret, data.otpInput, user.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,
+    {
+      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, { 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",
+              handleClick: () => {
+                stepController.changeStep("app", 0);
+              }
+            },
+            {
+              id: "connect",
+              handleClick: () => {
+                stepController.changeStep("connect", 1);
+              }
+            },
+            {
+              id: "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
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  } }) }) }) });
+};
+var stdin_default = Enable2FAFlow;
+export {
+  stdin_default as default
+};

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

@@ -0,0 +1,206 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext, useState, useEffect } from "react";
+import { AuthContext } from "../../context/AuthContext.js";
+import { Layout } from "../Layout/Layout.js";
+import stdin_default$1 from "../LoginModal/LoginModal.js";
+import stdin_default$4 from "../ForgotPasswordModal/ForgotPasswordModal.js";
+import stdin_default$2 from "./EnterCode.js";
+import background from "../../static/images/background3.png.js";
+import stdin_default$3 from "./ResetCode.js";
+import { authAPI } from "../../api/auth.js";
+const LoginWithOTP = ({ withBackground }) => {
+  const { loginUser, waitingFor2fa, firebaseError, loginUserWithTotp, reset2faFlow } = useContext(AuthContext);
+  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({
+      ...isModalOpen,
+      [prevModalId]: false,
+      [nextModalId]: true
+    });
+  };
+  useEffect(() => {
+    if (waitingFor2fa) {
+      switchOpenModal("login", "enter2fa");
+    }
+  }, [waitingFor2fa]);
+  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, children: [
+    /* @__PURE__ */ jsx(
+      stdin_default$1,
+      {
+        isActionLoading,
+        popupError,
+        background: withBackground && backgroundProp,
+        isModalOpen: isModalOpen.login,
+        onModalClose: () => {
+          window.location.href = `https://${"stokr.info"}`;
+        },
+        onModalSwitch: () => {
+          window.location.href = `https://${"stokr.info"}/signup`;
+        },
+        onForgotPassword: () => {
+          switchOpenModal("login", "forgot");
+          clearPopupError();
+          setIsActionLoading(void 0);
+        },
+        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);
+          } catch (error) {
+            const errorMessage = error?.message;
+            if (error?.code === "auth/multi-factor-auth-required") {
+              clearPopupError();
+              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);
+          } 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 authAPI("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);
+          }
+        }
+      }
+    )
+  ] });
+};
+var stdin_default = LoginWithOTP;
+export {
+  LoginWithOTP,
+  stdin_default as default
+};

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

@@ -0,0 +1,217 @@
+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";
+const Main2FAFlow = ({
+  onRequiresRecentLoginError,
+  open2faflow,
+  onLoginAgainClick,
+  openDisable2faflow,
+  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
+}) => {
+  const { user, checkMfaEnrollment, userMfaEnrollment, generateTotpSecret } = useContext(AuthContext);
+  const [isFlowopen, setIsFlowOpen] = useState({
+    enable2fa: open2faflow || false,
+    disable2fa: openDisable2faflow || false,
+    requiresRecentLogin: false
+  });
+  const [is2FAEnabled, setis2FAEnabled] = useState(false);
+  const [successMessage, setsuccessMessage] = useState();
+  const [isLoginRequired, setisLoginRequired] = useState(false);
+  const [totpData, settotpData] = useState();
+  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) {
+      checkMfaEnrollment();
+      generateTotp();
+    }
+  }, [user, userMfaEnrollment]);
+  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 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 flowActions = {
+    openEnable2FA: () => switchOpenFlow("disable2fa", "enable2fa"),
+    openDisable2FA: () => 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,
+            {
+              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") {
+                  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
+      }
+    ),
+    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,
+      {
+        onClick: () => {
+          onLoginAgainClick?.();
+        },
+        titleText: "LOG IN AGAIN",
+        subTitleLeft: "To enable your log in two factor authentication please log in again",
+        buttonText: "Log in again"
+      }
+    ) }) }),
+    !user && /* @__PURE__ */ jsx(stdin_default$5, {})
+  ] });
+};
+Main2FAFlow.propTypes = {
+  onRequiresRecentLoginError: PropTypes.func,
+  /** 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/AccountBalance/AccountBalance.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { InfoIcon } from "../InfoIcon/InfoIcon.js";
+import { Container, Head, Title, Body, Value, Equal } from "./AccountBalance.styles.js";
+const AccountBalance = ({ title, value, unit, info = "", eqValue = "", eqUnit = "", right = false }) => /* @__PURE__ */ jsxs(Container, { right, children: [
+  /* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsxs(Title, { children: [
+    title,
+    info && /* @__PURE__ */ jsx(InfoIcon, { position: "top", title: info })
+  ] }) }),
+  /* @__PURE__ */ jsxs(Body, { children: [
+    /* @__PURE__ */ jsxs(Value, { children: [
+      unit && `${unit} `,
+      value
+    ] }),
+    eqValue && /* @__PURE__ */ jsxs(Equal, { children: [
+      "= ",
+      eqUnit && `${eqUnit}`,
+      eqValue
+    ] })
+  ] })
+] });
+AccountBalance.propTypes = {
+  title: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  unit: PropTypes.string.isRequired,
+  eqValue: PropTypes.string,
+  eqUnit: PropTypes.string,
+  info: PropTypes.string,
+  right: PropTypes.bool,
+  fontSizeSmall: PropTypes.bool
+};
+export {
+  AccountBalance
+};

package/dist/components/AccountBalance/AccountBalance.styles.js

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+const Container = styled.div.withConfig({
+  shouldForwardProp: (props) => !["right"].includes(props)
+})`
+  position: relative;
+  margin-right: -20px;
+
+  ${(props) => props.right && `
+    text-align: right;
+  `}
+`;
+const Head = styled.div`
+  position: relative;
+  margin-bottom: 4px;
+`;
+const Body = styled.div`
+  position: relative;
+`;
+const Title = styled.div`
+  font-weight: bold;
+  font-size: 11px;
+  line-height: 24px;
+  letter-spacing: 2.04px;
+  text-transform: uppercase;
+`;
+const Value = styled.div`
+  position: relative;
+  font-weight: 300;
+  font-size: 22px;
+  line-height: 28px;
+  letter-spacing: 0.8px;
+`;
+const Equal = styled.div`
+  position: relative;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+  font-size: 11px;
+  font-style: italic;
+  margin-top: 8px;
+`;
+export {
+  Body,
+  Container,
+  Equal,
+  Head,
+  Title,
+  Value
+};