@stokr/components-library
Version:
STOKR - Components Library
104 lines (103 loc) • 5.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.EnterCode = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _formik = require("formik");
var Yup = _interopRequireWildcard(require("yup"));
var _Modal = require("../Modal/Modal");
var _Form = _interopRequireWildcard(require("../Form/Form"));
var _Text = _interopRequireDefault(require("../Text/Text.styles"));
var _Button = _interopRequireDefault(require("../Button/Button.styles"));
var _TextLink = _interopRequireDefault(require("../TextLink/TextLink.styles"));
var _Grid = require("../Grid/Grid.styles");
var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
var _OtpInput = _interopRequireDefault(require("../Input/OtpInput"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const EnterCode = props => {
const {
popupError = {},
onFormSend,
onModalSwitch,
isModal,
isActionLoading
} = props;
return /*#__PURE__*/_react.default.createElement(Wrapper, _extends({
isModal: isModal
}, props), /*#__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, "Enter 2FA code"), /*#__PURE__*/_react.default.createElement("p", null, "Enter the log in 2FA code from your authenticator app"))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
modalBot: true
}, onModalSwitch && /*#__PURE__*/_react.default.createElement(_Modal.ModalLinkWrap, null, /*#__PURE__*/_react.default.createElement(_Modal.ModalLink, {
as: "button",
onClick: onModalSwitch
}, "Lost your device?")))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
part: 8
}, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
initialValues: {
otpInput: ''
},
onSubmit: values => {
onFormSend(values);
}
}, _ref => {
let {
values,
errors,
touched,
setFieldValue,
setFieldTouched,
setErrors
} = _ref;
const submitDisabled = !touched.otpInput || !values.otpInput || isActionLoading === 'enter2fa';
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(_OtpInput.default, {
id: "otp-input",
name: "otpInput",
numInputs: 6,
value: values.otpInput,
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, {
noPaddingBottom: true,
noPaddingHorizontal: true
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
type: "submit",
fluid: true,
disabled: submitDisabled
}, "Continue")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
paddingVeticalHalf: true,
noPaddingHorizontal: true
}, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
show: (popupError === null || popupError === void 0 ? void 0 : popupError.popup) === 'enter2fa'
}, popupError.message)));
})))));
};
exports.EnterCode = EnterCode;
const Wrapper = _ref2 => {
let {
isModal,
children,
isModalOpen,
onModalClose,
background
} = _ref2;
return isModal ? /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
isOpen: isModalOpen,
onClose: onModalClose,
background: background
}, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
};
var _default = exports.default = EnterCode;