diff --git a/README.md b/README.md index 780d6c2..82d5fbc 100644 --- a/README.md +++ b/README.md @@ -188,7 +188,7 @@ Besides specifying these options on the component itself, you can provide a glob If the captcha has expired prior to submitting its value to the server, the component will reset the captcha, and trigger the `resolved` event with `response === null`. -- `error(errorDetails: RecaptchaErrorParameters)`. Occurs when reCAPTCHA encounters an error (usually a connectivity problem) **if and only if** `errorMode` input has been set to `"handled"`. +- `errored(errorDetails: RecaptchaErrorParameters)`. Occurs when reCAPTCHA encounters an error (usually a connectivity problem) **if and only if** `errorMode` input has been set to `"handled"`. `errorDetails` is a simple propagation of any arguments that the original `error-callback` has provided, and is documented here for the purposes of completeness and future-proofing. This array will most often (if not always) be empty. A good strategy would be to rely on just the fact that this event got triggered, and show a message to your app's user telling them to retry. ### Methods @@ -288,7 +288,7 @@ import { Component } from "@angular/core"; @Component({ selector: "my-app", - template: ``, + template: ``, }) export class MyApp { resolved(captchaResponse: string) { @@ -303,9 +303,9 @@ export class MyApp { You can see this in action by navigating to either [basic example demo](https://dethariel.github.io/ng-recaptcha/basic) or [invisible demo](https://dethariel.github.io/ng-recaptcha/invisible) and trying to interact with reCAPTCHA after setting the network to "Offline". -The `errorMode` input has two possible values -- `"handled"` and `"default"`, with latter being the default as the name suggests. Not specifying `errorMode`, or setting it to anything other than `"handled"` will not invoke your `(error)` callback, and will instead result in default reCAPTCHA functionality. +The `errorMode` input has two possible values -- `"handled"` and `"default"`, with latter being the default as the name suggests. Not specifying `errorMode`, or setting it to anything other than `"handled"` will not invoke your `(errored)` callback, and will instead result in default reCAPTCHA functionality. -The `(error)` callback will propagate all of the parameters that it receives from `grecaptcha['error-callback']` (which might be none) as an array. +The `(errored)` callback will propagate all of the parameters that it receives from `grecaptcha['error-callback']` (which might be none) as an array. ### Loading the reCAPTCHA API by yourself [(see in action)](https://dethariel.github.io/ng-recaptcha/v8/preload-api) diff --git a/projects/demo/src/app/examples/basic/basic-demo.component.html b/projects/demo/src/app/examples/basic/basic-demo.component.html index 05b120d..81a4be2 100644 --- a/projects/demo/src/app/examples/basic/basic-demo.component.html +++ b/projects/demo/src/app/examples/basic/basic-demo.component.html @@ -1 +1 @@ - + diff --git a/projects/demo/src/app/examples/invisible/invisible-demo.component.html b/projects/demo/src/app/examples/invisible/invisible-demo.component.html index c3ab46a..f50d932 100644 --- a/projects/demo/src/app/examples/invisible/invisible-demo.component.html +++ b/projects/demo/src/app/examples/invisible/invisible-demo.component.html @@ -1,7 +1,7 @@ diff --git a/projects/ng-recaptcha/src/lib/recaptcha.component.spec.ts b/projects/ng-recaptcha/src/lib/recaptcha.component.spec.ts index 91de770..56b2cdc 100644 --- a/projects/ng-recaptcha/src/lib/recaptcha.component.spec.ts +++ b/projects/ng-recaptcha/src/lib/recaptcha.component.spec.ts @@ -117,7 +117,7 @@ describe("RecaptchaComponent", () => { it("should emit grecaptcha error if errorMode was set to 'handled'", () => { // Arrange const emittedErrors: Array = []; - component.error.subscribe((error: RecaptchaErrorParameters) => emittedErrors.push(error)); + component.errored.subscribe((error: RecaptchaErrorParameters) => emittedErrors.push(error)); component.errorMode = "handled"; mockRecaptchaLoaderService.init(); diff --git a/projects/ng-recaptcha/src/lib/recaptcha.component.ts b/projects/ng-recaptcha/src/lib/recaptcha.component.ts index 38a899f..8a99f70 100644 --- a/projects/ng-recaptcha/src/lib/recaptcha.component.ts +++ b/projects/ng-recaptcha/src/lib/recaptcha.component.ts @@ -42,9 +42,12 @@ export class RecaptchaComponent implements AfterViewInit, OnDestroy { @Input() public errorMode: "handled" | "default" = "default"; @Output() public resolved = new EventEmitter(); - // The rename will happen a bit later + /** + * @deprecated `(error) output will be removed in the next major version. Use (errored) instead + */ // eslint-disable-next-line @angular-eslint/no-output-native @Output() public error = new EventEmitter(); + @Output() public errored = new EventEmitter(); /** @internal */ private subscription: Subscription; @@ -136,8 +139,9 @@ export class RecaptchaComponent implements AfterViewInit, OnDestroy { } /** @internal */ - private errored(args: RecaptchaErrorParameters) { + private onError(args: RecaptchaErrorParameters) { this.error.emit(args); + this.errored.emit(args); } /** @internal */ @@ -172,7 +176,7 @@ export class RecaptchaComponent implements AfterViewInit, OnDestroy { if (this.errorMode === "handled") { renderOptions["error-callback"] = (...args: RecaptchaErrorParameters) => { - this.zone.run(() => this.errored(args)); + this.zone.run(() => this.onError(args)); }; }