@stokr/components-library 1.1.4 → 1.1.6

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

@@ -0,0 +1,122 @@
+"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.Main2FAFlow = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _AuthContext = require("../../context/AuthContext");
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _Switch = _interopRequireDefault(require("../Switch/Switch"));
+var _Text = _interopRequireDefault(require("../Text/Text.styles"));
+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"));
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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 Main2FAFlow = function Main2FAFlow(props) {
+  var _useContext = (0, _react.useContext)(_AuthContext.AuthContext),
+    user = _useContext.user,
+    checkMfaEnrollment = _useContext.checkMfaEnrollment,
+    userMfaEnrollment = _useContext.userMfaEnrollment;
+  var _useState = (0, _react.useState)({
+      enable2fa: false,
+      disable2fa: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFlowopen = _useState2[0],
+    setIsFlowOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    is2FAEnabled = _useState4[0],
+    setis2FAEnabled = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    successMessage = _useState6[0],
+    setsuccessMessage = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (userMfaEnrollment) {
+      if (userMfaEnrollment.length > 0) setis2FAEnabled(true);
+    } else if (user) {
+      checkMfaEnrollment(user);
+    }
+  }, [user, userMfaEnrollment]);
+
+  //remove succes message after 5 seconds
+  (0, _react.useEffect)(function () {
+    if (successMessage) {
+      setTimeout(function () {
+        setsuccessMessage();
+      }, 5000);
+    }
+  }, [successMessage]);
+  var switchOpenFlow = function switchOpenFlow(prevFlowId, nextFlowId) {
+    var _objectSpread2;
+    setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, prevFlowId, false), _defineProperty(_objectSpread2, nextFlowId, true), _objectSpread2)));
+  };
+  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, {
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Switch.default, {
+    value1: "enabled",
+    value2: "disabled",
+    value: is2FAEnabled ? 'enabled' : 'disabled',
+    revertToPrevious: true,
+    handleChange: function handleChange(value) {
+      if (value === 'enabled') {
+        switchOpenFlow('disable2fa', 'enable2fa');
+      } else if (value === 'disabled') {
+        switchOpenFlow('enable2fa', 'disable2fa');
+      }
+    }
+  })), is2FAEnabled && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    minWidth: "150px"
+  }, "change settings"), successMessage && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    alignVertically: true,
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    small: true,
+    success: true
+  }, /*#__PURE__*/_react.default.createElement("p", null, successMessage))), isFlowopen.enable2fa && /*#__PURE__*/_react.default.createElement(_enable2faFlow.default, {
+    showFlow: isFlowopen.enable2fa,
+    setShowFlow: function setShowFlow(value) {
+      return setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, {
+        enable2fa: value
+      }));
+    },
+    onSuccess: function onSuccess() {
+      setis2FAEnabled(true);
+      setsuccessMessage('You successfully enabled two factor authentication');
+    }
+  }), isFlowopen.disable2fa && /*#__PURE__*/_react.default.createElement(_disable2faFlow.default, {
+    showFlow: isFlowopen.disable2fa,
+    setShowFlow: function setShowFlow(value) {
+      return setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, {
+        disable2fa: value
+      }));
+    },
+    onSuccess: function onSuccess() {
+      setis2FAEnabled(false);
+      setsuccessMessage('You successfully disabled two factor authentication');
+    }
+  }), !user && /*#__PURE__*/_react.default.createElement(_loginWithOtpFlow.default, null));
+};
+exports.Main2FAFlow = Main2FAFlow;
+var _default = Main2FAFlow;
+exports.default = _default;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MainFlow = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _mainFlow = _interopRequireDefault(require("./main-flow"));
+var _AuthContext = require("../../context/AuthContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/2FA',
+  component: _mainFlow.default,
+  argTypes: {
+    showFlow: {
+      type: 'boolean',
+      defaultValue: true
+    },
+    setShowFlow: {},
+    setShowPending: {},
+    withSuccessPage: {
+      type: 'boolean',
+      defaultValue: false
+    }
+  }
+};
+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))));
+};
+var MainFlow = Template.bind({});
+exports.MainFlow = MainFlow;
+MainFlow.args = {};

package/dist/components/Checkbox/Checkbox.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Checkbox = require("./Checkbox.styles");
-var _excluded = ["id", "name", "text", "label", "value", "checked", "large", "error", "touched", "onChange", "onBlur", "onFocus", "textStyle", "disabled", "onTermsClicked", "onClick"];
+var _excluded = ["id", "name", "text", "label", "value", "checked", "large", "error", "touched", "onChange", "onBlur", "onFocus", "textStyle", "disabled", "onClick"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -35,7 +35,6 @@ var Checkbox = function Checkbox(_ref) {
     onFocus = _ref.onFocus,
     textStyle = _ref.textStyle,
     disabled = _ref.disabled,
-    onTermsClicked = _ref.onTermsClicked,
     onClick = _ref.onClick,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Checkbox.Wrapper, null, label && /*#__PURE__*/_react.default.createElement(_Checkbox.Label, {

package/dist/components/Checkbox/Checkbox.styles.js

@@ -21,7 +21,7 @@ exports.Label = Label;
 var Input = _styledComponents.default.div.withConfig({
   displayName: "Checkboxstyles__Input",
   componentId: "sc-1drozoj-2"
-})(["position:relative;& > input{z-index:-1;position:absolute;top:4px;left:4px;display:block;width:1px;height:0;opacity:0;border:0;& + label{position:relative;display:inline-block;max-width:100%;padding-left:28px;font-family:'Open Sans';font-size:12px;line-height:16px;font-weight:300;letter-spacing:0.4px;cursor:pointer;", ";&:before,&:after{display:block;position:absolute;}&:before{content:'';top:0;left:0;width:16px;height:16px;border-radius:3px;border:1px solid #9b9b9b;box-shadow:none;transition:border-color 0.2s;", " ", "}&:after{content:'\\f3ff';font-family:'Ionicons';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;top:3px;left:3px;width:10px;height:10px;font-size:22px;line-height:10px;text-align:center;color:transparent;", ";}}&:focus + label,&:hover + label{&:before{border-color:", ";}}&:checked + label{&:after{color:", ";}}}"], function (props) {
+})(["position:relative;& > input{z-index:-1;position:absolute;top:4px;left:4px;display:block;width:1px;height:0;opacity:0;border:0;& + label{position:relative;display:inline-block;max-width:100%;padding-left:28px;font-family:'Open Sans';font-size:12px;line-height:16px;font-weight:300;letter-spacing:0.4px;cursor:pointer;p{margin:0;}", ";&:before,&:after{display:block;position:absolute;}&:before{content:'';top:0;left:0;width:16px;height:16px;border-radius:3px;border:1px solid #9b9b9b;box-shadow:none;transition:border-color 0.2s;", " ", "}&:after{content:'\\f3ff';font-family:'Ionicons';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;top:3px;left:3px;width:10px;height:10px;font-size:22px;line-height:10px;text-align:center;color:transparent;", ";}}&:focus + label,&:hover + label{&:before{border-color:", ";}}&:checked + label{&:after{color:", ";}}}"], function (props) {
   return props.error && "color: ".concat(_theme.default.cWarning);
 }, function (props) {
   return props.large && "\n          width: 20px;\n          height: 20px;\n          border-radius: 4px;\n        ";

package/dist/components/ComponentScroll/ComponentScroll.stories.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ScrollAutoHeight2000 = exports.ScrollAutoHeight1000 = void 0;
+exports.default = exports.ScrollAutoHeight2000 = exports.ScrollAutoHeight1000 = exports.ModalWithScroll = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ComponentScroll = require("./ComponentScroll");
 var _SvgIcons = require("../SvgIcons");
+var _Modal = require("../Modal/Modal");
+var _global = _interopRequireDefault(require("../../styles/global"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
   title: 'Components Library/ComponentScroll',
@@ -99,4 +101,18 @@ ScrollAutoHeight2000.args = {
   autoHeight: true,
   autoHeightMax: 2000,
   autoHeightMin: 2000
-};
+};
+var ModalWithScroll = function ModalWithScroll(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    thin: true,
+    fullscreen: true,
+    isOpen: true
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+    noPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.ComponentScroll, args, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: 350
+    }
+  }, "some text")))));
+};
+exports.ModalWithScroll = ModalWithScroll;

package/dist/components/ForgotPasswordModal/ForgotPasswordModal.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ForgotPasswordModal = void 0;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _formik = require("formik");
@@ -46,7 +46,7 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
       email: ''
     });
     _defineProperty(_assertThisInitialized(_this), "validationSchema", Yup.object().shape({
-      email: Yup.string().email('Email is not valid').required('Email is required')
+      email: Yup.string().email("Oops, that's not a valid address").required('Oops, this can‘t be blank')
     }));
     return _this;
   }
@@ -57,7 +57,10 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
         isModalOpen = _this$props.isModalOpen,
         onModalClose = _this$props.onModalClose,
         onFormSend = _this$props.onFormSend,
-        onModalSwitch = _this$props.onModalSwitch;
+        onModalSwitch = _this$props.onModalSwitch,
+        popupError = _this$props.popupError,
+        popupSuccess = _this$props.popupSuccess,
+        isActionLoading = _this$props.isActionLoading;
       return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
         isOpen: isModalOpen,
         onClose: onModalClose
@@ -65,17 +68,20 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
         part: 8
       }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
         modalTop: true
-      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Forgot password"), /*#__PURE__*/_react.default.createElement("p", null, 'Please log in to engage in our community & invest in exciting opportunities.'))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Reset Your password"), /*#__PURE__*/_react.default.createElement("p", null, "No hints. No nudges. Just a nice, easy reset link direct to your inbox."))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
         modalBot: true
       }, /*#__PURE__*/_react.default.createElement(_Modal.ModalLinkWrap, null, 'Remember your password? ', /*#__PURE__*/_react.default.createElement(_Modal.ModalLink, {
+        to: "#",
         as: "button",
         onClick: onModalSwitch
-      }, "Sign up")))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+      }, "Log in")))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
         part: 8
-      }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+      }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, popupSuccess.popup !== 'forgot' ? /*#__PURE__*/_react.default.createElement(_formik.Formik, {
         initialValues: this.initialValues,
         validationSchema: this.validationSchema,
-        onSubmit: onFormSend
+        onSubmit: function onSubmit(values) {
+          onFormSend(values);
+        }
       }, function (_ref) {
         var values = _ref.values,
           errors = _ref.errors,
@@ -88,7 +94,7 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
           setFieldValue(field.name, field.value, false);
           setFieldTouched(field.name);
         };
-        var submitDisabled = !touched.email || !!errors.email;
+        var submitDisabled = !touched.email || !!errors.email || isActionLoading === 'forgot';
         return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
           noPadding: true
         }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
@@ -110,13 +116,24 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
           type: "submit",
           fluid: true,
           disabled: submitDisabled
-        }, "Remind")));
-      })))));
+        }, isActionLoading === 'forgot' ? 'Sending Reset Link' : 'Send Reset Link')), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+          paddingVeticalHalf: true,
+          noPaddingHorizontal: true
+        }, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
+          show: popupError.popup === 'forgot'
+        }, popupError.message)));
+      }) :
+      /*#__PURE__*/
+      // <ComponentWrapper paddingVeticalHalf noPaddingHorizontal>
+      //   <FormError show={popupSuccess.popup === 'forgot'}>
+      //     {popupSuccess.message}
+      //   </FormError>
+      // </ComponentWrapper>
+      _react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, popupSuccess.message))))));
     }
   }]);
   return ForgotPasswordModal;
 }(_react.PureComponent);
-exports.ForgotPasswordModal = ForgotPasswordModal;
 ForgotPasswordModal.propTypes = {
   isModalOpen: _propTypes.default.bool.isRequired,
   onModalClose: _propTypes.default.func.isRequired,

package/dist/components/Header/Header.js

@@ -26,7 +26,7 @@ var _Grid = require("../Grid/Grid.styles");
 var _FooterLayout = require("../Footer/FooterLayout");
 var _globalVariables = require("../../constants/globalVariables");
 var _rwd = require("../../styles/rwd");
-var _excluded = ["activeMenu", "activateMenu", "user", "userPhoto", "logoutUser", "onLoginClick", "onSignUpClick", "useRelativePathForMenu", "useRelativePathForUserMenu", "progress", "withSidebar", "isSidebarExpanded", "sidebarHandler", "signupFlow", "noFixedPosition"];
+var _excluded = ["activeMenu", "activateMenu", "user", "userPhoto", "logoutUser", "onLoginClick", "onSignUpClick", "useRelativePathForMenu", "useRelativePathForUserMenu", "progress", "withSidebar", "isSidebarExpanded", "sidebarHandler", "signupFlow", "noFixedPosition", "withoutLoginSignupButton"];
 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; }
@@ -177,6 +177,8 @@ var Header = function Header(_ref3) {
     signupFlow = _ref3$signupFlow === void 0 ? false : _ref3$signupFlow,
     _ref3$noFixedPosition = _ref3.noFixedPosition,
     noFixedPosition = _ref3$noFixedPosition === void 0 ? false : _ref3$noFixedPosition,
+    _ref3$withoutLoginSig = _ref3.withoutLoginSignupButton,
+    withoutLoginSignupButton = _ref3$withoutLoginSig === void 0 ? false : _ref3$withoutLoginSig,
     props = _objectWithoutProperties(_ref3, _excluded);
   var _useState3 = (0, _react.useState)(null),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -286,11 +288,11 @@ var Header = function Header(_ref3) {
     avatar: userPhoto
   })), checkTodoStatus(user) > 0 && /*#__PURE__*/_react.default.createElement(_NotificationCounter.default, {
     avatar: true
-  }, checkTodoStatus(user)))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_breakdown.default, null, /*#__PURE__*/_react.default.createElement(_Header.LoginButton, {
+  }, checkTodoStatus(user)))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, withoutLoginSignupButton ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_breakdown.default, null, /*#__PURE__*/_react.default.createElement(_Header.LoginButton, {
     onClick: onLoginClick
   }, "Log in")), /*#__PURE__*/_react.default.createElement(_Header.SignupButton, {
     onClick: onSignUpClick
-  }, "Sign Up"))))), /*#__PURE__*/_react.default.createElement(_Header.MobileMenu, {
+  }, "Sign Up")))))), /*#__PURE__*/_react.default.createElement(_Header.MobileMenu, {
     isActive: currentActiveMenu === 'main',
     withSidebar: withSidebar
   }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuPart, {
@@ -368,7 +370,7 @@ var Header = function Header(_ref3) {
     onClick: function onClick() {
       return logoutUser();
     }
-  }, "log out"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_breakdown.default, {
+  }, "log out"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, withoutLoginSignupButton ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_breakdown.default, {
     alignCenter: true
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: onLoginClick,
@@ -383,7 +385,7 @@ var Header = function Header(_ref3) {
   }, /*#__PURE__*/_react.default.createElement(_Header.SignupButton, {
     onClick: onSignUpClick,
     isMobile: true
-  }, "Sign Up")), socialLinks.length > 0 && /*#__PURE__*/_react.default.createElement(_Header.CTAContainer, null, /*#__PURE__*/_react.default.createElement("span", null, "FOLLOW US"), /*#__PURE__*/_react.default.createElement("div", null, socialLinks.map(function (item) {
+  }, "Sign Up"))), socialLinks.length > 0 && /*#__PURE__*/_react.default.createElement(_Header.CTAContainer, null, /*#__PURE__*/_react.default.createElement("span", null, "FOLLOW US"), /*#__PURE__*/_react.default.createElement("div", null, socialLinks.map(function (item) {
     return /*#__PURE__*/_react.default.createElement(_FooterMenu.SocialLink, {
       key: item.name,
       href: item.url,

package/dist/components/Header/Header.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.HeaderWitouthUser = exports.HeaderWithUser = exports.HeaderWithSidebar = exports.HeaderWithProgressSignup = exports.HeaderWithProgress = exports.HeaderWithAdminUser = void 0;
+exports.default = exports.HeaderWitouthUser = exports.HeaderWithoutLoginAndSignup = exports.HeaderWithUser = exports.HeaderWithSidebar = exports.HeaderWithProgressSignup = exports.HeaderWithProgress = exports.HeaderWithAdminUser = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Header = _interopRequireDefault(require("./Header"));
 var _reactRouterDom = require("react-router-dom");
@@ -52,6 +52,10 @@ var _default = {
     signupHandler: {
       type: 'function',
       action: 'signupHandler'
+    },
+    withoutLoginSignupButton: {
+      type: 'boolean',
+      defaultValue: false
     }
   }
 };
@@ -220,4 +224,10 @@ HeaderWithSidebar.args = {
   // progress: {},
   withSidebar: true,
   isSidebarExpanded: true
+};
+var HeaderWithoutLoginAndSignup = Template.bind({});
+exports.HeaderWithoutLoginAndSignup = HeaderWithoutLoginAndSignup;
+HeaderWithoutLoginAndSignup.args = {
+  user: {},
+  withoutLoginSignupButton: true
 };

package/dist/components/Input/OtpInput.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.OtpInput = void 0;
+var _reactOtpInput = _interopRequireDefault(require("react-otp-input"));
+var _styledComponents = require("styled-components");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var inputStyle = {
+  outline: 'none',
+  border: 'none',
+  borderBottom: '2px solid #000',
+  padding: '10px',
+  minWidth: 30,
+  fontSize: 16,
+  fontWeight: 'bold'
+};
+var Separator = _styledComponents.styled.span.withConfig({
+  displayName: "OtpInput__Separator",
+  componentId: "sc-1n9hk3k-0"
+})(["padding:10px;"]);
+var OtpInput = function OtpInput(props) {
+  var value = props.value,
+    onChange = props.onChange,
+    _props$numInputs = props.numInputs,
+    numInputs = _props$numInputs === void 0 ? 4 : _props$numInputs,
+    _props$RenderSeparato = props.RenderSeparator,
+    RenderSeparator = _props$RenderSeparato === void 0 ? Separator : _props$RenderSeparato,
+    _props$inputType = props.inputType,
+    inputType = _props$inputType === void 0 ? 'text' : _props$inputType,
+    _props$shouldAutoFocu = props.shouldAutoFocus,
+    shouldAutoFocus = _props$shouldAutoFocu === void 0 ? true : _props$shouldAutoFocu;
+  return /*#__PURE__*/React.createElement(_reactOtpInput.default, _extends({
+    value: value,
+    onChange: onChange,
+    numInputs: numInputs,
+    inputType: inputType
+    //skipDefaultStyles={true}
+    ,
+    shouldAutoFocus: shouldAutoFocus,
+    inputStyle: inputStyle,
+    renderSeparator: /*#__PURE__*/React.createElement(RenderSeparator, null),
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/React.createElement("input", props);
+    }
+  }, props));
+};
+exports.OtpInput = OtpInput;
+var _default = OtpInput;
+exports.default = _default;

package/dist/components/Input/OtpInput.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.OtpInputPlain = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _OtpInput = require("./OtpInput");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Inputs/OtpInput',
+  component: _OtpInput.OtpInput,
+  argTypes: {
+    inputType: {
+      type: 'string'
+    },
+    placeholder: {
+      type: 'string',
+      defaultValue: ''
+    },
+    value: {
+      type: 'string',
+      defaultValue: ''
+    },
+    numInputs: {
+      type: 'number',
+      defaultValue: 4
+    },
+    shouldAutoFocus: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    onChange: {
+      action: 'change',
+      type: 'function'
+    },
+    onPaste: {
+      type: 'function'
+    }
+    // renderSeparator: { type: 'component' },
+  }
+  //   parameters: {
+  //     viewport: {
+  //       viewports: INITIAL_VIEWPORTS,
+  //       defaultViewport: 'resetviewport',
+  //     },
+  //   },
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_OtpInput.OtpInput, args)));
+};
+var OtpInputPlain = Template.bind({});
+exports.OtpInputPlain = OtpInputPlain;
+OtpInputPlain.args = {
+  onChange: function onChange(e) {
+    return console.log(e);
+  },
+  value: '',
+  placeholder: '1234'
+};

package/dist/components/Layout/Layout.js

@@ -60,10 +60,11 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) {
         children = _this$props.children,
         footerColor = _this$props.footerColor,
         noFooter = _this$props.noFooter,
+        noHeader = _this$props.noHeader,
         noLogout = _this$props.noLogout;
       return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
         theme: _objectSpread({}, _theme.default)
-      }, /*#__PURE__*/_react.default.createElement(_Grid.PageWrapper, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_Header.default, {
+      }, /*#__PURE__*/_react.default.createElement(_Grid.PageWrapper, null, /*#__PURE__*/_react.default.createElement(_global.default, null), !noHeader && /*#__PURE__*/_react.default.createElement(_Header.default, {
         progress: progress,
         signupFlow: signupFlow,
         loginHandler: loginHandler,

package/dist/components/RegisterAlgorand/Algorand.stories.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.algoFlowWithoutProject = exports.AlgoFlowWithMemo = exports.AlgoFlowWallet = exports.AlgoFlowProject = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _flow = _interopRequireDefault(require("./flow"));
-var _flowWithMemo = _interopRequireDefault(require("./flowWithMemo"));
-var _AuthContext = require("../context/AuthContext");
 var _reactRouterDom = require("react-router-dom");
+var _AuthContext = require("../../context/AuthContext");
 var _global = _interopRequireDefault(require("../../styles/global"));
+var _flow = _interopRequireDefault(require("./flow"));
+var _flowWithMemo = _interopRequireDefault(require("./flowWithMemo"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // import { AlgoAdressSelect } from 'index'
 var _default = {
@@ -35,7 +35,7 @@ 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(_global.default, null), /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_flow.default, args))));
 };
 var algoFlowWithoutProject = function algoFlowWithoutProject() {
-  return /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_flow.default, {
+  return /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_flow.default, {
     showFlow: {
       type: 'boolean',
       defaultValue: true
@@ -43,7 +43,7 @@ var algoFlowWithoutProject = function algoFlowWithoutProject() {
     setShowFlow: function setShowFlow() {},
     withSuccessPage: true
     //  project={{ title: 'Algorand Test', primaryAssetId: '20918100' }}
-  }));
+  })));
 };
 exports.algoFlowWithoutProject = algoFlowWithoutProject;
 var AlgoFlowWithMemo = function AlgoFlowWithMemo() {

package/dist/components/RegisterAlgorand/flow.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _AuthContext = require("../context/AuthContext");
+var _AuthContext = require("../../context/AuthContext");
 var _Modal = require("../Modal/Modal");
 var _rwd = require("../../styles/rwd");
 var _Text = _interopRequireDefault(require("../Text/Text.styles"));

package/dist/components/RegisterAlgorand/flowWithMemo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _AuthContext = require("../context/AuthContext");
+var _AuthContext = require("../../context/AuthContext");
 var _Modal = require("../Modal/Modal");
 var _rwd = require("../../styles/rwd");
 var _Text = _interopRequireDefault(require("../Text/Text.styles"));

package/dist/components/StepsProgress/StepsProgress.stories.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.stepsProgress = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _StepsProgress = require("./StepsProgress");
-var _AuthContext = require("../context/AuthContext");
+var _AuthContext = require("../../context/AuthContext");
 var _reactRouterDom = require("react-router-dom");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'

package/dist/components/StokrLoader/StokrLoader.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StokrLoader = StokrLoader;
-exports.default = void 0;
+exports.loaderGif = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _media = _interopRequireDefault(require("./media"));
@@ -14,17 +14,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+// Render a new image everytime, avoiding jump on the spinning
+var loaderGif = "https://res.cloudinary.com/stokr/image/upload/f_auto,q_auto/v1575035788/Static/stokr_loader_white_400x400_egnhgb.gif?a=".concat(Math.random());
+exports.loaderGif = loaderGif;
 function StokrLoader() {
   var fadeIn = (0, _styledComponents.keyframes)(["0%{opacity:0;}60%{opacity:1;}100%{opacity:1;}"]);
   var StyledStokrLoader = _styledComponents.default.div.withConfig({
     displayName: "StokrLoader__StyledStokrLoader",
     componentId: "sc-1chowhw-0"
   })(["align-items:center;animation:", " 1.8s ease-in-out forwards;background:rgb(254,254,254);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:1000;", ";", ";", ";"], fadeIn, _media.default.mobileS(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    img {\n      height: 15rem;\n      width: 15rem;\n    }\n  "]))), _media.default.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    img {\n      height: 18rem;\n      width: 18rem;\n    }\n  "]))), _media.default.tablet(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    img {\n      height: 30rem;\n      width: 30rem;\n    }\n  "]))));
-
-  // Render a new image everytime, avoiding jump on the spinning
-  var gif = "https://res.cloudinary.com/stokr/image/upload/f_auto,q_auto/v1575035788/Static/stokr_loader_white_400x400_egnhgb.gif?a=".concat(Math.random());
   return /*#__PURE__*/_react.default.createElement(StyledStokrLoader, null, /*#__PURE__*/_react.default.createElement("img", {
-    src: gif,
+    src: loaderGif,
     alt: "\xA0"
   }));
 }