MOBILE-4362 signup: Display required error in recaptcha

main
Dani Palou 2023-10-30 08:25:09 +01:00
parent 935da86caa
commit 8cda49f720
4 changed files with 10 additions and 2 deletions

View File

@ -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>

View File

@ -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;

View File

@ -186,7 +186,8 @@
<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). -->

View File

@ -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) {