[UXP-10] Refactoring WIP

src/app/register-email-form/register-email-form.component.html

@@ -35,16 +35,17 @@
       <p class="m-0"><a href="javascript:void(0);" (click)="this.klaroService.showSettings()">{{ MESSAGE_PREFIX + '.google-recaptcha.open-cookie-settings' | translate }}</a></p>
     </ds-alert>
 
-    <div class="my-3" *ngIf="(googleRecaptchaService.captchaVersion() | async) === 'v2'">
+    <div class="my-3" *ngIf="isRecaptchaCookieAccepted() && (googleRecaptchaService.captchaVersion() | async) === 'v2'">
       <ds-google-recaptcha [captchaMode]="(googleRecaptchaService.captchaMode() | async)"
                            (executeRecaptcha)="register($event)" (checkboxChecked)="onCheckboxChecked($event)"
                            (showNotification)="showNotification($event)"></ds-google-recaptcha>
     </div>
 
     <ng-container *ngIf="!((googleRecaptchaService.captchaVersion() | async) === 'v2' && (googleRecaptchaService.captchaMode() | async) === 'invisible'); else v2Invisible">
-      <button class="btn btn-primary" [disabled]="form.invalid || !(isCheckboxChecked() | async)" (click)="register()">
+      <button class="btn btn-primary" [disabled]="form.invalid || (disableUntilChecked() | async)" (click)="register()">
         {{ MESSAGE_PREFIX + '.submit' | translate }}
       </button>
+      invalid = {{form.invalid}}, disableUntilChecked = {{disableUntilChecked() | async}}
     </ng-container>
 
     <ng-template #v2Invisible>

src/app/register-email-form/register-email-form.component.ts

@@ -11,7 +11,7 @@ import { getFirstSucceededRemoteDataPayload } from '../core/shared/operators';
 import { ConfigurationProperty } from '../core/shared/configuration-property.model';
 import { isNotEmpty } from '../shared/empty.util';
 import { BehaviorSubject, combineLatest, Observable, of, switchMap } from 'rxjs';
-import { map, take, tap } from 'rxjs/operators';
+import { map, startWith, take, tap } from 'rxjs/operators';
 import { CAPTCHA_NAME, GoogleRecaptchaService } from '../core/google-recaptcha/google-recaptcha.service';
 import { AlertType } from '../shared/alert/aletr-type';
 import { KlaroService } from '../shared/cookies/klaro.service';
@@ -159,19 +159,18 @@ export class RegisterEmailFormComponent implements OnInit {
   }
 
   /**
-   * Return true if the user completed the reCaptcha verification (checkbox mode)
+   * Return true if the user has not completed the reCaptcha verification (checkbox mode)
    */
-  isCheckboxChecked(): Observable<boolean> {
-    return combineLatest([this.captchaVersion(), this.captchaMode()]).pipe(
-      switchMap(([captchaVersion, captchaMode])  => {
-        if (captchaVersion === 'v2' && captchaMode === 'checkbox') {
-          return this.checkboxCheckedSubject$.asObservable();
-        } else {
-          return of(true);
-        }
-      }),
-      tap(console.log),
-      tap(() => { this.changeDetectorRef.markForCheck(); })
+  disableUntilChecked(): Observable<boolean> {
+    const checked$ = this.checkboxCheckedSubject$.asObservable();
+    return combineLatest([this.captchaVersion(), this.captchaMode(), checked$]).pipe(
+      // disable if checkbox is not checked or if reCaptcha is not in v2 checkbox mode
+      switchMap(([captchaVersion, captchaMode, checked])  => captchaVersion === 'v2' && captchaMode === 'checkbox' ? of(!checked) : of(false)),
+      startWith(true),
+      tap((res) => {
+        console.log('DISABLED = ' + res);
+      }), // TODO remove
+      // tap(() => { this.changeDetectorRef.markForCheck(); }),
     );
   }
 
@@ -179,10 +178,8 @@ export class RegisterEmailFormComponent implements OnInit {
     return this.form.get('email');
   }
 
-  onCheckboxChecked($event) {
-    if (isNotEmpty($event)) {
-      this.checkboxCheckedSubject$.next(true);
-    }
+  onCheckboxChecked(checked: boolean) {
+    this.checkboxCheckedSubject$.next(checked);
   }
 
   /**
@@ -201,6 +198,7 @@ export class RegisterEmailFormComponent implements OnInit {
         this.notificationsService.error(notificationTitle, notificationErrorMsg);
         break;
       default:
+        console.warn(`Unimplemented notification '${key}' from reCaptcha service`);
     }
   }
 

src/app/shared/google-recaptcha/google-recaptcha.component.html

@@ -1,5 +1,5 @@
 <div class="g-recaptcha"
-     [attr.data-callback]="captchaMode === 'invisible' ? 'executeRecaptchaCallback' : 'checkboxCheckedCallback'"
+     [attr.data-callback]="'dataCallback'"
      [attr.data-expired-callback]="'expiredCallback'"
      [attr.data-error-callback]="'errorCallback'"
      [attr.data-sitekey]="(recaptchaKey$ | async)?.values[0]"

src/app/shared/google-recaptcha/google-recaptcha.component.ts

@@ -4,6 +4,7 @@ import { ConfigurationDataService } from '../../core/data/configuration-data.ser
 import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
 import { Observable } from 'rxjs';
 import { NativeWindowRef, NativeWindowService } from 'src/app/core/services/window.service';
+import { isNotEmpty } from '../empty.util';
 
 @Component({
   selector: 'ds-google-recaptcha',
@@ -38,22 +39,24 @@ export class GoogleRecaptchaComponent implements OnInit {
     this.recaptchaKey$ = this.configService.findByPropertyName('google.recaptcha.key.site').pipe(
       getFirstSucceededRemoteDataPayload(),
     );
-    if (this.captchaMode === 'invisible') {
-      this._window.nativeWindow.executeRecaptchaCallback = this.executeRecaptchaFcn;
-    }
-    if (this.captchaMode === 'checkbox') {
-      this._window.nativeWindow.checkboxCheckedCallback = this.checkboxCheckedFcn;
-    }
+    this._window.nativeWindow.dataCallback = this.dataCallbackFcn;
     this._window.nativeWindow.expiredCallback = this.notificationFcn('expired');
     this._window.nativeWindow.errorCallback = this.notificationFcn('error');
   }
 
-  executeRecaptchaFcn = (event) => {
-    this.executeRecaptcha.emit(event);
-  };
-
-  checkboxCheckedFcn = (event) => {
-    this.checkboxChecked.emit(event); // todo fix con boolean
+  dataCallbackFcn = ($event) => {
+    switch (this.captchaMode) {
+      case 'invisible':
+        this.executeRecaptcha.emit($event);
+        break;
+      case 'checkbox':
+        console.log('CB ' + isNotEmpty($event));
+        this.checkboxChecked.emit(isNotEmpty($event)); // todo fix con boolean
+        break;
+      default:
+        console.error(`Invalid reCaptcha mode '${this.captchaMode}`);
+        this.showNotification.emit('error');
+    }
   };
 
   notificationFcn(key) {