@hcaptcha/react-hcaptcha 1.8.0 → 1.9.0

package/dist/index.js

@@ -1,108 +1,47 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var React = _interopRequireWildcard(require("react"));
-
+var _loader = require("@hcaptcha/loader");
 var _utils = require("./utils.js");
-
+var _constants = require("./constants");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-var SCRIPT_ID = 'hcaptcha-api-script-id';
-var HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad'; // Prevent loading API script multiple times
-
-var scripts = []; // Generate hCaptcha API script
-
-var mountCaptchaScript = function mountCaptchaScript() {
-  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var element = (0, _utils.getMountElement)(params.scriptLocation);
-  delete params.scriptLocation;
-  var frame = (0, _utils.getFrame)(element);
-  var script = scripts.find(function (_ref) {
-    var scope = _ref.scope;
-    return scope === frame.window;
-  });
-
-  if (frame.document.getElementById(SCRIPT_ID) && script) {
-    // API was already requested
-    return script.promise;
-  }
-
-  var promise = new Promise(function (resolve, reject) {
-    // Create global onload callback
-    frame.window[HCAPTCHA_LOAD_FN_NAME] = resolve;
-    var domain = params.apihost || "https://js.hcaptcha.com";
-    delete params.apihost;
-    var script = frame.document.createElement("script");
-    script.id = SCRIPT_ID;
-    script.src = "".concat(domain, "/1/api.js?render=explicit&onload=").concat(HCAPTCHA_LOAD_FN_NAME);
-    script.async = params.loadAsync !== undefined ? params.loadAsync : true;
-    delete params.loadAsync;
-
-    script.onerror = function (event) {
-      return reject('script-error');
-    };
-
-    var query = (0, _utils.generateQuery)(params);
-    script.src += query !== "" ? "&".concat(query) : "";
-    element.appendChild(script);
-  });
-  scripts.push({
-    promise: promise,
-    scope: frame.window
-  });
-  return promise;
-};
-
 var HCaptcha = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(HCaptcha, _React$Component);
-
   var _super = _createSuper(HCaptcha);
-
   function HCaptcha(props) {
     var _this;
-
     (0, _classCallCheck2["default"])(this, HCaptcha);
     _this = _super.call(this, props);
-    var element = (0, _utils.getMountElement)(_this.props.scriptLocation);
-    var frame = (0, _utils.getFrame)(element);
+
     /**
      * Internal reference to track hCaptcha API
      *
      * Required as window is relative to initialization in application
      * not where the script and iFrames have been loaded.
      */
+    _this._hcaptcha = undefined;
 
-    _this._hcaptcha = frame.window.hcaptcha || undefined; // API Methods
-
+    // API Methods
     _this.renderCaptcha = _this.renderCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.resetCaptcha = _this.resetCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.removeCaptcha = _this.removeCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.isReady = _this.isReady.bind((0, _assertThisInitialized2["default"])(_this)); // Event Handlers
+    _this.isReady = _this.isReady.bind((0, _assertThisInitialized2["default"])(_this));
 
+    // Event Handlers
     _this.loadCaptcha = _this.loadCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleOnLoad = _this.handleOnLoad.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleSubmit = _this.handleSubmit.bind((0, _assertThisInitialized2["default"])(_this));
@@ -111,34 +50,45 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.handleOpen = _this.handleOpen.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleChallengeExpired = _this.handleChallengeExpired.bind((0, _assertThisInitialized2["default"])(_this));
-    var isApiReady = typeof _this._hcaptcha !== 'undefined';
     _this.ref = /*#__PURE__*/React.createRef();
     _this.apiScriptRequested = false;
+    _this.sentryHub = null;
     _this.state = {
-      isApiReady: isApiReady,
+      isApiReady: false,
       isRemoved: false,
       elementId: props.id,
       captchaId: ''
     };
     return _this;
   }
-
   (0, _createClass2["default"])(HCaptcha, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
       // Once captcha is mounted intialize hCaptcha - hCaptcha
-      var isApiReady = this.state.isApiReady;
+      var element = (0, _utils.getMountElement)(this.props.scriptLocation);
+      var frame = (0, _utils.getFrame)(element);
+      this._hcaptcha = frame.window.hcaptcha || undefined;
+      var isApiReady = typeof this._hcaptcha !== 'undefined';
+      this.sentryHub = (0, _loader.initSentry)(this.props.sentry, _constants.scopeTag);
+      this.sentryHub.addBreadcrumb({
+        category: _constants.scopeTag.value,
+        message: _constants.breadcrumbMessages.mounted
+      });
+
       /*
        * Check if hCaptcha has already been loaded,
        * If Yes, render the captcha
        * If No, create script tag and wait to render the captcha
        */
-
       if (isApiReady) {
-        this.renderCaptcha();
+        this.setState({
+          isApiReady: true
+        }, function () {
+          _this2.renderCaptcha();
+        });
         return;
       }
-
       this.loadCaptcha();
     }
   }, {
@@ -146,14 +96,17 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     value: function componentWillUnmount() {
       var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
-
       if (!this.isReady()) {
         return;
-      } // Reset any stored variables / timers when unmounting
-
+      }
 
+      // Reset any stored variables / timers when unmounting
       hcaptcha.reset(captchaId);
       hcaptcha.remove(captchaId);
+      this.sentryHub.addBreadcrumb({
+        category: _constants.scopeTag.value,
+        message: _constants.breadcrumbMessages.unmounted
+      });
     }
   }, {
     key: "shouldComponentUpdate",
@@ -162,24 +115,23 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       if (this.state.isApiReady !== nextState.isApiReady || this.state.isRemoved !== nextState.isRemoved) {
         return false;
       }
-
       return true;
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-
+      var _this3 = this;
       // Prop Keys that could change
-      var keys = ['sitekey', 'size', 'theme', 'tabindex', 'languageOverride', 'endpoint']; // See if any props changed during component update
-
+      var keys = ['sitekey', 'size', 'theme', 'tabindex', 'languageOverride', 'endpoint'];
+      // See if any props changed during component update
       var match = keys.every(function (key) {
-        return prevProps[key] === _this2.props[key];
-      }); // If they have changed, remove current captcha and render a new one
+        return prevProps[key] === _this3.props[key];
+      });
 
+      // If they have changed, remove current captcha and render a new one
       if (!match) {
         this.removeCaptcha(function () {
-          _this2.renderCaptcha();
+          _this3.renderCaptcha();
         });
       }
     }
@@ -189,35 +141,38 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       if (this.apiScriptRequested) {
         return;
       }
-
       var _this$props = this.props,
-          apihost = _this$props.apihost,
-          assethost = _this$props.assethost,
-          endpoint = _this$props.endpoint,
-          host = _this$props.host,
-          imghost = _this$props.imghost,
-          hl = _this$props.languageOverride,
-          reCaptchaCompat = _this$props.reCaptchaCompat,
-          reportapi = _this$props.reportapi,
-          sentry = _this$props.sentry,
-          custom = _this$props.custom,
-          loadAsync = _this$props.loadAsync,
-          scriptLocation = _this$props.scriptLocation;
+        apihost = _this$props.apihost,
+        assethost = _this$props.assethost,
+        endpoint = _this$props.endpoint,
+        host = _this$props.host,
+        imghost = _this$props.imghost,
+        hl = _this$props.languageOverride,
+        reCaptchaCompat = _this$props.reCaptchaCompat,
+        reportapi = _this$props.reportapi,
+        sentry = _this$props.sentry,
+        custom = _this$props.custom,
+        loadAsync = _this$props.loadAsync,
+        scriptLocation = _this$props.scriptLocation,
+        _this$props$cleanup = _this$props.cleanup,
+        cleanup = _this$props$cleanup === void 0 ? true : _this$props$cleanup;
       var mountParams = {
+        render: 'explicit',
         apihost: apihost,
         assethost: assethost,
         endpoint: endpoint,
         hl: hl,
         host: host,
         imghost: imghost,
-        recaptchacompat: reCaptchaCompat === false ? "off" : null,
+        recaptchacompat: reCaptchaCompat === false ? 'off' : null,
         reportapi: reportapi,
         sentry: sentry,
         custom: custom,
         loadAsync: loadAsync,
-        scriptLocation: scriptLocation
+        scriptLocation: scriptLocation,
+        cleanup: cleanup
       };
-      mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
+      (0, _loader.hCaptchaLoader)(mountParams).then(this.handleOnLoad, this.handleError)["catch"](this.handleError);
       this.apiScriptRequested = true;
     }
   }, {
@@ -236,8 +191,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         hl: this.props.hl || this.props.languageOverride,
         languageOverride: undefined
       });
-      var hcaptcha = this._hcaptcha; //Render hCaptcha widget and provide necessary callbacks - hCaptcha
-
+      var hcaptcha = this._hcaptcha;
+      //Render hCaptcha widget and provide necessary callbacks - hCaptcha
       var captchaId = hcaptcha.render(this.ref.current, renderParams);
       this.setState({
         isRemoved: false,
@@ -251,48 +206,56 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     value: function resetCaptcha() {
       var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
-
       if (!this.isReady()) {
         return;
-      } // Reset captcha state, removes stored token and unticks checkbox
-
-
+      }
+      // Reset captcha state, removes stored token and unticks checkbox
       hcaptcha.reset(captchaId);
+      this.sentryHub.addBreadcrumb({
+        category: _constants.scopeTag.value,
+        message: _constants.breadcrumbMessages.reset
+      });
     }
   }, {
     key: "removeCaptcha",
     value: function removeCaptcha(callback) {
       var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
-
       if (!this.isReady()) {
         return;
       }
-
       this.setState({
         isRemoved: true
       }, function () {
         hcaptcha.remove(captchaId);
         callback && callback();
       });
+      this.sentryHub.addBreadcrumb({
+        category: _constants.scopeTag.value,
+        message: _constants.breadcrumbMessages.removed
+      });
     }
   }, {
     key: "handleOnLoad",
     value: function handleOnLoad() {
-      var _this3 = this;
-
+      var _this4 = this;
       this.setState({
         isApiReady: true
       }, function () {
-        var element = (0, _utils.getMountElement)(_this3.props.scriptLocation);
-        var frame = (0, _utils.getFrame)(element);
-        _this3._hcaptcha = frame.window.hcaptcha; // render captcha and wait for captcha id
-
-        _this3.renderCaptcha(function () {
-          // trigger onLoad if it exists
-          var onLoad = _this3.props.onLoad;
-          if (onLoad) onLoad();
-        });
+        try {
+          var element = (0, _utils.getMountElement)(_this4.props.scriptLocation);
+          var frame = (0, _utils.getFrame)(element);
+          _this4._hcaptcha = frame.window.hcaptcha;
+
+          // render captcha and wait for captcha id
+          _this4.renderCaptcha(function () {
+            // trigger onLoad if it exists
+            var onLoad = _this4.props.onLoad;
+            if (onLoad) onLoad();
+          });
+        } catch (error) {
+          _this4.sentryHub.captureException(error);
+        }
       });
     }
   }, {
@@ -300,14 +263,12 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     value: function handleSubmit(event) {
       var onVerify = this.props.onVerify;
       var _this$state = this.state,
-          isRemoved = _this$state.isRemoved,
-          captchaId = _this$state.captchaId;
+        isRemoved = _this$state.isRemoved,
+        captchaId = _this$state.captchaId;
       var hcaptcha = this._hcaptcha;
       if (typeof hcaptcha === 'undefined' || isRemoved) return;
       var token = hcaptcha.getResponse(captchaId); //Get response token from hCaptcha widget
-
       var ekey = hcaptcha.getRespKey(captchaId); //Get current challenge session id from hCaptcha widget
-
       if (onVerify) onVerify(token, ekey); //Dispatch event to verify user response
     }
   }, {
@@ -316,14 +277,16 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       var onExpire = this.props.onExpire;
       var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
-
       if (!this.isReady()) {
         return;
       }
-
       hcaptcha.reset(captchaId); // If hCaptcha runs into error, reset captcha - hCaptcha
 
       if (onExpire) onExpire();
+      this.sentryHub.addBreadcrumb({
+        category: _constants.scopeTag.value,
+        message: _constants.breadcrumbMessages.expired
+      });
     }
   }, {
     key: "handleError",
@@ -331,20 +294,18 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       var onError = this.props.onError;
       var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
-
       if (this.isReady()) {
         // If hCaptcha runs into error, reset captcha - hCaptcha
         hcaptcha.reset(captchaId);
       }
-
       if (onError) onError(event);
     }
   }, {
     key: "isReady",
     value: function isReady() {
       var _this$state2 = this.state,
-          isApiReady = _this$state2.isApiReady,
-          isRemoved = _this$state2.isRemoved;
+        isApiReady = _this$state2.isApiReady,
+        isRemoved = _this$state2.isRemoved;
       return isApiReady && !isRemoved;
     }
   }, {
@@ -353,7 +314,6 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       if (!this.isReady() || !this.props.onOpen) {
         return;
       }
-
       this.props.onOpen();
     }
   }, {
@@ -362,7 +322,6 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       if (!this.isReady() || !this.props.onClose) {
         return;
       }
-
       this.props.onClose();
     }
   }, {
@@ -371,40 +330,37 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       if (!this.isReady() || !this.props.onChalExpired) {
         return;
       }
-
       this.props.onChalExpired();
     }
   }, {
     key: "execute",
     value: function execute() {
       var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      var captchaId = this.state.captchaId;
-      var hcaptcha = this._hcaptcha;
-
-      if (!this.isReady()) {
-        return;
-      }
-
-      if (opts && (0, _typeof2["default"])(opts) !== "object") {
-        opts = null;
+      try {
+        var captchaId = this.state.captchaId;
+        var hcaptcha = this._hcaptcha;
+        if (!this.isReady()) {
+          return;
+        }
+        if (opts && (0, _typeof2["default"])(opts) !== "object") {
+          opts = null;
+        }
+        return hcaptcha.execute(captchaId, opts);
+      } catch (error) {
+        this.sentryHub.captureException(error);
       }
-
-      return hcaptcha.execute(captchaId, opts);
     }
   }, {
     key: "setData",
     value: function setData(data) {
       var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
-
       if (!this.isReady()) {
         return;
       }
-
       if (data && (0, _typeof2["default"])(data) !== "object") {
         data = null;
       }
-
       hcaptcha.setData(captchaId, data);
     }
   }, {
@@ -431,7 +387,6 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }]);
   return HCaptcha;
 }(React.Component);
-
 var _default = HCaptcha;
 exports["default"] = _default;
 module.exports = exports.default;

package/dist/utils.js

@@ -1,43 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateQuery = generateQuery;
 exports.getFrame = getFrame;
 exports.getMountElement = getMountElement;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-function generateQuery(params) {
-  return Object.entries(params).filter(function (_ref) {
-    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
-        key = _ref2[0],
-        value = _ref2[1];
-
-    return value || value === false;
-  }).map(function (_ref3) {
-    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
-        key = _ref4[0],
-        value = _ref4[1];
-
-    return "".concat(encodeURIComponent(key), "=").concat(encodeURIComponent(value));
-  }).join("&");
-}
-
-;
-
 function getFrame(element) {
   var doc = element && element.ownerDocument || document;
-  var win = doc.defaultView || doc.parentWindow;
+  var win = doc.defaultView || doc.parentWindow || window;
   return {
     document: doc,
     window: win
   };
 }
-
 function getMountElement(element) {
   return element || document.head;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "types": "types/index.d.ts",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -58,6 +58,7 @@
     "webpack-dev-server": "^4.13.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.9"
+    "@babel/runtime": "^7.17.9",
+    "@hcaptcha/loader": "^1.0.8"
   }
 }

package/src/constants.js

@@ -0,0 +1,13 @@
+export const scopeTag = {
+    key: 'source',
+    value: '@hCaptcha/react'
+}
+
+export const breadcrumbMessages = {
+    mounted: 'hCaptcha component mounted',
+    expired: 'hCaptcha expired',
+    unmounted: 'hCaptcha component unmounted',
+    reset: 'hCaptcha reset',
+    removed: 'hCaptcha removed'
+
+}