@hcaptcha/react-hcaptcha - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

dist/index.js

@@ -31,24 +31,5 @@ "use strict";
 
-var React = require('react'); // Borrowed from https://github.com/ai/nanoid/blob/3.0.2/non-secure/index.js
-// This alphabet uses `A-Za-z0-9_-` symbols. A genetic algorithm helped
-// optimize the gzip compression for this alphabet.
+var React = require('react'); // Create script to init hCaptcha
 
 
-var urlAlphabet = 'ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW';
-
-var nanoid = function nanoid() {
-  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 21;
-  var id = ''; // A compact alternative for `for (var i = 0; i < step; i++)`.
-
-  var i = size;
-
-  while (i--) {
-    // `| 0` is more compact and faster than `Math.floor()`.
-    id += urlAlphabet[Math.random() * 64 | 0];
-  }
-
-  return id;
-}; // Create script to init hCaptcha
-
-
 var onLoadListeners = [];
@@ -92,5 +73,3 @@ var captchaScriptCreated = false; // Generate hCaptcha API Script
 
-    _this = _super.call(this, props);
-    var _props$id = props.id,
-        id = _props$id === void 0 ? null : _props$id; // API Methods
+    _this = _super.call(this, props); // API Methods
 
@@ -107,6 +86,7 @@ _this.renderCaptcha = _this.renderCaptcha.bind(_assertThisInitialized(_this));
     if (!isApiReady) captchaScriptCreated = false;
+    _this.ref = React.createRef();
     _this.state = {
       isApiReady: isApiReady,
       isRemoved: false,
-      elementId: id || "hcaptcha-".concat(nanoid()),
+      elementId: props.id,
       captchaId: ''
@@ -124,8 +104,6 @@ };
           reCaptchaCompat = _this$props.reCaptchaCompat;
-      var _this$state = this.state,
-          isApiReady = _this$state.isApiReady,
-          elementId = _this$state.elementId;
+      var isApiReady = this.state.isApiReady;
 
       if (!isApiReady) {
-        //Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha elementID - hCaptcha
+        //Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
         if (!captchaScriptCreated) {
@@ -146,6 +124,6 @@ // Only create the script tag once, use a global variable to track
     value: function componentWillUnmount() {
-      var _this$state2 = this.state,
-          isApiReady = _this$state2.isApiReady,
-          isRemoved = _this$state2.isRemoved,
-          captchaId = _this$state2.captchaId;
+      var _this$state = this.state,
+          isApiReady = _this$state.isApiReady,
+          isRemoved = _this$state.isRemoved,
+          captchaId = _this$state.captchaId;
       if (!isApiReady || isRemoved) return; // Reset any stored variables / timers when unmounting
@@ -171,4 +149,3 @@
 
-      var endpoint = this.props.endpoint; // Prop Keys that could change
-
+      // Prop Keys that could change
       var keys = ['sitekey', 'size', 'theme', 'tabindex', 'languageOverride', 'endpoint']; // See if any props changed during component update
@@ -181,4 +158,5 @@
       if (!match) {
-        this.removeCaptcha();
-        this.renderCaptcha();
+        this.removeCaptcha(function () {
+          _this2.renderCaptcha();
+        });
       }
@@ -189,8 +167,6 @@ }
     value: function renderCaptcha() {
-      var _this$state3 = this.state,
-          isApiReady = _this$state3.isApiReady,
-          elementId = _this$state3.elementId;
-      if (!isApiReady) return; //Render hCaptcha widget and provide neccessary callbacks - hCaptcha
+      var isApiReady = this.state.isApiReady;
+      if (!isApiReady) return; //Render hCaptcha widget and provide necessary callbacks - hCaptcha
 
-      var captchaId = hcaptcha.render(document.getElementById(elementId), _objectSpread(_objectSpread({}, this.props), {}, {
+      var captchaId = hcaptcha.render(this.ref.current, _objectSpread(_objectSpread({}, this.props), {}, {
         "error-callback": this.handleError,
@@ -208,6 +184,6 @@ "expired-callback": this.handleExpire,
     value: function resetCaptcha() {
-      var _this$state4 = this.state,
-          isApiReady = _this$state4.isApiReady,
-          isRemoved = _this$state4.isRemoved,
-          captchaId = _this$state4.captchaId;
+      var _this$state2 = this.state,
+          isApiReady = _this$state2.isApiReady,
+          isRemoved = _this$state2.isRemoved,
+          captchaId = _this$state2.captchaId;
       if (!isApiReady || isRemoved) return; // Reset captcha state, removes stored token and unticks checkbox
@@ -219,7 +195,7 @@
     key: "removeCaptcha",
-    value: function removeCaptcha() {
-      var _this$state5 = this.state,
-          isApiReady = _this$state5.isApiReady,
-          isRemoved = _this$state5.isRemoved,
-          captchaId = _this$state5.captchaId;
+    value: function removeCaptcha(callback) {
+      var _this$state3 = this.state,
+          isApiReady = _this$state3.isApiReady,
+          isRemoved = _this$state3.isRemoved,
+          captchaId = _this$state3.captchaId;
       if (!isApiReady || isRemoved) return;
@@ -230,2 +206,3 @@ this.setState({
         hcaptcha.remove(captchaId);
+        callback && callback();
       });
@@ -248,5 +225,5 @@ }
       var onVerify = this.props.onVerify;
-      var _this$state6 = this.state,
-          isRemoved = _this$state6.isRemoved,
-          captchaId = _this$state6.captchaId;
+      var _this$state4 = this.state,
+          isRemoved = _this$state4.isRemoved,
+          captchaId = _this$state4.captchaId;
       if (typeof hcaptcha === 'undefined' || isRemoved) return;
@@ -263,6 +240,6 @@ var token = hcaptcha.getResponse(captchaId); //Get response token from hCaptcha widget
       var onExpire = this.props.onExpire;
-      var _this$state7 = this.state,
-          isApiReady = _this$state7.isApiReady,
-          isRemoved = _this$state7.isRemoved,
-          captchaId = _this$state7.captchaId;
+      var _this$state5 = this.state,
+          isApiReady = _this$state5.isApiReady,
+          isRemoved = _this$state5.isRemoved,
+          captchaId = _this$state5.captchaId;
       if (!isApiReady || isRemoved) return;
@@ -277,6 +254,6 @@ hcaptcha.reset(captchaId); // If hCaptcha runs into error, reset captcha - hCaptcha
       var onError = this.props.onError;
-      var _this$state8 = this.state,
-          isApiReady = _this$state8.isApiReady,
-          isRemoved = _this$state8.isRemoved,
-          captchaId = _this$state8.captchaId;
+      var _this$state6 = this.state,
+          isApiReady = _this$state6.isApiReady,
+          isRemoved = _this$state6.isRemoved,
+          captchaId = _this$state6.captchaId;
       if (!isApiReady || isRemoved) return;
@@ -290,6 +267,6 @@ hcaptcha.reset(captchaId); // If hCaptcha runs into error, reset captcha - hCaptcha
     value: function execute() {
-      var _this$state9 = this.state,
-          isApiReady = _this$state9.isApiReady,
-          isRemoved = _this$state9.isRemoved,
-          captchaId = _this$state9.captchaId;
+      var _this$state7 = this.state,
+          isApiReady = _this$state7.isApiReady,
+          isRemoved = _this$state7.isRemoved,
+          captchaId = _this$state7.captchaId;
       if (!isApiReady || isRemoved) return;
@@ -303,2 +280,3 @@ hcaptcha.execute(captchaId);
       return /*#__PURE__*/React.createElement("div", {
+        ref: this.ref,
         id: elementId
@@ -305,0 +283,0 @@ });

package.json

 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A React library for hCaptcha",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -9,3 +9,3 @@ # React hCaptcha Component Library
 
-Sign up at [hCaptcha](https://www.hcaptcha.com) to get your sitekey today. **You need a sitekey to use this captcha solution.**
+Sign up at [hCaptcha](https://www.hcaptcha.com) to get your sitekey today. **You need a sitekey to use this library.**
 
@@ -98,3 +98,3 @@ ## Installation
 
-Please note that "invisible" simply means that no hCaptcha button will be rendered. Whether a challenge shows up will depend on the sitekey difficulty level.
+Please note that "invisible" simply means that no hCaptcha button will be rendered. Whether a challenge shows up will depend on the sitekey difficulty level. Note to hCaptcha Enterprise ([BotStop](https://www.botstop.com)) users: select "Passive" or "99.9% Passive" modes to get this No-CAPTCHA behavior.
 
@@ -101,0 +101,0 @@ ---

src/index.js

 const React = require('react');
 
-// Borrowed from https://github.com/ai/nanoid/blob/3.0.2/non-secure/index.js
-// This alphabet uses `A-Za-z0-9_-` symbols. A genetic algorithm helped
-// optimize the gzip compression for this alphabet.
-const urlAlphabet =
-  'ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW'
-
-const nanoid = (size = 21) => {
-  let id = ''
-  // A compact alternative for `for (var i = 0; i < step; i++)`.
-  let i = size
-  while (i--) {
-    // `| 0` is more compact and faster than `Math.floor()`.
-    id += urlAlphabet[(Math.random() * 64) | 0]
-  }
-  return id
-}
-
  // Create script to init hCaptcha
@@ -52,3 +35,2 @@ let onLoadListeners = [];
       super(props);
-      const { id=null } = props;
 
@@ -71,6 +53,8 @@ // API Methods
 
+      this.ref = React.createRef();
+
       this.state = {
         isApiReady,
         isRemoved: false,
-        elementId: id || `hcaptcha-${nanoid()}`,
+        elementId: props.id,
         captchaId: ''
@@ -82,6 +66,6 @@ }
       const { languageOverride, reCaptchaCompat } = this.props;
-      const { isApiReady, elementId } = this.state;
+      const { isApiReady } = this.state;
 
 
-      if (!isApiReady) {  //Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha elementID - hCaptcha
+      if (!isApiReady) {  //Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
 
@@ -120,4 +104,2 @@ if (!captchaScriptCreated) {
     componentDidUpdate(prevProps) {
-      const { endpoint } = this.props;
-
       // Prop Keys that could change
@@ -130,4 +112,5 @@ const keys = ['sitekey', 'size', 'theme', 'tabindex', 'languageOverride', 'endpoint'];
       if (!match) {
-        this.removeCaptcha();
-        this.renderCaptcha();
+        this.removeCaptcha(() => {
+          this.renderCaptcha();
+        });
       }
@@ -137,7 +120,7 @@ }
     renderCaptcha() {
-      const { isApiReady, elementId } = this.state;
+      const { isApiReady } = this.state;
       if (!isApiReady) return;
 
-      //Render hCaptcha widget and provide neccessary callbacks - hCaptcha
-      const captchaId = hcaptcha.render(document.getElementById(elementId),
+      //Render hCaptcha widget and provide necessary callbacks - hCaptcha
+      const captchaId = hcaptcha.render(this.ref.current,
         {
@@ -161,3 +144,3 @@ ...this.props,
 
-    removeCaptcha() {
+    removeCaptcha(callback) {
       const { isApiReady, isRemoved, captchaId } = this.state;
@@ -169,2 +152,3 @@
         hcaptcha.remove(captchaId);
+        callback && callback()
       });
@@ -220,3 +204,3 @@ }
       const { elementId } = this.state;
-      return <div id={elementId}></div>
+      return <div ref={this.ref} id={elementId}></div>
     }
@@ -223,0 +207,0 @@ }

tests/hcaptcha.spec.js

@@ -108,2 +108,24 @@ import React from 'react';
 
+    it('should set id if id prop is passed', () => {
+        instance = ReactTestUtils.renderIntoDocument(
+            <HCaptcha
+                sitekey={TEST_PROPS.sitekey}
+                id="test-id-1"
+            />,
+        );
+        const node = ReactDOM.findDOMNode(instance);
+        expect(node.getAttribute("id")).toBe("test-id-1");
+    });
+
+    it('should not set id if no id prop is passed', () => {
+        process.env.NODE_ENV = 'development';
+        instance = ReactTestUtils.renderIntoDocument(
+            <HCaptcha
+                sitekey={TEST_PROPS.sitekey}
+            />,
+        );
+        const node = ReactDOM.findDOMNode(instance);
+        expect(node.getAttribute("id")).toBe(null);
+    });
+
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

38224

decreased by-16.79%

Number of package files

16

decreased by-11.11%

Lines of code

638

decreased by-18.73%

Number of low supply chain risk alerts

2

increased by100%

No dependency changes