connect/src/app/contact/contact.component.ts

import {Component, OnInit, Input, ElementRef, 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 {Title} from "@angular/platform-browser";
import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";

@Component({
    selector: 'contact',
    templateUrl: './contact.component.html',
})

export class ContactComponent implements OnInit {

    @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 contactForm: ContactForm = new ContactForm();
    @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 element: ElementRef,
                private route: ActivatedRoute,
                private _router: Router,
                private _emailService: EmailService,
                private _title: Title,
                private _piwikService: PiwikService) {
    }


    ngOnInit() {
        this._title.setTitle('OpenAIRE-Connect | Contact Us');
        this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
            this.properties = data.envSpecific;
            this.email = {body: '', subject: '', recipients: []};
            if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
                this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect|Contact Us", this.properties.piwikSiteId).subscribe();
            }
            this.scroll();
            this.showLoading = false;
        });
    }

    public scroll() {
        if (typeof document !== 'undefined') {
            this.element.nativeElement.scrollIntoView();
        }
    }

    public send() {
        this.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 != '') {
            this.sendMail(this.properties.admins);
        }
        else {
            this.errorMessage = 'Please fill in all the required fields!'
            this.isSubmitted = true;
        }
    }

    public reset() {
        this.contactForm = new ContactForm();
        this.isSubmitted = false;
        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(
               res => {
                   if(res) {
                       this.reset();
                       this.modalOpen();
                       this.showLoading = false;
                   }
                   else {
                       this.handleError('Token has expired. Please complete the reCaptcha challenge again! ', null)
                       this.showLoading = false;
                       this.contactForm.recaptcha = '';
                   }
               },
               error => {
                   this.handleError('Email sent failed! Please try again.', error);
                   this.showLoading = false;
                   this.contactForm.recaptcha = '';
               }
         );
     }

    public modalOpen() {
        this.modal.okButton = true;
        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) {
        this.contactForm.recaptcha = captchaResponse;
    }


    handleError(message: string, error) {
        this.errorMessage = message;
        console.log('Server responded: ' + error);

        this.showLoading = false;
    }

    public goToHome(data: any) {
        this._router.navigate(['/']);
    }

}