MaDgIK
/
connect
13
0
Fork 0
Code Issues Pull Requests Projects Releases 14 Wiki Activity

[Trunk|Connect]: 1. Add Recaptcha module at package.json. 2. Create Contact Component. 3. Add contact to app-routing as route '/contact' 4. Contact Us is not working right now 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@55252 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2019-04-09 22:09:38 +00:00
parent a036d1fb54
commit 1854ed76e7
6 changed files with 294 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -35,6 +35,7 @@
"@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",

1
src/app/app-routing.module.ts
View File

@ -9,6 +9,7 @@ import { OpenaireErrorPageComponent } from './error/errorPage.component';
const routes: Routes = [
{ path: '', loadChildren: './communitywrapper/communityWrapper.module#CommunityWrapperModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'how-to-create-community', loadChildren: './createCommunity/community-creation-instructions.module#CommunityCreationInstructionsModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'contact', loadChildren: './contact/contact.module#ContactModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'invite', loadChildren: './utils/subscribe/invite/invite.module#InviteModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'about', loadChildren: './htmlPages/about/aboutPage.module#AboutPageModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'content', loadChildren: './content/contentPage.module#ContentPageModule', resolve: { envSpecific: EnvironmentSpecificResolver }},

12
src/app/contact/contact-routing.module.ts Normal file
View File

@ -0,0 +1,12 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {ContactComponent} from './contact.component';
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: ContactComponent}
])
]
})
export class ContactRoutingModule { }

74
src/app/contact/contact.component.html Normal file
View File

@ -0,0 +1,74 @@
<div *ngIf="showLoading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span class="loading-gif uk-align-center" ></span></div>
</div>
<div *ngIf="!showLoading" class="image-front-topbar uk-section-default uk-position-relative" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
<div style=" min-height: 350px;" class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">
<div class="uk-margin-top uk-align-center">
<div class="uk-section uk-section-large">
<div class="uk-container uk-container-large">
<div uk-grid>
<div class="uk-width-1-2@m uk-width-1-1@s">
<h4 class="uk-margin-autouk-h4 uk-text-bold">Contact us and create your community profile</h4>
<div class="uk-margin uk-padding uk-padding-remove-left" uk-grid>
<label class="uk-width-1-2 uk-h5 uk-text-bold">
Name <span class="uk-text-danger uk-text-bold">*</span>
</label>
<label class="uk-width-1-2 uk-h5 uk-text-bold">
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>
<div class="uk-width-1-2 uk-margin-remove-top">
<input class="uk-input" type="text" placeholder="Your Surname" [(ngModel)]="surname">
</div>
<label class="uk-width-1-2 uk-h5 uk-text-bold">
Email <span class="uk-text-danger uk-text-bold">*</span>
</label>
<label class="uk-width-1-2 uk-h5 uk-text-bold">
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>
<div class="uk-width-1-2 uk-margin-remove-top">
<input class="uk-input" type="text" placeholder="Your Affiliation" [(ngModel)]="affiliation">
</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>
<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>
<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>
</div>
</div>
</div>
<div class="uk-width-1-2@m uk-width-1-1@s">
<h5 class="uk-margin-auto-top uk-margin-remove-bottom uk-h5 uk-text-bold">OpenAIRE gives you the virtual environment and services designed for your community to:</h5>
<ul class="uk-list uk-list-divider uk-padding uk-margin-auto-top">
<li><h5 class="uk-h5"><b>Create</b> and <b>Manage</b> your community</h5></li>
<li><h5 class="uk-h5"><b>Access, share </b>and<b> link</b> together all your research</h5></li>
<li><h5 class="uk-h5"><b>Monitor</b> and <b>report</b> your community's progress</h5></li>
</ul>
</div>
</div>
</div>
</div>
</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>

176
src/app/contact/contact.component.ts Normal file
View File

@ -0,0 +1,176 @@
import {Component, OnInit, Input, ElementRef, ViewChild} from '@angular/core';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
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";
@Component({
selector: 'contact',
templateUrl: './contact.component.html',
})
export class ContactComponent implements OnInit{
@Input('group')
myForm: FormGroup;
public showLoading = true;
public errorMessage = '';
public updateErrorMessage = '';
public successfulSaveMessage = '';
public successfulResetMessage = '';
public hasChanged = false;
public res = [];
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;
constructor (private element: ElementRef,
private route: ActivatedRoute,
private _router: Router,
public _fb: FormBuilder,
private _emailService: EmailService) { }
ngOnInit() {
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.email = {body: '', subject: '', recipients: []};
this.emailToInform = {body: '', subject: '', recipients: []};
this.scroll();
this.showLoading = false;
});
}
public scroll() {
if (typeof document !== 'undefined') {
this.element.nativeElement.scrollIntoView();
}
}
public resetForm() {
}
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]);
}
}
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 : ''
});
}
handleUpdateError(message: string, error) {
this.updateErrorMessage = message;
console.log('Server responded: ' + error);
this.showLoading = false;
}
handleError(message: string, error) {
this.errorMessage = message;
console.log('Server responded: ' + error);
this.showLoading = false;
}
handleSuccessfulSend(message) {
this.showLoading = false;
this.successfulSaveMessage = message;
}
handleSuccessfulReset(message) {
this.showLoading = false;
this.successfulResetMessage = message;
}
trackByFn(index: any, item: any) {
return index;
}
}

30
src/app/contact/contact.module.ts Normal file
View File

@ -0,0 +1,30 @@
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';
import {ContactRoutingModule} from "./contact-routing.module";
import {EmailService} from "../openaireLibrary/utils/email/email.service";
import {RecaptchaModule} from "angular-google-recaptcha";
@NgModule({
imports: [
ContactRoutingModule, CommonModule, FormsModule, RouterModule,
RecaptchaModule.forRoot({
siteKey: '6LffKp0UAAAAAHFvnvEY4YUV_ojH90_loQp5gOqH',
}),
],
declarations: [
ContactComponent
],
providers: [
EmailService
],
exports: [
ContactComponent
]
})
export class ContactModule { }