[Library]: Create Contact us component, delete contact us from class

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57794 d315682c-612b-4755-9ff5-7f18f6832af3

contact-us/contact-us.component.html

@@ -0,0 +1,67 @@
+<div class="uk-margin-auto uk-text-bold uk-h4">{{formTitle}}</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 [formGroup]="contactForm">
+    <div class="uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom">
+        *Required fields
+    </div>
+    <div *ngIf="contactForm.get('name')" 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>
+        <input class="uk-input" type="text" placeholder="Your name" formControlName="name"
+               [class.uk-form-danger]="contactForm.get('name').invalid && contactForm.get('name').touched">
+    </div>
+    <div *ngIf="contactForm.get('surname')" 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>
+        <input class="uk-input" type="text" placeholder="Your surname" formControlName="surname"
+               [class.uk-form-danger]="contactForm.get('surname').invalid && contactForm.get('surname').touched">
+    </div>
+    <div *ngIf="contactForm.get('email')" 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>
+        <input class="uk-input" type="text" placeholder="Your email" formControlName="email"
+               [class.uk-form-danger]="contactForm.get('email').invalid && contactForm.get('email').touched">
+    </div>
+    <div *ngIf="contactForm.get('affiliation')" 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>
+        <input class="uk-input" type="text" placeholder="Your affiliation" formControlName="affiliation"
+               [class.uk-form-danger]="contactForm.get('affiliation').invalid && contactForm.get('affiliation').touched">
+    </div>
+    <div *ngIf="contactForm.get('community')" class="uk-width-1-2@s uk-margin-top">
+        <label class="uk-h5 uk-text-bold">
+            Community Name <span class="uk-text-danger uk-text-bold">*</span>
+        </label>
+        <input class="uk-input" type="text" placeholder="Your community name" formControlName="community"
+               [class.uk-form-danger]="contactForm.get('community').invalid && contactForm.get('community').touched">
+    </div>
+    <div *ngIf="contactForm.get('funder')" class="uk-width-1-2@s uk-margin-top">
+        <label class="uk-h5 uk-text-bold">
+            Funder Name <span class="uk-text-danger uk-text-bold">*</span>
+        </label>
+        <input class="uk-input" type="text" placeholder="Your funder name" formControlName="funder"
+               [class.uk-form-danger]="contactForm.get('funder').invalid && contactForm.get('funder').touched">
+    </div>
+    <div *ngIf="contactForm.get('message')" class="uk-width-1-1 uk-margin-top">
+        <label class="uk-h5 uk-text-bold">
+            Message <span class="uk-text-danger uk-text-bold">*</span>
+        </label>
+        <textarea rows="4" class="uk-textarea" placeholder="Your message" formControlName="message"
+                  [class.uk-form-danger]="contactForm.get('message').invalid && contactForm.get('message').touched">
+        </textarea>
+    </div>
+    <div *ngIf="contactForm.get('message')" class="uk-width-1-1 uk-margin-top">
+        <re-captcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey">
+        </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>

contact-us/contact-us.component.ts

@@ -0,0 +1,39 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {FormGroup} from '@angular/forms';
+import {EnvProperties} from "../utils/properties/env-properties";
+
+@Component({
+    selector: 'contact-us',
+    templateUrl: './contact-us.component.html',
+})
+
+export class ContactUsComponent implements OnInit {
+    @Input()
+    public contactForm: FormGroup;
+    @Input() formTitle: string;
+    @Input() properties: EnvProperties;
+    @Output() sendEmitter: EventEmitter<any> = new EventEmitter<any>();
+    @Output() resetEmitter: EventEmitter<any> = new EventEmitter<any>();
+    @Input() errorMessage;
+
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
+
+    public send() {
+        this.sendEmitter.emit({
+            valid: this.contactForm.valid
+        });
+    }
+
+    public reset() {
+        this.resetEmitter.emit();
+    }
+
+
+    public handleRecaptcha(captchaResponse: string) {
+        this.contactForm.get('recaptcha').setValue(captchaResponse);
+    }
+}

contact-us/contact-us.module.ts

@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
+
+import {ContactUsComponent} from './contact-us.component';
+import {RecaptchaModule} from "ng-recaptcha";
+import {ReactiveFormsModule} from "@angular/forms";
+
+@NgModule({
+    imports: [
+        CommonModule, RouterModule,
+        RecaptchaModule.forRoot(), ReactiveFormsModule],
+    declarations: [
+        ContactUsComponent
+    ],
+    providers: [],
+    exports: [
+        ContactUsComponent
+    ]
+})
+
+export class ContactUsModule {
+}

utils/email/composer.ts

@@ -1,6 +1,5 @@
 import {Email} from "./email";
 import {Body} from "./body";
-import {ContactForm} from "./contact-form";
 
 export class Composer {
   private static noteBodySize = "14px";
@@ -49,7 +48,7 @@ export class Composer {
       return email;
   }
 
-  public static composeEmailForNewCommunity(contactForm: ContactForm, admins: any): Email {
+  public static composeEmailForNewCommunity(contactForm: any, admins: any): Email {
     let email: Email = new Email();
 
     email.subject = "RCD: Request for new community";

utils/email/contact-form.ts

@@ -1,9 +0,0 @@
-export class ContactForm {
-  name: string = '';
-  surname: string = '';
-  email: string = '';
-  affiliation: string = '';
-  community: string = '';
-  message: string = '';
-  recaptcha: string = null;
-}