MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 15 Wiki Activity

[Monitor]: Change contact us base on library 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor@57796 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2019-12-03 13:10:05 +00:00
parent c606e61728
commit e6626b90d0
3 changed files with 133 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/app/contact/contact.component.html
View File

@ -1,5 +1,4 @@
<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>-->
@ -32,92 +31,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 Monitor Dashboard</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">
Funder 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 funder name.
</div>
<input class="uk-input" type="text" placeholder="Your funder 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>
<!-- (click)="send()" -->
<button class="uk-button portal-button" >Send</button>
</div>
</div>
</div>
<contact-us formTitle="Contact us to create your Monitor Dashboard" 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>
@ -127,9 +43,9 @@
</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.
Press OK to redirect to OpenAIRE Monitor home page.
</div>
</modal-alert>

72
src/app/contact/contact.component.ts
View File

@ -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',
@ -19,28 +18,17 @@ 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 pageTitle: string = "OpenAIRE - Monitor | Contact Us";
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,11 +38,12 @@ export class ContactComponent implements OnInit {
private _title: Title,
private seoService: SEOService,
private _piwikService: PiwikService,
private fb: FormBuilder,
private helper: HelperService) {
}
ngOnInit() {
this._title.setTitle('OpenAIRE-Connect | Contact Us');
this._title.setTitle('OpenAIRE-Monitor | Contact Us');
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.email = {body: '', subject: '', recipients: []};
@ -66,8 +55,8 @@ export class ContactComponent implements OnInit {
this.seoService.createLinkForCanonicalURL(this.url);
this.updateUrl(this.url);
this.updateTitle(this.pageTitle);
this.updateDescription("OpenAIRE - Connect, Community Gateway, research community");
this.updateDescription("OpenAIRE - Monitor, Community Gateway, research community");
this.reset();
//this.getDivContents();
this.getPageContents();
HelperFunctions.scroll();
@ -76,41 +65,44 @@ export class ContactComponent implements OnInit {
}
private getPageContents() {
this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
this.helper.getPageHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
this.pageContents = contents;
})
}
private getDivContents() {
this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
this.helper.getDivHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
this.divContents = contents;
})
}
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),
funder: 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.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) {
this.reset();
@ -121,9 +113,9 @@ 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('');
}
);
);*/
}
public modalOpen() {
@ -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(['/']);
}

6
src/app/contact/contact.module.ts
View File

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