ngx-captcha - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

ngx-captcha-dist/recaptcha/base-recaptcha.component.d.ts

@@ -1,7 +0,9 @@
-import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-export declare abstract class BaseReCaptchaComponent implements OnInit, AfterViewInit, OnChanges {
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
+export declare abstract class BaseReCaptchaComponent implements OnInit, OnChanges, OnDestroy {
+    protected cdr: ChangeDetectorRef;
+    protected renderer: Renderer2;
     /**
     * Name of the global callback
     */
-    protected readonly abstract windowOnLoadCallback: string;
+    protected readonly windowOnLoadCallbackProperty: string;
     /**
@@ -12,2 +14,6 @@ * Name of the global reCaptcha property
     /**
+     * Name of the global property holding captcha element
+     */
+    protected readonly globalCaptchaElemName: string;
+    /**
       * Google's site key.
@@ -39,5 +45,8 @@ * You can find this under https://www.google.com/recaptcha
     captchaWrapperElem: ElementRef;
-    captchaElem: HTMLElement;
     captchaScriptElem: ElementRef;
     /**
+     * Captcha element
+     */
+    protected captchaElem?: HTMLElement;
+    /**
      * Holds last response value
@@ -62,5 +71,5 @@ */
     */
-    reCaptchaApi: any;
-    captchaElemId: string;
-    constructor();
+    reCaptchaApi?: any;
+    captchaElemId?: string;
+    constructor(cdr: ChangeDetectorRef, renderer: Renderer2);
     /**
@@ -71,4 +80,4 @@ * Gets reCaptcha properties
     ngOnInit(): void;
-    ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
     /**
@@ -114,3 +123,2 @@ * Gets captcha response as per reCaptcha docs
     protected getLanguageParam(): string;
-    private initCaptchaElemId();
     private getPseudoUniqueNumber();
@@ -122,2 +130,3 @@ /**
     private isReCaptchaApiDefined();
+    private setupComponent();
     /**
@@ -127,3 +136,6 @@ * Called when google's recaptcha script is ready
     private onloadCallback();
-    private createNewCaptchaElem();
+    private generateNewElemId();
+    private createAndSetCaptchaElem();
+    private setGlobalCaptchaElem(elem);
+    private getGlobalCaptchaElem();
 }

ngx-captcha-dist/recaptcha/base-recaptcha.component.js

@@ -14,4 +14,10 @@ "use strict";
 var BaseReCaptchaComponent = /** @class */ (function () {
-    function BaseReCaptchaComponent() {
+    function BaseReCaptchaComponent(cdr, renderer) {
+        this.cdr = cdr;
+        this.renderer = renderer;
         /**
+        * Name of the global callback
+        */
+        this.windowOnLoadCallbackProperty = 'ngx_onload_callback';
+        /**
          * Name of the global reCaptcha property
@@ -21,2 +27,6 @@ */
         /**
+         * Name of the global property holding captcha element
+         */
+        this.globalCaptchaElemName = 'ngx_onload_captcha_elem';
+        /**
          * Type
@@ -49,20 +59,14 @@ */
     BaseReCaptchaComponent.prototype.ngOnInit = function () {
-        // we need to patch the callback through global variable, otherwise callback is not accessible
-        window[this.windowOnLoadCallback] = this.onloadCallback.bind(this);
-        // set elem it
-        this.initCaptchaElemId();
+        this.setupComponent();
     };
-    BaseReCaptchaComponent.prototype.ngAfterViewInit = function () {
-        // ensure captcha elem id is set
-        this.ensureCaptchaElem();
-        // ensure reCatpcha script is registered
-        this.ensureReCaptchaScript();
-    };
     BaseReCaptchaComponent.prototype.ngOnChanges = function (changes) {
         if (this.isLoaded) {
-            // captcha was already loaded => reload it
-            this.reloadCaptcha();
+            this.setupComponent();
         }
-        // do nothing otherwise
     };
+    BaseReCaptchaComponent.prototype.ngOnDestroy = function () {
+        window[this.windowOnLoadCallbackProperty] = {};
+        window[this.globalCaptchaElemName] = {};
+        window[this.globalReCaptchaProperty] = {};
+    };
     /**
@@ -96,8 +100,3 @@ * Gets captcha response as per reCaptcha docs
     BaseReCaptchaComponent.prototype.reloadCaptcha = function () {
-        // unset global recaptcha
-        window[this.globalReCaptchaProperty] = undefined;
-        // create new captcha elem
-        this.createNewCaptchaElem();
-        // ensure script is reloaded
-        this.ensureReCaptchaScript();
+        this.setupComponent();
     };
@@ -109,3 +108,6 @@ BaseReCaptchaComponent.prototype.ensureCaptchaElem = function () {
         }
+        // assign captcha alem
         this.captchaElem = captchaElem;
+        // set global captcha elem
+        this.setGlobalCaptchaElem(this.captchaElem);
     };
@@ -116,3 +118,3 @@ /**
     BaseReCaptchaComponent.prototype.renderReCaptcha = function () {
-        this.captchaId = this.reCaptchaApi.render(this.captchaElem, this.getCaptchaProperties());
+        this.captchaId = this.reCaptchaApi.render(this.getGlobalCaptchaElem(), this.getCaptchaProperties());
     };
@@ -134,14 +136,5 @@ /**
     BaseReCaptchaComponent.prototype.ensureReCaptchaScript = function () {
-        if (this.isReCaptchaApiDefined()) {
-            // captcha script is already loaded
-            this.load.next();
-            this.isLoaded = true;
-            // assign api
-            this.reCaptchaApi = grecaptcha;
-            // render captcha
-            this.renderReCaptcha();
-        }
-        else {
-            this.registerReCaptchaScript();
-        }
+        window[this.globalReCaptchaProperty] = {};
+        this.reCaptchaApi = {};
+        this.registerReCaptchaScript();
     };
@@ -156,3 +149,3 @@ /**
         script.src =
-            "https://www.google.com/recaptcha/api.js?onload=" + this.windowOnLoadCallback + "&render=explicit" + this.getLanguageParam();
+            "https://www.google.com/recaptcha/api.js?onload=" + this.windowOnLoadCallbackProperty + "&render=explicit" + this.getLanguageParam();
         script.async = true;
@@ -168,7 +161,4 @@ script.defer = true;
     };
-    BaseReCaptchaComponent.prototype.initCaptchaElemId = function () {
-        this.captchaElemId = "ngx-captcha-" + this.getPseudoUniqueNumber();
-    };
     BaseReCaptchaComponent.prototype.getPseudoUniqueNumber = function () {
-        return new Date().getUTCMilliseconds() + Math.random();
+        return new Date().getUTCMilliseconds();
     };
@@ -185,2 +175,10 @@ /**
     };
+    BaseReCaptchaComponent.prototype.setupComponent = function () {
+        // create captcha wrapper and set it to global namespace
+        this.createAndSetCaptchaElem();
+        // we need to patch the callback through global variable, otherwise callback is not accessible
+        window[this.windowOnLoadCallbackProperty] = this.onloadCallback.bind(this);
+        // create and put reCaptcha script to page
+        this.ensureReCaptchaScript();
+    };
     /**
@@ -202,15 +200,23 @@ * Called when google's recaptcha script is ready
     };
-    BaseReCaptchaComponent.prototype.createNewCaptchaElem = function () {
-        // update elem id
-        this.initCaptchaElemId();
-        // first remove the old HTML from current captcha elem
+    BaseReCaptchaComponent.prototype.generateNewElemId = function () {
+        return "ngx-captcha-id-" + this.getPseudoUniqueNumber();
+    };
+    BaseReCaptchaComponent.prototype.createAndSetCaptchaElem = function () {
+        // generate new elem id
+        this.captchaElemId = this.generateNewElemId();
+        // remove old html
         this.captchaWrapperElem.nativeElement.innerHTML = '';
-        // create new element and append it to document
-        var newElem = document.createElement('div');
+        // create new wrapper for captcha
+        var newElem = this.renderer.createElement('div');
         newElem.id = this.captchaElemId;
-        // add new elem to DOM
-        this.captchaWrapperElem.nativeElement.appendChild(newElem);
+        this.renderer.appendChild(this.captchaWrapperElem.nativeElement, newElem);
         // update captcha elem
-        this.captchaElem = newElem;
+        this.ensureCaptchaElem();
     };
+    BaseReCaptchaComponent.prototype.setGlobalCaptchaElem = function (elem) {
+        window[this.globalCaptchaElemName] = elem;
+    };
+    BaseReCaptchaComponent.prototype.getGlobalCaptchaElem = function () {
+        return window[this.globalCaptchaElemName];
+    };
     __decorate([
@@ -245,6 +251,2 @@ core_1.Input(),
     __decorate([
-        core_1.ViewChild('captchaElem'),
-        __metadata("design:type", HTMLElement)
-    ], BaseReCaptchaComponent.prototype, "captchaElem", void 0);
-    __decorate([
         core_1.ViewChild('captchaScriptElem'),
@@ -251,0 +253,0 @@ __metadata("design:type", core_1.ElementRef)

ngx-captcha-dist/recaptcha/invisible-recaptcha.component.d.ts

@@ -1,9 +0,7 @@
-import { AfterViewInit, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
 import { BaseReCaptchaComponent } from './base-recaptcha.component';
-export declare class InvisibleReCaptchaComponent extends BaseReCaptchaComponent implements OnInit, AfterViewInit, OnChanges {
+export declare class InvisibleReCaptchaComponent extends BaseReCaptchaComponent implements OnChanges {
+    protected cdr: ChangeDetectorRef;
+    protected renderer: Renderer2;
     /**
-     * Name of the global callback variable
-    */
-    protected readonly windowOnLoadCallback: string;
-    /**
      * This size representing invisible captcha
@@ -20,5 +18,3 @@ */
     hl: string;
-    constructor();
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
+    constructor(cdr: ChangeDetectorRef, renderer: Renderer2);
     ngOnChanges(changes: SimpleChanges): void;
@@ -25,0 +21,0 @@ /**

ngx-captcha-dist/recaptcha/invisible-recaptcha.component.js

@@ -26,9 +26,7 @@ "use strict";
     __extends(InvisibleReCaptchaComponent, _super);
-    function InvisibleReCaptchaComponent() {
-        var _this = _super.call(this) || this;
+    function InvisibleReCaptchaComponent(cdr, renderer) {
+        var _this = _super.call(this, cdr, renderer) || this;
+        _this.cdr = cdr;
+        _this.renderer = renderer;
         /**
-         * Name of the global callback variable
-        */
-        _this.windowOnLoadCallback = 'ngx_invisible_recaptcha_onload_callback';
-        /**
          * This size representing invisible captcha
@@ -43,8 +41,2 @@ */
     }
-    InvisibleReCaptchaComponent.prototype.ngOnInit = function () {
-        _super.prototype.ngOnInit.call(this);
-    };
-    InvisibleReCaptchaComponent.prototype.ngAfterViewInit = function () {
-        _super.prototype.ngAfterViewInit.call(this);
-    };
     InvisibleReCaptchaComponent.prototype.ngOnChanges = function (changes) {
@@ -86,5 +78,6 @@ _super.prototype.ngOnChanges.call(this, changes);
             selector: 'ngx-invisible-recaptcha',
-            template: "\n  <div #captchaScriptElem></div>\n  <div #captchaWrapperElem>\n    <div [id]=\"captchaElemId\"></div>\n  </div>"
+            template: "\n  <div #captchaScriptElem></div>\n  <div #captchaWrapperElem></div>"
         }),
-        __metadata("design:paramtypes", [])
+        __metadata("design:paramtypes", [core_1.ChangeDetectorRef,
+            core_1.Renderer2])
     ], InvisibleReCaptchaComponent);
@@ -91,0 +84,0 @@ return InvisibleReCaptchaComponent;

ngx-captcha-dist/recaptcha/recaptcha-2.component.d.ts

@@ -1,9 +0,7 @@
-import { AfterViewInit, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
 import { BaseReCaptchaComponent } from './base-recaptcha.component';
-export declare class ReCaptcha2Component extends BaseReCaptchaComponent implements OnInit, AfterViewInit, OnChanges {
+export declare class ReCaptcha2Component extends BaseReCaptchaComponent implements OnChanges {
+    protected cdr: ChangeDetectorRef;
+    protected renderer: Renderer2;
     /**
-     * Name of the global callback variable
-    */
-    protected readonly windowOnLoadCallback: string;
-    /**
      * Theme
@@ -28,5 +26,3 @@ */
     error: EventEmitter<void>;
-    constructor();
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
+    constructor(cdr: ChangeDetectorRef, renderer: Renderer2);
     ngOnChanges(changes: SimpleChanges): void;
@@ -33,0 +29,0 @@ /**

ngx-captcha-dist/recaptcha/recaptcha-2.component.js

@@ -26,9 +26,7 @@ "use strict";
     __extends(ReCaptcha2Component, _super);
-    function ReCaptcha2Component() {
-        var _this = _super.call(this) || this;
+    function ReCaptcha2Component(cdr, renderer) {
+        var _this = _super.call(this, cdr, renderer) || this;
+        _this.cdr = cdr;
+        _this.renderer = renderer;
         /**
-         * Name of the global callback variable
-        */
-        _this.windowOnLoadCallback = 'ngx_recaptcha2_onload_callback';
-        /**
          * Theme
@@ -51,8 +49,2 @@ */
     }
-    ReCaptcha2Component.prototype.ngOnInit = function () {
-        _super.prototype.ngOnInit.call(this);
-    };
-    ReCaptcha2Component.prototype.ngAfterViewInit = function () {
-        _super.prototype.ngAfterViewInit.call(this);
-    };
     ReCaptcha2Component.prototype.ngOnChanges = function (changes) {
@@ -114,5 +106,6 @@ _super.prototype.ngOnChanges.call(this, changes);
             selector: 'ngx-recaptcha2',
-            template: "\n  <div #captchaScriptElem></div>\n  <div #captchaWrapperElem>\n    <div [id]=\"captchaElemId\"></div>\n  </div>"
+            template: "\n  <div #captchaScriptElem></div>\n  <div #captchaWrapperElem></div>"
         }),
-        __metadata("design:paramtypes", [])
+        __metadata("design:paramtypes", [core_1.ChangeDetectorRef,
+            core_1.Renderer2])
     ], ReCaptcha2Component);
@@ -119,0 +112,0 @@ return ReCaptcha2Component;

package.json

 {
   "name": "ngx-captcha",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
@@ -5,0 +5,0 @@ "scripts": {

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

Worsened metrics

Total package byte prevSize

27894

decreased by-0.24%

Lines of code

687

decreased by-1.15%

No dependency changes