MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
landingPages/feedback/feedback.component.html
View File

@ -57,17 +57,23 @@
</div> </div>
</div> </div>
<div class="uk-flex uk-flex-bottom uk-margin-medium-top" uk-grid> <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> <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"> <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>
<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" <button [class.uk-disabled]="form.invalid || sending" [class.portal-button]="form.valid"
(click)="sendReport()" class="uk-button uk-width-1-1">Send report (click)="sendReport()" class="uk-button uk-width-1-1">Send report
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div *ngIf="sent" class="uk-position-relative"> <div *ngIf="sent" class="uk-position-relative">
<div class="uk-position-top-center"> <div class="uk-position-top-center">

10
landingPages/feedback/feedback.component.ts
View File

@ -76,7 +76,8 @@ export class FeedbackComponent implements OnInit, OnChanges {
name: this.fb.control(this.title), name: this.fb.control(this.title),
url: this.fb.control(this.url), url: this.fb.control(this.url),
email: this.fb.control('', Validators.email), 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(); this.addIssue();
} }
@ -110,9 +111,14 @@ export class FeedbackComponent implements OnInit, OnChanges {
this.backModal.open(); this.backModal.open();
} }
public handleRecaptcha(captchaResponse: string) {
this.form.get('recaptcha').setValue(captchaResponse);
}
public sendReport() { public sendReport() {
this.sending = true; 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; this.error = !sent;
if(sent) { if(sent) {
if(this.form.get('email').value !== '') { if(this.form.get('email').value !== '') {

3
landingPages/feedback/feedback.module.ts
View File

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