[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

src/app/contact/contact.component.html

@@ -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">
+            <contact-us formTitle="Contact us to create your Monitor Dashboard" class="uk-width-1-2@m"
-              <div class="uk-margin-auto uk-text-bold uk-h4">Contact us to create your Monitor Dashboard</div>
+                        [properties]="properties" [errorMessage]="errorMessage"
-              <div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center"
+                        [contactForm]="contactForm" (sendEmitter)="send($event)" (resetEmitter)="reset()"></contact-us>
-                   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>
             <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>

src/app/contact/contact.component.ts

@@ -1,16 +1,15 @@
-import {Component, OnInit, Input, ElementRef, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
-import {FormGroup} 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";
-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',
@@ -18,152 +17,139 @@ import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
 })
 
 export class ContactComponent implements OnInit {
-  public url: string = null;
+    public url: string = null;
-  public pageTitle: string = "OpenAIRE - Connect | Contact Us";
+    public pageTitle: string = "OpenAIRE - Monitor | Contact Us";
+    public piwiksub: any;
+    public showLoading = true;
+    public errorMessage = '';
+    public email: Email;
+    public properties: EnvProperties = null;
+    public pageContents = null;
+    public divContents = null;
 
-  @Input('group')
+    public contactForm: FormGroup;
-  myForm: FormGroup;
+    @ViewChild('AlertModal') modal;
-  public piwiksub: any;
+    @ViewChild('recaptcha') recaptcha;
-  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();
+    constructor(private route: ActivatedRoute,
-  @ViewChild('AlertModal') modal;
+                private _router: Router,
-  @ViewChild('name') name;
+                private _emailService: EmailService,
-  @ViewChild('surname') surname;
+                private _meta: Meta,
-  @ViewChild('sender') sender;
+                private _title: Title,
-  @ViewChild('affiliation') affiliation;
+                private seoService: SEOService,
-  @ViewChild('community') community;
+                private _piwikService: PiwikService,
-  @ViewChild('message') message;
+                private fb: FormBuilder,
-  @ViewChild('recaptcha') recaptcha;
+                private helper: HelperService) {
+    }
 
-  constructor(private route: ActivatedRoute,
+    ngOnInit() {
-              private _router: Router,
+        this._title.setTitle('OpenAIRE-Monitor | Contact Us');
-              private _emailService: EmailService,
+        this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
-              private _meta: Meta,
+            this.properties = data.envSpecific;
-              private _title: Title,
+            this.email = {body: '', subject: '', recipients: []};
-              private seoService: SEOService,
-              private _piwikService: PiwikService,
-              private helper: HelperService) {
-  }
 
-  ngOnInit() {
+            if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
-      this._title.setTitle('OpenAIRE-Connect | Contact Us');
+                this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe();
-      this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
+            }
-          this.properties = data.envSpecific;
+            this.url = this.properties.baseLink + this._router.url;
-          this.email = {body: '', subject: '', recipients: []};
+            this.seoService.createLinkForCanonicalURL(this.url);
+            this.updateUrl(this.url);
+            this.updateTitle(this.pageTitle);
+            this.updateDescription("OpenAIRE - Monitor, Community Gateway, research community");
+            this.reset();
+            //this.getDivContents();
+            this.getPageContents();
+            HelperFunctions.scroll();
+            this.showLoading = false;
+        });
+    }
 
-          if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+    private getPageContents() {
-            this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe();
+        this.helper.getPageHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
-          }
+            this.pageContents = contents;
-          this.url = this.properties.baseLink + this._router.url;
+        })
-          this.seoService.createLinkForCanonicalURL(this.url);
+    }
-          this.updateUrl(this.url);
-          this.updateTitle(this.pageTitle);
-          this.updateDescription("OpenAIRE - Connect, Community Gateway, research community");
 
-          //this.getDivContents();
+    private getDivContents() {
-          this.getPageContents();
+        this.helper.getDivHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
-          HelperFunctions.scroll();
+            this.divContents = contents;
-          this.showLoading = false;
+        })
-      });
+    }
-  }
 
-  private getPageContents() {
+    public send(event) {
-      this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+        HelperFunctions.scroll();
-          this.pageContents = contents;
+        if(event.valid === true) {
-      })
+            this.sendMail(this.properties.admins);
-  }
+        } else {
+            this.errorMessage = 'Please fill in all the required fields!';
+        }
+    }
 
-  private getDivContents() {
+    public reset() {
-      this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+        this.contactForm = this.fb.group( {
-          this.divContents = contents;
+            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 = '';
+    }
 
-  public send() {
+    private sendMail(admins: any) {
-      HelperFunctions.scroll();
+        /*this.showLoading = true;
-      if(!this.name.invalid && !this.surname.invalid && !this.sender.invalid &&
+        this._emailService.contact(this.properties.adminToolsAPIURL + '/contact',
-          this.contactForm.email.match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$') &&
+            Composer.composeEmailForNewCommunity(this.contactForm.value, admins),
-          !this.affiliation.invalid && !this.message.invalid && this.contactForm.recaptcha != '') {
+            this.contactForm.value.recaptcha).subscribe(
-          this.sendMail(this.properties.admins);
+            res => {
-      }
+                if (res) {
-      else {
+                    this.reset();
-          this.errorMessage = 'Please fill in all the required fields!'
+                    this.modalOpen();
-          this.isSubmitted = true;
+                    this.showLoading = false;
-      }
+                }
-  }
+            },
+            error => {
+                this.handleError('Email sent failed! Please try again.', error);
+                this.showLoading = false;
+                this.contactForm.get('recaptcha').setValue('');
+            }
+        );*/
+    }
 
-  public reset() {
+    public modalOpen() {
-      this.contactForm = new ContactForm();
+        this.modal.okButton = true;
-      this.isSubmitted = false;
+        this.modal.alertTitle = 'Your request has been successfully submitted';
-      this.errorMessage = '';
+        this.modal.alertMessage = false;
-      this.contactForm.recaptcha = '';
+        this.modal.cancelButton = false;
-  }
+        this.modal.okButtonLeft = false;
+        this.modal.okButtonText = 'OK';
+        this.modal.open();
+    }
 
-   private sendMail(admins: any) {
+    handleError(message: string, error) {
-       this.showLoading = true;
+        this.errorMessage = message;
-       this._emailService.contact(this.properties.adminToolsAPIURL + '/contact',
+        console.log('Server responded: ' + error);
-                                    Composer.composeEmailForNewCommunity(this.contactForm, admins), this.contactForm.recaptcha).subscribe(
+        this.showLoading = false;
-             res => {
+    }
-                 if(res) {
-                     this.reset();
-                     this.modalOpen();
-                     this.showLoading = false;
-                 }
-             },
-             error => {
-                 this.handleError('Email sent failed! Please try again.', error);
-                 this.showLoading = false;
-                 this.contactForm.recaptcha = '';
-             }
-       );
-   }
 
-  public modalOpen() {
+    public goToHome() {
-      this.modal.okButton = true;
+        this._router.navigate(['/']);
-      this.modal.alertTitle = 'Your request has been successfully submitted';
+    }
-      this.modal.alertMessage = false;
-      this.modal.cancelButton = false;
-      this.modal.okButtonLeft = false;
-      this.modal.okButtonText = 'OK';
-      this.modal.open();
-  }
 
-  public handleRecaptcha(captchaResponse: string) {
+    private updateDescription(description: string) {
-      this.contactForm.recaptcha = captchaResponse;
+        this._meta.updateTag({content: description}, "name='description'");
-  }
+        this._meta.updateTag({content: description}, "property='og:description'");
+    }
 
+    private updateTitle(title: string) {
+        var _title = ((title.length > 50) ? title.substring(0, 50) : title);
+        this._title.setTitle(_title);
+        this._meta.updateTag({content: _title}, "property='og:title'");
+    }
 
-  handleError(message: string, error) {
+    private updateUrl(url: string) {
-      this.errorMessage = message;
+        this._meta.updateTag({content: url}, "property='og:url'");
-      console.log('Server responded: ' + error);
+    }
-
-      this.showLoading = false;
-  }
-
-  public goToHome(data: any) {
-      this._router.navigate(['/']);
-  }
-
-  private updateDescription(description: string) {
-    this._meta.updateTag({content: description}, "name='description'");
-    this._meta.updateTag({content: description}, "property='og:description'");
-  }
-
-  private updateTitle(title: string) {
-    var _title = ((title.length > 50) ? title.substring(0, 50) : title);
-    this._title.setTitle(_title);
-    this._meta.updateTag({content: _title}, "property='og:title'");
-  }
-
-  private updateUrl(url: string) {
-    this._meta.updateTag({content: url}, "property='og:url'");
-  }
 }

src/app/contact/contact.module.ts

@@ -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,14 +12,15 @@ 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: [
+    imports: [
-    ContactRoutingModule, CommonModule, FormsModule, RouterModule,
+        ContactRoutingModule, CommonModule, RouterModule,
-    AlertModalModule, RecaptchaModule.forRoot(), HelperModule,
+        AlertModalModule, RecaptchaModule.forRoot(), HelperModule,
-    Schema2jsonldModule, SEOServiceModule
+        Schema2jsonldModule, SEOServiceModule, ContactUsModule
-  ],
+    ],
   declarations: [
     ContactComponent
   ],