@foreverrbum/ethsign
Version:
This package will allow you to electronically sign documents within your application
580 lines (509 loc) • 24.9 kB
JavaScript
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _search = _interopRequireDefault(require("../../assets/search.svg"));
var _clear = _interopRequireDefault(require("../../assets/clear.svg"));
var _leftarrow_page = _interopRequireDefault(require("../../assets/leftarrow_page.svg"));
var _leftarrow_page_disabled = _interopRequireDefault(require("../../assets/leftarrow_page_disabled.svg"));
var _rightarrow_page = _interopRequireDefault(require("../../assets/rightarrow_page.svg"));
var _rightarrow_page_disabled = _interopRequireDefault(require("../../assets/rightarrow_page_disabled.svg"));
var _rightarrow = _interopRequireDefault(require("../../assets/rightarrow.svg"));
var _downarrow = _interopRequireDefault(require("../../assets/downarrow.svg"));
var _menu = _interopRequireDefault(require("../../assets/menu.png"));
var _download = require("../../helpers/download");
var _Alert = _interopRequireDefault(require("../Alert"));
var _reactRouterDom = require("react-router-dom");
var _reactIntl = require("react-intl");
var _dashboard = require("../../helpers/dashboard");
var _this = void 0;
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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var Searchbox = function Searchbox(props) {
var status = props.status,
handleStatus = props.handleStatus,
name = props.name,
handleName = props.handleName,
filter = props.filter,
handleFilter = props.handleFilter,
tableLabel = props.tableLabel,
handleMobileSidebar = props.handleMobileSidebar,
data = props.data,
contract = props.contract,
provider = props.provider,
triggerSearch = props.triggerSearch,
handleActivePage = props.handleActivePage,
pageNumber = props.pageNumber,
changePage = props.changePage,
contractsPerPage = props.contractsPerPage,
handleContractsPerPage = props.handleContractsPerPage,
totalContractsInCurrentFilter = props.totalContractsInCurrentFilter,
dataObj = props.dataObj;
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
showPasswordPopup = _useState2[0],
handleShowPasswordPopup = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = _slicedToArray(_useState3, 2),
showStatusSelect = _useState4[0],
handleShowStatusSelect = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = _slicedToArray(_useState5, 2),
showClear = _useState6[0],
handleShowClear = _useState6[1];
var _useState7 = (0, _react.useState)(false),
_useState8 = _slicedToArray(_useState7, 2),
search = _useState8[0],
handleSearch = _useState8[1];
var _useState9 = (0, _react.useState)(false),
_useState10 = _slicedToArray(_useState9, 2),
loading = _useState10[0],
handleLoading = _useState10[1];
var _useState11 = (0, _react.useState)(null),
_useState12 = _slicedToArray(_useState11, 2),
doc = _useState12[0],
handleDoc = _useState12[1];
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
var eventListener = null;
(0, _react.useEffect)(function () {
var searchContractNameElement = document.getElementById("search-contract-name");
if (name.length > 0) {
searchContractNameElement.value = name;
}
searchContractNameElement === null || searchContractNameElement === void 0 ? void 0 : searchContractNameElement.addEventListener('input', updateSearch);
searchContractNameElement === null || searchContractNameElement === void 0 ? void 0 : searchContractNameElement.addEventListener('focus', function (event) {
handleShowClear(true);
if ((searchContractNameElement === null || searchContractNameElement === void 0 ? void 0 : searchContractNameElement.value.length) > 0) {
handleSearch(true);
}
});
searchContractNameElement === null || searchContractNameElement === void 0 ? void 0 : searchContractNameElement.addEventListener('blur', function (event) {
if ((searchContractNameElement === null || searchContractNameElement === void 0 ? void 0 : searchContractNameElement.value.length) == 0) {
handleShowClear(false);
handleSearch(false);
}
});
return function () {
var _document$getElementB;
return (_document$getElementB = document.getElementById("search-contract-name")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.removeEventListener('input', updateSearch);
};
}, []);
(0, _react.useEffect)(function () {
if (filter !== 'search') {
handleShowClear(false);
}
}, [filter]);
(0, _react.useEffect)(function () {
var searchDropdownListener = hideSearchDropdown.bind(_this);
document.addEventListener('click', searchDropdownListener);
return function () {
return document.removeEventListener('click', searchDropdownListener);
};
}, [search]);
/*
* Statuses:
* -2: 'Search Results'
* -1: 'All Status'
* 0: 'PDF Not Uploaded'
* 1: 'More Signers Needed'
* 2: 'Pending Signatures'
* 3: 'All Signed'
* 4: 'Waiting For Others'
*/
var updateStatus = function updateStatus(status) {
handleStatus(status);
};
var updateName = function updateName() {
var currName = document.getElementById("search-contract-name").value;
handleName(currName === null || currName === void 0 ? void 0 : currName.toLowerCase());
if ((currName === null || currName === void 0 ? void 0 : currName.length) > 0 && !showClear) {
handleShowClear(true);
} else if (currName.length == 0 && showClear) {
handleShowClear(false);
}
};
var handleSignSubmission = /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(doc) {
var password, fileArr;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
handleLoading(true);
password = document.getElementById('password_input') ? document.getElementById('password_input').value : '';
_context.next = 4;
return (0, _download.getFileArray)(password, doc.ipfsHash, doc.storageProvider, false, formatMessage);
case 4:
fileArr = _context.sent;
if (fileArr != false) {
props.history.push({
pathname: '/sign',
state: {
doc: doc,
contract: contract,
provider: provider,
idx: -1,
fileArr: fileArr
}
});
}
handleLoading(false);
case 7:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function handleSignSubmission(_x) {
return _ref.apply(this, arguments);
};
}();
var updateSearch = function updateSearch(e) {
if (e.target.value.length > 0) {
handleSearch(true);
} else {
handleSearch(false);
}
updateName();
};
var showMenu = function showMenu(show) {
if (!show) {
hideMenu();
return;
}
if (!eventListener) {
eventListener = hideMenu.bind(_this);
}
document.addEventListener('click', eventListener);
handleShowStatusSelect(true);
};
var hideMenu = function hideMenu(event) {
document.removeEventListener('click', eventListener);
handleShowStatusSelect(false);
};
var performSearch = function performSearch() {
var _document$getElementB2;
if (((_document$getElementB2 = document.getElementById("search-contract-name")) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.value.length) > 0) {
handleFilter('search');
triggerSearch();
handleSearch(false);
document.getElementById("search-contract-name").blur();
}
};
var clearSearch = function clearSearch() {
if (document.getElementById("search-contract-name") !== null) {
document.getElementById("search-contract-name").value = "";
document.getElementById("search-contract-name").focus();
}
handleName("");
};
var hideSearchDropdown = function hideSearchDropdown(event) {
if (search) {
var searchElement = document.getElementById('search');
var searchDropdown = document.getElementById('search-dropdown');
if (!searchElement || !searchDropdown || event && !searchElement.contains(event.target) && !searchDropdown.contains(event.target)) {
handleSearch(false);
}
}
};
var manageContracts = ['pending', 'voted', 'consensus', 'expiring'];
return /*#__PURE__*/_react.default.createElement("div", {
className: "w-full md:w-auto flex flex-col justify-center"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-grow flex-col pt-5"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "w-full xs:w-80 relative"
}, /*#__PURE__*/_react.default.createElement("div", {
id: "search",
className: "flex h-10 text-15 "
}, /*#__PURE__*/_react.default.createElement("div", {
onClick: function onClick() {
return performSearch();
},
className: "select-none h-10 w-auto border-r-0 cursor-pointer focus:outline-none px-2 rounded-l-md py-2 border-gray-150 border-t border-b border-l"
}, /*#__PURE__*/_react.default.createElement("img", {
src: _search.default
})), /*#__PURE__*/_react.default.createElement("form", {
className: "w-full flex-1",
onSubmit: function onSubmit(e) {
e.preventDefault();
performSearch();
}
}, /*#__PURE__*/_react.default.createElement("input", {
type: "text",
placeholder: formatMessage({
id: "SEARCH_CONTRACT_NAME"
}),
id: "search-contract-name",
className: "w-full flex-1 h-10 focus:outline-none placeholder-gray-150 py-3 text-gray-70 pr-4 border-t mr-0 border-b border-gray-150".concat(showClear ? ' rounded-none' : ' border-r rounded-r-md')
})), showClear && /*#__PURE__*/_react.default.createElement("div", {
onClick: function onClick() {
return clearSearch();
},
className: "select-none h-10 w-auto border-l-0 cursor-pointer focus:outline-none px-2 rounded-r-md py-2 border-gray-150 border-t border-b border-r"
}, /*#__PURE__*/_react.default.createElement("img", {
src: _clear.default
}))), search && /*#__PURE__*/_react.default.createElement("div", {
id: "search-dropdown",
className: "z-50 text-15 select-none origin-top-right absolute right-0 w-full rounded-md shadow-lg bg-white ring-1 ring-gray-150 ring-opacity-100 focus:outline-none",
role: "menu",
"aria-orientation": "vertical",
"aria-labelledby": "menu-button",
tabIndex: "-1"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "py-1",
role: "none"
}, /*#__PURE__*/_react.default.createElement("div", {
key: "search",
className: "block mx-4 py-2 mb-2 text-15 border-b border-gray-150",
role: "menuitem",
tabIndex: "-1"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-row text-gray-70"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex-none"
}, formatMessage({
id: "SEARCH_FOR"
}), ": "), /*#__PURE__*/_react.default.createElement("div", {
className: "pl-2 text-15 text-gray-80 text-left"
}, document.getElementById("search-contract-name").value))), (!data || data.length == 0) && /*#__PURE__*/_react.default.createElement("div", {
key: "no-results",
className: "block mx-4 py-2 mb-2 text-15",
role: "menuitem",
tabIndex: "-1"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-row text-gray-70 text-left"
}, formatMessage({
id: "NO_SEARCH_RESULTS"
}))), data === null || data === void 0 ? void 0 : data.slice(0, 5).map(function (docKey, idx) {
return /*#__PURE__*/_react.default.createElement("div", {
key: "search-".concat(idx),
onClick: function onClick(event) {
var _dataObj$docKey, _dataObj$docKey2;
event.stopPropagation();
if (((_dataObj$docKey = dataObj[docKey]) === null || _dataObj$docKey === void 0 ? void 0 : _dataObj$docKey.status) === 'PDF Not Uploaded' || ((_dataObj$docKey2 = dataObj[docKey]) === null || _dataObj$docKey2 === void 0 ? void 0 : _dataObj$docKey2.status) === '') {
return;
}
handleDoc(dataObj[docKey]);
if (!dataObj[docKey].withPassword) {
handleLoading(true);
handleSignSubmission(dataObj[docKey]);
}
handleShowPasswordPopup(true);
},
className: "hover:bg-gray-25 cursor-pointer block px-4 py-2 text-15 flex flex-row",
role: "menuitem",
tabIndex: "-1"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-col text-gray-80 text-left"
}, dataObj[docKey].name, /*#__PURE__*/_react.default.createElement("div", {
className: "text-gray-70 pt-1 text-12"
}, formatMessage({
id: "IN"
}), " ", dataObj[docKey].filter)));
}))))), /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-row flex-wrap mt-5 mb-3"
}, _.includes(manageContracts, filter) ? /*#__PURE__*/_react.default.createElement("div", {
className: "ml-3 flex flex-wrap"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-wrap"
}, /*#__PURE__*/_react.default.createElement("img", {
src: _menu.default,
className: "lg:hidden mr-3 h-8",
onClick: function onClick() {
handleMobileSidebar(true);
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: "select-none text-15 sm:text-20 font-normal flex flex-col justify-center"
}, tableLabel))) : /*#__PURE__*/_react.default.createElement("div", {
className: "ml-3 flex flex-col"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-wrap text-15 sm:text-20 font-normal select-none"
}, /*#__PURE__*/_react.default.createElement("img", {
src: _menu.default,
className: "lg:hidden mr-3 h-8",
onClick: function onClick() {
handleMobileSidebar(true);
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: "my-auto"
}, tableLabel), /*#__PURE__*/_react.default.createElement("img", {
className: "ml-2 h-4 w-4 my-auto",
src: _rightarrow.default
}), /*#__PURE__*/_react.default.createElement("div", {
className: "relative w-32 sm:w-48 inline-block"
}, /*#__PURE__*/_react.default.createElement("div", {
onClick: function onClick() {
return showMenu(!showStatusSelect);
},
className: "flex w-max pl-2 rounded-md text-15 sm:text-20 h-full my-auto ".concat(showStatusSelect ? 'bg-gray-32' : '')
}, /*#__PURE__*/_react.default.createElement("div", {
className: "my-auto "
}, (0, _dashboard.getDocumentFormattedStatus)(status, formatMessage)), /*#__PURE__*/_react.default.createElement("img", {
className: "mx-1 w-4 h-4 my-auto",
src: _downarrow.default
})), showStatusSelect && /*#__PURE__*/_react.default.createElement("div", {
id: "status-selector",
className: "origin-top-right w-full absolute right-0 flex flex-col justify-center"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "z-50 text-15 mt-1 select-none w-full rounded-md shadow-lg bg-white ring-1 ring-gray-150 ring-opacity-100 focus:outline-none",
role: "menu",
"aria-orientation": "vertical",
"aria-labelledby": "menu-button",
tabIndex: "-1"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "py-1",
role: "none"
}, /*#__PURE__*/_react.default.createElement("div", {
value: "All Status",
onClick: function onClick() {
updateStatus(-1);
},
className: "hover:bg-gray-25 cursor-pointer block px-4 py-2 text-15 text-gray-80 text-left",
role: "menuitem",
tabIndex: "-1"
}, formatMessage({
id: 'ALL_STATUS'
})), /*#__PURE__*/_react.default.createElement("div", {
value: "Pending Signatures",
onClick: function onClick() {
updateStatus(2);
},
className: "hover:bg-gray-25 cursor-pointer block px-4 py-2 text-15 text-gray-80 text-left",
role: "menuitem",
tabIndex: "-1"
}, formatMessage({
id: 'PENDING_SIGNATURES'
})), /*#__PURE__*/_react.default.createElement("div", {
value: "Waiting For Others",
onClick: function onClick() {
updateStatus(4);
},
className: "hover:bg-gray-25 cursor-pointer block px-4 py-2 text-15 text-gray-80 text-left",
role: "menuitem",
tabIndex: "-1"
}, formatMessage({
id: 'WAITING_FOR_OTHERS'
})), /*#__PURE__*/_react.default.createElement("div", {
value: "All Signed",
onClick: function onClick() {
updateStatus(3);
},
className: "hover:bg-gray-25 cursor-pointer block px-4 py-2 text-15 text-gray-80 text-left",
role: "menuitem",
tabIndex: "-1"
}, formatMessage({
id: 'ALL_SIGNED'
})), /*#__PURE__*/_react.default.createElement("div", {
value: "PDF Not Uploaded",
onClick: function onClick() {
updateStatus(0);
},
className: "hover:bg-gray-25 cursor-pointer block px-4 py-2 text-15 text-gray-80 text-left",
role: "menuitem",
tabIndex: "-1"
}, formatMessage({
id: 'PDF_NOT_UPLOADED'
})))))))), totalContractsInCurrentFilter > 0 && /*#__PURE__*/_react.default.createElement("div", {
className: "ml-auto text-15 mr-3 flex flex-row text-gray-300"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "h-8 sm:h-auto my-auto flex"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "sm:h-auto my-auto"
}, formatMessage({
id: 'PAGE_COUNT'
}, {
first: pageNumber * contractsPerPage + 1 > totalContractsInCurrentFilter ? totalContractsInCurrentFilter : pageNumber * contractsPerPage + 1,
last: (pageNumber + 1) * contractsPerPage > totalContractsInCurrentFilter ? totalContractsInCurrentFilter : (pageNumber + 1) * contractsPerPage,
total: totalContractsInCurrentFilter
}))), pageNumber > 0 ? /*#__PURE__*/_react.default.createElement("img", {
className: "ml-2 h-4 w-4 my-auto cursor-pointer select-none",
"data-tip": "Newer",
src: _leftarrow_page.default,
onClick: function onClick() {
return changePage(false);
}
}) : /*#__PURE__*/_react.default.createElement("img", {
className: "ml-2 h-4 w-4 my-auto select-none",
"data-tip": "Newer",
src: _leftarrow_page_disabled.default
}), (pageNumber + 1) * contractsPerPage + 1 <= totalContractsInCurrentFilter ? /*#__PURE__*/_react.default.createElement("img", {
className: "ml-2 h-4 w-4 my-auto cursor-pointer select-none",
"data-tip": "Older",
src: _rightarrow_page.default,
onClick: function onClick() {
return changePage(true);
}
}) : /*#__PURE__*/_react.default.createElement("img", {
className: "ml-2 h-4 w-4 my-auto select-none",
"data-tip": "Older",
src: _rightarrow_page_disabled.default
}))), showPasswordPopup && /*#__PURE__*/_react.default.createElement(_Alert.default, {
title: formatMessage({
id: "DOCUMENT_PASSWORD"
}),
message: formatMessage({
id: "THIS_CONTRACT_IS_PROTECTED"
}),
loading: loading,
displayLoader: doc.withPassword ? false : true,
loadingText: doc.withPassword ? formatMessage({
id: "DECRYPTING_YOUR_FILE_WITH_POINT"
}) : formatMessage({
id: "LOADING"
}),
closeCallback: function closeCallback() {
return handleShowPasswordPopup(false);
},
closeButtonText: formatMessage({
id: "CANCEL"
}),
okCallback: function okCallback() {
return handleSignSubmission(doc);
},
okButtonText: formatMessage({
id: "OK"
}),
closeOnOutsideClick: true,
customComponent: /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-wrap sm:flex-nowrap justify-start"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "mb-2 sm:my-auto mr-4 hidden sm:block"
}, formatMessage({
id: "PASSWORD"
}), ":"), /*#__PURE__*/_react.default.createElement("form", {
onSubmit: function onSubmit(e) {
e.preventDefault();
handleSignSubmission(doc);
}
}, /*#__PURE__*/_react.default.createElement("input", {
placeholder: formatMessage({
id: "ENTER_YOUR_PASSWORD"
}),
required: false,
name: "password",
type: "password",
autoComplete: "new-password",
autoFocus: true,
maxLength: 32,
id: "password_input",
className: "flex-grow-1 rounded-sm focus:outline-none rounded-sm px-4 py-1 border mr-0 border-gray-200"
})))
}));
};
var _default = (0, _reactRouterDom.withRouter)(Searchbox);
exports.default = _default;