Handle recaptcha expired event

README.md

@@ -91,7 +91,7 @@ Assuming you have [aurelia-validation](https://github.com/aurelia/validation) co
 
 ```html
 <form submit.delegate="submit()">
-  <aup-google-recaptcha callback.call="recaptcha($event)" value.bind="response & validate"></aup-google-recaptcha>
+  <aup-google-recaptcha callback.call="recaptcha($event)" expire.call="recaptchaExpired($event)" value.bind="response & validate"></aup-google-recaptcha>
   <button type="submit">Submit</button>
 </form>
 ```
@@ -118,6 +118,10 @@ export class App {
     this.response = response;
   }
 
+  recaptchaExpired(){
+    this.response = undefined;
+  }
+
   async submit() {
     try {
       const errors = await this.validationController.validate();
@@ -155,4 +159,4 @@ export class App {
     window.grecaptcha.execute(this.widgetId);
   }
 }
-```
+```

dist/amd/aurelia-plugins-google-recaptcha-element.d.ts

@@ -4,12 +4,12 @@ export declare class Recaptcha {
     _scriptPromise: any;
     badge: string;
     callback: any;
+    expire: any;
     size: string;
     theme: string;
     type: string;
     widgetId: any;
     constructor(element: any, config: any);
-    bind(): void;
-    _initialize(): Promise<void>;
+    bind(): Promise<void>;
     _loadApiScript(): void;
 }

dist/amd/aurelia-plugins-google-recaptcha-element.js

@@ -84,7 +84,7 @@ define(['exports', 'aurelia-binding', 'aurelia-dependency-injection', 'aurelia-t
     throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
   }
 
-  var _dec, _dec2, _dec3, _dec4, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6;
+  var _dec, _dec2, _dec3, _dec4, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7;
 
   var Recaptcha = exports.Recaptcha = (_dec = (0, _aureliaTemplating.customElement)('aup-google-recaptcha'), _dec2 = (0, _aureliaTemplating.noView)(), _dec3 = (0, _aureliaDependencyInjection.inject)(Element, _aureliaPluginsGoogleRecaptchaConfig.Config), _dec4 = (0, _aureliaTemplating.bindable)({ defaultBindingMode: _aureliaBinding.bindingMode.twoWay }), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = function () {
     function Recaptcha(element, config) {
@@ -96,25 +96,23 @@ define(['exports', 'aurelia-binding', 'aurelia-dependency-injection', 'aurelia-t
 
       _initDefineProp(this, 'callback', _descriptor2, this);
 
-      _initDefineProp(this, 'size', _descriptor3, this);
+      _initDefineProp(this, 'expire', _descriptor3, this);
 
-      _initDefineProp(this, 'theme', _descriptor4, this);
+      _initDefineProp(this, 'size', _descriptor4, this);
 
-      _initDefineProp(this, 'type', _descriptor5, this);
+      _initDefineProp(this, 'theme', _descriptor5, this);
 
-      _initDefineProp(this, 'widgetId', _descriptor6, this);
+      _initDefineProp(this, 'type', _descriptor6, this);
+
+      _initDefineProp(this, 'widgetId', _descriptor7, this);
 
       this._config = config;
       this._element = element;
       if (!this._config.get('siteKey')) return console.error('No sitekey has been specified.');
       this._loadApiScript();
     }
 
-    Recaptcha.prototype.bind = function bind() {
-      this._initialize();
-    };
-
-    Recaptcha.prototype._initialize = function () {
+    Recaptcha.prototype.bind = function () {
       var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
         return regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
@@ -124,7 +122,7 @@ define(['exports', 'aurelia-binding', 'aurelia-dependency-injection', 'aurelia-t
                 return this._scriptPromise;
 
               case 2:
-                this.widgetId = window.grecaptcha.render(this._element, { badge: this.badge, callback: this.callback, sitekey: this._config.get('siteKey'), size: this.size, theme: this.theme, type: this.type });
+                this.widgetId = window.grecaptcha.render(this._element, { badge: this.badge, callback: this.callback, 'expired-callback': this.expire, sitekey: this._config.get('siteKey'), size: this.size, theme: this.theme, type: this.type });
 
               case 3:
               case 'end':
@@ -134,11 +132,11 @@ define(['exports', 'aurelia-binding', 'aurelia-dependency-injection', 'aurelia-t
         }, _callee, this);
       }));
 
-      function _initialize() {
+      function bind() {
         return _ref.apply(this, arguments);
       }
 
-      return _initialize;
+      return bind;
     }();
 
     Recaptcha.prototype._loadApiScript = function _loadApiScript() {
@@ -172,22 +170,25 @@ define(['exports', 'aurelia-binding', 'aurelia-dependency-injection', 'aurelia-t
   }), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, 'callback', [_aureliaTemplating.bindable], {
     enumerable: true,
     initializer: null
-  }), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'size', [_aureliaTemplating.bindable], {
+  }), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'expire', [_aureliaTemplating.bindable], {
+    enumerable: true,
+    initializer: null
+  }), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'size', [_aureliaTemplating.bindable], {
     enumerable: true,
     initializer: function initializer() {
       return 'normal';
     }
-  }), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'theme', [_aureliaTemplating.bindable], {
+  }), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'theme', [_aureliaTemplating.bindable], {
     enumerable: true,
     initializer: function initializer() {
       return 'light';
     }
-  }), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'type', [_aureliaTemplating.bindable], {
+  }), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'type', [_aureliaTemplating.bindable], {
     enumerable: true,
     initializer: function initializer() {
       return 'image';
     }
-  }), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'widgetId', [_dec4], {
+  }), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, 'widgetId', [_dec4], {
     enumerable: true,
     initializer: null
   })), _class2)) || _class) || _class) || _class);

dist/commonjs/aurelia-plugins-google-recaptcha-element.d.ts

@@ -4,12 +4,12 @@ export declare class Recaptcha {
     _scriptPromise: any;
     badge: string;
     callback: any;
+    expire: any;
     size: string;
     theme: string;
     type: string;
     widgetId: any;
     constructor(element: any, config: any);
-    bind(): void;
-    _initialize(): Promise<void>;
+    bind(): Promise<void>;
     _loadApiScript(): void;
 }

dist/commonjs/aurelia-plugins-google-recaptcha-element.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Recaptcha = undefined;
 
-var _dec, _dec2, _dec3, _dec4, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6;
+var _dec, _dec2, _dec3, _dec4, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7;
 
 var _aureliaBinding = require('aurelia-binding');
 
@@ -72,25 +72,23 @@ var Recaptcha = exports.Recaptcha = (_dec = (0, _aureliaTemplating.customElement
 
     _initDefineProp(this, 'callback', _descriptor2, this);
 
-    _initDefineProp(this, 'size', _descriptor3, this);
+    _initDefineProp(this, 'expire', _descriptor3, this);
 
-    _initDefineProp(this, 'theme', _descriptor4, this);
+    _initDefineProp(this, 'size', _descriptor4, this);
 
-    _initDefineProp(this, 'type', _descriptor5, this);
+    _initDefineProp(this, 'theme', _descriptor5, this);
 
-    _initDefineProp(this, 'widgetId', _descriptor6, this);
+    _initDefineProp(this, 'type', _descriptor6, this);
+
+    _initDefineProp(this, 'widgetId', _descriptor7, this);
 
     this._config = config;
     this._element = element;
     if (!this._config.get('siteKey')) return console.error('No sitekey has been specified.');
     this._loadApiScript();
   }
 
-  Recaptcha.prototype.bind = function bind() {
-    this._initialize();
-  };
-
-  Recaptcha.prototype._initialize = function () {
+  Recaptcha.prototype.bind = function () {
     var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -100,7 +98,7 @@ var Recaptcha = exports.Recaptcha = (_dec = (0, _aureliaTemplating.customElement
               return this._scriptPromise;
 
             case 2:
-              this.widgetId = window.grecaptcha.render(this._element, { badge: this.badge, callback: this.callback, sitekey: this._config.get('siteKey'), size: this.size, theme: this.theme, type: this.type });
+              this.widgetId = window.grecaptcha.render(this._element, { badge: this.badge, callback: this.callback, 'expired-callback': this.expire, sitekey: this._config.get('siteKey'), size: this.size, theme: this.theme, type: this.type });
 
             case 3:
             case 'end':
@@ -110,11 +108,11 @@ var Recaptcha = exports.Recaptcha = (_dec = (0, _aureliaTemplating.customElement
       }, _callee, this);
     }));
 
-    function _initialize() {
+    function bind() {
       return _ref.apply(this, arguments);
     }
 
-    return _initialize;
+    return bind;
   }();
 
   Recaptcha.prototype._loadApiScript = function _loadApiScript() {
@@ -148,22 +146,25 @@ var Recaptcha = exports.Recaptcha = (_dec = (0, _aureliaTemplating.customElement
 }), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, 'callback', [_aureliaTemplating.bindable], {
   enumerable: true,
   initializer: null
-}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'size', [_aureliaTemplating.bindable], {
+}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'expire', [_aureliaTemplating.bindable], {
+  enumerable: true,
+  initializer: null
+}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'size', [_aureliaTemplating.bindable], {
   enumerable: true,
   initializer: function initializer() {
     return 'normal';
   }
-}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'theme', [_aureliaTemplating.bindable], {
+}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'theme', [_aureliaTemplating.bindable], {
   enumerable: true,
   initializer: function initializer() {
     return 'light';
   }
-}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'type', [_aureliaTemplating.bindable], {
+}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'type', [_aureliaTemplating.bindable], {
   enumerable: true,
   initializer: function initializer() {
     return 'image';
   }
-}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'widgetId', [_dec4], {
+}), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, 'widgetId', [_dec4], {
   enumerable: true,
   initializer: null
 })), _class2)) || _class) || _class) || _class);

dist/es2015/aurelia-plugins-google-recaptcha-element.d.ts

@@ -4,12 +4,12 @@ export declare class Recaptcha {
     _scriptPromise: any;
     badge: string;
     callback: any;
+    expire: any;
     size: string;
     theme: string;
     type: string;
     widgetId: any;
     constructor(element: any, config: any);
-    bind(): void;
-    _initialize(): Promise<void>;
+    bind(): Promise<void>;
     _loadApiScript(): void;
 }

dist/es2015/aurelia-plugins-google-recaptcha-element.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _dec4, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6;
+var _dec, _dec2, _dec3, _dec4, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7;
 
 function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
 
@@ -59,13 +59,15 @@ export let Recaptcha = (_dec = customElement('aup-google-recaptcha'), _dec2 = no
 
     _initDefineProp(this, 'callback', _descriptor2, this);
 
-    _initDefineProp(this, 'size', _descriptor3, this);
+    _initDefineProp(this, 'expire', _descriptor3, this);
 
-    _initDefineProp(this, 'theme', _descriptor4, this);
+    _initDefineProp(this, 'size', _descriptor4, this);
 
-    _initDefineProp(this, 'type', _descriptor5, this);
+    _initDefineProp(this, 'theme', _descriptor5, this);
 
-    _initDefineProp(this, 'widgetId', _descriptor6, this);
+    _initDefineProp(this, 'type', _descriptor6, this);
+
+    _initDefineProp(this, 'widgetId', _descriptor7, this);
 
     this._config = config;
     this._element = element;
@@ -74,15 +76,11 @@ export let Recaptcha = (_dec = customElement('aup-google-recaptcha'), _dec2 = no
   }
 
   bind() {
-    this._initialize();
-  }
-
-  _initialize() {
     var _this = this;
 
     return _asyncToGenerator(function* () {
       yield _this._scriptPromise;
-      _this.widgetId = window.grecaptcha.render(_this._element, { badge: _this.badge, callback: _this.callback, sitekey: _this._config.get('siteKey'), size: _this.size, theme: _this.theme, type: _this.type });
+      _this.widgetId = window.grecaptcha.render(_this._element, { badge: _this.badge, callback: _this.callback, 'expired-callback': _this.expire, sitekey: _this._config.get('siteKey'), size: _this.size, theme: _this.theme, type: _this.type });
     })();
   }
 
@@ -109,22 +107,25 @@ export let Recaptcha = (_dec = customElement('aup-google-recaptcha'), _dec2 = no
 }), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, 'callback', [bindable], {
   enumerable: true,
   initializer: null
-}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'size', [bindable], {
+}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'expire', [bindable], {
+  enumerable: true,
+  initializer: null
+}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'size', [bindable], {
   enumerable: true,
   initializer: function () {
     return 'normal';
   }
-}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'theme', [bindable], {
+}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'theme', [bindable], {
   enumerable: true,
   initializer: function () {
     return 'light';
   }
-}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'type', [bindable], {
+}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'type', [bindable], {
   enumerable: true,
   initializer: function () {
     return 'image';
   }
-}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'widgetId', [_dec4], {
+}), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, 'widgetId', [_dec4], {
   enumerable: true,
   initializer: null
 })), _class2)) || _class) || _class) || _class);

dist/system/aurelia-plugins-google-recaptcha-element.d.ts

@@ -4,12 +4,12 @@ export declare class Recaptcha {
     _scriptPromise: any;
     badge: string;
     callback: any;
+    expire: any;
     size: string;
     theme: string;
     type: string;
     widgetId: any;
     constructor(element: any, config: any);
-    bind(): void;
-    _initialize(): Promise<void>;
+    bind(): Promise<void>;
     _loadApiScript(): void;
 }