angular-captcha - npm Package Compare versions

Comparing version 3.4.1 to 3.5.0

package.json

 {
   "name": "angular-captcha",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "description": "BotDetect Captcha Angular Module (TypeScript: Angular 2/4/5/6/7+)",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -1,30 +0,24 @@
-## BotDetect Captcha Angular Module (TypeScript: Angular 2/3/4/5/6/7+)
+## BotDetect CAPTCHA Angular Module (TypeScript: Angular 2/4/5/6/7+)
 
-### Requirements:
-BotDetect Captcha Angular Module requires [BotDetect ASP.NET Captcha](https://captcha.com/asp.net-captcha.html#simple-api), [BotDetect Java Captcha](https://captcha.com/java-captcha.html#simple-api) or [BotDetect PHP Captcha](https://captcha.com/php-captcha.html#simple-api) library to generate Captcha challenges. Simple API support for ASP.NET Core and .NET Core will be released this month -- very likely during the week of 2018/11/19-25. See our [roadmap](https://captcha.com/captcha-roadmap-and-release-notes.html#aspnet-release-notes) for details.
+For a comprehensive step-by-step integration guide please see our [Angular Captcha Module Integration Guide](https://captcha.com/angular-captcha.html).  
+The guide covers the integration with the following backends:
+- ASP.NET (Core): web API with MVC6
+- ASP.NET (Legacy): Web-API2, MVC1-5, Generic Handler
+- Java: Servlet, Spring, Struts
+- PHP: the plain PHP
 
-### Quickstart:
+To give you a hint how Angular Captcha Module works we pasted a few, not necessary up-to-date (and mostly frontend related), excerpts from it bellow.
 
-##### Step 1: Install Captcha Angular Module
+### Quick guide:
+
+##### Step 1:  Install Angular Captcha Module
+
 ```sh
 npm install angular-captcha --save
 ```
-##### Step 2: Load Captcha Angular Module
-If you use SystemJS, declare the following in your SystemJS config file:
-```javascript
-  map: {
-    ...
-    'angular-captcha': 'npm:angular-captcha'
-  },
-  packages: {
-    ...
-    'angular-captcha': {
-      defaultExtension: 'js',
-      main: 'index'
-    },
-```
-##### Step 3: Declare BotDetect Captcha Angular Module in your application, and configure backend Captcha endpoint
 
-Endpoint Configuration depends on which technology you use in the backend.
+##### Step 2: Declare Angular Captcha Module in Your App, and Configure Backend Captcha Endpoint
 
+Endpoint configuration depends on which technology you use in the backend.
+
 - ASP.NET-based backend:
@@ -39,3 +33,4 @@
     BotDetectCaptchaModule.forRoot({
-      captchaEndpoint: 'captcha-endpoint/BotDetectCaptcha.ashx'
+      captchaEndpoint: 
+        'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx'
     })
@@ -55,3 +50,4 @@ ],
     BotDetectCaptchaModule.forRoot({
-      captchaEndpoint: 'captcha-endpoint/botdetectcaptcha'
+      captchaEndpoint: 
+        'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint'
     })
@@ -71,3 +67,4 @@ ],
     BotDetectCaptchaModule.forRoot({
-      captchaEndpoint: 'captcha-endpoint/simple-botdetect.php'
+      captchaEndpoint: 
+        'https://your-app-backend-hostname.your-domain.com/botdetect-captcha-lib/simple-botdetect.php'
     })
@@ -79,89 +76,120 @@ ],
 
-##### Step 4: Displaying the Captcha Challenge in your form
+##### Step 3: Displaying the Captcha Challenge in Your Form
 
-Place the following tag in your form where you want to display Captcha:
+Place the following lines in your form where you want to display captcha:
 ```html
-<botdetect-captcha styleName="exampleCaptcha"></botdetect-captcha>
+<botdetect-captcha captchaStyleName="yourFirstCaptchaStyle"></botdetect-captcha>  
+<input id="userCaptchaInput" 
+  name="userCaptchaInput" 
+  ngModel 
+  #userCaptchaInput="ngModel"  
+  type="text" >  
 ```
 
-##### Step 5: Client-side Captcha Validation
-- Using validateUnsafe(callback) method to validate Captcha code on form submit:
+##### Step 4: Captcha Validation: Client-side Code
+
 ```typescript
-export class ExampleComponent {
+import { Component, ViewChild } from '@angular/core';
+import { Observable } from 'rxjs/Rx';
 
-  /**
-   * BotDetect CAPTCHA component.
-   */
+import { YourFormWithCaptchaService } from './your-form-with-captcha.service';
+
+import { CaptchaComponent } from 'angular-captcha';
+
+@Component({
+  moduleId: module.id,
+  selector: 'your-form-with-captcha',
+  templateUrl: 'your-form-with-captcha.component.html',
+  styleUrls: ['your-form-with-captcha.component.css'],
+  providers: [YourFormWithCaptchaService]
+})
+export class YourFormWithCaptchaComponent {
+
   @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;
 
-  /**
-   * On form submit.
-   */
+  constructor(
+    private yourFormWithCaptchaService: YourFormWithCaptchaService
+  ) { }
+
+  // Process the form on submit event.
   validate(value, valid): void {
 
-    this.captchaComponent.validateUnsafe((isCaptchaCodeCorrect: boolean) => {
-      if (isCaptchaCodeCorrect) {
-        // Captcha code is correct
-      } else {
-        // Captcha code is incorrect
-      }
-    });
+    // get the user-entered captcha code value to be validated at the backend side        
+    let userEnteredCaptchaCode = this.captchaComponent.userEnteredCaptchaCode;
+    
+    // get the id of a captcha instance that the user tried to solve
+    let captchaId = this.captchaComponent.captchaId;
+
+    const postData = {
+      userEnteredCaptchaCode: userEnteredCaptchaCode,
+      captchaId: captchaId
+    };
+
+    // post the captcha data to the /your-app-backend-path on your backend
+    this.yourFormWithCaptchaService.send(postData)
+      .subscribe(
+        response => {
+          if (response.success == false) {
+            // captcha validation failed; reload image
+            this.captchaComponent.reloadImage();
+            // TODO: maybe display an error message, too
+          } else {
+            // TODO: captcha validation succeeded; proceed with the workflow
+          }
+        },
+        error => {
+          throw new Error(error);
+        });
   }
-
 }
 ```
 
-OR
+##### Step 5: Captcha Validation: Server-side Code
 
-- Using correctCaptcha directive attribute to validate Captcha code on blur event:
-```html
-<input
-  type="text"
-  id="captchaCode"
-  name="captchaCode"
-  #captchaCode="ngModel"
-  ngModel
-  correctCaptcha
->
-```
-##### Step 6: Server-side Captcha Validation
-These client-side captcha validations are just an usability improvement that you may use or not -- they do not protect your form from spammers at all.
+The `userEnteredCaptchaCode` and `captchaId` values posted from the frontend are used to validate a captcha challenge on the backend.
 
-As you are protecting some server-side action you must validate a Captcha at the server-side before executing that protected action.
+The validation is performed by calling the: `Validate(userEnteredCaptchaCode, captchaId)`.
 
-- If you have [ASP.NET Captcha](https://captcha.com/asp.net-captcha.html#simple-api) library on a server side validation would look similar to this:
+- If you have [ASP.NET Captcha](https://captcha.com/asp.net-captcha.html) library on a server side validation would look similar to this:
 ```csharp
 // C#
-SimpleCaptcha captcha = new SimpleCaptcha();
-bool isHuman = captcha.Validate(captchaCode, captchaId);
+SimpleCaptcha yourFirstCaptcha = new SimpleCaptcha();
+bool isHuman = yourFirstCaptcha.Validate(captchaCode, captchaId);
 ```
 ```vbnet
 ' VB.NET
-Dim captcha As SimpleCaptcha = New SimpleCaptcha()
-Dim isHuman As Boolean = captcha.Validate(captchaCode, captchaId)
+Dim yourFirstCaptcha As SimpleCaptcha = New SimpleCaptcha()
+Dim isHuman As Boolean = yourFirstCaptcha.Validate(captchaCode, captchaId)
 ```
 
-- If you have [Java Captcha](https://captcha.com/java-captcha.html#simple-api) library on a server side validation would look similar to this:
+- If you have [Java Captcha](https://captcha.com/java-captcha.html) library on a server side validation would look similar to this:
 ```java
-SimpleCaptcha captcha = SimpleCaptcha.load(request);
-boolean isHuman = captcha.validate(captchaCode, captchaId);
+SimpleCaptcha yourFirstCaptcha = SimpleCaptcha.load(request);
+boolean isHuman = yourFirstCaptcha.validate(captchaCode, captchaId);
 ```
 
-- If you have [PHP Captcha](https://captcha.com/php-captcha.html#simple-api) library on a server side validation would look similar to this:
+- If you have [PHP Captcha](https://captcha.com/php-captcha.html) library on a server side validation would look similar to this:
 ```php
-$captcha = new SimpleCaptcha();
-$isHuman = $captcha->Validate($captchaCode, $captchaId);
+$yourFirstCaptcha = new SimpleCaptcha();
+$isHuman = $yourFirstCaptcha->Validate($captchaCode, $captchaId);
 ```
 
 ### Documentation:
- 
-[Angular CAPTCHA Integration Guide](https://captcha.com/angular-captcha.html#angular:2+)
 
-### Examples: 
-[Basic Angular CAPTCHA Example](https://captcha.com/doc/angular/examples/angular-basic-captcha-example.html)
+[Angular Captcha Module Step-by-step Integration Guide](https://captcha.com/angular-captcha.html) -- read this one first
 
-[Angular CAPTCHA Form Example](https://captcha.com/doc/angular/examples/angular-form-captcha-example.html)
+[Angular Captcha Module Basic Example](https://captcha.com/doc/angular/examples/angular-basic-captcha-example.html) -- partial code walk-through
 
+[Angular Captcha Module Form Example](https://captcha.com/doc/angular/examples/angular-form-captcha-example.html) -- partial code walk-through
+
+### Dependencies:
+
+The current version of the Angular Captcha Module requires one of the following BotDetect CAPTCHA backends:
+- [ASP.NET v4.4.1+](https://captcha.com/asp.net-captcha.html)
+- [Java v4.0.Beta3.6+](https://captcha.com/java-captcha.html)
+- [PHP v4.2.4+](https://captcha.com/php-captcha.html)
+
+
 ### Support:
 
-Send us questions, suggestions [contact form on captcha.com](https://captcha.com/contact.html).
+Send us questions, suggestions [contact form on captcha.com](https://captcha.com/contact.html).

src/captcha-helper.service.d.ts

@@ -9,2 +9,5 @@ import { NgZone } from '@angular/core';
     useUserInputBlurValidation(userInput: any): boolean;
+    getCaptchaEndpointHandler(captchaEndpoint: string): string;
+    getBackendBaseUrl(captchaEndpoint: string, captchaEndpointHandler: string): string;
+    changeRelativeToAbsoluteUrls(originCaptchaHtml: string, captchaEndpoint: string): string;
 }

src/captcha-helper.service.js

@@ -24,2 +24,29 @@ "use strict";
     };
+    // get captcha endpoint handler from configued captchaEndpoint value,
+    // the result can be "simple-captcha-endpoint.ashx", "botdetectcaptcha",
+    // or "simple-botdetect.php"
+    CaptchaHelperService.prototype.getCaptchaEndpointHandler = function (captchaEndpoint) {
+        var splited = captchaEndpoint.split('/');
+        return splited[splited.length - 1];
+    };
+    // get backend base url from configued captchaEndpoint value
+    CaptchaHelperService.prototype.getBackendBaseUrl = function (captchaEndpoint, captchaEndpointHandler) {
+        var lastIndex = captchaEndpoint.lastIndexOf(captchaEndpointHandler);
+        return captchaEndpoint.substring(0, lastIndex);
+    };
+    // change relative to absolute urls in captcha html markup
+    CaptchaHelperService.prototype.changeRelativeToAbsoluteUrls = function (originCaptchaHtml, captchaEndpoint) {
+        var captchaEndpointHandler = this.getCaptchaEndpointHandler(captchaEndpoint);
+        var backendUrl = this.getBackendBaseUrl(captchaEndpoint, captchaEndpointHandler);
+        originCaptchaHtml = originCaptchaHtml.replace(/<script.*<\/script>/g, '');
+        var relativeUrls = originCaptchaHtml.match(/(src|href)=\"([^"]+)\"/g);
+        var relativeUrl, relativeUrlPrefixPattern, absoluteUrl, changedCaptchaHtml = originCaptchaHtml;
+        for (var i = 0; i < relativeUrls.length; i++) {
+            relativeUrl = relativeUrls[i].slice(0, -1).replace(/src=\"|href=\"/, '');
+            relativeUrlPrefixPattern = new RegExp(".*" + captchaEndpointHandler);
+            absoluteUrl = relativeUrl.replace(relativeUrlPrefixPattern, backendUrl + captchaEndpointHandler);
+            changedCaptchaHtml = changedCaptchaHtml.replace(relativeUrl, absoluteUrl);
+        }
+        return changedCaptchaHtml;
+    };
     CaptchaHelperService.decorators = [
@@ -26,0 +53,0 @@ { type: core_1.Injectable },

src/captcha-helper.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CaptchaHelperService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"getScript":[{"__symbolic":"method"}],"useUserInputBlurValidation":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CaptchaHelperService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"getScript":[{"__symbolic":"method"}],"useUserInputBlurValidation":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CaptchaHelperService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"getScript":[{"__symbolic":"method"}],"useUserInputBlurValidation":[{"__symbolic":"method"}],"getCaptchaEndpointHandler":[{"__symbolic":"method"}],"getBackendBaseUrl":[{"__symbolic":"method"}],"changeRelativeToAbsoluteUrls":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CaptchaHelperService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"getScript":[{"__symbolic":"method"}],"useUserInputBlurValidation":[{"__symbolic":"method"}],"getCaptchaEndpointHandler":[{"__symbolic":"method"}],"getBackendBaseUrl":[{"__symbolic":"method"}],"changeRelativeToAbsoluteUrls":[{"__symbolic":"method"}]}}}}]

src/captcha.component.d.ts

@@ -9,6 +9,9 @@ import { OnInit, ElementRef } from '@angular/core';
     styleName: string;
+    captchaStyleName: string;
     constructor(elementRef: ElementRef, captchaService: CaptchaService, captchaHelper: CaptchaHelperService);
     readonly captchaId: string;
     readonly captchaCode: string;
+    readonly userEnteredCaptchaCode: string;
     ngOnInit(): void;
+    getCaptchaStyleName(): string;
     displayHtml(): void;
@@ -15,0 +18,0 @@ reloadImage(): void;

src/captcha.component.js

@@ -21,3 +21,4 @@ "use strict";
     Object.defineProperty(CaptchaComponent.prototype, "captchaCode", {
-        // The typed captcha code value.
+        // The user entered captcha code value.
+        // keep this method for backward compatibility
         get: function () {
@@ -29,13 +30,31 @@ return this.captchaService.botdetectInstance.userInput.value;
     });
+    Object.defineProperty(CaptchaComponent.prototype, "userEnteredCaptchaCode", {
+        get: function () {
+            return this.captchaCode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     // Display captcha html markup on component initialization.
     CaptchaComponent.prototype.ngOnInit = function () {
-        // if styleName is not specified, the styleName will be 'defaultCaptcha'
-        if (!this.styleName) {
-            this.styleName = 'defaultCaptcha';
-        }
+        this.captchaStyleName = this.getCaptchaStyleName();
         // set captcha style name to CaptchaService for creating BotDetect object
-        this.captchaService.styleName = this.styleName;
+        this.captchaService.captchaStyleName = this.captchaStyleName;
         // display captcha html markup on view
         this.displayHtml();
     };
+    // Get captcha style name.
+    CaptchaComponent.prototype.getCaptchaStyleName = function () {
+        var styleName;
+        styleName = this.captchaStyleName;
+        if (styleName) {
+            return styleName;
+        }
+        // backward compatible
+        styleName = this.styleName;
+        if (styleName) {
+            return styleName;
+        }
+        throw new Error('The captchaStyleName attribute is not found or its value is not set.');
+    };
     // Display captcha html markup in the <botdetect-captcha> tag.
@@ -47,3 +66,4 @@ CaptchaComponent.prototype.displayHtml = function () {
             // display captcha html markup
-            _this.elementRef.nativeElement.innerHTML = captchaHtml.replace(/<script.*<\/script>/g, '');
+            captchaHtml = _this.captchaHelper.changeRelativeToAbsoluteUrls(captchaHtml, _this.captchaService.captchaEndpoint);
+            _this.elementRef.nativeElement.innerHTML = captchaHtml;
             // load botdetect scripts
@@ -82,4 +102,4 @@ _this.loadScriptIncludes();
     CaptchaComponent.prototype.loadScriptIncludes = function () {
-        var captchaId = this.elementRef.nativeElement.querySelector('#BDC_VCID_' + this.styleName).value;
-        var scriptIncludeUrl = this.captchaService.captchaEndpoint + '?get=script-include&c=' + this.styleName + '&t=' + captchaId + '&cs=201';
+        var captchaId = this.elementRef.nativeElement.querySelector('#BDC_VCID_' + this.captchaStyleName).value;
+        var scriptIncludeUrl = this.captchaService.captchaEndpoint + '?get=script-include&c=' + this.captchaStyleName + '&t=' + captchaId + '&cs=201';
         this.captchaHelper.getScript(scriptIncludeUrl);
@@ -101,2 +121,3 @@ };
         'styleName': [{ type: core_1.Input },],
+        'captchaStyleName': [{ type: core_1.Input },],
     };
@@ -103,0 +124,0 @@ return CaptchaComponent;

src/captcha.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CaptchaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"botdetect-captcha","template":""}]}],"members":{"styleName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./captcha.service","name":"CaptchaService"},{"__symbolic":"reference","module":"./captcha-helper.service","name":"CaptchaHelperService"}]}],"ngOnInit":[{"__symbolic":"method"}],"displayHtml":[{"__symbolic":"method"}],"reloadImage":[{"__symbolic":"method"}],"validateUnsafe":[{"__symbolic":"method"}],"loadScriptIncludes":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CaptchaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"botdetect-captcha","template":""}]}],"members":{"styleName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./captcha.service","name":"CaptchaService"},{"__symbolic":"reference","module":"./captcha-helper.service","name":"CaptchaHelperService"}]}],"ngOnInit":[{"__symbolic":"method"}],"displayHtml":[{"__symbolic":"method"}],"reloadImage":[{"__symbolic":"method"}],"validateUnsafe":[{"__symbolic":"method"}],"loadScriptIncludes":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CaptchaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"botdetect-captcha","template":""}]}],"members":{"styleName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"captchaStyleName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./captcha.service","name":"CaptchaService"},{"__symbolic":"reference","module":"./captcha-helper.service","name":"CaptchaHelperService"}]}],"ngOnInit":[{"__symbolic":"method"}],"getCaptchaStyleName":[{"__symbolic":"method"}],"displayHtml":[{"__symbolic":"method"}],"reloadImage":[{"__symbolic":"method"}],"validateUnsafe":[{"__symbolic":"method"}],"loadScriptIncludes":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CaptchaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"botdetect-captcha","template":""}]}],"members":{"styleName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"captchaStyleName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./captcha.service","name":"CaptchaService"},{"__symbolic":"reference","module":"./captcha-helper.service","name":"CaptchaHelperService"}]}],"ngOnInit":[{"__symbolic":"method"}],"getCaptchaStyleName":[{"__symbolic":"method"}],"displayHtml":[{"__symbolic":"method"}],"reloadImage":[{"__symbolic":"method"}],"validateUnsafe":[{"__symbolic":"method"}],"loadScriptIncludes":[{"__symbolic":"method"}]}}}}]

src/captcha.service.d.ts

@@ -8,5 +8,5 @@ import { HttpClient } from '@angular/common/http';
     private config;
-    private _styleName;
+    private _captchaStyleName;
     constructor(http: HttpClient, captchaEndpointPipe: CaptchaEndpointPipe, config: CaptchaSettings);
-    styleName: string;
+    captchaStyleName: string;
     readonly captchaEndpoint: string;
@@ -13,0 +13,0 @@ readonly botdetectInstance: any;

src/captcha.service.js

@@ -13,8 +13,8 @@ "use strict";
     }
-    Object.defineProperty(CaptchaService.prototype, "styleName", {
+    Object.defineProperty(CaptchaService.prototype, "captchaStyleName", {
         get: function () {
-            return this._styleName;
+            return this._captchaStyleName;
         },
-        set: function (styleName) {
-            this._styleName = styleName;
+        set: function (captchaStyleName) {
+            this._captchaStyleName = captchaStyleName;
         },
@@ -35,6 +35,6 @@ enumerable: true,
         get: function () {
-            if (!this.styleName) {
+            if (!this.captchaStyleName) {
                 return null;
             }
-            return BotDetect.getInstanceByStyleName(this.styleName);
+            return BotDetect.getInstanceByStyleName(this.captchaStyleName);
         },
@@ -46,3 +46,3 @@ enumerable: true,
     CaptchaService.prototype.getHtml = function () {
-        var url = this.captchaEndpoint + '?get=html&c=' + this.styleName;
+        var url = this.captchaEndpoint + '?get=html&c=' + this.captchaStyleName;
         return this.http.get(url, { responseType: 'text' });
@@ -49,0 +49,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

62110

increased by15.38%

Lines of code

613

increased by9.66%

Number of lines in readme file

191

increased by16.46%

No dependency changes