[UXP-10] Refactoring - Disable button fix

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

@@ -28,7 +28,6 @@
             </div>
 
         </div>
-    </form>
 
     <ds-alert [type]="AlertTypeEnum.Warning" *ngIf="!isRecaptchaCookieAccepted()">
       <p class="m-0" [innerHTML]="MESSAGE_PREFIX + '.google-recaptcha.must-accept-cookies' | translate"></p>
@@ -42,10 +41,9 @@
     </div>
 
     <ng-container *ngIf="!((googleRecaptchaService.captchaVersion() | async) === 'v2' && (googleRecaptchaService.captchaMode() | async) === 'invisible'); else v2Invisible">
-      <button class="btn btn-primary" [disabled]="form.invalid || (disableUntilChecked() | async)" (click)="register()">
+      <button class="btn btn-primary" [disabled]="form.invalid || disableUntilChecked" (click)="register()">
         {{ MESSAGE_PREFIX + '.submit' | translate }}
       </button>
-      invalid = {{form.invalid}}, disableUntilChecked = {{disableUntilChecked() | async}}
     </ng-container>
 
     <ng-template #v2Invisible>
@@ -53,5 +51,7 @@
         {{ MESSAGE_PREFIX + '.submit' | translate }}
       </button>
     </ng-template>
+    </form>
+
 
 </div>

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, startWith, take, tap } from 'rxjs/operators';
+import { map, startWith, take } 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';
@@ -49,6 +49,8 @@ export class RegisterEmailFormComponent implements OnInit {
    */
   checkboxCheckedSubject$ = new BehaviorSubject<boolean>(false);
 
+  disableUntilChecked = true;
+
   captchaVersion(): Observable<string> {
     return this.googleRecaptchaService.captchaVersion();
   }
@@ -87,6 +89,12 @@ export class RegisterEmailFormComponent implements OnInit {
     ).subscribe((res: boolean) => {
       this.registrationVerification = res;
     });
+
+    this.disableUntilCheckedFcn().subscribe((res) => {
+      this.disableUntilChecked = res;
+      this.changeDetectorRef.detectChanges();
+    });
+
   }
 
   /**
@@ -161,16 +169,12 @@ export class RegisterEmailFormComponent implements OnInit {
   /**
    * Return true if the user has not completed the reCaptcha verification (checkbox mode)
    */
-  disableUntilChecked(): Observable<boolean> {
+  disableUntilCheckedFcn(): 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(); }),
     );
   }
 

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

@@ -50,7 +50,6 @@ export class GoogleRecaptchaComponent implements OnInit {
         this.executeRecaptcha.emit($event);
         break;
       case 'checkbox':
-        console.log('CB ' + isNotEmpty($event));
         this.checkboxChecked.emit(isNotEmpty($event)); // todo fix con boolean
         break;
       default: