Cleanup scripts when global domain changes, use domain switcher in demo app

Author: Enngage

demo/src/re-captcha-2-demo.component.html

@@ -48,6 +48,13 @@ <h2 class="featurette-heading">Google reCAPTCHA2
                           <span style="cursor:pointer" class="text-primary" (click)="changeType('audio')">Audio</span>
                       </td>
                   </tr>
+                  <tr>
+                    <td>Use global domain</td>
+                    <td>
+                        <span style="cursor:pointer" class="text-primary" (click)="setUseGlobalDomain(true)">Yes</span> |
+                        <span style="cursor:pointer" class="text-primary" (click)="setUseGlobalDomain(false)">No</span>
+                    </td>
+                </tr>
               </tbody>
           </table>
 
@@ -106,7 +113,7 @@ <h4>Live example</h4>
                           (expire)="handleExpire()"
                           (load)="handleLoad()"
                           (success)="handleSuccess($event)"
-                          [useGlobalDomain]="false"
+                          [useGlobalDomain]="useGlobalDomain"
                           [size]="size"
                           [hl]="lang"
                           [theme]="theme"

demo/src/re-captcha-2-demo.component.ts

@@ -73,6 +73,7 @@ import { NgxCaptchaModule } from 'ngx-captcha';
   public size: 'compact' | 'normal' = 'normal';
   public lang = 'en';
   public type: 'image' | 'audio';
+  public useGlobalDomain: boolean = false;
 
   @ViewChild('captchaElem') captchaElem: ReCaptcha2Component;
   @ViewChild('langInput') langInput: ElementRef;
@@ -129,6 +130,10 @@ import { NgxCaptchaModule } from 'ngx-captcha';
     this.lang = this.langInput.nativeElement.value;
   }
 
+  setUseGlobalDomain(use: boolean): void {
+    this.useGlobalDomain = use;
+  }
+
   getCurrentResponse(): void {
     const currentResponse = this.captchaElem.getCurrentResponse();
     if (!currentResponse) {

projects/ngx-captcha-lib/src/lib/components/base-recaptcha.component.ts

@@ -154,11 +154,19 @@ export abstract class BaseReCaptchaComponent implements OnChanges, ControlValueA
     ngOnChanges(changes: SimpleChanges): void {
         // cleanup scripts if language changed because they need to be reloaded
         if (changes && changes.hl) {
+            // cleanup scripts when language changes
             if (!changes.hl.firstChange && (changes.hl.currentValue !== changes.hl.previousValue)) {
                 this.scriptService.cleanup();
             }
         }
 
+        if (changes && changes.useGlobalDomain) {
+            // cleanup scripts when domain changes
+            if (!changes.useGlobalDomain.firstChange && (changes.useGlobalDomain.currentValue !== changes.useGlobalDomain.previousValue)) {
+                this.scriptService.cleanup();
+            }
+        }
+
         this.setupComponent();
     }
 
@@ -223,7 +231,6 @@ export abstract class BaseReCaptchaComponent implements OnChanges, ControlValueA
     * Responsible for instantiating captcha element
     */
     protected renderReCaptcha(): void {
-
         // run outside angular zone due to timeout issues when testing
         // details: https://github.com/Enngage/ngx-captcha/issues/26
         this.zone.runOutsideAngular(() => {

projects/ngx-captcha-lib/src/lib/services/script.service.ts

@@ -82,6 +82,8 @@ export class ScriptService {
     */
     private getCaptchaScriptUrl(useGlobalDomain: boolean, render: string, language?: string): string {
         const domain = useGlobalDomain ? this.globalDomain : this.defaultDomain;
+        console.log(useGlobalDomain, domain);
+
         // tslint:disable-next-line:max-line-length
         return `https://www.${domain}/recaptcha/api.js?onload=${this.windowOnLoadCallbackProperty}&render=${render}${this.getLanguageParam(language)}`;
     }