@stokr/components-library 2.0.0-beta.20 → 2.0.0-beta.22

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

@@ -29,7 +29,7 @@ var Connect2FA = function Connect2FA(props) {
     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 sign-in 2FA"))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
     modalBot: true
   })), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
     part: 8
@@ -38,7 +38,7 @@ var Connect2FA = function Connect2FA(props) {
     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, {
+  }, /*#__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, {
@@ -54,18 +54,12 @@ var Connect2FA = function Connect2FA(props) {
     ,
     value: totpData === null || totpData === void 0 ? void 0 : totpData.totpUri,
     viewBox: "0 0 256 256"
-  }), /*#__PURE__*/_react.default.createElement(_CryptoAddress.default
-  //title={index === 0 ? 'Liquid Addresses' : ''}
-  //address={address.address}
-  , {
+  }), /*#__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
-    // info={totpData.totpSecret?.secretKey}
-    //noHead
-    ,
+    fontSize: 11,
     wrapperStyle: {
       paddingRight: 0
     },

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: ''
     },
@@ -72,7 +72,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(_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, "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(_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/Sucess2FA.js

@@ -23,14 +23,11 @@ var Sucess2FA = function Sucess2FA(_ref) {
     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("p", null, "One step ahead to more secure account"))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+  }, /*#__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, {
-    noPaddingVertical: true,
-    noPaddingHorizontal: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Congratulations! You have successfully enabled two factor authentication for your account"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     noPaddingHorizontal: true
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     minWidth: "240px",

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

@@ -89,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, {
@@ -100,7 +100,7 @@ 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")))));
 };

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

@@ -79,7 +79,7 @@ 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",
@@ -89,6 +89,9 @@ var Main2FAFlow = function Main2FAFlow(_ref) {
     value: is2FAEnabled ? 'enabled' : 'disabled',
     revertToPrevious: true,
     hideValues: true,
+    indicatorStyle: {
+      margin: 0
+    },
     handleChange: function handleChange(value) {
       if (value === 'enabled') {
         switchOpenFlow('disable2fa', 'enable2fa');
@@ -113,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,
@@ -125,7 +128,7 @@ var Main2FAFlow = function Main2FAFlow(_ref) {
     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/LoginModal/LoginModal.js

@@ -30,19 +30,19 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var LoginModal = function LoginModal(props) {
-  var _React$useState = _react.default.useState(null),
+  var _React$useState = _react.default.useState(),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     email = _React$useState2[0],
     setemail = _React$useState2[1];
   var location = (0, _reactRouterDom.useLocation)();
+  var emailSetRef = _react.default.useRef(false);
   _react.default.useEffect(function () {
     //the URL will look like this: /login?email=some.email@email.com
     var search = location.search;
-    if (search.includes('email=')) {
-      var emailFromURL = search.slice(search.indexOf('=') + 1);
-      if (emailFromURL) {
-        setemail(emailFromURL);
-      }
+    var query = new URLSearchParams(search);
+    var email = query.get('email');
+    if (email) {
+      setemail(email);
     }
   }, []);
   var validationSchema = Yup.object().shape({
@@ -98,8 +98,9 @@ var LoginModal = function LoginModal(props) {
       setFieldValue(field.name, field.value, false);
       setFieldTouched(field.name);
     };
-    if (email && values.email !== email) {
+    if (email && values.email !== email && !emailSetRef.current) {
       setFieldValue('email', email);
+      emailSetRef.current = true;
     }
 
     //hack to avoid error when autofill from browser
@@ -115,7 +116,7 @@ var LoginModal = function LoginModal(props) {
       name: "email",
       type: "email",
       label: "Your email",
-      value: email || values.email,
+      value: values.email,
       onChange: onChangeWithTouch,
       onBlur: handleBlur,
       error: !!errors.email,

package/dist/components/LoginModal/LoginModal.stories.js

@@ -55,6 +55,14 @@ var Template = function Template(args) {
 var LoginModalOpen = Template.bind({});
 exports.LoginModalOpen = LoginModalOpen;
 LoginModalOpen.args = {
+  popupError: {
+    message: null,
+    popup: null
+  },
+  popupSuccess: {
+    message: null,
+    popup: null
+  },
   onFormSend: function onFormSend(data) {
     console.log(data);
   },

package/dist/components/Switch/Switch.js

@@ -26,7 +26,8 @@ var Switch = function Switch(props) {
     revertToPrevious = props.revertToPrevious,
     value1Color = props.value1Color,
     value2Color = props.value2Color,
-    hideValues = props.hideValues;
+    hideValues = props.hideValues,
+    indicatorStyle = props.indicatorStyle;
   var _useState = (0, _react.useState)(),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -58,6 +59,7 @@ var Switch = function Switch(props) {
     value2: value === value2,
     onClick: onIndicatorClick,
     dark: dark,
+    style: indicatorStyle,
     value1Color: value1Color,
     value2Color: value2Color
   }), !hideValues && /*#__PURE__*/_react.default.createElement(_Switch.Value, {
@@ -76,7 +78,8 @@ Switch.propTypes = {
   handleChange: _propTypes.default.func.isRequired,
   mobile: _propTypes.default.bool,
   dark: _propTypes.default.bool,
-  hideValues: _propTypes.default.bool
+  hideValues: _propTypes.default.bool,
+  indicatorStyle: _propTypes.default.object
 };
 Switch.defaultProps = {
   mobile: false,

package/dist/components/VerifyEmailModal/VerifyEmailModal.js

@@ -77,9 +77,9 @@ var RenderErrorModal = function RenderErrorModal(props) {
 
   //send activation email automatically if link is expired
   _react.default.useEffect(function () {
-    if ((error === null || error === void 0 ? void 0 : error.code) === 'auth/invalid-action-code') {
-      onModalSwitch && onModalSwitch();
-    }
+    // if (error?.code === 'auth/invalid-action-code') {
+    //   onModalSwitch && onModalSwitch()
+    // }
     if (error !== null && error !== void 0 && error.email && !isDisabled) {
       startCooldown();
       onResend({

package/dist/components/headerHo/HeaderHo.js

@@ -257,7 +257,9 @@ var HeaderHoClass = /*#__PURE__*/function (_Component) {
         return popup;
       });
       var mobileMenuOpen = this.state.mobileMenuOpen;
-      var isFetchingUser = this.context.isFetchingUser;
+      var _this$context = this.context,
+        isFetchingUser = _this$context.isFetchingUser,
+        verifyEmailError = _this$context.verifyEmailError;
       if (!mobileMenuOpen) {
         if (isOpenCurrent) {
           document.body.style.overflow = 'hidden';
@@ -265,6 +267,9 @@ var HeaderHoClass = /*#__PURE__*/function (_Component) {
           document.body.style.overflow = 'unset';
         }
       }
+      if ((verifyEmailError === null || verifyEmailError === void 0 ? void 0 : verifyEmailError.code) === 'auth/invalid-action-code' && !window.location.href.includes('login')) {
+        this.props.navigate('/login');
+      }
 
       // Run after page loaded
       if (!isFetchingUser) {
@@ -289,21 +294,21 @@ var HeaderHoClass = /*#__PURE__*/function (_Component) {
         isLoginModalOpen = _this$props3.isLoginModalOpen,
         setIsLoginModalOpen = _this$props3.setIsLoginModalOpen,
         cooldown = _this$props3.cooldown;
-      var _this$context = this.context,
-        getUser = _this$context.getUser,
-        _this$context$user = _this$context.user,
-        user = _this$context$user === void 0 ? {} : _this$context$user,
-        avatar = _this$context.avatar,
-        logoutUser = _this$context.logoutUser,
-        loginUser = _this$context.loginUser,
-        waitingFor2fa = _this$context.waitingFor2fa,
-        firebaseError = _this$context.firebaseError,
-        loginUserWithTotp = _this$context.loginUserWithTotp,
-        createUser = _this$context.createUser,
-        handleResetPassword = _this$context.handleResetPassword,
-        resendActivationEmail = _this$context.resendActivationEmail,
-        verifyEmailError = _this$context.verifyEmailError,
-        isVerifyingEmail = _this$context.isVerifyingEmail;
+      var _this$context2 = this.context,
+        getUser = _this$context2.getUser,
+        _this$context2$user = _this$context2.user,
+        user = _this$context2$user === void 0 ? {} : _this$context2$user,
+        avatar = _this$context2.avatar,
+        logoutUser = _this$context2.logoutUser,
+        loginUser = _this$context2.loginUser,
+        waitingFor2fa = _this$context2.waitingFor2fa,
+        firebaseError = _this$context2.firebaseError,
+        loginUserWithTotp = _this$context2.loginUserWithTotp,
+        createUser = _this$context2.createUser,
+        handleResetPassword = _this$context2.handleResetPassword,
+        resendActivationEmail = _this$context2.resendActivationEmail,
+        verifyEmailError = _this$context2.verifyEmailError,
+        isVerifyingEmail = _this$context2.isVerifyingEmail;
       return /*#__PURE__*/_react.default.createElement(Outer, {
         fixed: fixed
       }, /*#__PURE__*/_react.default.createElement(_Header.default, {

package/dist/context/AuthContext.js

@@ -439,11 +439,11 @@ var AuthProviderClass = /*#__PURE__*/function (_Component) {
       if (!user) {
         throw new Error('User is not defined');
       }
-      if (!(user !== null && user !== void 0 && user.emailVerified) && !window.location.href.includes('signup.')) {
+      if (!(user !== null && user !== void 0 && user.emailVerified) && !window.location.href.includes('resend-activation-email')) {
         window.location.href = "https://signup.".concat(process.env.REACT_APP_WEBSITE_DOMAIN, "/resend-activation-email");
         return false;
       }
-      if (!(user !== null && user !== void 0 && user.country) && (user === null || user === void 0 ? void 0 : user.user_type) === 'investor' && !window.location.href.includes('signup.')) {
+      if (!(user !== null && user !== void 0 && user.country) && (user === null || user === void 0 ? void 0 : user.user_type) === 'investor' && !window.location.href.includes('/welcome')) {
         window.location.href = "https://signup.".concat(process.env.REACT_APP_WEBSITE_DOMAIN, "/welcome");
         return false;
       }
@@ -538,18 +538,17 @@ var AuthProviderClass = /*#__PURE__*/function (_Component) {
               _yield$Auth$updateUse = _context10.sent;
               user = _yield$Auth$updateUse.user;
               _this.setUser(user);
-              _context10.next = 12;
-              break;
-            case 8:
-              _context10.prev = 8;
+              return _context10.abrupt("return", user);
+            case 9:
+              _context10.prev = 9;
               _context10.t0 = _context10["catch"](0);
               console.log("Error updating the user: ".concat(_context10.t0));
               throw _context10.t0;
-            case 12:
+            case 13:
             case "end":
               return _context10.stop();
           }
-        }, _callee10, null, [[0, 8]]);
+        }, _callee10, null, [[0, 9]]);
       }));
       return function (_x14) {
         return _ref10.apply(this, arguments);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.0.0-beta.20",
+  "version": "2.0.0-beta.22",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",