@stokr/components-library 2.0.0-beta.2 → 2.0.0-beta.21

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

@@ -7,39 +7,75 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _RegisterEthereum = require("../RegisterEthereum");
 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 _reactDeviceDetect = require("react-device-detect");
+var _TextLink = _interopRequireDefault(require("../TextLink/TextLink.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 Connect2FA = function Connect2FA(props) {
+  var _totpData$totpSecret, _totpData$totpSecret2;
   var changeStep = props.changeStep,
-    totpData = props.totpData;
-  return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "connect 2 factor app")), /*#__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, "connect 2 factor app"), /*#__PURE__*/_react.default.createElement("p", null, "scan the qr code"))), totpData && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-    center: true
-  }, /*#__PURE__*/_react.default.createElement(_reactQrCode.default, {
-    size: 256
+    totpData = props.totpData,
+    user = props.user;
+  // otpauth://totp/dev@it.com?secret=123abc&issuer=StackOverflow
+  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, "Activate sign-in 2FA"))), /*#__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,
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    small: true
+  }, /*#__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"))), totpData && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    center: true,
+    noPaddingHorizontal: true
+  }, _reactDeviceDetect.isMobile ? /*#__PURE__*/_react.default.createElement(_TextLink.default, {
+    to: "otpauth://totp/".concat(user.email, "?secret=").concat((_totpData$totpSecret = totpData.totpSecret) === null || _totpData$totpSecret === void 0 ? void 0 : _totpData$totpSecret.secretKey, "&issuer=STOKR")
+    // onClick={() => {
+    //   console.log(
+    //     `otpauth://totp/${user.email}?secret=${totpData.totpSecret?.secretKey}&issuer=STOKR`,
+    //   )
+    // }}
+  }, ' ', "Open authenticator app with this secret key") : /*#__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(_CryptoAddress.default, {
+    data: {
+      value: (_totpData$totpSecret2 = totpData.totpSecret) === null || _totpData$totpSecret2 === void 0 ? void 0 : _totpData$totpSecret2.secretKey,
+      tooltip: true
+    },
+    fontSize: 11,
+    wrapperStyle: {
+      paddingRight: 0
+    },
+    dataBoxStyle: {
+      width: '100%',
+      whiteSpace: 'nowrap'
+    }
   })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     noPaddingTop: true,
-    center: true
+    center: true,
+    noPaddingHorizontal: true
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    minWidth: "300px",
-    onClick: changeStep
-  }, "Continue"))));
+    minWidth: "150px",
+    onClick: changeStep,
+    fluid: true
+  }, "Continue"))))));
 };
 var _default = Connect2FA;
 exports.default = _default;

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

@@ -34,7 +34,7 @@ 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(_Modal.ModalInner, {
     modalBot: true
   }, /*#__PURE__*/_react.default.createElement(_Modal.ModalLinkWrap, null, /*#__PURE__*/_react.default.createElement(_Modal.ModalLink, {
     as: "button",
@@ -46,7 +46,7 @@ var EnterCode = function EnterCode(props) {
     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("p", null, "Enter the sign-in 2FA code from your authenticator app"))), /*#__PURE__*/_react.default.createElement(_formik.Formik, {
     initialValues: {
       otpInput: ''
     },
@@ -71,7 +71,8 @@ var EnterCode = function EnterCode(props) {
       onChange: function onChange(e) {
         setFieldValue('otpInput', e);
         setFieldTouched('otpInput');
-      }
+      },
+      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

@@ -16,28 +16,58 @@ var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/Comp
 var _ComponentScroll = _interopRequireDefault(require("../ComponentScroll/ComponentScroll"));
 var _Modal = require("../Modal/Modal.styles");
 var _StyledText = _interopRequireDefault(require("../Text/StyledText"));
+var _Grid = require("../Grid/Grid.styles");
+var _google_auth = _interopRequireDefault(require("../../static/images/google_auth.png"));
 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 InstallAuthApp = function InstallAuthApp(props) {
   var changeStep = props.changeStep;
-  return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "install 2 factor app")), /*#__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, "install 2 factor app"), /*#__PURE__*/_react.default.createElement("p", null, "We recommend using google authenticator"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-    noPaddingBottom: true
-  }, /*#__PURE__*/_react.default.createElement(_RegisterEthereum.EthInfo, {
-    center: true
-  }, "I use different app")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+  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, "Install 2FA APP"))), /*#__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,
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    small: true
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Download and install a 2FA app on your device. We recommend Google Authenticator."))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true,
     center: true
-  }), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    minWidth: "150px",
+    fluid: true,
+    onClick: function onClick() {
+      window.open('https://onelink.to/ev63j9', '_blank');
+    },
+    secondary: true
+  }, "DOWNLOAD THE APP", ' ', /*#__PURE__*/_react.default.createElement("img", {
+    src: _google_auth.default,
+    width: 20,
+    style: {
+      verticalAlign: 'middle',
+      marginLeft: '6px',
+      marginTop: '-3px'
+    }
+    //height={20}
+    ,
+    alt: "google auth logo"
+  }))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true,
     noPaddingTop: true,
     center: true
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    minWidth: "300px"
+    minWidth: "150px"
     //onClick={onRegisterClick}
     ,
-    onClick: changeStep
-  }, "Continue"))));
+    onClick: changeStep,
+    fluid: true
+  }, "Continue"))))));
 };
 var _default = InstallAuthApp;
 exports.default = _default;

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

@@ -12,24 +12,30 @@ 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
+  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, "Success"))), /*#__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, {
+    noPaddingHorizontal: true
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     minWidth: "240px",
     onClick: function onClick() {
       // deleteRedirectCookieAndNavigate()
       _onClick();
     }
-  }, "Continue"))));
+  }, "Continue"))))));
 };
 exports.Sucess2FA = Sucess2FA;
 Sucess2FA.propTypes = {

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

@@ -12,7 +12,7 @@ var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/Comp
 var _Modal = require("../Modal/Modal");
 var _Text = _interopRequireDefault(require("../Text/Text.styles"));
 var _Button = _interopRequireDefault(require("../Button/Button.styles"));
-var _excluded = ["showFlow", "setShowFlow", "onSuccess"];
+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 +36,16 @@ 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
+      confirmDisable: 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 +53,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) {
@@ -94,13 +64,16 @@ var Disable2FA = function Disable2FA(_ref) {
           case 3:
             setShowFlow(false);
             onSuccess && onSuccess();
-            _context.next = 10;
+            _context.next = 11;
             break;
           case 7:
             _context.prev = 7;
             _context.t0 = _context["catch"](0);
-            console.log('🚀 ~ file: disable-2fa-flow.js:54 ~ error:', _context.t0);
-          case 10:
+            console.log('🚀 ~ file: disable-2fa-flow.js ~ error:', _context.t0);
+            if (_context.t0.code === 'auth/requires-recent-login') {
+              onRequiresRecentLoginError && onRequiresRecentLoginError();
+            }
+          case 11:
           case "end":
             return _context.stop();
         }
@@ -116,7 +89,7 @@ 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, {
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h5", null, "Do you want to remove your sign-in 2FA authentication? ")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     alignVertically: true,
     noPaddingHorizontal: true
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -127,105 +100,9 @@ var Disable2FA = function Disable2FA(_ref) {
     onClick: function onClick() {
       return setShowFlow(false);
     }
-  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, "NO"), /*#__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);
-      };
-    }()
-  }));
+  }, "Yes")))));
 };
 exports.Disable2FA = Disable2FA;
 var _default = Disable2FA;

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

@@ -115,7 +115,6 @@ var Enable2FAFlow = function Enable2FAFlow(_ref) {
     stepController.changeStep(stepsNames[prevStepIndex], prevStepIndex);
   };
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
-    fullscreen: true,
     isOpen: showFlow,
     onClose: function onClose() {
       return setShowFlow(false);
@@ -162,7 +161,8 @@ 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() {

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

@@ -15,6 +15,7 @@ var _Button = _interopRequireDefault(require("../Button/Button.styles"));
 var _loginWithOtpFlow = _interopRequireDefault(require("./login-with-otp-flow"));
 var _enable2faFlow = _interopRequireDefault(require("./enable-2fa-flow"));
 var _disable2faFlow = _interopRequireDefault(require("./disable-2fa-flow"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _excluded = ["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); }
@@ -78,13 +79,19 @@ var Main2FAFlow = function Main2FAFlow(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     alignVertically: true,
     noPaddingHorizontal: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h5", null, "set up two factor authentication"))), /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Add additional security to your STOKR experience")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h5", null, "SET UP YOUR TWO FACTOR AUTHENTICATION"))), /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Protect your account with an additional layer of security to sign in")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     noPaddingHorizontal: true
   }, /*#__PURE__*/_react.default.createElement(_Switch.default, {
     value1: "enabled",
     value2: "disabled",
+    value2Color: _colors.default.orangishRed,
+    value1Color: _colors.default.freshGreen,
     value: is2FAEnabled ? 'enabled' : 'disabled',
     revertToPrevious: true,
+    hideValues: true,
+    indicatorStyle: {
+      margin: 0
+    },
     handleChange: function handleChange(value) {
       if (value === 'enabled') {
         switchOpenFlow('disable2fa', 'enable2fa');
@@ -92,11 +99,10 @@ var Main2FAFlow = function Main2FAFlow(_ref) {
         switchOpenFlow('enable2fa', 'disable2fa');
       }
     }
-  })), is2FAEnabled && /*#__PURE__*/_react.default.createElement(_Button.default, {
-    minWidth: "150px"
-  }, "change settings"), successMessage && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+  })), successMessage && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     alignVertically: true,
-    noPaddingHorizontal: true
+    noPaddingHorizontal: true,
+    noPaddingTop: true
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     small: true,
     success: true
@@ -110,7 +116,7 @@ var Main2FAFlow = function Main2FAFlow(_ref) {
     onRequiresRecentLoginError: onRequiresRecentLoginError,
     onSuccess: function onSuccess() {
       setis2FAEnabled(true);
-      setsuccessMessage('You successfully enabled two factor authentication');
+      setsuccessMessage('Your sign-in 2FA authentication is now set');
     }
   }), isFlowopen.disable2fa && /*#__PURE__*/_react.default.createElement(_disable2faFlow.default, {
     showFlow: isFlowopen.disable2fa,
@@ -119,9 +125,10 @@ var Main2FAFlow = function Main2FAFlow(_ref) {
         disable2fa: value
       }));
     },
+    onRequiresRecentLoginError: onRequiresRecentLoginError,
     onSuccess: function onSuccess() {
       setis2FAEnabled(false);
-      setsuccessMessage('You successfully disabled two factor authentication');
+      setsuccessMessage('Your sign-in 2FA authentication is now disabled');
     }
   }), !user && /*#__PURE__*/_react.default.createElement(_loginWithOtpFlow.default, null));
 };

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

@@ -28,7 +28,7 @@ var _default = {
 };
 exports.default = _default;
 var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_mainFlow.default, args))));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_mainFlow.default, args), /*#__PURE__*/_react.default.createElement("p", null, "some text"))));
 };
 var MainFlow = Template.bind({});
 exports.MainFlow = MainFlow;

package/dist/components/ComponentScroll/ComponentScroll.js

@@ -22,7 +22,8 @@ var ComponentScroll = function ComponentScroll(props) {
     barPadding = props.barPadding,
     topPadding = props.topPadding,
     className = props.className,
-    handleScroll = props.handleScroll;
+    handleScroll = props.handleScroll,
+    fullHeight = props.fullHeight;
   var scrollRef = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
     if (scrollRef.current) {
@@ -40,7 +41,8 @@ var ComponentScroll = function ComponentScroll(props) {
   return /*#__PURE__*/_react.default.createElement(_ComponentScroll.Container, {
     className: className,
     noMobileScroll: noMobileScroll,
-    isMobile: true
+    isMobile: true,
+    fullHeight: fullHeight
   }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.Outer, {
     offset: offset,
     barPadding: barPadding,

package/dist/components/ComponentScroll/ComponentScroll.styles.js

@@ -8,7 +8,7 @@ exports.TrackV = exports.TrackH = exports.ThumbV = exports.ThumbH = exports.Oute
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _rwd = _interopRequireDefault(require("../../styles/rwd"));
 var _theme = _interopRequireDefault(require("../../styles/theme"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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; }
@@ -16,11 +16,13 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var Container = _styledComponents.default.div.withConfig({
   displayName: "ComponentScrollstyles__Container",
   componentId: "sc-12avd6v-0"
-})(["position:relative;height:364px;width:100%;display:flex;@media screen and (max-width:767px){height:", ";}", ""], function (_ref) {
+})(["position:relative;height:364px;width:100%;display:flex;@media screen and (max-width:767px){height:", ";}", " ", ""], function (_ref) {
   var isMobile = _ref.isMobile;
   return isMobile ? '100%' : '364px';
 }, function (props) {
-  return props.noMobileScroll && (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      & > div > div {\n        overflow: visible !important;\n\n        > div:first-child {\n          overflow: visible !important;\n        }\n      }\n\n      ", "\n    "])), _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      & > div > div {\n        overflow: hidden !important;\n\n        > div:first-child {\n          overflow: scroll !important;  \n        }\n      }\n    "]))));
+  return props.fullHeight && (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      height: 100%;\n    "])));
+}, function (props) {
+  return props.noMobileScroll && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      & > div > div {\n        overflow: visible !important;\n\n        > div:first-child {\n          overflow: visible !important;\n        }\n      }\n\n      ", "\n    "])), _rwd.default.Medium(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      & > div > div {\n        overflow: hidden !important;\n\n        > div:first-child {\n          overflow: scroll !important;  \n        }\n      }\n    "]))));
 });
 exports.Container = Container;
 var TrackH = _styledComponents.default.div.withConfig({
@@ -28,7 +30,7 @@ var TrackH = _styledComponents.default.div.withConfig({
   componentId: "sc-12avd6v-1"
 })(["background-color:", ";left:16px;right:16px;bottom:14px;height:4px;border-radius:4px;", ""], function (props) {
   return _theme.default.cGrey;
-}, _rwd.default.Large(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    left: 32px;\n    right: 32px;\n    bottom: 30px;\n  "]))));
+}, _rwd.default.Large(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    left: 32px;\n    right: 32px;\n    bottom: 30px;\n  "]))));
 exports.TrackH = TrackH;
 var ThumbH = _styledComponents.default.div.withConfig({
   displayName: "ComponentScrollstyles__ThumbH",
@@ -42,7 +44,7 @@ var TrackV = _styledComponents.default.div.withConfig({
   componentId: "sc-12avd6v-3"
 })(["background-color:", ";top:16px;bottom:16px;right:14px;width:4px;border-radius:4px;", ""], function (props) {
   return _theme.default.cGrey;
-}, _rwd.default.Large(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    top: 32px;\n    bottom: 32px;\n    right: 30px;\n  "]))));
+}, _rwd.default.Large(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    top: 32px;\n    bottom: 32px;\n    right: 30px;\n  "]))));
 exports.TrackV = TrackV;
 var ThumbV = _styledComponents.default.div.withConfig({
   displayName: "ComponentScrollstyles__ThumbV",