react-recaptcha-x - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

CHANGELOG.md

@@ -0,1 +1,13 @@
+# [1.1.0](https://github.com/antokara/react-recaptcha-x/compare/v1.0.9...v1.1.0) (2020-01-09)
+
+
+### Bug Fixes
+
+* **packages:** update npm packages ([c3cdab8](https://github.com/antokara/react-recaptcha-x/commit/c3cdab8bd2697761272b2792e125d89e4a0ad3d6))
+
+
+### Features
+
+* **recaptcha v3 component:** add refresh token fn ([81d53e3](https://github.com/antokara/react-recaptcha-x/commit/81d53e37030a170bc132ac3d28a000afe746ff23))
+
 ## [1.0.9](https://github.com/antokara/react-recaptcha-x/compare/v1.0.8...v1.0.9) (2019-12-14)
@@ -2,0 +14,0 @@

dist/index.d.ts

@@ -6,4 +6,5 @@ import { ReCaptchaProvider } from './provider/ReCaptchaProvider';
 import { TCallback as TReCaptchaV3Callback } from './reCaptchaV3/component/TCallback';
+import { TRefreshToken as TReCaptchaV3RefreshToken } from './reCaptchaV3/component/TRefreshToken';
 import { ReCaptchaV2 } from './reCaptchaV2/container/ReCaptchaV2';
 import { ReCaptchaV3 } from './reCaptchaV3/container/ReCaptchaV3';
-export { EReCaptchaV2Theme, EReCaptchaV2Size, ReCaptchaProvider, ReCaptchaV2, ReCaptchaV3, TReCaptchaV2Callback, TReCaptchaV3Callback };
+export { EReCaptchaV2Theme, EReCaptchaV2Size, ReCaptchaProvider, ReCaptchaV2, ReCaptchaV3, TReCaptchaV2Callback, TReCaptchaV3Callback, TReCaptchaV3RefreshToken };

dist/index.js

@@ -1,1 +0,1 @@
-module.exports=function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=5)}([function(e,t){e.exports=require("react")},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(0).createContext({siteKeyV2:"",siteKeyV3:"",loaded:!1});t.Context=o},function(e,t,r){"use strict";var o;Object.defineProperty(t,"__esModule",{value:!0}),function(e){e.Normal="normal",e.Compact="compact"}(o||(o={})),t.ESize=o},function(e,t,r){"use strict";var o;Object.defineProperty(t,"__esModule",{value:!0}),function(e){e.Light="light",e.Dark="dark"}(o||(o={})),t.ETheme=o},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(0),n=r(1);t.withContext=e=>(class extends o.Component{render(){return o.createElement(n.Context.Consumer,null,((e,t)=>r=>o.createElement(e,Object.assign({},t,{providerContext:r})))(e,this.props))}})},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(6);t.ReCaptchaProvider=o.ReCaptchaProvider;const n=r(2);t.EReCaptchaV2Size=n.ESize;const i=r(3);t.EReCaptchaV2Theme=i.ETheme;const a=r(7);t.ReCaptchaV2=a.ReCaptchaV2;const s=r(9);t.ReCaptchaV3=s.ReCaptchaV3},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(0),n=r(1);class i extends o.Component{constructor(e){super(e),this.state={loaded:!1},this.onLoadHandler=this.onLoadHandler.bind(this),window.GoogleReCaptcha_onload=this.onLoadHandler}componentDidMount(){const{siteKeyV3:e="explicit",langCode:t="",hideV3Badge:r=!1}=this.props;if(null===document.querySelector('script[data-id="react-recaptcha-v3-v2-script"]')){const r=document.createElement("script");r.setAttribute("data-id","react-recaptcha-v3-v2-script"),r.setAttribute("src",`https://www.google.com/recaptcha/api.js?render=${e}&onload=GoogleReCaptcha_onload&hl=${t}`),r.setAttribute("async","true"),r.setAttribute("defer","true"),document.body.appendChild(r)}if(r&&null===document.querySelector('style[data-id="react-recaptcha-v3-v2-style"]')){const e=document.createElement("style");e.innerHTML=".grecaptcha-badge{display: none;}",e.setAttribute("data-id","react-recaptcha-v3-v2-style"),document.body.appendChild(e)}}render(){const{children:e,siteKeyV3:t,siteKeyV2:r}=this.props,{loaded:i}=this.state,a={siteKeyV2:r,siteKeyV3:t,loaded:i};return o.createElement(n.Context.Provider,{value:a},e)}onLoadHandler(){delete window.GoogleReCaptcha_onload,this.setState({loaded:!0})}}t.ReCaptchaProvider=i},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(4),n=r(8),i=o.withContext(n.ReCaptchaV2);t.ReCaptchaV2=i},function(e,t,r){"use strict";var o=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r};Object.defineProperty(t,"__esModule",{value:!0});const n=r(0),i=r(2),a=r(3);class s extends n.Component{constructor(e){super(e);const{siteKeyV2:t}=this.props.providerContext;if(!t)throw new Error('The prop "siteKeyV2" must be set on the ReCaptchaProvider before using the ReCaptchaV2 component');this.state={ref:n.createRef(),widgetId:void 0,token:void 0,expired:!1,error:!1},this.successCallback=this.successCallback.bind(this),this.expiredCallback=this.expiredCallback.bind(this),this.errorCallback=this.errorCallback.bind(this),this.checkComponentDidUpdate=this.checkComponentDidUpdate.bind(this)}componentDidUpdate(e){this.checkComponentDidUpdate(this.state.ref,this.props,e)}checkComponentDidUpdate(e,t,r){const{loaded:o,siteKeyV2:n}=t.providerContext,{theme:i,size:a,tabindex:s}=t;r.providerContext.loaded!==o&&o&&e.current&&n&&this.setState({expired:!1,error:!1,widgetId:grecaptcha.render(e.current,{sitekey:n,callback:this.successCallback,"expired-callback":this.expiredCallback,"error-callback":this.errorCallback,theme:i,size:a,tabindex:s})})}render(){const{ref:e}=this.state,t=this.props,{theme:r,callback:i,size:a,tabindex:s,providerContext:c}=t,d=o(t,["theme","callback","size","tabindex","providerContext"]);return n.createElement("div",Object.assign({ref:e},d))}successCallback(e){const{callback:t}=this.props;this.setState({token:e,expired:!1,error:!1},()=>{t(e)})}expiredCallback(){const{callback:e}=this.props;this.setState({expired:!0},()=>{e(!1)})}errorCallback(){const{callback:e}=this.props;this.setState({error:!0},()=>{e(new Error)})}}t.ReCaptchaV2=s,s.defaultProps={theme:a.ETheme.Light,size:i.ESize.Normal,tabindex:0}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(4),n=r(10),i=o.withContext(n.ReCaptchaV3);t.ReCaptchaV3=i},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(0);class n extends o.Component{constructor(e){super(e);const{siteKeyV3:t}=this.props.providerContext;if(!t)throw new Error('The prop "siteKeyV3" must be set on the ReCaptchaProvider before using the ReCaptchaV3 component');this.state={token:void 0,retrieving:!1},this.getToken=this.getToken.bind(this),this.getToken()}componentDidUpdate(e){const{loaded:t}=this.props.providerContext;e.providerContext.loaded!==t&&t&&this.getToken()}render(){return!1}getToken(){const{loaded:e,siteKeyV3:t}=this.props.providerContext,{retrieving:r}=this.state,{action:o,callback:n}=this.props;e&&!r&&t&&this.setState({token:void 0,retrieving:!0},()=>{n(),grecaptcha.execute(t,{action:o}).then(e=>{this.setState({token:e,retrieving:!1},()=>{n(e)})})})}}t.ReCaptchaV3=n}]);
+module.exports=function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=5)}([function(e,t){e.exports=require("react")},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(0).createContext({siteKeyV2:"",siteKeyV3:"",loaded:!1});t.Context=o},function(e,t,r){"use strict";var o;Object.defineProperty(t,"__esModule",{value:!0}),function(e){e.Normal="normal",e.Compact="compact"}(o||(o={})),t.ESize=o},function(e,t,r){"use strict";var o;Object.defineProperty(t,"__esModule",{value:!0}),function(e){e.Light="light",e.Dark="dark"}(o||(o={})),t.ETheme=o},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(0),n=r(1);t.withContext=e=>class extends o.Component{render(){return o.createElement(n.Context.Consumer,null,((e,t)=>r=>o.createElement(e,Object.assign({},t,{providerContext:r})))(e,this.props))}}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(6);t.ReCaptchaProvider=o.ReCaptchaProvider;const n=r(2);t.EReCaptchaV2Size=n.ESize;const i=r(3);t.EReCaptchaV2Theme=i.ETheme;const a=r(7);t.ReCaptchaV2=a.ReCaptchaV2;const s=r(9);t.ReCaptchaV3=s.ReCaptchaV3},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(0),n=r(1);class i extends o.Component{constructor(e){super(e),this.state={loaded:!1},this.onLoadHandler=this.onLoadHandler.bind(this),window.GoogleReCaptcha_onload=this.onLoadHandler}componentDidMount(){const{siteKeyV3:e="explicit",langCode:t="",hideV3Badge:r=!1}=this.props;if(null===document.querySelector('script[data-id="react-recaptcha-v3-v2-script"]')){const r=document.createElement("script");r.setAttribute("data-id","react-recaptcha-v3-v2-script"),r.setAttribute("src",`https://www.google.com/recaptcha/api.js?render=${e}&onload=GoogleReCaptcha_onload&hl=${t}`),r.setAttribute("async","true"),r.setAttribute("defer","true"),document.body.appendChild(r)}if(r&&null===document.querySelector('style[data-id="react-recaptcha-v3-v2-style"]')){const e=document.createElement("style");e.innerHTML=".grecaptcha-badge{display: none;}",e.setAttribute("data-id","react-recaptcha-v3-v2-style"),document.body.appendChild(e)}}render(){const{children:e,siteKeyV3:t,siteKeyV2:r}=this.props,{loaded:i}=this.state,a={siteKeyV2:r,siteKeyV3:t,loaded:i};return o.createElement(n.Context.Provider,{value:a},e)}onLoadHandler(){delete window.GoogleReCaptcha_onload,this.setState({loaded:!0})}}t.ReCaptchaProvider=i},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(4),n=r(8),i=o.withContext(n.ReCaptchaV2);t.ReCaptchaV2=i},function(e,t,r){"use strict";var o=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r};Object.defineProperty(t,"__esModule",{value:!0});const n=r(0),i=r(2),a=r(3);class s extends n.Component{constructor(e){super(e);const{siteKeyV2:t}=this.props.providerContext;if(!t)throw new Error('The prop "siteKeyV2" must be set on the ReCaptchaProvider before using the ReCaptchaV2 component');this.state={ref:n.createRef(),widgetId:void 0,token:void 0,expired:!1,error:!1},this.successCallback=this.successCallback.bind(this),this.expiredCallback=this.expiredCallback.bind(this),this.errorCallback=this.errorCallback.bind(this),this.checkComponentDidUpdate=this.checkComponentDidUpdate.bind(this)}componentDidUpdate(e){this.checkComponentDidUpdate(this.state.ref,this.props,e)}checkComponentDidUpdate(e,t,r){const{loaded:o,siteKeyV2:n}=t.providerContext,{theme:i,size:a,tabindex:s}=t;r.providerContext.loaded!==o&&o&&e.current&&n&&this.setState({expired:!1,error:!1,widgetId:grecaptcha.render(e.current,{sitekey:n,callback:this.successCallback,"expired-callback":this.expiredCallback,"error-callback":this.errorCallback,theme:i,size:a,tabindex:s})})}render(){const{ref:e}=this.state,t=this.props,{theme:r,callback:i,size:a,tabindex:s,providerContext:c}=t,d=o(t,["theme","callback","size","tabindex","providerContext"]);return n.createElement("div",Object.assign({ref:e},d))}successCallback(e){const{callback:t}=this.props;this.setState({token:e,expired:!1,error:!1},()=>{t(e)})}expiredCallback(){const{callback:e}=this.props;this.setState({expired:!0},()=>{e(!1)})}errorCallback(){const{callback:e}=this.props;this.setState({error:!0},()=>{e(new Error)})}}t.ReCaptchaV2=s,s.defaultProps={theme:a.ETheme.Light,size:i.ESize.Normal,tabindex:0}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(4),n=r(10),i=o.withContext(n.ReCaptchaV3);t.ReCaptchaV3=i},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=r(0);class n extends o.Component{constructor(e){super(e);const{siteKeyV3:t}=this.props.providerContext;if(!t)throw new Error('The prop "siteKeyV3" must be set on the ReCaptchaProvider before using the ReCaptchaV3 component');this.state={token:void 0,retrieving:!1},this.getToken=this.getToken.bind(this),this.getToken()}componentDidUpdate(e){const{loaded:t}=this.props.providerContext;e.providerContext.loaded!==t&&t&&this.getToken()}render(){return!1}getToken(){const{loaded:e,siteKeyV3:t}=this.props.providerContext,{retrieving:r}=this.state,{action:o,callback:n}=this.props;e&&!r&&t&&this.setState({token:void 0,retrieving:!0},()=>{n(),grecaptcha.execute(t,{action:o}).then(e=>{this.setState({token:e,retrieving:!1},()=>{n(e,this.getToken)})})})}}t.ReCaptchaV3=n}]);

dist/reCaptchaV3/component/TCallback.d.ts

@@ -1,1 +0,2 @@
-export declare type TCallback = (token: string | void) => void;
+import { TRefreshToken } from './TRefreshToken';
+export declare type TCallback = (token: string | void, refreshToken: TRefreshToken | void) => void;

package.json

 {
   "name": "react-recaptcha-x",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "a React component for Google's reCAPTCHA v3 and v2 (checkbox) component",
@@ -46,12 +46,12 @@ "main": "./dist/index.js",
   "devDependencies": {
-    "@commitlint/cli": "^8.2.0",
-    "@commitlint/config-conventional": "^8.2.0",
+    "@commitlint/cli": "^8.3.4",
+    "@commitlint/config-conventional": "^8.3.4",
     "@semantic-release/changelog": "^3.0.6",
     "@semantic-release/git": "^7.0.18",
     "@semantic-release/github": "^5.5.5",
-    "@semantic-release/npm": "^5.3.4",
+    "@semantic-release/npm": "^5.3.5",
     "@testing-library/dom": "^6.11.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
-    "@types/jest": "^24.0.23",
+    "@types/jest": "^24.0.25",
     "coveralls": "^3.0.9",
@@ -61,4 +61,4 @@ "jest": "^24.9.0",
     "react-dom": "^16.12.0",
-    "semantic-release": "^15.13.31",
-    "ts-jest": "^24.2.0",
+    "semantic-release": "^15.14.0",
+    "ts-jest": "^24.3.0",
     "ts-loader": "^6.2.1",
@@ -70,8 +70,8 @@ "tscpaths": "0.0.9",
     "tslint-react": "^4.1.0",
-    "typescript": "^3.7.3",
-    "webpack": "^4.41.2",
+    "typescript": "^3.7.4",
+    "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10"
   },
   "dependencies": {
-    "@types/react": "^16.9.16",
+    "@types/react": "^16.9.17",
     "react": "^16.12.0"
@@ -78,0 +78,0 @@ },

README.md

@@ -76,5 +76,8 @@ # react-recaptcha-x
 
-const v3Callback = token => {
+const v3Callback = (token, refreshToken) => {
   if (typeof token === 'string') {
     console.log('this is the token', token);
+    if (typeof refreshToken === 'function') {
+      console.log('this is the refresh token function', refreshToken);
+    }
   } else {
@@ -133,5 +136,11 @@ console.log('token retrieval in progress...');
 
-const v3Callback: TReCaptchaV3Callback = (token: string | void): void => {
+const v3Callback: TReCaptchaV3Callback = (
+  token: string | void,
+  refreshToken: TReCaptchaV3RefreshToken | void
+): void => {
   if (typeof token === 'string') {
     console.log('this is the token', token);
+    if (typeof refreshToken === 'function') {
+      console.log('this is the refresh token function', refreshToken);
+    }
   } else {
@@ -203,6 +212,6 @@ console.log('token retrieval in progress...');
 
-| prop     | type                           | default value | description                                                                                                                                                |
-| -------- | ------------------------------ | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| callback | function(token:string or void) | n/a           | Required. When called without arguments, it means requesting token in progress. When called with string (token), it means token retrieved                  |
-| action   | string                         | n/a           | Required. The name of the action to keep score and statistic about. It can only contain alphanumeric characters and slashes, and must not be user-specific |
+| prop     | type                                                    | default value | description                                                                                                                                                                                                                                                  |
+| -------- | ------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| callback | function(token:string or void, refreshToken:fn or void) | n/a           | Required. When called without arguments, it means requesting token in progress. When called with string (token) and function (refreshToken), it means token retrieved. The refreshToken function can be used at any time, to refresh the token by calling it |
+| action   | string                                                  | n/a           | Required. The name of the action to keep score and statistic about. It can only contain alphanumeric characters and slashes, and must not be user-specific                                                                                                   |
 
@@ -209,0 +218,0 @@ ## working examples

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

131092

increased by1.16%

Number of package files

39

increased by2.63%

Lines of code

333

increased by0.91%

Number of lines in readme file

269

increased by3.46%

Dependency changes

• Updated@types/react@^16.9.17