@stokr/components-library 2.0.0-beta.9 → 2.0.0

package/dist/api/fetchData.js

@@ -42,21 +42,22 @@ var fetchData = /*#__PURE__*/function () {
                     });
                   case 8:
                     result = _context.sent;
+                    console.log('🚀 ~ result:', result);
                     // console.log(result);
 
                     resolve(result.data);
-                    _context.next = 16;
+                    _context.next = 17;
                     break;
-                  case 12:
-                    _context.prev = 12;
+                  case 13:
+                    _context.prev = 13;
                     _context.t0 = _context["catch"](5);
                     console.log("Error: ".concat(_context.t0));
                     reject(_context.t0);
-                  case 16:
+                  case 17:
                   case "end":
                     return _context.stop();
                 }
-              }, _callee, null, [[5, 12]]);
+              }, _callee, null, [[5, 13]]);
             }));
             return function (_x3, _x4) {
               return _ref2.apply(this, arguments);

package/dist/components/2FA/Connect2FA.js

@@ -7,50 +7,55 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _RegisterEthereum = require("../RegisterEthereum");
+var _rwd = require("../../styles/rwd");
 var _Text = _interopRequireDefault(require("../Text/Text.styles"));
 var _Button = _interopRequireDefault(require("../Button/Button.styles"));
-var _FAQ = _interopRequireDefault(require("../FAQ/FAQ"));
-var _SectionTitle = _interopRequireDefault(require("../SectionTitle/SectionTitle.styles"));
 var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
-var _ComponentScroll = _interopRequireDefault(require("../ComponentScroll/ComponentScroll"));
 var _Modal = require("../Modal/Modal.styles");
-var _StyledText = _interopRequireDefault(require("../Text/StyledText"));
 var _reactQrCode = _interopRequireDefault(require("react-qr-code"));
 var _Grid = require("../Grid/Grid.styles");
+var _CryptoAddress = _interopRequireDefault(require("../CryptoAddress/CryptoAddress"));
+var _customHooks = require("../../utils/customHooks");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Connect2FA = function Connect2FA(props) {
   var _totpData$totpSecret;
   var changeStep = props.changeStep,
-    totpData = props.totpData;
+    totpData = props.totpData,
+    user = props.user;
+  var isMobile = (0, _customHooks.useMobileView)(_rwd.sizes.Mobile);
   return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
     part: 8
   }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
     modalTop: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Connect two factor with stokr"), /*#__PURE__*/_react.default.createElement("p", null, "Scan the QR code on the right or enter secret key manually on your app to connect your account"))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Activate log in 2FA"), /*#__PURE__*/_react.default.createElement("p", null, "1. Open your authenticator app"), /*#__PURE__*/_react.default.createElement("p", null, "2. Scan the QR code or copy the set up key"))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
     modalBot: true
   })), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
     part: 8
-  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-    noPaddingTop: true,
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, totpData && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    center: true,
     noPaddingHorizontal: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    small: true
-  }, /*#__PURE__*/_react.default.createElement("p", null, "1. Start Google Authenticator or a similar app on your phone"), /*#__PURE__*/_react.default.createElement("p", null, "2. In the app, add a new account and scan the QR code below"), /*#__PURE__*/_react.default.createElement("p", null, "3. Click Continue when you are done"))), totpData && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-    center: true
-  }, /*#__PURE__*/_react.default.createElement(_reactQrCode.default, {
+  }, !isMobile && /*#__PURE__*/_react.default.createElement(_reactQrCode.default, {
     size: 180
     //style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
     ,
     value: totpData === null || totpData === void 0 ? void 0 : totpData.totpUri,
     viewBox: "0 0 256 256"
-  }), /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      fontSize: 11
+  }), /*#__PURE__*/_react.default.createElement(_CryptoAddress.default, {
+    data: {
+      value: (_totpData$totpSecret = totpData.totpSecret) === null || _totpData$totpSecret === void 0 ? void 0 : _totpData$totpSecret.secretKey,
+      tooltip: true
+    },
+    fontSize: 11,
+    wrapperStyle: {
+      paddingRight: 0
+    },
+    dataBoxStyle: {
+      width: '100%',
+      whiteSpace: 'nowrap'
     }
-  }, (_totpData$totpSecret = totpData.totpSecret) === null || _totpData$totpSecret === void 0 ? void 0 : _totpData$totpSecret.secretKey)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+  })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     noPaddingTop: true,
     center: true,
     noPaddingHorizontal: true

package/dist/components/2FA/EnterCode.js

@@ -34,19 +34,14 @@ var EnterCode = function EnterCode(props) {
     part: 8
   }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
     modalTop: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Enter 6-Digits code from the app"), /*#__PURE__*/_react.default.createElement("p", null, 'Please put in the two-factor authentication code from your device'))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Enter 2FA code"), /*#__PURE__*/_react.default.createElement("p", null, "Enter the log in 2FA code from your authenticator app"))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
     modalBot: true
-  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalLinkWrap, null, /*#__PURE__*/_react.default.createElement(_Modal.ModalLink, {
+  }, onModalSwitch && /*#__PURE__*/_react.default.createElement(_Modal.ModalLinkWrap, null, /*#__PURE__*/_react.default.createElement(_Modal.ModalLink, {
     as: "button",
     onClick: onModalSwitch
-  }, "Lost your device")))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+  }, "Lost your device?")))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
     part: 8
-  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-    noPaddingTop: true,
-    noPaddingHorizontal: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    small: true
-  }, /*#__PURE__*/_react.default.createElement("p", null, "1. Start authenticator app on your phone"), /*#__PURE__*/_react.default.createElement("p", null, "2. Select connected STOKR account"), /*#__PURE__*/_react.default.createElement("p", null, "3. Copy the code below"))), /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
     initialValues: {
       otpInput: ''
     },
@@ -72,7 +67,7 @@ var EnterCode = function EnterCode(props) {
         setFieldValue('otpInput', e);
         setFieldTouched('otpInput');
       },
-      label: "authentication code"
+      label: "2FA code"
     }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
       show: errors.otpInput && touched.otpInput
     }, errors.otpInput))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {

package/dist/components/2FA/InstallAuthApp.js

@@ -27,7 +27,7 @@ var InstallAuthApp = function InstallAuthApp(props) {
     part: 8
   }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
     modalTop: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Install two factor app"), /*#__PURE__*/_react.default.createElement("p", null, ' ', "In order to set up two-factor authentication you need to install one of the authenticator apps on your phone."))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Install 2FA APP"), /*#__PURE__*/_react.default.createElement("p", null, "Download and install a 2FA app on your device. We recommend using Google Authenticator"))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
     modalBot: true
   })), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
     part: 8
@@ -36,7 +36,7 @@ var InstallAuthApp = function InstallAuthApp(props) {
     noPaddingHorizontal: true
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     small: true
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Click below to download Google Authenticator app. If you already have Google Authenticator installed or use a different Authenticator App, click Continue.", ' '))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Click 'Continue' if you already have an app installed."))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     noPaddingHorizontal: true,
     center: true
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -46,7 +46,7 @@ var InstallAuthApp = function InstallAuthApp(props) {
       window.open('https://onelink.to/ev63j9', '_blank');
     },
     secondary: true
-  }, "Get the app", ' ', /*#__PURE__*/_react.default.createElement("img", {
+  }, "DOWNLOAD THE APP", ' ', /*#__PURE__*/_react.default.createElement("img", {
     src: _google_auth.default,
     width: 20,
     style: {

package/dist/components/2FA/ResetCode.js

@@ -33,14 +33,21 @@ var ResetCode = function ResetCode(props) {
     part: 8
   }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
     modalTop: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Reset your 2FA"), /*#__PURE__*/_react.default.createElement("p", null, "Lost your device? No problem! We are here to help you"))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Lost your device?"), /*#__PURE__*/_react.default.createElement("p", null, "No problem! We are here to help you..."))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
     modalBot: true
-  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalLinkWrap, null, "Know your 2FA code?", ' ', /*#__PURE__*/_react.default.createElement(_Modal.ModalLink, {
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalLinkWrap, null, /*#__PURE__*/_react.default.createElement(_Modal.ModalLink, {
     as: "button",
     onClick: onModalSwitch
-  }, "Enter code")))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+  }, "Enter 2FA code")))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
     part: 8
-  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Please contact our support team at support@stokr.io to help you reset your 2fa"))))));
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("a", {
+    href: "https://stokr.zendesk.com/hc/en-us/requests/new",
+    target: "_blank",
+    rel: "noreferrer",
+    style: {
+      textDecoration: 'underline'
+    }
+  }, "Contact us to reset your 2FA.")))))));
 };
 exports.ResetCode = ResetCode;
 var _default = ResetCode;

package/dist/components/2FA/Sucess2FA.js

@@ -1,39 +1,52 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Sucess2FA = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Text = _interopRequireDefault(require("../Text/Text.styles"));
 var _Button = _interopRequireDefault(require("../Button/Button.styles"));
-var _SectionTitle = _interopRequireDefault(require("../SectionTitle/SectionTitle.styles"));
 var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
-var _ComponentScroll = _interopRequireDefault(require("../ComponentScroll/ComponentScroll"));
+var _Grid = require("../Grid/Grid.styles");
 var _Modal = require("../Modal/Modal.styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Sucess2FA = function Sucess2FA(_ref) {
-  var _onClick = _ref.onClick;
-  return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "two factor authentication")), /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-    noPaddingVertical: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "YOU successfully added 2FA"), /*#__PURE__*/_react.default.createElement("p", null, "Next time you login you will be asked to enter the code from your connected device"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-    noPaddingHorizontal: true,
-    center: true
+  var _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    _ref$titleText = _ref.titleText,
+    titleText = _ref$titleText === void 0 ? 'Success!' : _ref$titleText,
+    _ref$subTitleLeft = _ref.subTitleLeft,
+    subTitleLeft = _ref$subTitleLeft === void 0 ? '' : _ref$subTitleLeft,
+    _ref$textRight = _ref.textRight,
+    textRight = _ref$textRight === void 0 ? '' : _ref$textRight,
+    _ref$buttonText = _ref.buttonText,
+    buttonText = _ref$buttonText === void 0 ? 'Continue' : _ref$buttonText;
+  return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 8
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+    modalTop: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, titleText, " "), /*#__PURE__*/_react.default.createElement("p", null, subTitleLeft))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+    modalBot: true
+  })), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 8
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingVertical: true,
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, textRight))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     minWidth: "240px",
     onClick: function onClick() {
-      // deleteRedirectCookieAndNavigate()
       _onClick();
-    }
-  }, "Continue"))));
+    },
+    fluid: true
+  }, buttonText))))));
 };
 exports.Sucess2FA = Sucess2FA;
 Sucess2FA.propTypes = {
-  changeStep: _propTypes.default.func.isRequired
+  onClick: _propTypes.default.func.isRequired
 };
 var _default = Sucess2FA;
 exports.default = _default;

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

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Disable2FA = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _AuthContext = require("../../context/AuthContext");
-var _LoginModal = _interopRequireDefault(require("../LoginModal/LoginModal"));
 var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
 var _Modal = require("../Modal/Modal");
+var _Modal2 = require("../Modal/Modal.styles");
 var _Text = _interopRequireDefault(require("../Text/Text.styles"));
 var _Button = _interopRequireDefault(require("../Button/Button.styles"));
-var _excluded = ["showFlow", "setShowFlow", "onSuccess"];
+var _Grid = require("../Grid/Grid.styles");
+var _Sucess2FA = _interopRequireDefault(require("./Sucess2FA"));
+var _excluded = ["showFlow", "setShowFlow", "onSuccess", "onRequiresRecentLoginError"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -36,30 +38,17 @@ var Disable2FA = function Disable2FA(_ref) {
   var showFlow = _ref.showFlow,
     setShowFlow = _ref.setShowFlow,
     onSuccess = _ref.onSuccess,
+    onRequiresRecentLoginError = _ref.onRequiresRecentLoginError,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_AuthContext.AuthContext),
-    loginUser = _useContext.loginUser,
-    user = _useContext.user,
     unenrollUser2FA = _useContext.unenrollUser2FA;
   var _useState = (0, _react.useState)({
       confirmDisable: false,
-      login: false,
-      enter2fa: false
+      sucess: false
     }),
     _useState2 = _slicedToArray(_useState, 2),
     isModalOpen = _useState2[0],
     setIsModalOpen = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isActionLoading = _useState4[0],
-    setIsActionLoading = _useState4[1];
-  var _useState5 = (0, _react.useState)({
-      popup: undefined,
-      message: undefined
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    popupError = _useState6[0],
-    setPopupError = _useState6[1];
   (0, _react.useEffect)(function () {
     if (showFlow) {
       setIsModalOpen(_objectSpread(_objectSpread({}, isModalOpen), {}, {
@@ -67,22 +56,6 @@ var Disable2FA = function Disable2FA(_ref) {
       }));
     }
   }, [props.showFlow]);
-  var switchOpenModal = function switchOpenModal(prevModalId, nextModalId) {
-    var _objectSpread2;
-    setIsModalOpen(_objectSpread(_objectSpread({}, isModalOpen), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, prevModalId, false), _defineProperty(_objectSpread2, nextModalId, true), _objectSpread2)));
-  };
-  var handleSetPopupError = function handleSetPopupError(popup, message) {
-    setPopupError({
-      popup: popup,
-      message: message
-    });
-  };
-  var clearPopupError = function clearPopupError() {
-    setPopupError({
-      popup: undefined,
-      message: undefined
-    });
-  };
   var handleDisableClick = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -92,19 +65,23 @@ var Disable2FA = function Disable2FA(_ref) {
             _context.next = 3;
             return unenrollUser2FA();
           case 3:
-            setShowFlow(false);
-            onSuccess && onSuccess();
+            setIsModalOpen(_objectSpread(_objectSpread({}, isModalOpen), {}, {
+              sucess: true
+            }));
             _context.next = 10;
             break;
-          case 7:
-            _context.prev = 7;
+          case 6:
+            _context.prev = 6;
             _context.t0 = _context["catch"](0);
-            console.log('🚀 ~ file: disable-2fa-flow.js:54 ~ error:', _context.t0);
+            console.log('🚀 ~ file: disable-2fa-flow.js ~ error:', _context.t0);
+            if (_context.t0.code === 'auth/requires-recent-login') {
+              onRequiresRecentLoginError && onRequiresRecentLoginError();
+            }
           case 10:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 7]]);
+      }, _callee, null, [[0, 6]]);
     }));
     return function handleDisableClick() {
       return _ref2.apply(this, arguments);
@@ -116,8 +93,27 @@ var Disable2FA = function Disable2FA(_ref) {
       //setIsModalOpen({ ...isModalOpen, confirmDisable: false })
       setShowFlow(false);
     }
-  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h5", null, "Remove two factor authentication"), /*#__PURE__*/_react.default.createElement("p", null, "Are you sure you want to remove two factor authentication?")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-    alignVertically: true,
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+    noPadding: true
+  }, isModalOpen.sucess ? /*#__PURE__*/_react.default.createElement(_Sucess2FA.default, {
+    onClick: function onClick() {
+      setShowFlow(false);
+      onSuccess && 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__*/_react.default.createElement(_Modal2.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 8
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+    modalTop: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Remove your log in 2FA authentication? "), /*#__PURE__*/_react.default.createElement("p", null, "We recommend you to keep 2FA authentication and protect your account with an additional layer of security"))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+    modalBot: true
+  })), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 8
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingVertical: true,
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Do you want to remove your log in 2FA authentication?"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     noPaddingHorizontal: true
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     secondary: true,
@@ -126,106 +122,15 @@ var Disable2FA = function Disable2FA(_ref) {
     },
     onClick: function onClick() {
       return setShowFlow(false);
-    }
-  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: handleDisableClick
-  }, "Yes")))), /*#__PURE__*/_react.default.createElement(_LoginModal.default, {
-    isActionLoading: isActionLoading,
-    popupError: popupError
-    //background={backgroundProp}
-    ,
-    isModalOpen: isModalOpen.login,
-    onModalClose: function onModalClose() {
-      window.location.href = 'https://stokr.info/';
     },
-    onModalSwitch: function onModalSwitch() {
-      window.location.href = 'https://stokr.info/signup';
-    },
-    onForgotPassword: function onForgotPassword() {
-      switchOpenModal('login', 'forgot');
-      clearPopupError();
-      setIsActionLoading(undefined);
-    },
-    onFormSend: /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref3) {
-        var email, password;
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              email = _ref3.email, password = _ref3.password;
-              clearPopupError();
-              setIsActionLoading('login');
-              _context2.prev = 3;
-              if (!(password.length > 128)) {
-                _context2.next = 8;
-                break;
-              }
-              handleSetPopupError('login', 'Your password cannot exceed 128 characters');
-              setIsActionLoading(undefined);
-              return _context2.abrupt("return");
-            case 8:
-              _context2.next = 10;
-              return loginUser(email, password);
-            case 10:
-              _context2.next = 22;
-              break;
-            case 12:
-              _context2.prev = 12;
-              _context2.t0 = _context2["catch"](3);
-              _context2.t1 = _context2.t0.code;
-              _context2.next = _context2.t1 === 'auth/multi-factor-auth-required' ? 17 : 19;
-              break;
-            case 17:
-              // Initiate your second factor sign-in flow. (See next step.)
-              // ...
-              switchOpenModal('login', 'enter2fa');
-              return _context2.abrupt("break", 21);
-            case 19:
-              console.log({
-                error: _context2.t0
-              }); // Handle other errors, such as wrong passwords.
-              return _context2.abrupt("break", 21);
-            case 21:
-              // const errorMessage =
-              //   error &&
-              //   error.response &&
-              //   error.response.data === 'E_AUTH_OBJECTNOTFOUND::User'
-              //     ? error.response.data
-              //     : error.response.data.error_description
-
-              // if (errorMessage === 'E_AUTH_USERNOTACTIVATED') {
-              //   handleSetPopupError(
-              //     'login',
-              //     "You're not activated. We're sending you an activation email right now.",
-              //   )
-              // } else if (errorMessage === 'E_AUTH_PASSWORDINCORRECT') {
-              //   handleSetPopupError(
-              //     'login',
-              //     'The password is not correct. Try again?',
-              //   )
-              // } else if (errorMessage === 'E_AUTH_OBJECTNOTFOUND::User') {
-              //   handleSetPopupError(
-              //     'login',
-              //     "This email is not registered. Are you sure that's the right one?",
-              //   )
-              // } else {
-              //   handleSetPopupError(
-              //     'login',
-              //     "Oops. Something's not right there. Try again?",
-              //   )
-              // }
-              setIsActionLoading(undefined);
-            case 22:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, null, [[3, 12]]);
-      }));
-      return function (_x) {
-        return _ref4.apply(this, arguments);
-      };
-    }()
-  }));
+    fluid: true
+  }, "NO")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true,
+    noPaddingTop: true
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: handleDisableClick,
+    fluid: true
+  }, "Yes")))))))));
 };
 exports.Disable2FA = Disable2FA;
 var _default = Disable2FA;

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

@@ -47,6 +47,13 @@ var Enable2FAFlow = function Enable2FAFlow(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     totpData = _useState4[0],
     settotpData = _useState4[1];
+  var _useState5 = (0, _react.useState)({
+      popup: undefined,
+      message: undefined
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    popupError = _useState6[0],
+    setpopupError = _useState6[1];
   (0, _react.useEffect)(function () {
     if (user) {
       generateTotpSecret(user).then(function (data) {
@@ -54,7 +61,7 @@ var Enable2FAFlow = function Enable2FAFlow(_ref) {
         return;
       }).catch(function (error) {
         console.log(error);
-        if (error.code === 'auth/requires-recent-login') {
+        if (error.code === 'auth/requires-recent-login' || error.code === 'auth/unsupported-first-factor') {
           onRequiresRecentLoginError && onRequiresRecentLoginError();
         }
       });
@@ -76,20 +83,33 @@ var Enable2FAFlow = function Enable2FAFlow(_ref) {
             return enrollUserToTotp(user, totpData.totpSecret, data.otpInput, user.displayName);
           case 5:
             setshowSuccess(true);
-            _context.next = 13;
+            _context.next = 17;
             break;
           case 8:
             _context.prev = 8;
             _context.t0 = _context["catch"](2);
             console.log('🚀 ~ file: enable-2fa-flow.js:60 ~ error:', _context.t0);
             if (!(_context.t0.code === 'auth/invalid-verification-code')) {
-              _context.next = 13;
+              _context.next = 16;
               break;
             }
+            setpopupError({
+              popup: 'enter2fa',
+              message: 'That’s not the right 2FA code. Try again'
+            });
             return _context.abrupt("return", {
               otpInput: 'Invalid code'
             });
-          case 13:
+          case 16:
+            if (_context.t0.code === 'auth/requires-recent-login') {
+              onRequiresRecentLoginError && onRequiresRecentLoginError();
+            } else {
+              setpopupError({
+                popup: 'enter2fa',
+                message: "".concat(_context.t0 !== null && _context.t0 !== void 0 && _context.t0.message ? _context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.message : 'Something went wrong. Try again?')
+              });
+            }
+          case 17:
           case "end":
             return _context.stop();
         }
@@ -100,18 +120,6 @@ var Enable2FAFlow = function Enable2FAFlow(_ref) {
     };
   }();
   var onBackButtonClick = function onBackButtonClick(stepController, prevStepIndex) {
-    if (prevStepIndex === 0) {
-      //setselectedProject({})
-    }
-    // if (prevStepIndex === 0 || prevStepIndex === 1) {
-    //   setWallet(null)
-    //   setAddressToRegister(null)
-    //   setNameToRegister(null)
-    //   setRegisteredAddress(false)
-    //   setError('')
-    //   setverifiedAddress(false)
-    // }
-
     stepController.changeStep(stepsNames[prevStepIndex], prevStepIndex);
   };
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
@@ -126,7 +134,9 @@ var Enable2FAFlow = function Enable2FAFlow(_ref) {
       setshowSuccess(false);
       setShowFlow(false);
       onSuccess && onSuccess();
-    }
+    },
+    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__*/_react.default.createElement(_StepControllerContext.StepControllerProvider, null, /*#__PURE__*/_react.default.createElement(_StepControllerContext.StepControllerConsumer, null, function (stepController) {
     var prevStepIndex = stepController.activeStepIndex - 1;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Modal.ModalBack, {
@@ -161,13 +171,14 @@ var Enable2FAFlow = function Enable2FAFlow(_ref) {
       changeStep: function changeStep() {
         return stepController.changeStep('enter-code', 2, 1);
       },
-      totpData: totpData
+      totpData: totpData,
+      user: user
     }), /*#__PURE__*/_react.default.createElement(_EnterCode.default, {
       id: "enter-code",
       changeStep: function changeStep() {
         console.log('here');
       },
-      popupError: {},
+      popupError: popupError,
       onFormSend: onSubmit
     })));
   }))));