[Trunk|Connect]: 1. Add a new class contact form. 2. Add new module for reCaptcha. 3. Validate fields
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@55267 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou
parent
1854ed76e7
commit
13796de2ca
|
|
@ -72,6 +72,7 @@
|
|||
"searchLinkToOrganization" : "/search/organization?organizationId=",
|
||||
"searchLinkToOrp" : "/search/other?orpId=",
|
||||
|
||||
"searchLinkToCommunities" : "/search/find/communities",
|
||||
"searchLinkToPublications" : "/search/find/publications",
|
||||
"searchLinkToDataProviders" : "/search/find/dataproviders",
|
||||
"searchLinkToProjects" : "/search/find/projects",
|
||||
|
|
@ -104,5 +105,9 @@
|
|||
"widgetLink" : "https://beta.openaire.eu/index.php?option=com_openaire&view=widget&format=raw&projectId=",
|
||||
"claimsInformationLink": "https://beta.openaire.eu/linking",
|
||||
|
||||
"shareInZenodoPage": "/participate/share-zenodo?communityId="
|
||||
"shareInZenodoPage": "/participate/share-zenodo?communityId=",
|
||||
|
||||
"reCaptchaSiteKey": "6LcVtFIUAAAAAB2ac6xYivHxYXKoUvYRPi-6_rLu",
|
||||
|
||||
"admins" : []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,13 +35,13 @@
|
|||
"@nguniversal/express-engine": "^1.0.0-beta.3",
|
||||
"@nguniversal/module-map-ngfactory-loader": "^1.0.0-beta.3",
|
||||
"angular-datatables": "^4.4.0",
|
||||
"angular-google-recaptcha": "^1.0.3",
|
||||
"citation-js": "^0.3.4",
|
||||
"clipboard": "^1.5.16",
|
||||
"core-js": "^2.4.1",
|
||||
"datatables.net": "^1.10.16",
|
||||
"datatables.net-dt": "^1.10.16",
|
||||
"jquery": "^3.2.1",
|
||||
"ng-recaptcha": "^3.0.5",
|
||||
"ng2-ckeditor": "1.1.9",
|
||||
"ngx-json-ld": "0.1.6",
|
||||
"rxjs": "^5.4.2",
|
||||
|
|
|
|||
|
|
@ -17,10 +17,12 @@
|
|||
Surname <span class="uk-text-danger uk-text-bold">*</span>
|
||||
</label>
|
||||
<div class="uk-width-1-2 uk-margin-remove-top">
|
||||
<input class="uk-input" type="text" placeholder="Your Name" [(ngModel)]="name">
|
||||
<div *ngIf="name.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a name. </div>
|
||||
<input class="uk-input" type="text" placeholder="Your Name" [(ngModel)]="contactForm.name" required #name="ngModel">
|
||||
</div>
|
||||
<div class="uk-width-1-2 uk-margin-remove-top">
|
||||
<input class="uk-input" type="text" placeholder="Your Surname" [(ngModel)]="surname">
|
||||
<div *ngIf="surname.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a surname. </div>
|
||||
<input class="uk-input" type="text" placeholder="Your Surname" [(ngModel)]="contactForm.surname" required #surname="ngModel">
|
||||
</div>
|
||||
<label class="uk-width-1-2 uk-h5 uk-text-bold">
|
||||
Email <span class="uk-text-danger uk-text-bold">*</span>
|
||||
|
|
@ -29,27 +31,38 @@
|
|||
Affiliation <span class="uk-text-danger uk-text-bold">*</span>
|
||||
</label>
|
||||
<div class="uk-width-1-2 uk-margin-remove-top">
|
||||
<input class="uk-input" type="text" placeholder="Your Email" [(ngModel)]="sender">
|
||||
<div *ngIf="sender.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">
|
||||
<span *ngIf="sender.errors.required">Please add an email. </span>
|
||||
<span *ngIf="!sender.errors.required && sender.errors.email">Please add a valid email. </span>
|
||||
</div>
|
||||
<input class="uk-input" type="email" placeholder="Your Email" [(ngModel)]="contactForm.email" required email #sender="ngModel">
|
||||
</div>
|
||||
<div class="uk-width-1-2 uk-margin-remove-top">
|
||||
<input class="uk-input" type="text" placeholder="Your Affiliation" [(ngModel)]="affiliation">
|
||||
<div *ngIf="affiliation.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add an affiliation. </div>
|
||||
<input class="uk-input" type="text" placeholder="Your Affiliation" [(ngModel)]="contactForm.affiliation" required #affiliation="ngModel">
|
||||
</div>
|
||||
<label class="uk-width-1-1 uk-h5 uk-text-bold">
|
||||
Community Name <span class="uk-text-danger uk-text-bold">*</span>
|
||||
</label>
|
||||
<div class="uk-width-1-2 uk-margin-remove-top">
|
||||
<input class="uk-input" type="text" placeholder="Your Community Name" [(ngModel)]="community">
|
||||
<div *ngIf="community.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a community name. </div>
|
||||
<input class="uk-input" type="text" placeholder="Your Community Name" [(ngModel)]="contactForm.community" required #community="ngModel">
|
||||
</div>
|
||||
<label class="uk-width-1-1 uk-h5 uk-text-bold">
|
||||
Message <span class="uk-text-danger uk-text-bold">*</span>
|
||||
</label>
|
||||
<div class="uk-width-1-1 uk-margin-remove-top">
|
||||
<textarea rows="4" class="uk-textarea" type="text" placeholder="Your message" [(ngModel)]="message"></textarea>
|
||||
<div *ngIf="message.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please write us a message. </div>
|
||||
<textarea rows="4" class="uk-textarea" type="text" placeholder="Your message" [(ngModel)]="contactForm.message" required #message="ngModel"></textarea>
|
||||
</div>
|
||||
<div class="uk-width-1-2">
|
||||
<div *ngIf="!contactForm.recaptcha && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please complete reCaptcha challenge. </div>
|
||||
<re-captcha #recaptcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey" required></re-captcha>
|
||||
</div>
|
||||
<recaptcha class="uk-width-1-2" [(ngModel)]="recaptcha"></recaptcha>
|
||||
<div class="uk-width-1-2 uk-text-danger uk-text-bold uk-text-right">* Required fields</div>
|
||||
<div class="uk-width-1-1">
|
||||
<button class="uk-button portal-button" (click)="send()">Send</button>
|
||||
<button class="uk-button uk-button-default uk-margin-auto-top" (click)="reset()">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -68,7 +81,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
|
||||
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
|
||||
<div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>
|
||||
<div *ngIf="successfulResetMessage" class="uk-alert uk-alert-warning" role="alert">{{successfulResetMessage}}</div>
|
||||
|
|
|
|||
|
|
@ -4,44 +4,47 @@ import {ActivatedRoute, Router} from '@angular/router';
|
|||
import {EmailService} from "../openaireLibrary/utils/email/email.service";
|
||||
import {Email} from "../openaireLibrary/utils/email/email";
|
||||
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
|
||||
import {ContactForm} from "./contact-form";
|
||||
import {Composer} from "../openaireLibrary/utils/email/composer";
|
||||
|
||||
@Component({
|
||||
selector: 'contact',
|
||||
templateUrl: './contact.component.html',
|
||||
})
|
||||
|
||||
export class ContactComponent implements OnInit{
|
||||
export class ContactComponent implements OnInit {
|
||||
|
||||
@Input('group')
|
||||
myForm: FormGroup;
|
||||
|
||||
public showLoading = true;
|
||||
public errorMessage = '';
|
||||
public errorMessage = '';
|
||||
public updateErrorMessage = '';
|
||||
|
||||
public successfulSaveMessage = '';
|
||||
public successfulResetMessage = '';
|
||||
|
||||
public hasChanged = false;
|
||||
public res = [];
|
||||
public isSubmitted = false;
|
||||
public email: Email;
|
||||
public emailToInform: Email;
|
||||
public note = '';
|
||||
public properties: EnvProperties = null;
|
||||
|
||||
public name = '';
|
||||
public surname = '';
|
||||
public sender = '';
|
||||
public affiliation = '';
|
||||
public community = '';
|
||||
public message = '';
|
||||
public recaptcha: any = null;
|
||||
public contactForm: ContactForm = new ContactForm();
|
||||
public recaptchaToken: string = null;
|
||||
@ViewChild('name') name;
|
||||
@ViewChild('surname') surname;
|
||||
@ViewChild('sender') sender;
|
||||
@ViewChild('affiliation') affiliation;
|
||||
@ViewChild('community') community;
|
||||
@ViewChild('message') message;
|
||||
@ViewChild('recaptcha') recaptcha;
|
||||
|
||||
constructor (private element: ElementRef,
|
||||
private route: ActivatedRoute,
|
||||
private _router: Router,
|
||||
public _fb: FormBuilder,
|
||||
private _emailService: EmailService) { }
|
||||
constructor(private element: ElementRef,
|
||||
private route: ActivatedRoute,
|
||||
private _router: Router,
|
||||
private _emailService: EmailService) {
|
||||
}
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
|
|
@ -55,104 +58,43 @@ export class ContactComponent implements OnInit{
|
|||
}
|
||||
|
||||
public scroll() {
|
||||
if (typeof document !== 'undefined') {
|
||||
this.element.nativeElement.scrollIntoView();
|
||||
}
|
||||
}
|
||||
|
||||
public resetForm() {
|
||||
|
||||
if (typeof document !== 'undefined') {
|
||||
this.element.nativeElement.scrollIntoView();
|
||||
}
|
||||
}
|
||||
|
||||
public send() {
|
||||
console.log(this.recaptcha);
|
||||
}
|
||||
|
||||
/* private sendMailToNewManagers(managers: any) {
|
||||
this._emailService.sendEmail(this.properties.adminToolsAPIURL + '/sendMail/',
|
||||
Composer.composeEmailForNewManager(this.communityId,
|
||||
this.community.title, managers)).subscribe(
|
||||
res => {
|
||||
// console.log("The email has been sent successfully!")
|
||||
},
|
||||
error => console.log(error)
|
||||
);
|
||||
}*/
|
||||
|
||||
|
||||
private getNonEmptyItems(data: string[]): string[] {
|
||||
const length = data.length;
|
||||
const arrayNonEmpty = new Array<string>();
|
||||
|
||||
let j = 0;
|
||||
for (let i = 0; i < length; i++) {
|
||||
if (this.isEmpty(data[i])) {
|
||||
// console.log(data[i]);
|
||||
} else if (this.isNonEmpty(data[i])) {
|
||||
arrayNonEmpty[j] = data[i];
|
||||
j++;
|
||||
// console.log(data[i]);
|
||||
}
|
||||
this.isSubmitted = true;
|
||||
if(!this.name.invalid && !this.surname.invalid && !this.sender.invalid &&
|
||||
!this.affiliation.invalid && !this.message.invalid && this.contactForm.recaptcha) {
|
||||
this.sendMail(this.properties.admins);
|
||||
}
|
||||
return arrayNonEmpty;
|
||||
}
|
||||
|
||||
private hasFilled(data: any): boolean {
|
||||
if (this.isNonEmpty(data) && !this.isEmpty(data)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
private isEmpty(data: string): boolean {
|
||||
if (data !== undefined && !data.replace(/\s/g, '').length) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
private isNonEmpty(data: string): boolean {
|
||||
if (data !== undefined && data != null) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
private change() {
|
||||
this.hasChanged = true;
|
||||
this.successfulSaveMessage = '';
|
||||
this.successfulResetMessage = '';
|
||||
}
|
||||
|
||||
private resetChange() {
|
||||
this.hasChanged = false;
|
||||
}
|
||||
|
||||
public get form() {
|
||||
return this._fb.group({
|
||||
_id : '',
|
||||
name : ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.myForm.patchValue({
|
||||
name : '',
|
||||
_id : ''
|
||||
});
|
||||
this.contactForm = new ContactForm();
|
||||
this.recaptcha.reset();
|
||||
}
|
||||
|
||||
handleUpdateError(message: string, error) {
|
||||
this.updateErrorMessage = message;
|
||||
console.log('Server responded: ' + error);
|
||||
private sendMail(admins: any) {
|
||||
this._emailService.sendEmail(this.properties.adminToolsAPIURL + '/sendMail/',
|
||||
Composer.composeEmailForNewCommunity(this.contactForm, admins)).subscribe(
|
||||
res => {
|
||||
console.log(res)
|
||||
},
|
||||
error => console.log(error)
|
||||
);
|
||||
}
|
||||
|
||||
this.showLoading = false;
|
||||
|
||||
public handleRecaptcha(captchaResponse: string) {
|
||||
this.recaptchaToken = captchaResponse;
|
||||
if(this.recaptchaToken) {
|
||||
this.contactForm.recaptcha = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
handleError(message: string, error) {
|
||||
this.errorMessage = message;
|
||||
console.log('Server responded: ' + error);
|
||||
|
|
@ -165,12 +107,4 @@ export class ContactComponent implements OnInit{
|
|||
this.successfulSaveMessage = message;
|
||||
}
|
||||
|
||||
handleSuccessfulReset(message) {
|
||||
this.showLoading = false;
|
||||
this.successfulResetMessage = message;
|
||||
}
|
||||
|
||||
trackByFn(index: any, item: any) {
|
||||
return index;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,15 +6,13 @@ import {RouterModule} from '@angular/router';
|
|||
import {ContactComponent} from './contact.component';
|
||||
import {ContactRoutingModule} from "./contact-routing.module";
|
||||
import {EmailService} from "../openaireLibrary/utils/email/email.service";
|
||||
import {RecaptchaModule} from "angular-google-recaptcha";
|
||||
import {RecaptchaModule} from "ng-recaptcha";
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ContactRoutingModule, CommonModule, FormsModule, RouterModule,
|
||||
RecaptchaModule.forRoot({
|
||||
siteKey: '6LffKp0UAAAAAHFvnvEY4YUV_ojH90_loQp5gOqH',
|
||||
}),
|
||||
RecaptchaModule.forRoot()
|
||||
],
|
||||
declarations: [
|
||||
ContactComponent
|
||||
|
|
|
|||
|
|
@ -102,12 +102,15 @@
|
|||
"notifyForNewManagers": "http://scoobydoo.di.uoa.gr:8080/uoa-admin-tools/notifyForNewManagers/",
|
||||
"notifyForNewSubscribers": "http://scoobydoo.di.uoa.gr:8080/uoa-admin-tools/notifyForNewSubscribers/",
|
||||
|
||||
|
||||
"lastIndexInformationLink" : "https://beta.openaire.eu/aggregation-and-content-provision-workflows",
|
||||
"showLastIndexInformationLink" : true,
|
||||
|
||||
"widgetLink" : "https://beta.openaire.eu/index.php?option=com_openaire&view=widget&format=raw&projectId=",
|
||||
"claimsInformationLink": "https://beta.openaire.eu/linking",
|
||||
|
||||
"shareInZenodoPage": "/participate/share-zenodo?communityId="
|
||||
"shareInZenodoPage": "/participate/share-zenodo?communityId=",
|
||||
|
||||
"reCaptchaSiteKey": "6LcVtFIUAAAAAB2ac6xYivHxYXKoUvYRPi-6_rLu",
|
||||
|
||||
"admins" : ["kostis30fylloy@gmail.com"]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue