@stokr/components-library 3.0.47 → 3.0.49

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

@@ -9,10 +9,11 @@ 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, enrollUserToTotp, refreshIdToken } = useContext(AuthContext);
+  const { user, firebaseUser, enrollUserToTotp, refreshIdToken } = useContext(AuthContext);
   const [showSuccess, setshowSuccess] = useState(false);
   const [popupError, setpopupError] = useState({
     popup: void 0,
@@ -31,9 +32,17 @@ const Enable2FAFlow = ({ showFlow, setShowFlow, onSuccess, totpData, onRequiresR
     }
   }, [user]);
   const onSubmit = async (data) => {
-    if (!user || !data) return console.log("not enough 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(user, totpData.totpSecret, data.otpInput, user.displayName);
+      await enrollUserToTotp(mfaUser, totpData.totpSecret, data.otpInput, user?.displayName || mfaUser?.displayName);
       setshowSuccess(true);
       try {
         await fetchData("auth/enable-2fa-email");

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

@@ -10,6 +10,7 @@ import stdin_default$3 from "./ResetCode.js";
 import { authenticationApi } from "../../api/authenticationApi.js";
 import { useNavigate } from "react-router-dom";
 import { getConfig, getPlatformURL } from "../../runtime-config.js";
+import { isAccountLockedError, showAccountLockedModal } from "../../utils/show-account-locked-modal.js";
 import { navigateToHref } from "../../routing/navigate-app.js";
 const LoginWithOTP = ({ withBackground, useRelativePathForMenu = false }) => {
   const navigate = useNavigate();
@@ -95,6 +96,21 @@ const LoginWithOTP = ({ withBackground, useRelativePathForMenu = false }) => {
               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 {

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

@@ -13,11 +13,14 @@ 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,
@@ -27,7 +30,7 @@ const Main2FAFlow = ({
   const { user, checkMfaEnrollment, userMfaEnrollment, generateTotpSecret } = useContext(AuthContext);
   const [isFlowopen, setIsFlowOpen] = useState({
     enable2fa: open2faflow || false,
-    disable2fa: openDisable2faflow || false,
+    disable2fa: allowDisable2FA && (openDisable2faflow || false),
     requiresRecentLogin: false
   });
   const [is2FAEnabled, setis2FAEnabled] = useState(false);
@@ -81,6 +84,16 @@ const Main2FAFlow = ({
       [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 });
@@ -99,7 +112,14 @@ const Main2FAFlow = ({
   };
   const flowActions = {
     openEnable2FA: () => switchOpenFlow("disable2fa", "enable2fa"),
-    openDisable2FA: () => switchOpenFlow("enable2fa", "disable2fa"),
+    openDisable2FA: () => {
+      if (!is2FAEnabled) return;
+      if (!allowDisable2FA) {
+        void showDisable2faBlockedModal();
+        return;
+      }
+      switchOpenFlow("enable2fa", "disable2fa");
+    },
     closeFlows: () => {
       const wasOpen = Object.keys(isFlowopen).find((key) => isFlowopen[key]);
       setIsFlowOpen({
@@ -148,6 +168,10 @@ const Main2FAFlow = ({
                 } else if (value === "enabled") {
                   switchOpenFlow("disable2fa", "enable2fa");
                 } else if (value === "disabled") {
+                  if (!allowDisable2FA) {
+                    void showDisable2faBlockedModal();
+                    return;
+                  }
                   switchOpenFlow("enable2fa", "disable2fa");
                 }
               }
@@ -177,7 +201,7 @@ const Main2FAFlow = ({
         onSuccess: onEnable2FASuccess
       }
     ),
-    isFlowopen.disable2fa && /* @__PURE__ */ jsx(
+    allowDisable2FA && isFlowopen.disable2fa && /* @__PURE__ */ jsx(
       stdin_default$3,
       {
         showFlow: isFlowopen.disable2fa,
@@ -210,6 +234,7 @@ const Main2FAFlow = ({
 };
 Main2FAFlow.propTypes = {
   onRequiresRecentLoginError: PropTypes.func,
+  allowDisable2FA: PropTypes.bool,
   /** Called when any flow/modal is closed. Receives the flowId: 'enable2fa' | 'disable2fa' | 'requiresRecentLogin' */
   onFlowClose: PropTypes.func
 };

package/dist/components/headerHo/HeaderHo.js

@@ -23,6 +23,7 @@ import { auth } from "../../firebase-config.js";
 import { getConfig } from "../../runtime-config.js";
 import { getBackofficeAppUrl } from "../../utils/app-urls-analytics-backoffice.js";
 import { track } from "../../analytics/index.js";
+import { isAccountLockedError, showAccountLockedModal } from "../../utils/show-account-locked-modal.js";
 import { navigateToHref } from "../../routing/navigate-app.js";
 const Outer = styled.div.withConfig({
   shouldForwardProp: (props) => !["fixed"].includes(props)
@@ -320,6 +321,15 @@ const _HeaderHoClass = class _HeaderHoClass extends Component {
                 this.setIsActionLoading(void 0);
                 return;
               }
+              if (isAccountLockedError(error)) {
+                this.setOpenModalStatus("login", false);
+                setIsLoginModalOpen?.(false);
+                this.clearPopupError();
+                this.setIsActionLoading(void 0);
+                await showAccountLockedModal();
+                this.setOpenModalStatus("login", true);
+                return;
+              }
               if (errorMessage) {
                 this.setPopupError("login", errorMessage);
               } else {

package/dist/index.js

@@ -135,6 +135,7 @@ import { isUSInvestor, usCountries } from "./utils/isUSInvestor.js";
 import { km_ify } from "./utils/km_ify.js";
 import { momentUtils } from "./utils/moment.js";
 import { openFile, saveAs } from "./utils/saveAs.js";
+import { isAccountLockedError, showAccountLockedModal } from "./utils/show-account-locked-modal.js";
 import { ScrollToTop, scrollToElement, useScrollActions } from "./utils/scrollUtils.js";
 import { useTimer } from "./hooks/useTimer.js";
 import { useTransactionPolling } from "./hooks/useTransactionPolling.js";
@@ -625,6 +626,7 @@ export {
   iconsMap,
   identify,
   initAnalytics,
+  isAccountLockedError,
   isAlreadyOnOnboardingFlow,
   isExternalUrl,
   isUSInvestor,
@@ -647,6 +649,7 @@ export {
   scrollToElement,
   default6 as semanticUiStyle,
   setUserProperties,
+  showAccountLockedModal,
   showProgress,
   showSuccess,
   sizes,

package/dist/utils/show-account-locked-modal.js

@@ -0,0 +1,23 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import "react";
+import { showProgress } from "../components/Modal/SuccessModal/SuccessModal.js";
+const SUPPORT_URL = "https://support.stokr.io/";
+const ACCOUNT_LOCKED_CODE = "auth/user-disabled";
+const isAccountLockedError = (error) => error?.code === ACCOUNT_LOCKED_CODE;
+const showAccountLockedModal = ({ background } = {}) => showProgress({
+  title: "TOO MANY ATTEMPTS",
+  subtitle: /* @__PURE__ */ jsxs(Fragment, { children: [
+    "For your security, your account has been temporarily locked after multiple failed sign-in attempts. To restore access, contact our",
+    " ",
+    /* @__PURE__ */ jsx("a", { href: SUPPORT_URL, target: "_blank", rel: "noreferrer", style: { textDecoration: "underline" }, children: /* @__PURE__ */ jsx("u", { children: "support team" }) }),
+    "."
+  ] }),
+  maxWidth: "820px",
+  modalProps: {
+    background
+  }
+});
+export {
+  isAccountLockedError,
+  showAccountLockedModal
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.47",
+  "version": "3.0.49",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",