reactjs-captcha - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/captcha-helper.js

@@ -51,2 +51,11 @@ 'use strict';
 
+module.exports.getHtml = function (captchaStyleName, captchaEndpoint, callback) {
+    var self = this;
+    var url = captchaEndpoint + '?get=html&c=' + captchaStyleName;
+    this.ajax(url, function (data) {
+        var captchaHtml = data.replace(/<script.*<\/script>/g, '');;
+        callback(captchaHtml);
+    });
+};
+
 module.exports.ajax = function (url, callback) {
@@ -53,0 +62,0 @@ function xhr() {

dist/captcha-settings.js

@@ -5,3 +5,7 @@ 'use strict';
 
-window.bdc_react_settings = window.bdc_react_settings || { captchaEndpoint: 'botdetectcaptcha' };
+window.bdc_react_settings = window.bdc_react_settings || {
+    captchaEndpoint: '',
+    captchaEnabled: true
+};
+
 var captchaSettings = {
@@ -8,0 +12,0 @@ config: window.bdc_react_settings,

dist/reactjs-captcha.js

@@ -29,6 +29,12 @@ 'use strict';
         }
+
+        // generate captcha html markup in view
+
     }, {
         key: 'componentDidMount',
         value: function componentDidMount() {
-            this.displayHtml();
+            if (captchaSettings.get().captchaEnabled) {
+                var captchaStyleName = this.props.styleName || 'defaultCaptcha';
+                this.displayHtml(captchaStyleName);
+            }
         }
@@ -43,3 +49,4 @@
             if (typeof window.botdetect !== 'undefined') {
-                return window.botdetect.getInstanceByStyleName(this.props.styleName);
+                var captchaStyleName = this.state && typeof this.state.styleName !== 'undefined' ? this.state.styleName : this.props.styleName;
+                instance = window.botdetect.getInstanceByStyleName(captchaStyleName);
             }
@@ -49,25 +56,2 @@ return instance;
 
-        // display captcha html markup.
-
-    }, {
-        key: 'displayHtml',
-        value: function displayHtml() {
-            var self = this;
-            var captchaStyleName = self.props.styleName || 'defaultCaptcha';
-            var url = captchaSettings.get().captchaEndpoint + '?get=html&c=' + captchaStyleName;
-
-            captchaHelper.ajax(url, function (data) {
-                var target = document.getElementById('BDC_CaptchaComponent_' + captchaStyleName);
-                target.innerHTML = data.replace(/<script.*<\/script>/g, '');
-                self.loadScriptIncludes(captchaStyleName, function () {
-                    var instance = self.getInstance();
-                    if (instance) {
-                        captchaHelper.addValidateEvent(instance);
-                    } else {
-                        console.error('window.botdetect undefined.');
-                    }
-                });
-            });
-        }
-
         // the current captcha id, which will be used for server-side validation purpose.
@@ -88,7 +72,16 @@
         }
+    }, {
+        key: 'displayHtml',
+        value: function displayHtml(styleName) {
+            var self = this;
+            captchaHelper.getHtml(styleName, captchaSettings.get().captchaEndpoint, function (captchaHtml) {
+                document.getElementById('BDC_CaptchaComponent').innerHTML = captchaHtml;
+                self.loadScriptIncludes(styleName);
+            });
+        }
+    }, {
+        key: 'reloadImage',
 
+
         // reload a new captcha image.
-
-    }, {
-        key: 'reloadImage',
         value: function reloadImage() {
@@ -109,2 +102,11 @@ this.getInstance().reloadImage();
 
+        // generate captcha markup manually
+
+    }, {
+        key: 'generateCaptchaMarkup',
+        value: function generateCaptchaMarkup(styleName) {
+            this.setState({ styleName: styleName });
+            this.displayHtml(styleName);
+        }
+
         // load BotDetect scripts.
@@ -114,6 +116,15 @@
         key: 'loadScriptIncludes',
-        value: function loadScriptIncludes(styleName, callback) {
+        value: function loadScriptIncludes(styleName) {
+            var self = this;
             var captchaId = document.getElementById('BDC_VCID_' + styleName).value;
             var scriptIncludeUrl = captchaSettings.get().captchaEndpoint + '?get=script-include&c=' + styleName + '&t=' + captchaId + '&cs=203';
-            captchaHelper.getScript(scriptIncludeUrl, callback);
+            captchaHelper.getScript(scriptIncludeUrl, function () {
+                // register user input blur validation
+                var instance = self.getInstance();
+                if (instance) {
+                    captchaHelper.addValidateEvent(instance);
+                } else {
+                    console.error('window.botdetect undefined.');
+                }
+            });
         }
@@ -123,3 +134,3 @@ }, {
         value: function render() {
-            return React.createElement('div', { id: 'BDC_CaptchaComponent_' + this.props.styleName });
+            return React.createElement('div', { id: 'BDC_CaptchaComponent' });
         }
@@ -126,0 +137,0 @@ }]);

package.json

 {
   "name": "reactjs-captcha",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "BotDetect Captcha React Component (JavaScript: React 0.13.x/0.14.x/15/16+)",
@@ -5,0 +5,0 @@ "scripts": {

src/captcha-helper.js

@@ -49,2 +49,11 @@ module.exports.spread = function(initArr, addArr) {
 
+module.exports.getHtml = function(captchaStyleName, captchaEndpoint, callback) {
+    var self = this;
+    var url =  captchaEndpoint + '?get=html&c=' + captchaStyleName;
+    this.ajax(url, function(data) {
+        var captchaHtml = data.replace(/<script.*<\/script>/g, '');;
+        callback(captchaHtml);
+    });
+};
+
 module.exports.ajax = function(url, callback) {
@@ -51,0 +60,0 @@ function xhr() {

src/captcha-settings.js

 var captchaHelper = require('./captcha-helper');
 
-window.bdc_react_settings = window.bdc_react_settings || { captchaEndpoint: 'botdetectcaptcha' }
+window.bdc_react_settings = window.bdc_react_settings || { 
+    captchaEndpoint: '',
+    captchaEnabled: true
+};
+
 var captchaSettings = {
@@ -5,0 +9,0 @@ config: window.bdc_react_settings,

src/reactjs-captcha.js

@@ -15,4 +15,8 @@ var React = require('react');
 
+    // generate captcha html markup in view
     componentDidMount() {
-        this.displayHtml();
+        if (captchaSettings.get().captchaEnabled) {
+            let captchaStyleName = this.props.styleName || 'defaultCaptcha';
+            this.displayHtml(captchaStyleName);
+        }
     }
@@ -24,3 +28,6 @@
         if (typeof window.botdetect !== 'undefined') {
-            return window.botdetect.getInstanceByStyleName(this.props.styleName);
+            const captchaStyleName = (this.state && (typeof this.state.styleName !== 'undefined'))
+                ? this.state.styleName
+                : this.props.styleName;
+            instance = window.botdetect.getInstanceByStyleName(captchaStyleName);
         }
@@ -30,22 +37,2 @@ return instance;
 
-    // display captcha html markup.
-    displayHtml() {
-        let self = this;
-        let captchaStyleName = self.props.styleName || 'defaultCaptcha';
-        let url = captchaSettings.get().captchaEndpoint + '?get=html&c=' + captchaStyleName;
-
-        captchaHelper.ajax(url, function(data) {
-            let target = document.getElementById('BDC_CaptchaComponent_' + captchaStyleName);
-            target.innerHTML = data.replace(/<script.*<\/script>/g, '');
-            self.loadScriptIncludes(captchaStyleName, function() {
-                let instance = self.getInstance();
-                if (instance) {
-                    captchaHelper.addValidateEvent(instance);
-                } else {
-                    console.error('window.botdetect undefined.');
-                }
-            })
-        });
-    }
-
     // the current captcha id, which will be used for server-side validation purpose.
@@ -61,2 +48,10 @@ getCaptchaId() {
 
+    displayHtml(styleName) {
+        let self = this;
+        captchaHelper.getHtml(styleName, captchaSettings.get().captchaEndpoint, function(captchaHtml) {
+            document.getElementById('BDC_CaptchaComponent').innerHTML = captchaHtml;
+            self.loadScriptIncludes(styleName);
+        });
+    };
+
     // reload a new captcha image.
@@ -77,7 +72,22 @@ reloadImage() {
 
+    // generate captcha markup manually
+    generateCaptchaMarkup(styleName) {
+        this.setState({styleName: styleName});
+        this.displayHtml(styleName);
+    }
+
     // load BotDetect scripts.
-    loadScriptIncludes(styleName, callback) {
+    loadScriptIncludes(styleName) {
+        var self = this;
         let captchaId = document.getElementById('BDC_VCID_' + styleName).value;
         let scriptIncludeUrl = captchaSettings.get().captchaEndpoint + '?get=script-include&c=' + styleName + '&t=' + captchaId + '&cs=203';
-        captchaHelper.getScript(scriptIncludeUrl, callback);
+        captchaHelper.getScript(scriptIncludeUrl, function() {
+            // register user input blur validation
+            let instance = self.getInstance();
+            if (instance) {
+                captchaHelper.addValidateEvent(instance);
+            } else {
+                console.error('window.botdetect undefined.');
+            }
+        });
     }
@@ -87,3 +97,3 @@
         return (
-            <div id={'BDC_CaptchaComponent_' + this.props.styleName}></div>
+            <div id='BDC_CaptchaComponent'></div>
         );
@@ -90,0 +100,0 @@ }

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

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

25864

increased by5.73%

Lines of code

400

increased by11.73%

No dependency changes