[Connect]: Change contact with library contact us component.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@57795 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou
parent
45b187f54a
commit
cdeadce912
|
|
@ -1,17 +1,7 @@
|
|||
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
|
||||
|
||||
<ng-template #info>
|
||||
<helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
|
||||
[texts]="pageContents['right']"></helper>
|
||||
<!--<div class="uk-margin-auto-top uk-margin-remove-bottom uk-text-bold uk-h4">OpenAIRE gives you the virtual
|
||||
environment and services designed for your community to:
|
||||
</div>
|
||||
<ul class="uk-list uk-list-divider uk-padding uk-padding-remove-left uk-margin-auto-top">
|
||||
<li><h5><span class="uk-text-bold">Create and Manage</span> your
|
||||
Community Gateway</h5></li>
|
||||
<li><h5><span class="uk-text-bold">Access, share and link</span> together all your research</h5></li>
|
||||
<li><h5><span class="uk-text-bold">Monitor and report</span> your community's progress</h5></li>
|
||||
</ul>-->
|
||||
</ng-template>
|
||||
<div class="image-front-topbar"
|
||||
uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}"
|
||||
|
|
@ -29,91 +19,9 @@
|
|||
<div class="uk-width-1-1 uk-hidden@m">
|
||||
<ng-container *ngTemplateOutlet="info"></ng-container>
|
||||
</div>
|
||||
<div class="uk-width-1-2@m uk-width-1-1@s">
|
||||
<div class="uk-margin-auto uk-text-bold uk-h4">Contact us to create your Community Gateway</div>
|
||||
<div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center"
|
||||
role="alert">{{errorMessage}}</div>
|
||||
<div class="uk-margin-top" uk-grid>
|
||||
<div class="uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom">* Required
|
||||
fields
|
||||
</div>
|
||||
<div class="uk-width-1-2@s uk-margin-small-top">
|
||||
<label class="uk-h5 uk-text-bold">
|
||||
Name <span class="uk-text-danger uk-text-bold">*</span>
|
||||
</label>
|
||||
<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@s uk-margin-small-top">
|
||||
<label class="uk-h5 uk-text-bold">
|
||||
Surname <span class="uk-text-danger uk-text-bold">*</span>
|
||||
</label>
|
||||
<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>
|
||||
<div class="uk-width-1-2@s uk-margin-small-top">
|
||||
<label class="uk-h5 uk-text-bold">
|
||||
Email <span class="uk-text-danger uk-text-bold">*</span>
|
||||
</label>
|
||||
<div *ngIf="sender.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">
|
||||
Please add an email.
|
||||
</div>
|
||||
<div
|
||||
*ngIf="!sender.invalid && isSubmitted && !contactForm.email.match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')"
|
||||
class=" uk-text-danger uk-text-small style=display:none">Please add a valid email.
|
||||
</div>
|
||||
<input class="uk-input" type="email" placeholder="Your Email" [(ngModel)]="contactForm.email" required
|
||||
#sender="ngModel">
|
||||
</div>
|
||||
<div class="uk-width-1-2@s uk-margin-small-top">
|
||||
<label class="uk-h5 uk-text-bold">
|
||||
Affiliation <span class="uk-text-danger uk-text-bold">*</span>
|
||||
</label>
|
||||
<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@s uk-margin-remove-top">
|
||||
<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">
|
||||
<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-1">
|
||||
<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>
|
||||
<div class="uk-width-1-1 uk-text-right">
|
||||
<button class="uk-button uk-button-default uk-margin-small-right" (click)="reset()">Reset</button>
|
||||
<button class="uk-button portal-button" (click)="send()">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<contact-us formTitle="Contact us to create your Community Gateway" class="uk-width-1-2@m"
|
||||
[properties]="properties" [errorMessage]="errorMessage"
|
||||
[contactForm]="contactForm" (sendEmitter)="send($event)" (resetEmitter)="reset()"></contact-us>
|
||||
<div class="uk-width-1-2 uk-visible@m">
|
||||
<ng-container *ngTemplateOutlet="info"></ng-container>
|
||||
</div>
|
||||
|
|
@ -123,7 +31,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal-alert #AlertModal (alertOutput)="goToHome($event)">
|
||||
<modal-alert #AlertModal (alertOutput)="goToHome()">
|
||||
<div class="uk-text-center">
|
||||
Our team will respond to your submission soon.<br>
|
||||
Press OK to redirect to OpenAIRE Connect home page.
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
import {Component, OnInit, Input, ElementRef, ViewChild} from '@angular/core';
|
||||
import {FormGroup} from '@angular/forms';
|
||||
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||
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 "../openaireLibrary/utils/email/contact-form";
|
||||
import {Composer} from "../openaireLibrary/utils/email/composer";
|
||||
import {Meta, Title} from "@angular/platform-browser";
|
||||
import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
|
||||
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
|
||||
import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
|
||||
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
|
||||
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
|
||||
|
||||
@Component({
|
||||
selector: 'contact',
|
||||
|
|
@ -20,27 +19,16 @@ import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
|
|||
export class ContactComponent implements OnInit {
|
||||
public url: string = null;
|
||||
public pageTitle: string = "OpenAIRE - Connect | Contact Us";
|
||||
|
||||
@Input('group')
|
||||
myForm: FormGroup;
|
||||
public piwiksub: any;
|
||||
public showLoading = true;
|
||||
public errorMessage = '';
|
||||
public isSubmitted = false;
|
||||
public email: Email;
|
||||
public note = '';
|
||||
public properties: EnvProperties = null;
|
||||
public pageContents = null;
|
||||
public divContents = null;
|
||||
|
||||
public contactForm: ContactForm = new ContactForm();
|
||||
public contactForm: FormGroup;
|
||||
@ViewChild('AlertModal') modal;
|
||||
@ViewChild('name') name;
|
||||
@ViewChild('surname') surname;
|
||||
@ViewChild('sender') sender;
|
||||
@ViewChild('affiliation') affiliation;
|
||||
@ViewChild('community') community;
|
||||
@ViewChild('message') message;
|
||||
@ViewChild('recaptcha') recaptcha;
|
||||
|
||||
constructor(private route: ActivatedRoute,
|
||||
|
|
@ -50,6 +38,7 @@ export class ContactComponent implements OnInit {
|
|||
private _title: Title,
|
||||
private seoService: SEOService,
|
||||
private _piwikService: PiwikService,
|
||||
private fb: FormBuilder,
|
||||
private helper: HelperService) {
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +56,7 @@ export class ContactComponent implements OnInit {
|
|||
this.updateUrl(this.url);
|
||||
this.updateTitle(this.pageTitle);
|
||||
this.updateDescription("OpenAIRE - Connect, Community Gateway, research community");
|
||||
|
||||
this.reset();
|
||||
//this.getDivContents();
|
||||
this.getPageContents();
|
||||
HelperFunctions.scroll();
|
||||
|
|
@ -87,32 +76,35 @@ export class ContactComponent implements OnInit {
|
|||
})
|
||||
}
|
||||
|
||||
public send() {
|
||||
public send(event) {
|
||||
HelperFunctions.scroll();
|
||||
if(!this.name.invalid && !this.surname.invalid && !this.sender.invalid &&
|
||||
this.contactForm.email.match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$') &&
|
||||
!this.affiliation.invalid && !this.message.invalid && this.contactForm.recaptcha != '') {
|
||||
if(event.valid === true) {
|
||||
this.sendMail(this.properties.admins);
|
||||
}
|
||||
else {
|
||||
this.errorMessage = 'Please fill in all the required fields!'
|
||||
this.isSubmitted = true;
|
||||
} else {
|
||||
this.errorMessage = 'Please fill in all the required fields!';
|
||||
}
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.contactForm = new ContactForm();
|
||||
this.isSubmitted = false;
|
||||
this.contactForm = this.fb.group( {
|
||||
name: this.fb.control('', Validators.required),
|
||||
surname: this.fb.control('', Validators.required),
|
||||
email: this.fb.control('', [Validators.required, Validators.email]),
|
||||
affiliation: this.fb.control('', Validators.required),
|
||||
community: this.fb.control('', Validators.required),
|
||||
message: this.fb.control('', Validators.required),
|
||||
recaptcha: this.fb.control('', Validators.required),
|
||||
});
|
||||
this.errorMessage = '';
|
||||
this.contactForm.recaptcha = '';
|
||||
}
|
||||
|
||||
private sendMail(admins: any) {
|
||||
this.showLoading = true;
|
||||
this._emailService.contact(this.properties.adminToolsAPIURL + '/contact',
|
||||
Composer.composeEmailForNewCommunity(this.contactForm, admins), this.contactForm.recaptcha).subscribe(
|
||||
Composer.composeEmailForNewCommunity(this.contactForm.value, admins),
|
||||
this.contactForm.value.recaptcha).subscribe(
|
||||
res => {
|
||||
if(res) {
|
||||
if (res) {
|
||||
this.reset();
|
||||
this.modalOpen();
|
||||
this.showLoading = false;
|
||||
|
|
@ -121,7 +113,7 @@ export class ContactComponent implements OnInit {
|
|||
error => {
|
||||
this.handleError('Email sent failed! Please try again.', error);
|
||||
this.showLoading = false;
|
||||
this.contactForm.recaptcha = '';
|
||||
this.contactForm.get('recaptcha').setValue('');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -136,19 +128,13 @@ export class ContactComponent implements OnInit {
|
|||
this.modal.open();
|
||||
}
|
||||
|
||||
public handleRecaptcha(captchaResponse: string) {
|
||||
this.contactForm.recaptcha = captchaResponse;
|
||||
}
|
||||
|
||||
|
||||
handleError(message: string, error) {
|
||||
this.errorMessage = message;
|
||||
console.log('Server responded: ' + error);
|
||||
|
||||
this.showLoading = false;
|
||||
}
|
||||
|
||||
public goToHome(data: any) {
|
||||
public goToHome() {
|
||||
this._router.navigate(['/']);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {ContactComponent} from './contact.component';
|
||||
|
|
@ -13,13 +12,14 @@ import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
|
|||
import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
|
||||
import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
|
||||
import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
|
||||
import {ContactUsModule} from "../openaireLibrary/contact-us/contact-us.module";
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ContactRoutingModule, CommonModule, FormsModule, RouterModule,
|
||||
ContactRoutingModule, CommonModule, RouterModule,
|
||||
AlertModalModule, RecaptchaModule.forRoot(), HelperModule,
|
||||
Schema2jsonldModule, SEOServiceModule
|
||||
Schema2jsonldModule, SEOServiceModule, ContactUsModule
|
||||
],
|
||||
declarations: [
|
||||
ContactComponent
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
|
||||
"reCaptchaSiteKey": "6LcVtFIUAAAAAB2ac6xYivHxYXKoUvYRPi-6_rLu",
|
||||
|
||||
"admins" : ["kostis30fylloy@gmail.com","argirok@di.uoa.gr"],
|
||||
"admins" : ["kostis30fylloy@gmail.com"],
|
||||
"lastIndexUpdate": "2019-05-16",
|
||||
"indexInfoAPI": "http://beta.services.openaire.eu/openaire/info/"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue