[Library | Feedback]: Add recaptcha to feedback form.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58345 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2020-03-27 09:11:56 +00:00
parent 9be356020b
commit 5aeef7a068
3 changed files with 21 additions and 8 deletions

View File

@ -57,17 +57,23 @@
</div>
</div>
<div class="uk-flex uk-flex-bottom uk-margin-medium-top" uk-grid>
<div class="uk-width-expand">
<div class="uk-width-2-3@m uk-width-1-2@s">
<div class="uk-text-small">Please leave us your E-mail to notify you about the reporting status.</div>
<input class="uk-input default-border uk-width-1-1" placeholder="E-mail" formControlName="email" [class.uk-form-danger]="form.get('email').invalid">
</div>
<div class="uk-width-1-4@m uk-width-1-3@s">
<div *ngIf="form" class="uk-width-expand">
<re-captcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey">
</re-captcha>
</div>
<div class="uk-margin-top uk-width-1-1">
<div class="uk-width-1-4@m uk-width-1-3@s uk-float-right">
<button [class.uk-disabled]="form.invalid || sending" [class.portal-button]="form.valid"
(click)="sendReport()" class="uk-button uk-width-1-1">Send report
</button>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="sent" class="uk-position-relative">
<div class="uk-position-top-center">

View File

@ -76,7 +76,8 @@ export class FeedbackComponent implements OnInit, OnChanges {
name: this.fb.control(this.title),
url: this.fb.control(this.url),
email: this.fb.control('', Validators.email),
issues: this.fb.array([], Validators.required)
issues: this.fb.array([], Validators.required),
recaptcha: this.fb.control('', Validators.required),
});
this.addIssue();
}
@ -110,9 +111,14 @@ export class FeedbackComponent implements OnInit, OnChanges {
this.backModal.open();
}
public handleRecaptcha(captchaResponse: string) {
this.form.get('recaptcha').setValue(captchaResponse);
}
public sendReport() {
this.sending = true;
this.emailService.contact(this.properties.adminToolsAPIURL + '/contact', Composer.composeEmailForFeedback(this.form.value, this.recipients)).subscribe(sent => {
this.emailService.contact(this.properties.adminToolsAPIURL + '/contact',
Composer.composeEmailForFeedback(this.form.value, this.recipients), this.form.get('recaptcha').value).subscribe(sent => {
this.error = !sent;
if(sent) {
if(this.form.get('email').value !== '') {

View File

@ -6,9 +6,10 @@ import {ReactiveFormsModule} from "@angular/forms";
import {MatSelectModule} from "@angular/material/select";
import {AlertModalModule} from "../../utils/modal/alertModal.module";
import {EmailService} from "../../utils/email/email.service";
import {RecaptchaModule} from "ng-recaptcha";
@NgModule({
imports: [CommonModule, LandingHeaderModule, ReactiveFormsModule, MatSelectModule, AlertModalModule],
imports: [CommonModule, LandingHeaderModule, ReactiveFormsModule, MatSelectModule, AlertModalModule, RecaptchaModule.forRoot()],
declarations: [FeedbackComponent],
providers: [EmailService],
exports: [FeedbackComponent]