@hcaptcha/react-hcaptcha - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/index.js

@@ -94,2 +94,8 @@ "use strict";
   }, {
+    key: "resetCaptcha",
+    value: function resetCaptcha() {
+      // Reset captcha state, removes stored token and unticks checkbox
+      hcaptcha.reset(this._id);
+    }
+  }, {
     key: "closeCaptcha",
@@ -96,0 +102,0 @@ value: function closeCaptcha() {

examples/src/index.js

@@ -6,3 +6,3 @@ const React = require('react');
 class ReactDemo extends React.Component {
-  
+
   constructor(props) {
@@ -12,6 +12,8 @@ super(props);
     this.state = {isVerified: false};
+    this.captcha = React.createRef();
 
     this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleReset  = this.handleReset.bind(this);
     this.onVerifyCaptcha = this.onVerifyCaptcha.bind(this);
+    this.onVerifyCaptcha = this.onVerifyCaptcha.bind(this);
   }
@@ -33,16 +35,18 @@
 
+  handleReset(event) {
+    event.preventDefault()
+    this.captcha.current.resetCaptcha()
+    this.setState({isVerified: false})
+  }
+
   render() {
-    let responseParagraph;
-    if(this.state.isVerified) {
-      responseParagraph = <p> Open your console to see the Verified response.</p>
-    }
+    const { isVerified } = this.state;
+
     return (
       <div>
-        <h2>HCaptcha Quickstart</h2>
         <p>
           Set your sitekey and onVerify callback as props, and drop into your form. From here, we'll take care of the rest.
         </p>
-        {responseParagraph}
         <form>
-          <HCaptcha onVerify={this.onVerifyCaptcha}
+          <HCaptcha ref={this.captcha} onVerify={this.onVerifyCaptcha}
           sitekey="917ba1eb-0b37-486e-9c90-39f3cb7b2579"
@@ -52,18 +56,10 @@ theme="dark"
         </form>
-        <h2>Bound to button</h2>
-        <p>
-          Set your sitekey, the size to invisible, and onVerify callback as props. 
-        </p>
-        <p>
-          Create a button, and set handleSubmit callback and bind it to the parent. The handleSubmit callback should prevent default on the event, and then call this.child.execute().
-          This will execute the captcha. 
-        </p>
-        <form>
-          <HCaptcha onVerify={this.onVerifyCaptcha}
-          sitekey="917ba1eb-0b37-486e-9c90-39f3cb7b2579"
-          size="invisible"
-          ref={instance => {this.child = instance}}
-          />
-        </form>
-        <button onClick={this.handleSubmit}>Click</button>
+
+        {isVerified &&
+          <div>
+            <p>Open your console to see the Verified response.</p>
+            <button onClick={this.handleReset}>Reset Captcha</button>
+          </div>
+        }
+
       </div>
@@ -70,0 +66,0 @@ );

package.json

 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A React library for hCaptcha",
@@ -32,8 +32,8 @@ "main": "dist/index.js",
     "html-webpack-plugin": "^3.2.0",
-    "react": "^16.5.1",
-    "react-dom": "^16.5.1",
-    "webpack": "^4.15.1",
-    "webpack-cli": "^3.0.8",
-    "webpack-dev-server": "^3.1.4"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "webpack": "^4.35.3",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.7.2"
   }
 }

README.md

@@ -6,3 +6,3 @@ # React hCaptcha Component Library
 
-[hCaptcha](https://www.hcaptcha.com) is an easy to use replacement for reCaptcha that helps monetize your website.
+[hCaptcha](https://www.hcaptcha.com) is an easy to use replacement for reCAPTCHA that helps monetize your website.
 
@@ -30,7 +30,7 @@ Sign up at [hCaptcha](https://wwww.hcaptcha.com) to get your sitekey today. **You need a sitekey to use this captcha solution.**
 Props include:
-- sitekey: String, **Required** 
-    - This is your sitekey, this allows you to load captcha.
-- size: String (normal, compact, invisible) 
-    - This specifies the "size" of the component. hCaptcha allows you to decide how big the component will appear on render, this always defaults to normal.
-      Want a smaller checkbox? Use compact!
+- sitekey: String, **Required**
+    - This is your sitekey. It allows you to load hCaptcha, and to configure options like difficulty on the hCaptcha dashboard.
+- size: String (normal, compact, invisible)
+    - This specifies the "size" of the component. hCaptcha allows you to decide how big the component will appear on render. Defaults to normal.
+      Want a smaller checkbox? Use compact! Invisible does not show a hCaptcha button, and instead pops up on form submit.
 - theme: String (light, dark)
@@ -41,5 +41,6 @@ - hCaptcha supports both a light and dark theme. If no theme is inherently set, the captcha will always default to light.
 
-The component emits any events related to verification, and expiring. Simply catch these events in the parent component
-ie: `onVerify`, `onExpire`, `onError` and handle the events as you choose. The captcha will automatically reset on error, but still emit an error.
+The component emits events related to verification and expiration. Simply catch these events in the parent component: `onVerify`, `onExpire`, `onError` and handle the events as you choose. The captcha will automatically reset on error, but still emits an error.
 
-Please refer to the demo for examples of basic usage and an invisible Captcha.
+**NOTE**: Make sure to reset the hCaptcha state when you submit your form by calling the method `.resetCaptcha` on your hCaptcha React Component! Passcodes are one-time use, so if your user submits the same passcode twice then it will be rejected by the server the second time.
+
+Please refer to the demo for examples of basic usage and an invisible hCaptcha.

src/index.js

 const React = require('react');
-  
+
 const CaptchaScript = (cb) => { // Create script to intialize hCaptcha tool - hCaptcha
@@ -11,3 +11,3 @@ let script = document.createElement("script")
 
-    return script;        
+    return script;
 }
@@ -20,29 +20,29 @@
 }
-  
+
 class HCaptcha extends React.Component {
     constructor (props) {
       super(props)
-  
+
       this.removeFrame     = this.removeFrame.bind(this)
       this.onloadScript    = this.onloadScript.bind(this)
       this.onerrorCaptcha  = this.onerrorCaptcha.bind(this)
-      this.onsubmitCaptcha = this.onsubmitCaptcha.bind(this) 
-      this.closeCaptcha    = this.closeCaptcha.bind(this) 
-  
+      this.onsubmitCaptcha = this.onsubmitCaptcha.bind(this)
+      this.closeCaptcha    = this.closeCaptcha.bind(this)
+
       this._id = null
       this._removed = false;
     }
-  
+
     onloadScript() {
       if (typeof hcaptcha !== undefined) { //Render hCaptcha widget and provide neccessary callbacks - hCaptcha
-        this._id = hcaptcha.render(hCaptchaVars.element_id, 
-          {           
-            ...this.props, 
-            "error-callback"  : this.onerrorCaptcha, 
-            "expired-callback": this.onerrorCaptcha, 
+        this._id = hcaptcha.render(hCaptchaVars.element_id,
+          {
+            ...this.props,
+            "error-callback"  : this.onerrorCaptcha,
+            "expired-callback": this.onerrorCaptcha,
             "callback"        : this.onsubmitCaptcha
           })
-      } 
+      }
     }
-  
+
     componentDidMount () { //Once captcha is mounted intialize hCaptcha - hCaptcha
@@ -56,15 +56,20 @@ if (typeof hcaptcha === 'undefined') {  //Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha element - hCaptcha
     }
-  
+
     componentWillUnmount() { //If captcha gets removed for timeout or error check to make sure iframe is also removed - hCaptcha
-        if(typeof hcaptcha === 'undefined') return 
+        if(typeof hcaptcha === 'undefined') return
         if (this._removed === false) this.removeFrame()
     }
-  
+
     onsubmitCaptcha (event) {
       if (typeof hcaptcha === 'undefined') return
-      
+
       let token = hcaptcha.getResponse(this._id) //Get response token from hCaptcha widget - hCaptcha
       this.props.onVerify(token) //Dispatch event to verify user response
     }
-  
+
+    resetCaptcha() {
+      // Reset captcha state, removes stored token and unticks checkbox
+      hcaptcha.reset(this._id)
+    }
+
     closeCaptcha () {
@@ -74,3 +79,3 @@ this.removeFrame();
     }
-  
+
     onerrorCaptcha (e) {
@@ -80,18 +85,18 @@ if (typeof hcaptcha === 'undefined') return
     }
-  
+
     execute () {
-      if(typeof hcaptcha === 'undefined') return 
+      if(typeof hcaptcha === 'undefined') return
       hcaptcha.execute(this._id)
     }
-  
+
     removeFrame() {
       let nodes = document.body.childNodes //Get top level dom elements - hCaptcha
       let foundFrame = false
-  
+
       let i = nodes.length
       let k, src, title, frames
-  
+
       while (--i > -1 && foundFrame === false) { //Look for hCaptcha verification iframe appended at document body - hCaptcha
         frames = nodes[i].getElementsByTagName('iframe')
-        
+
         if (frames.length > 0) {
@@ -101,9 +106,9 @@ for (k=0; k < frames.length; k++) {
             title = frames[k].getAttribute("title")
-  
+
             if (src.includes(hCaptchaVars.domain) && title.includes(hCaptchaVars.iframe_title)) foundFrame = nodes[i] //Compare iframe source and title to find correct iframe appeneded to body - hCaptcha
           }
-  
+
         }
       }
-  
+
       if (foundFrame) {
@@ -114,5 +119,5 @@ document.body.removeChild(foundFrame);
     }
-  
+
     render () {
-  
+
       return (
@@ -119,0 +124,0 @@ <div>

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

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

Improved metrics

Total package byte prevSize

24803

increased by5.55%

Number of package files

11

increased by10%

Lines of code

464

increased by0.43%

Number of lines in readme file

43

increased by2.38%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes