MOBILE-4362 signup: Display required error in recaptcha

Author: dpalou

src/core/components/recaptcha/core-recaptcha.html

@@ -7,7 +7,10 @@
     <ion-item *ngIf="model[modelValueName]">
         <ion-label color="success">{{ 'core.answered' | translate }}</ion-label>
     </ion-item>
-    <ion-item *ngIf="expired" class="ion-text-wrap">
+    <ion-item *ngIf="expired" class="ion-text-wrap core-input-error">
         <ion-label color="danger">{{ 'core.login.recaptchaexpired' | translate }}</ion-label>
     </ion-item>
+    <ion-item *ngIf="showRequiredError && !model[modelValueName] && !expired" class="ion-text-wrap core-input-error">
+        <ion-label color="danger">{{ 'core.required' | translate }}</ion-label>
+    </ion-item>
 </div>

src/core/components/recaptcha/recaptcha.ts

@@ -32,6 +32,7 @@ export class CoreRecaptchaComponent implements OnInit {
     @Input() publicKey?: string; // The site public key.
     @Input() modelValueName = 'recaptcharesponse'; // Name of the model property where to store the response.
     @Input() siteUrl = ''; // The site URL. If not defined, current site.
+    @Input() showRequiredError = false; // Whether to display the required error if recaptcha hasn't been answered.
 
     expired = false;
 

src/core/features/login/pages/email-signup/email-signup.html

@@ -186,7 +186,8 @@ <h2>{{ 'core.login.supplyinfo' | translate }}</h2>
                                 <h2><span [core-mark-required]="true">{{ 'core.login.security_question' | translate }}</span></h2>
                             </ion-label>
                         </ion-item-divider>
-                        <core-recaptcha [publicKey]="settings.recaptchapublickey" [model]="captcha" [siteUrl]="siteUrl"></core-recaptcha>
+                        <core-recaptcha [publicKey]="settings.recaptchapublickey" [model]="captcha" [siteUrl]="siteUrl"
+                            [showRequiredError]="formSubmitClicked"></core-recaptcha>
                     </ng-container>
 
                     <!-- Site policy (if any). -->

src/core/features/login/pages/email-signup/email-signup.ts

@@ -60,6 +60,7 @@ export class CoreLoginEmailSignupPage implements OnInit {
     settingsLoaded = false;
     allRequiredSupported = true;
     signupUrl?: string;
+    formSubmitClicked = false;
     captcha = {
         recaptcharesponse: '',
     };
@@ -265,6 +266,8 @@ export class CoreLoginEmailSignupPage implements OnInit {
         e.preventDefault();
         e.stopPropagation();
 
+        this.formSubmitClicked = true;
+
         if (!this.signupForm.valid || (this.settings?.recaptchapublickey && !this.captcha.recaptcharesponse)) {
             // Form not valid. Mark all controls as dirty to display errors.
             for (const name in this.signupForm.controls) {