[UXP-10] Notify unaccepted cookies - Fixes

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

@@ -2,7 +2,7 @@
     <h2>{{MESSAGE_PREFIX + '.header'|translate}}</h2>
     <p>{{MESSAGE_PREFIX + '.info' | translate}}</p>
 
-    <form [class]="'ng-invalid'" [formGroup]="form" (ngSubmit)="register()">
+    <form [class]="'ng-invalid'" [formGroup]="form">
 
         <div class="form-group">
             <div class="row">
@@ -24,23 +24,31 @@
                 <div class="col-12">
                     {{MESSAGE_PREFIX + '.email.hint' |translate}}
                 </div>
-                <div class="col-12" *ngIf="(googleRecaptchaService.captchaVersion() | async) === 'v2'">
-                    <ds-google-recaptcha [captchaMode]="(googleRecaptchaService.captchaMode() | async)" (executeRecaptcha)="register($event)"></ds-google-recaptcha>
-                </div>
 
             </div>
 
         </div>
     </form>
 
-    <button *ngIf="(googleRecaptchaService.captchaVersion() | async) === 'v2' && (googleRecaptchaService.captchaMode() | async) === 'invisible'"
-            class="btn btn-primary"
-            [disabled]="form.invalid"
-            (click)="executeRecaptcha()">
-            {{ MESSAGE_PREFIX + '.submit' | translate }}</button>
-    <button *ngIf="!((googleRecaptchaService.captchaVersion() | async) === 'v2' && (googleRecaptchaService.captchaMode() | async) === 'invisible')"
-            class="btn btn-primary"
-            [disabled]="form.invalid"
-            (click)="register()">
-            {{ MESSAGE_PREFIX + '.submit' | translate }}</button>
+    <ds-alert [type]="AlertTypeEnum.Warning" *ngIf="!isRecaptchaCookieAccepted()">
+      <p class="m-0">{{ MESSAGE_PREFIX + '.google-recaptcha.must-accept-cookies' | translate }}</p>
+      <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'">
+      <ds-google-recaptcha [captchaMode]="(googleRecaptchaService.captchaMode() | async)" (executeRecaptcha)="register($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 || (disableRegisterButton() | async)" (click)="register()">
+        {{ MESSAGE_PREFIX + '.submit' | translate }}
+      </button>
+    </ng-container>
+
+    <ng-template #v2Invisible>
+      <button class="btn btn-primary" [disabled]="form.invalid" (click)="executeRecaptcha()">
+        {{ MESSAGE_PREFIX + '.submit' | translate }}
+      </button>
+    </ng-template>
+
 </div>

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Optional } from '@angular/core';
 import { EpersonRegistrationService } from '../core/data/eperson-registration.service';
 import { NotificationsService } from '../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -11,8 +11,11 @@ import { getFirstSucceededRemoteDataPayload } from '../core/shared/operators';
 import { ConfigurationProperty } from '../core/shared/configuration-property.model';
 import { isNotEmpty } from '../shared/empty.util';
 import { combineLatest, Observable, of, switchMap } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { GoogleRecaptchaService } from '../core/google-recaptcha/google-recaptcha.service';
+import { map, 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';
+import { CookieService } from '../core/services/cookie.service';
 
 @Component({
   selector: 'ds-register-email-form',
@@ -34,6 +37,8 @@ export class RegisterEmailFormComponent implements OnInit {
   @Input()
   MESSAGE_PREFIX: string;
 
+  public AlertTypeEnum = AlertType;
+
   /**
    * registration verification configuration
    */
@@ -47,7 +52,6 @@ export class RegisterEmailFormComponent implements OnInit {
     return this.googleRecaptchaService.captchaMode();
   }
 
-
   constructor(
     private epersonRegistrationService: EpersonRegistrationService,
     private notificationService: NotificationsService,
@@ -55,7 +59,9 @@ constructor(
     private router: Router,
     private formBuilder: FormBuilder,
     private configService: ConfigurationDataService,
-    public googleRecaptchaService: GoogleRecaptchaService
+    public googleRecaptchaService: GoogleRecaptchaService,
+    public cookieService: CookieService,
+    @Optional() public klaroService: KlaroService,
   ) {
 
   }
@@ -80,14 +86,13 @@ constructor(
    * execute the captcha function for v2 invisible
    */
   executeRecaptcha() {
-    console.log('executeRecaptcha');
     this.googleRecaptchaService.executeRecaptcha();
   }
 
   /**
    * Register an email address
    */
-  register(tokenV2 = null) {
+  register(tokenV2?) {
     if (!this.form.invalid) {
       if (this.registrationVerification) {
         combineLatest([this.captchaVersion(), this.captchaMode()]).pipe(
@@ -100,6 +105,7 @@ constructor(
               return of(tokenV2);
             }
           }),
+          take(1),
         ).subscribe((token) => {
             if (isNotEmpty(token)) {
               this.registration(token);
@@ -134,6 +140,26 @@ constructor(
     });
   }
 
+  isRecaptchaCookieAccepted(): boolean {
+    const klaroAnonymousCookie = this.cookieService.get('klaro-anonymous');
+    return isNotEmpty(klaroAnonymousCookie) ? klaroAnonymousCookie[CAPTCHA_NAME] : false;
+  }
+
+  disableRegisterButton(): Observable<boolean> {
+    return combineLatest([this.captchaVersion(), this.captchaMode()]).pipe(
+      switchMap(([captchaVersion, captchaMode])  => {
+        if (captchaVersion === 'v2' && captchaMode === 'checkbox') {
+// this.googleRecaptchaService.getRecaptchaTokenResponse()
+          return of(false);
+          // TODO disable if captcha unchecked
+        } else {
+          return of(false);
+        }
+      }),
+      tap(console.log)
+    );
+  }
+
   get email() {
     return this.form.get('email');
   }

src/app/shared/cookies/browser-klaro.service.ts

@@ -75,7 +75,7 @@ export class BrowserKlaroService extends KlaroService {
     this.configService.findByPropertyName('registration.verification.enabled').pipe(
       getFirstCompletedRemoteData(),
     ).subscribe((remoteData) => {
-      if (!remoteData.hasSucceeded || isEmpty(remoteData.payload?.values) || remoteData.payload.values[0].toLowerCase() !== 'true') {
+      if (remoteData.statusCode === 404 || isEmpty(remoteData.payload?.values) || remoteData.payload.values[0].toLowerCase() !== 'true') {
         this.klaroConfig.services = klaroConfiguration.services.filter(config => config.name !== CAPTCHA_NAME);
       }
     });