[DSC-1786] [DSC-1786] add: first implementation of recaptcha for feedback form

Author: FrancescoMauto

src/app/core/feedback/models/feedback.model.ts

@@ -30,6 +30,12 @@ export class Feedback extends DSpaceObject {
   @autoserialize
   public page: string;
 
+  /**
+   * Google reCAPTCHA token for spam protection
+   */
+  @autoserialize
+  public captcha: string;
+
   _links: {
     self: HALLink;
   };

src/app/info/feedback/feedback-form/feedback-form.component.html

@@ -2,7 +2,7 @@
   <div class="col-xs-12 col-sm-12 col-md-9">
     <h1>{{ 'info.feedback.head' | translate }}</h1>
     <p>{{ 'info.feedback.info' | translate }}</p>
-    <form [formGroup]="feedbackForm" (ngSubmit)="createFeedback()" class="col p-0">
+    <form [formGroup]="feedbackForm" class="col p-0">
       <div class="row mt-3">
         <div class="control-group col-sm-12">
           <label class="control-label" for="email">{{ 'info.feedback.email-label' | translate }}&nbsp;</label>
@@ -39,9 +39,28 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
         </div>
       </div>
 
+      @if (feedbackRecaptchaEnabled && !isRecaptchaCookieAccepted()) {
+        <ds-alert [type]="AlertTypeEnum.Warning">
+          <p class="m-0" [innerHTML]="'info.feedback.google-recaptcha.must-accept-cookies' | translate"></p>
+          <p class="m-0"><a href="javascript:void(0);" (click)="openCookieSettings()">{{ 'info.feedback.google-recaptcha.open-cookie-settings' | translate }}</a></p>
+        </ds-alert>
+      }
+
+      @if (isRecaptchaCookieAccepted() && (captchaVersion$ | async) === 'v2') {
+        <div class="my-3">
+          <ds-google-recaptcha [captchaMode]="(captchaMode$ | async)"
+            (executeRecaptcha)="createFeedback($event)" (checkboxChecked)="onCheckboxChecked($event)"
+          (showNotification)="showNotification($event)"></ds-google-recaptcha>
+        </div>
+      }
+
       <div class="row mt-3">
-        <div class="control-group col-sm-12 text-right">
-          <button [dsBtnDisabled]="!feedbackForm.valid" class="btn btn-primary" name="submit" type="submit">{{ 'info.feedback.send' | translate }}</button>
+        <div class="control-group col-sm-12 text-end">
+          @if (!feedbackRecaptchaEnabled || (captchaVersion$ | async) !== 'v2') {
+            <button [dsBtnDisabled]="!feedbackForm.valid || feedbackRecaptchaEnabled && !isRecaptchaCookieAccepted()" class="btn btn-primary" name="submit" type="button" (click)="createFeedback()">{{ 'info.feedback.send' | translate }}</button>
+          } @else {
+            <button [dsBtnDisabled]="!feedbackForm.valid || disableUntilChecked" class="btn btn-primary" name="submit" type="button" (click)="executeRecaptcha()">{{ 'info.feedback.send' | translate }}</button>
+          }
         </div>
       </div>
     </form>

src/app/info/feedback/feedback-form/feedback-form.component.spec.ts

@@ -14,19 +14,26 @@ import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
 
 import { AuthService } from '../../../core/auth/auth.service';
+import { ConfigurationDataService } from '../../../core/data/configuration-data.service';
 import { FeedbackDataService } from '../../../core/feedback/feedback-data.service';
 import { Feedback } from '../../../core/feedback/models/feedback.model';
+import { GoogleRecaptchaService } from '../../../core/google-recaptcha/google-recaptcha.service';
+import { CookieService } from '../../../core/services/cookie.service';
 import { RouteService } from '../../../core/services/route.service';
 import { NativeWindowService } from '../../../core/services/window.service';
+import { AlertComponent } from '../../../shared/alert/alert.component';
 import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ErrorComponent } from '../../../shared/error/error.component';
+import { GoogleRecaptchaComponent } from '../../../shared/google-recaptcha/google-recaptcha.component';
+import { CookieServiceMock } from '../../../shared/mocks/cookie.service.mock';
 import { NativeWindowMockFactory } from '../../../shared/mocks/mock-native-window-ref';
 import { RouterMock } from '../../../shared/mocks/router.mock';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { AuthServiceStub } from '../../../shared/testing/auth-service.stub';
 import { EPersonMock } from '../../../shared/testing/eperson.mock';
 import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
 import { routeServiceStub } from '../../../shared/testing/route-service.stub';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { FeedbackFormComponent } from './feedback-form.component';
 
 
@@ -45,6 +52,11 @@ describe('FeedbackFormComponent', () => {
   });
   const routerStub = new RouterMock();
 
+  const configurationDataService = jasmine.createSpyObj('configurationDataService', {
+    findByPropertyName: jasmine.createSpy('findByPropertyName'),
+  });
+  const confResponseDisabled$ = createSuccessfulRemoteDataObject$({ values: ['false'] });
+
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), FeedbackFormComponent, BtnDisabledDirective],
@@ -56,12 +68,18 @@ describe('FeedbackFormComponent', () => {
         { provide: AuthService, useValue: authService },
         { provide: NativeWindowService, useFactory: NativeWindowMockFactory },
         { provide: Router, useValue: routerStub },
+        { provide: ConfigurationDataService, useValue: configurationDataService },
+        { provide: CookieService, useValue: new CookieServiceMock() },
+        { provide: GoogleRecaptchaService, useValue: {} },
       ],
       schemas: [NO_ERRORS_SCHEMA],
-    }).overrideComponent(FeedbackFormComponent, { remove: { imports: [ErrorComponent] } }).compileComponents();
+    }).overrideComponent(FeedbackFormComponent, {
+      remove: { imports: [ErrorComponent, GoogleRecaptchaComponent, AlertComponent] },
+    }).compileComponents();
   }));
 
   beforeEach(() => {
+    configurationDataService.findByPropertyName.and.returnValue(confResponseDisabled$);
     fixture = TestBed.createComponent(FeedbackFormComponent);
     component = fixture.componentInstance;
     de = fixture.debugElement;

src/app/info/feedback/feedback-form/feedback-form.component.ts

@@ -2,7 +2,9 @@ import { NgIf } from '@angular/common';
 import {
   Component,
   Inject,
+  OnDestroy,
   OnInit,
+  Optional,
 } from '@angular/core';
 import {
   FormsModule,
@@ -15,36 +17,63 @@ import {
   TranslateModule,
   TranslateService,
 } from '@ngx-translate/core';
-import { take } from 'rxjs/operators';
+import {
+  BehaviorSubject,
+  combineLatest,
+  Observable,
+  of,
+  Subscription,
+} from 'rxjs';
+import {
+  map,
+  startWith,
+  switchMap,
+  take,
+} from 'rxjs/operators';
 
 import { getHomePageRoute } from '../../../app-routing-paths';
 import { AuthService } from '../../../core/auth/auth.service';
 import { RemoteData } from '../../../core/data/remote-data';
 import { EPerson } from '../../../core/eperson/models/eperson.model';
 import { FeedbackDataService } from '../../../core/feedback/feedback-data.service';
+import {
+  CAPTCHA_NAME,
+  GoogleRecaptchaService,
+} from '../../../core/google-recaptcha/google-recaptcha.service';
 import { RouteService } from '../../../core/services/route.service';
 import {
   NativeWindowRef,
   NativeWindowService,
 } from '../../../core/services/window.service';
 import { NoContent } from '../../../core/shared/NoContent.model';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
+import {
+  getFirstCompletedRemoteData,
+  getFirstSucceededRemoteDataPayload,
+} from '../../../core/shared/operators';
 import { URLCombiner } from '../../../core/url-combiner/url-combiner';
 import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
+import { AlertComponent } from '../../../shared/alert/alert.component';
+import { AlertType } from '../../../shared/alert/alert-type';
 import { ErrorComponent } from '../../../shared/error/error.component';
+import { GoogleRecaptchaComponent } from '../../../shared/google-recaptcha/google-recaptcha.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { ConfigurationDataService } from '../../../core/data/configuration-data.service';
+import { CookieService } from '../../../core/services/cookie.service';
+import { isNotEmpty } from '../../../shared/empty.util';
+import { AsyncPipe } from '@angular/common';
+import { KlaroService } from 'src/app/shared/cookies/klaro.service';
 
 @Component({
   selector: 'ds-base-feedback-form',
   templateUrl: './feedback-form.component.html',
   styleUrls: ['./feedback-form.component.scss'],
   standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, NgIf, ErrorComponent, TranslateModule, BtnDisabledDirective],
+  imports: [FormsModule, ReactiveFormsModule, NgIf, ErrorComponent, TranslateModule, BtnDisabledDirective, AlertComponent, GoogleRecaptchaComponent, AsyncPipe],
 })
 /**
  * Component displaying the contents of the Feedback Statement
  */
-export class FeedbackFormComponent implements OnInit {
+export class FeedbackFormComponent implements OnInit, OnDestroy {
 
   /**
    * Form builder created used from the feedback from
@@ -55,6 +84,31 @@ export class FeedbackFormComponent implements OnInit {
     page: [''],
   });
 
+  /**
+   * Return true if the user completed the reCaptcha verification (checkbox mode)
+   */
+  checkboxCheckedSubject$ = new BehaviorSubject<boolean>(false);
+
+  disableUntilChecked = true;
+
+  captchaVersion$: Observable<string>;
+
+  captchaMode$: Observable<string>;
+
+  /**
+   * Whether reCAPTCHA verification is enabled for feedback
+   */
+  feedbackRecaptchaEnabled = false;
+
+  /**
+   * AlertType enumeration
+   */
+  public AlertTypeEnum = AlertType;
+
+  subscriptions: Subscription[] = [];
+
+  readonly FEEDBACK_VERIFICATION_PROP_KEY = 'feedback.verification.enabled';
+
   constructor(
     @Inject(NativeWindowService) protected _window: NativeWindowRef,
     public routeService: RouteService,
@@ -63,13 +117,20 @@ export class FeedbackFormComponent implements OnInit {
     protected translate: TranslateService,
     private feedbackDataService: FeedbackDataService,
     private authService: AuthService,
-    private router: Router) {
+    private router: Router,
+    public googleRecaptchaService: GoogleRecaptchaService,
+    private configService: ConfigurationDataService,
+    private cookieService: CookieService,
+    @Optional() public klaroService: KlaroService,
+  ) {
   }
 
   /**
    * On init check if user is logged in and use its email if so
    */
   ngOnInit() {
+    this.captchaVersion$ = this.googleRecaptchaService.captchaVersion();
+    this.captchaMode$ = this.googleRecaptchaService.captchaMode();
 
     this.authService.getAuthenticatedUserFromStore().pipe(take(1)).subscribe((user: EPerson) => {
       if (user) {
@@ -85,14 +146,79 @@ export class FeedbackFormComponent implements OnInit {
       this.feedbackForm.patchValue({ page: relatedUrl });
     });
 
+    this.subscriptions.push(this.configService.findByPropertyName(this.FEEDBACK_VERIFICATION_PROP_KEY).pipe(
+      getFirstSucceededRemoteDataPayload(),
+      map((res) => res?.values[0].toLowerCase() === 'true'),
+      take(1),
+    ).subscribe((enabled: boolean) => {
+      this.feedbackRecaptchaEnabled = enabled;
+      if (enabled) {
+        this.refreshRecaptchaScript();
+        this.subscriptions.push(this.disableUntilCheckedFcn().subscribe((res) => {
+          this.disableUntilChecked = res;
+        }));
+      }
+    }));
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach((sub: Subscription) => sub.unsubscribe());
+  }
+
+  /**
+   * Try to load the reCAPTCHA script if not already loaded via registration config
+   */
+  private refreshRecaptchaScript(): void {
+    if (this._window.nativeWindow.refreshCaptchaScript) {
+      this._window.nativeWindow.refreshCaptchaScript();
+    } else {
+      this.googleRecaptchaService.loadRecaptchaProperties().subscribe();
+    }
   }
 
   /**
    * Function to create the feedback from form values
    */
-  createFeedback(): void {
+  createFeedback(captchaToken?: string): void {
+    if (this.feedbackRecaptchaEnabled) {
+      combineLatest([this.captchaVersion$, this.captchaMode$]).pipe(
+        switchMap(([captchaVersion, captchaMode]) => {
+          if (captchaVersion === 'v3') {
+            return this.googleRecaptchaService.getRecaptchaToken('feedback');
+          } else if (captchaVersion === 'v2' && captchaMode === 'checkbox') {
+            return of(this.googleRecaptchaService.getRecaptchaTokenResponse());
+          } else if (captchaVersion === 'v2' && captchaMode === 'invisible') {
+            return of(captchaToken);
+          } else {
+            this.showNotification('error');
+            return of(null);
+          }
+        }),
+        take(1),
+      ).subscribe((token) => {
+        if (isNotEmpty(token)) {
+          this.submitFeedback(token);
+        } else {
+          this.showNotification('error');
+        }
+      });
+    } else {
+      this.submitFeedback();
+    }
+  }
+
+  /**
+   * Send the feedback with the captcha token
+   */
+  private submitFeedback(captcha?: string): void {
     const url = this.feedbackForm.value.page.replace(this._window.nativeWindow.origin, '');
-    this.feedbackDataService.create(this.feedbackForm.value).pipe(getFirstCompletedRemoteData()).subscribe((response: RemoteData<NoContent>) => {
+    const feedback = { ...this.feedbackForm.value };
+    if (isNotEmpty(captcha)) {
+      feedback.captcha = captcha;
+    }
+    this.feedbackDataService.create(feedback).pipe(
+      getFirstCompletedRemoteData(),
+    ).subscribe((response: RemoteData<NoContent>) => {
       if (response.isSuccess) {
         this.notificationsService.success(this.translate.instant('info.feedback.create.success'));
         this.feedbackForm.reset();
@@ -101,4 +227,63 @@ export class FeedbackFormComponent implements OnInit {
     });
   }
 
+  /**
+   * Return true if the user has accepted the required cookies for reCaptcha
+   */
+  isRecaptchaCookieAccepted(): boolean {
+    const orejimeAnonymousCookie = this.cookieService.get('orejime-anonymous');
+    return isNotEmpty(orejimeAnonymousCookie) ? orejimeAnonymousCookie[CAPTCHA_NAME] : false;
+  }
+
+  /**
+   * Return true if the user has not completed the reCaptcha verification (checkbox mode)
+   */
+  disableUntilCheckedFcn(): Observable<boolean> {
+    const checked$ = this.checkboxCheckedSubject$.asObservable();
+    return combineLatest([this.captchaVersion$, this.captchaMode$, checked$]).pipe(
+      switchMap(([captchaVersion, captchaMode, checked]) =>
+        captchaVersion === 'v2' && captchaMode === 'checkbox' ? of(!checked) : of(false),
+      ),
+      startWith(true),
+    );
+  }
+
+  onCheckboxChecked(checked: boolean) {
+    this.checkboxCheckedSubject$.next(checked);
+  }
+
+  /**
+   * execute the captcha function for v2 invisible
+   */
+  executeRecaptcha() {
+    this.googleRecaptchaService.executeRecaptcha();
+  }
+
+  /**
+   * Open the cookie settings dialog
+   */
+  openCookieSettings(): void {
+    if (this.klaroService) {
+      this.klaroService.showSettings();
+    }
+  }
+
+  /**
+   * Show a notification to the user
+   */
+  showNotification(key: string) {
+    const notificationTitle = this.translate.instant('info.feedback.google-recaptcha.notification.title');
+    const notificationErrorMsg = this.translate.instant('info.feedback.google-recaptcha.notification.message.error');
+    const notificationExpiredMsg = this.translate.instant('info.feedback.google-recaptcha.notification.message.expired');
+    switch (key) {
+      case 'expired':
+        this.notificationsService.warning(notificationTitle, notificationExpiredMsg);
+        break;
+      case 'error':
+        this.notificationsService.error(notificationTitle, notificationErrorMsg);
+        break;
+      default:
+        console.warn(`Unimplemented notification '${key}' from reCaptcha service`);
+    }
+  }
 }