D-Net

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

  <!--<div class="uk-margin-auto-top uk-margin-remove-bottom  uk-text-bold uk-h4">OpenAIRE gives you the virtual

      environment and services designed for your community to:

  </div>

  <ul class="uk-list uk-list-divider uk-padding uk-padding-remove-left uk-margin-auto-top">

      <li><h5><span class="uk-text-bold">Create and Manage</span> your

          Community Gateway</h5></li>

      <li><h5><span class="uk-text-bold">Access, share and link</span> together all your research</h5></li>

      <li><h5><span class="uk-text-bold">Monitor and report</span> your community's progress</h5></li>

  </ul>-->

</ng-template>

<div class="image-front-topbar"

     uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}"

     tm-header-transparent="light" tm-header-transparent-placeholder="">

  <div

    class="contact-background uk-section-large uk-background-top-center uk-background-norepeat uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color">

    <div style=" min-height: 350px;" class="uk-section uk-flex uk-flex-middle uk-margin-top uk-padding-remove-top">

      <div class="uk-align-center">

        <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="uk-container uk-container-large">

          <div class="uk-grid-divider" uk-grid>

            <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 Community Gateway</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">

                  Community 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 community name.

                  </div>

                  <input class="uk-input" type="text" placeholder="Your Community 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>

                  <button class="uk-button portal-button" (click)="send()">Send</button>

                </div>

              </div>

            </div>

            <div class="uk-width-1-2 uk-visible@m">

              <ng-container *ngTemplateOutlet="info"></ng-container>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

<modal-alert #AlertModal (alertOutput)="goToHome($event)">

  <div class="uk-text-center">

    Our team will respond to your submission soon.<br>

    Press OK to redirect to OpenAIRE Connect home page.

  </div>

</modal-alert>

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 {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";

@Component({

    selector: 'contact',

    templateUrl: './contact.component.html',

})

export class ContactComponent implements OnInit {

  public url: string = null;

  public pageTitle: string = "OpenAIRE - Connect | Contact Us";

  @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 pageContents = null;

  public divContents = 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 route: ActivatedRoute,

              private _router: Router,

              private _emailService: EmailService,

              private _meta: Meta,

              private _title: Title,

              private seoService: SEOService,

              private _piwikService: PiwikService,

              private helper: HelperService) {

  }

  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, this.pageTitle, this.properties.piwikSiteId).subscribe();

          }

          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();

          this.getPageContents();

          HelperFunctions.scroll();

          this.showLoading = false;

      });

  }

  private getPageContents() {

      this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {

          this.pageContents = contents;

      })

  }

  private getDivContents() {

      this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {

          this.divContents = contents;

      })

  }

  public send() {

      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 != '') {

          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;

                 }

             },

             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(['/']);

  }

  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'");

  }

}

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 "ng-recaptcha";

import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";

import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";

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";

@NgModule({

  imports: [

    ContactRoutingModule, CommonModule, FormsModule, RouterModule,

    AlertModalModule, RecaptchaModule.forRoot(), HelperModule,

    Schema2jsonldModule, SEOServiceModule

  ],

  declarations: [

    ContactComponent

  ],

  providers: [

    EmailService, PiwikService, IsRouteEnabled

  ],

  exports: [

    ContactComponent

  ]

})

export class ContactModule { }

import { NgModule } from '@angular/core';

import {RouterModule} from '@angular/router';

import {ContactComponent} from './contact.component';

import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";

@NgModule({

    imports: [

        RouterModule.forChild([

            { path: '', component: ContactComponent, canActivate: [IsRouteEnabled]}

        ])

    ]

})

export class ContactRoutingModule { }

<schema2jsonld [URL]="properties.baseLink"

               [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-monitor.png'" type="home"

               name="OpenAIRE Monitor">

</schema2jsonld>

<div

     class="image-front-topbar uk-margin-large-top"

     uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}"

     tm-header-transparent="light" tm-header-transparent-placeholder="">

  <helper *ngIf="pageContents && pageContents['left'] && pageContents['left'].length > 0"

          [texts]="pageContents['left']"></helper>

</div>

<div class="uk-section-muted"

     uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}">

  <div class="uk-container uk-container-large">

    <other-portals [properties]="properties" portal="monitor"> </other-portals>

  </div>

</div>

import {Component} from '@angular/core';

import {ActivatedRoute, Router} from '@angular/router';

import {Meta, Title} from '@angular/platform-browser';

import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';

import {CommunitiesService} from '../openaireLibrary/connect/communities/communities.service';

import {SubscribeService} from '../openaireLibrary/utils/subscribe/subscribe.service';

import {CommunityInfo} from '../openaireLibrary/connect/community/communityInfo';

import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';

import {StringUtils} from '../openaireLibrary/utils/string-utils.class';

import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';

import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';

import {HelperService} from "../openaireLibrary/utils/helper/helper.service";

import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";

@Component({

  selector: 'home',

  templateUrl: 'home.component.html',

})

export class HomeComponent {

  public piwiksub: any;

  public pageTitle = "OpenAIRE | Monitor";

  public pageContents = null;

  public divContents = null;

  public status: number;

  public loading: boolean = true;

  public subscriberErrorMessage: string = "";

  public errorCodes: ErrorCodes;

  private errorMessages: ErrorMessagesComponent;

  properties: EnvProperties;

  public keyword: string = "";

  public type: string = "all";

  constructor(

    private route: ActivatedRoute,

    private _router: Router,

    private _meta: Meta,

    private _title: Title,

    private _piwikService: PiwikService,

    private helper: HelperService,

    private seoService: SEOService) {

    var description = "OpenAIRE - Monitor, monitor dashboard, funder, statistics, ";

    var title = "OpenAIRE - Monitor";

    this._meta.updateTag({content: description}, "name='description'");

    this._meta.updateTag({content: description}, "property='og:description'");

    this._meta.updateTag({content: title}, "property='og:title'");

    this._title.setTitle(title);

    this.errorCodes = new ErrorCodes();

    this.errorMessages = new ErrorMessagesComponent();

    this.status = this.errorCodes.LOADING;

  }

  public ngOnInit() {

    this.route.data

      .subscribe((data: { envSpecific: EnvProperties }) => {

        this.properties = data.envSpecific;

        var url = data.envSpecific.baseLink + this._router.url;

        this.seoService.createLinkForCanonicalURL(url, false);

        this._meta.updateTag({content: url}, "property='og:url'");

        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {

          this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Monitor", this.properties.piwikSiteId).subscribe();

        }

        //this.getDivContents();

        this.getPageContents();

      });

  }

  private getPageContents() {

    this.helper.getPageHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {

      this.pageContents = contents;

    })

  }

  private getDivContents() {

    this.helper.getDivHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {

      this.divContents = contents;

    })

  }

  public quote(param: string): string {

    return StringUtils.quote(param);

  }

  public ngOnDestroy() {

    if (this.piwiksub) {

      this.piwiksub.unsubscribe();

    }

  }

  private handleError(message: string, error): number {

    var code = "";

    if (!error.status) {

      var error = error.json();

      code = error.code;

    } else {

      code = error.status;

    }

    console.error("Communities (component): " + message, error);

    return this.errorMessages.getErrorCode(code);

  }

}

import {NgModule} from '@angular/core';

import {CommonModule} from '@angular/common';

import {FormsModule} from '@angular/forms';

import {RouterModule} from '@angular/router';

import {HomeComponent} from './home.component';

import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';

import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';

import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';

import {ErrorMessagesModule} from '../openaireLibrary/utils/errorMessages.module';

import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";

import {OtherPortalsModule} from "../openaireLibrary/sharedComponents/other-portals/other-portals.module";

import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";

import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";

import {HomeRoutingModule} from "./home-routing.module";

@NgModule({

  imports: [

    CommonModule, FormsModule, RouterModule, ErrorMessagesModule, OtherPortalsModule,

    HelperModule, Schema2jsonldModule, SEOServiceModule, HomeRoutingModule,

  ],

  declarations: [

    HomeComponent

  ],

  providers: [

    FreeGuard, PreviousRouteRecorder,

    PiwikService

  ],

  exports: [

    HomeComponent

  ]

})

export class HomeModule {

}

import { NgModule } from '@angular/core';

import { RouterModule } from '@angular/router';

import{HomeComponent} from './home.component';

import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';

import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';

@NgModule({

  imports: [

    RouterModule.forChild([

     	{ path: '', component: HomeComponent, canActivate: [FreeGuard], canDeactivate: [PreviousRouteRecorder] }

    ])

  ]

})

export class HomeRoutingModule { }

import {Component, Input} from '@angular/core';

import {ActivatedRoute, Router} from '@angular/router';

import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';

import {LayoutService} from "../../openaireLibrary/services/layout.service";

import {CustomizationOptions} from "../../openaireLibrary/connect/community/CustomizationOptions";

import {ConnectHelper} from "../../openaireLibrary/connect/connectHelper";

import {PiwikHelper} from "../piwikHelper";

import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";

declare var appendCss: any;

@Component({

  selector: 'customization',

  template: `

<!--    <p>This is customizing layout component</p>-->

  `

})

export class CustomizationComponent {

  @Input() communityId;

  layout: CustomizationOptions;

  constructor(private route: ActivatedRoute,

              private router: Router, private _layoutService: LayoutService

  ) {

  }

  public ngOnInit() {

    this.route.data

      .subscribe((data: { envSpecific: EnvProperties }) => {

        this.route.queryParams.subscribe(params => {

          if(params['layout']) {

            this.layout = JSON.parse(StringUtils.URIDecode(params['layout']));

            this.buildCss();

          }else{

            // this.properties = data.envSpecific;

//com.communityId,

//               data.envSpecific.adminToolsAPIURL + '/'

            this._layoutService.mockLayout().subscribe(

              layout => {

                this.layout = layout;

                this.buildCss();

              }

            );

          }

        });

      });

  }

  private buildCss() {

    console.log(this.layout);

    document.documentElement.style.setProperty('--portal-main-color', this.layout.mainColor);

    document.documentElement.style.setProperty('--portal-dark-color', this.layout.secondaryColor);

    let css = `

            /*Panel background*/

.communityPanelBackground:not(bottom)  {   

    border-style: ` + (this.layout.panel.background.borderStyle != null ? this.layout.panel.background.borderStyle : 'solid') + `;

    border-color:` + (this.layout.panel.background.borderColor != null ? this.layout.panel.background.borderColor : 'transparent') + `;

    border-width: ` + (this.layout.panel.background.borderWidth != null ? this.layout.panel.background.borderWidth: '1') + `px;`+`

}

.communityPanelBackground, .communityPanelBackground .uk-section-primary {

        background-color:  ` + (this.layout.panel.background.color?this.layout.panel.background.color:this.layout.mainColor) + `;    

}

/*Panel fonts*/

.communityPanelBackground {

    color:` + (this.layout.panel.fonts.color != null ? this.layout.panel.fonts.color : 'white') + ` !important;` +

      (this.layout.panel.fonts.family != null ? ('font-family: ' + this.layout.panel.fonts.family + ' !important;') : '') +

      (this.layout.panel.fonts.size != null ? ('font-size: ' + this.layout.panel.fonts.size + 'px !important;') : '') +

      (this.layout.panel.fonts.weight != null ? ('font-weight: ' + this.layout.panel.fonts.weight + '!important;') : '') +

      `

}

 .communityPanelBackground div.uk-modal  {

    color:#666 !important;

}

.communityPanelBackground .uk-h6:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h4:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h3:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-h2:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h1:not(.ignoreCommunityPanelBackground) {

    color: ` + (this.layout.panel.title.color != null ? this.layout.panel.title.color : 'white') + ` !important;` +

      (this.layout.panel.title.weight != null ? ('font-weight: ' + this.layout.panel.title.weight + '!important;') : '') +

      `

}

.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground){

`+

      (this.layout.panel.title.family != null ? ('font-family: ' + this.layout.panel.title.family + ' !important;') : '') +

      (this.layout.panel.title.size != null ? ('font-size: ' + this.layout.panel.title.size + 'px !important;') : '') +

      `

}

/* Panel links */

.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground), .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground), .portal-card a {

    color: `

      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.color?this.layout.links.darkBackground.color:'white') :(this.layout.links.lightBackground.color?this.layout.links.lightBackground.color:'var(--portal-main-color)') ) + ` !important;`

      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.family?('font-family: ' + this.layout.links.darkBackground.family + ' !important;') : '') :'' )

      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.size?('font-size: ' + this.layout.links.darkBackground.size + 'px !important;') : '') :'' )

      +`

}

/* Panel links - hover */

.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground):hover, .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground):hover, .portal-card a:hover {

    color: `

      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.onHover.color?this.layout.links.darkBackground.onHover.color:`rgba(255, 255, 255, 0.5)`) :(this.layout.links.lightBackground.onHover.color?this.layout.links.lightBackground.onHover.color:'var(--portal-dark-color)') ) + ` !important;`

      + `

}

.uk-link, a:not(.uk-button), .uk-navbar-dropdown-nav > li > a, .uk-navbar-nav > li > a, .loginLink,

.uk-tab > .uk-active > a, .uk-tab > * > a:focus, .uk-tab > * > a:hover {

    color:` + (this.layout.links.lightBackground.color != null ? this.layout.links.lightBackground.color : `var(--portal-main-color)`) + `     

}

.uk-link:hover, a:not(.uk-button):hover,

.uk-navbar-dropdown-nav > li > a:focus, .uk-navbar-dropdown-nav > li > a:hover, .uk-navbar-nav > li > a:hover, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li > a:active, .uk-navbar-nav > li:hover > a,

.uk-navbar-dropdown-nav > li.uk-active > a, .uk-tab > .uk-active > a, .uk-navbar-nav > li.uk-active > a, .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li.uk-active > a {

    color:` + (this.layout.links.lightBackground.onHover.color != null ? this.layout.links.lightBackground.onHover.color : `var(--portal-dark-color)`) + `     

}

.communityBorder {

    border-color: ` + (this.layout.box.borderColor != null ? this.layout.box.borderColor : `var(--portal-main-color)`) + `;

    border-style: ` + (this.layout.box.borderStyle != null ? this.layout.box.borderStyle : `solid`) + `;

    border-width: ` + (this.layout.box.borderWidth != null ? this.layout.box.borderWidth : `2`) + `px;

    border-radius: ` + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : `6`) + `px;

}

/*Panel Elements & cards*/

.communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {

    background-color: ` + (this.layout.panel.panelElements.backgroundColor != null ? this.layout.panel.panelElements.backgroundColor : `rgba(255, 255, 255, 0.5)`) + `;

    border-color: ` + (this.layout.panel.panelElements.borderColor != null ? this.layout.panel.panelElements.borderColor : `rgba(255, 255, 255, 0.5)`) + `;

}

.communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a{    

    border-color: ` +

      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.color?this.layout.links.darkBackground.color:'rgba(255, 255, 255, 0.8)') :(this.layout.links.lightBackground.color?this.layout.links.lightBackground.color:'var(--portal-main-color)') )   +

       + `;

    border-bottom: 1px solid;

}

.communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a:hover{    

    border-color: ` +

      (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.onHover.color?this.layout.links.darkBackground.onHover.color:'rgba(255, 255, 255, 0.5)') :(this.layout.links.lightBackground.onHover.color?this.layout.links.lightBackground.onHover.color:'var(--portal-dark-color)') )+

      + `;

}

.communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {

    color: ` + (this.layout.panel.panelElements.color != null ? this.layout.panel.panelElements.color : `rgba(255, 255, 255, 0.5)`) + `;

}

.uk-button:not(.uk-button-text){

  border-radius:` + (this.layout.buttons.lightBackground.borderRadius != null ? this.layout.buttons.lightBackground.borderRadius : `4`) + `px;

}

.uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary), .portal-button {

    background-color:` + (this.layout.buttons.lightBackground.backgroundColor != null ? this.layout.buttons.lightBackground.backgroundColor : `#003052`) + `;

    color: ` + (this.layout.buttons.lightBackground.color != null ? this.layout.buttons.lightBackground.color : `white`) + `;

    border-color: ` + (this.layout.buttons.lightBackground.borderColor != null ? this.layout.buttons.lightBackground.borderColor : `transparent`) + `;

    border-style: ` + (this.layout.buttons.lightBackground.borderStyle != null ? this.layout.buttons.lightBackground.borderStyle : `solid`) + `;

    border-width: ` + (this.layout.buttons.lightBackground.borderWidth != null ? this.layout.buttons.lightBackground.borderWidth : `1`) + `px;

}

.uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover, .portal-button:hover {

    background-color: ` + (this.layout.buttons.lightBackground.onHover.backgroundColor != null ? this.layout.buttons.lightBackground.onHover.backgroundColor : `#154B71`) + `;

    color: ` + (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : `white`) + `;

    border-color: ` + (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : `transparent`) + `;

}

/*Buttons*/

.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {

    background-color: `

      + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.backgroundColor?this.layout.buttons.darkBackground.backgroundColor:'white') :(this.layout.buttons.lightBackground.backgroundColor?this.layout.buttons.lightBackground.backgroundColor:'var(--portal-main-color)') )

        +`  !important;

    color: `

      + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.color?this.layout.buttons.darkBackground.color:'var(--portal-main-color)') :(this.layout.buttons.lightBackground.color?this.layout.buttons.lightBackground.color:'white') )

      +  ` !important;

    border-color: `

      + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderColor?this.layout.buttons.darkBackground.borderColor:'white') :(this.layout.buttons.lightBackground.borderColor?this.layout.buttons.lightBackground.borderColor:'var(--portal-main-color)') )

       + ` !important;

    border-style: ` +

       (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderStyle?this.layout.buttons.darkBackground.borderStyle:'solid') :(this.layout.buttons.lightBackground.borderStyle?this.layout.buttons.lightBackground.borderStyle:'solid') )

       + `  !important;

    border-width: ` +

      (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderWidth?this.layout.buttons.darkBackground.borderWidth:'1px') :(this.layout.buttons.lightBackground.borderWidth?this.layout.buttons.lightBackground.borderWidth:'1px') )

      + ` !important;

    border-radius:` +

      (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderRadius?this.layout.buttons.darkBackground.borderRadius:'4px') :(this.layout.buttons.lightBackground.borderRadius?this.layout.buttons.lightBackground.borderRadius:'4px') )+

       + ` !important;

    font-weight:`

      // (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.fontWeight?this.layout.buttons.darkBackground.fontWeight:'4px') :(this.layout.buttons.lightBackground.borderRadius?this.layout.buttons.lightBackground.borderRadius:'4px') )+

      // (this.layout.panel.buttons.fontWeight != null ? this.layout.panel.buttons.fontWeight : `600`) + `;

+`

}

.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {

    background-color: ` +

       (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.backgroundColor?this.layout.buttons.darkBackground.onHover.backgroundColor:' #eeeeee') :(this.layout.buttons.lightBackground.onHover.backgroundColor?this.layout.buttons.lightBackground.onHover.backgroundColor:'var(--portal-dark-color)') )

      + ` !important;

    color: ` +

      (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.color?this.layout.buttons.darkBackground.onHover.color:' var(--portal-main-color) ') :(this.layout.buttons.lightBackground.onHover.color?this.layout.buttons.lightBackground.onHover.color:'white') )

       + `  !important;

    border-color:`

       +(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.borderColor?this.layout.buttons.darkBackground.onHover.borderColor:' #eeeeee ') :(this.layout.buttons.lightBackground.onHover.borderColor?this.layout.buttons.lightBackground.onHover.borderColor:'var(--portal-dark-color)') )

      + `  !important;

}

.uk-navbar-dropdown {

    background-color: white;

    color: #666;

    box-shadow: 0 5px 12px rgba(0, 0, 0, .15);

    /*border:var(--portal-main-color) 1px solid;*/

}

.customTabs .uk-tab > .uk-active > a {

    border-color: var(--portal-main-color);

}

.customTabs .uk-tab > .uk-active > a {

    border-color: var(--portal-main-color);

}

.uk-tab > * > a:focus, .uk-tab > * > a:hover {

    border-color: var(--portal-dark-color);

}

`

    appendCss(css);

  }

}

import {ModuleWithProviders, NgModule} from '@angular/core';

import {CommonModule} from '@angular/common';

import {RouterModule} from '@angular/router';

import {CustomizationComponent} from "./customization.component";

import {LayoutService} from "../../openaireLibrary/services/layout.service";

@NgModule({

  imports: [

    CommonModule, RouterModule

  ],

  declarations: [

    CustomizationComponent

  ],

  exports: [

    CustomizationComponent

  ]

})

export class CustomizationModule {

  static forRoot(): ModuleWithProviders {

    return {

      ngModule: CustomizationModule,

      providers: [

      LayoutService

      ]

    }

  }

}

<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>

<div *ngIf="longView == true">

  <div class="uk-section uk-padding-remove-top tm-middle uk-container" id="tm-main">

    <div class="uk-container  uk-margin-bottom">

      <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"

              [texts]="pageContents['top']"></helper>

      <div id="invite" class=" uk-card uk-card-default uk-padding uk-margin-top">

        <div class="uk-text-large uk-text-center uk-width-5-6@l uk-width ">Invite users to subscribe</div>

        <div class="uk-margin-top">

          <errorMessages [status]="[status]" [type]="'community'"></errorMessages>

        </div>

        <div *ngIf="missingCommunityId" class="uk-alert uk-alert-warning" role="alert">{{missingCommunityId}}</div>

        <div *ngIf="successfulSentMessage" class="uk-alert uk-alert-success"

             role="alert">{{successfulSentMessage}} {{successfulSentRecipients}}</div>

        <div *ngIf="failureSentMessage" class="uk-alert uk-alert-warning"

             role="alert">{{failureSentMessage}} {{failureSentRecipients}}</div>

        <div *ngIf="inviteErrorMessage" class="uk-alert uk-alert-warning" role="alert">{{inviteErrorMessage}}</div>

        <div *ngIf="communityId != null && status == errorCodes.DONE">

          <table class="uk-table uk-align-center">

            <tbody>

            <!-- <tr>

                <td>

                </td>

                <td>

                    <li>Invite by email</li>

                </td>

            </tr> -->

            <tr>

              <td for="from" class="uk-text-bold uk-width-1-4 uk-text-right">From <span

                class="uk-text-danger uk-text-bold">*</span> :

              </td>

              <td class="uk-text-left uk-width-expand">

                <input placeholder="Type your name" type="text" (click)="resetMessages()"

                       class="form-control uk-input uk-width-large@l uk-width-medium@s" [(ngModel)]="body.fromName"

                       id="from" required>

                <div *ngIf="!body.fromName" class="uk-width-large uk-text-danger uk-text-small">Please add your name.

                </div>

              </td>

            </tr>

            <tr>

              <td for="recipients" class="uk-text-bold uk-text-right">To <span

                class="uk-text-danger uk-text-bold">*</span> :

              </td>

              <td class="uk-text-left">

                <input placeholder="email" type="text" (click)="resetMessages(); areValid=true"

                       class="form-control uk-input uk-width-large@l uk-width-medium@s" [(ngModel)]="recipients"

                       id="recipients"

                       required>

                <div *ngIf="areValid && !showAddRecipientMessage" class="uk-width-medium uk-text-muted uk-text-small">

                  separate multiple emails with a comma

                </div>

                <div *ngIf="recipients && !areValid" class="uk-width-large uk-text-danger uk-text-small">Please add

                  valid email/s.

                </div>

                <div *ngIf="isEmpty(recipients) && showAddRecipientMessage"

                     class="uk-width-large uk-text-danger uk-text-small">Please add a recipient.

                </div>

              </td>

            </tr>

            </tbody>

          </table>

          <div class="boundary-align uk-panel uk-placeholder">

            <table class="uk-table uk-align-center">

              <tbody>

              <!-- <tr>

                 <td class="uk-text-bold uk-width-1-4@xl uk-width-1-4@m uk-width-1-4@s uk-text-right"></td>

                 <td class="uk-text-left">

                      <{{body.salutation}}<br>-->

              <!-- <span *ngIf="body.fromName == ''" class="uk-text-muted">

                      <i>{{body.fromMessage}}...</i>

              </span>

              <span *ngIf="body.fromName !=''">

                      {{body.fromMessage}}

                      <b>{{body.fromName}}</b>

              </span>

         </td>

      </tr> -->

              <tr>

                <td for="email.body" class="uk-text-bold uk-text-right">Message:</td>

                <td *ngIf="allowEdit()" class="uk-text-left">

                  <ckeditor (click)="resetMessages()"

                            class="form-control" [(ngModel)]="body.paragraphs" id="message"

                            debounce="400"

                            [config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',

                                                                   extraPlugins: 'divarea'}">

                    <!-- <id="contentTag"-->

                    <!--(ready)="onReady($event)"-->

                    <!--(focus)="onFocus($event)"-->

                    <!--[config]="{uiColor: '#99000'}"-->

                    <!--(blur)="onBlur($event)"-->

                    <!--(change)="onChange($event)"-->

                  </ckeditor>

                </td>

                <td *ngIf="!allowEdit()" class="uk-text-left">

                  <div [innerHtml]="body.paragraphs"></div>

                </td>

              </tr>

              <tr>

                <td></td>

                <td class="uk-text-left">

                  <!-- {{body.closing}}<br> -->

                  {{body.signature}}

                  <span *ngIf="body.fromName == ''" class="uk-text-muted">

                                                        <i>{{body.fromMessage}}...</i>

                                                </span>

                  <span *ngIf="body.fromName !=''">

                                                        {{body.fromMessage}}

                    <b>{{body.fromName}}</b>

                                                </span>

                  <br><a href="https://www.openaire.eu">www.openaire.eu</a>

                </td>

              </tr>

              </tbody>

            </table>

          </div>

          <table class="uk-table uk-align-center">

            <tbody>

            <tr>

              <td class="uk-text-bold uk-width-3-5@xl uk-width-3-5@m uk-width-3-5@s uk-text-right"></td>

              <td>

                <div class="uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-text-danger uk-text-bold">*

                  Required fields

                </div>

              </td>

            </tr>

            <tr>

              <td class="uk-text-right"></td>

              <td>

                <div

                  class="uk-grid-margin uk-first-column uk-align-center uk-text-left uk-padding uk-padding-remove-top uk-padding-remove-bottom">

                  <button class="uk-button portal-button" (click)="invite()">Invite</button>

                </div>

              </td>

            </tr>

            </tbody>

          </table>

          <div class="uk-text-left">

            <span uk-icon="chevron-left"></span><span class="uk-margin-small-left">

                                        <a [queryParams]="communityIdParam" routerLinkActive="router-link-active"

                                           routerLink="/">Back</a>

                                </span>

          </div>

        </div>

      </div>

      <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"

              [texts]="pageContents['bottom']"></helper>

    </div>

  </div>

</div>

<div class="uk-inline">

  <button *ngIf="!longView" [class]=" ((buttonSizeSmall)?'uk-button-small':'') + ' uk-button  uk-button-primary'">

    Invite users

  </button>

  <div uk-dropdown="mode: click" class="uk-form uk-margin-small uk-alert uk-background-default" id="toggle-usage">

    <div class="uk-margin-top">

      <errorMessages [status]="[status]" [type]="'community'"></errorMessages>

    </div>

    <div *ngIf="missingCommunityId" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"

         role="alert">{{missingCommunityId}}</div>

    <div *ngIf="successfulSentMessage" class="uk-width-large uk-text-success uk-text-small uk-margin-top"

         role="alert">{{successfulSentMessage}} {{successfulSentRecipients}}</div>

    <div *ngIf="failureSentMessage" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"

         role="alert">{{failureSentMessage}} {{failureSentRecipients}}</div>

    <div *ngIf="inviteErrorMessage" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"

         role="alert">{{inviteErrorMessage}}</div>

    <div *ngIf="recipients && !areValid" class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add

      valid email/s.

    </div>

    <div *ngIf="isEmpty(recipients) && showAddRecipientMessage"

         class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add a recipient.

    </div>

    <input (click)="resetMessages(); areValid=true" placeholder="Type e-mails" type="text"

           class="form-control uk-input uk-form-small uk-form" [(ngModel)]="recipients" id="recipients"

           required>

    <div class="uk-width-medium uk-text-muted uk-text-small">separate with commas</div>

    <div class="uk-margin-small-top uk-text-center ">

      <button class=" uk-button portal-button ignoreCommunityPanelBackground uk-button-small " (click)="invite()">Invite</button>

      {{" "}}

      <a class=" uk-button uk-button-default uk-button-small ignoreCommunityPanelBackground " [queryParams]="communityIdParam"

         routerLinkActive="router-link-active" routerLink="/invite">

                        <span class="uk-margin-xsmall-left uk-icon">

                            <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="cog"

                                 ratio="0.8"><circle fill="none" stroke="#000" cx="9.997" cy="10" r="3.31"></circle><path

                              fill="none" stroke="#000"

                              d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path></svg>

                          </span>

        Customize

      </a>

    </div>

  </div>

</div>

import {Component, Input, OnInit} from '@angular/core';

import {FormBuilder} from "@angular/forms";

import {ActivatedRoute, Router} from '@angular/router';

import {ConnectHelper} from '../../../openaireLibrary/connect/connectHelper';

import {Email} from '../../../openaireLibrary/utils/email/email';

import {Body} from '../../../openaireLibrary/utils/email/body';

import {Validator} from '../../../openaireLibrary/utils/email/validator';

import {Composer} from '../../../openaireLibrary/utils/email/composer';

import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';

import {EmailService} from '../../../openaireLibrary/utils/email/email.service';

import {CommunityService} from "../../../openaireLibrary/connect/community/community.service";

import {ErrorCodes} from '../../../openaireLibrary/utils/properties/errorCodes';

import {ErrorMessagesComponent} from '../../../openaireLibrary/utils/errorMessages.component';

import {Session, User} from '../../../openaireLibrary/login/utils/helper.class';

import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class";

import {HelperService} from "../../../openaireLibrary/utils/helper/helper.service";

import {Meta, Title} from "@angular/platform-browser";

import {SEOService} from "../../../openaireLibrary/sharedComponents/SEO/SEO.service";

import {PiwikService} from "../../../openaireLibrary/utils/piwik/piwik.service";

import {PiwikHelper} from "../../piwikHelper";

import {UserManagementService} from "../../../openaireLibrary/services/user-management.service";

@Component({

  selector: 'invite',

  templateUrl: './invite.component.html',

})

export class InviteComponent implements OnInit {

  @Input() longView: boolean = true;

  @Input() communityId = null;

  @Input() buttonSizeSmall = true;

  private properties: EnvProperties = null;

  public community = null;

  //public showLoading: boolean = true;

  public errorMessage: string = '';

  public successfulSentMessage: string = '';

  public successfulSentRecipients: string[] = [];

  public failureSentMessage: string = '';

  public failureSentRecipients: string[] = [];

  public inviteErrorMessage: string = '';

  public missingCommunityId: string = '';

  public showAddRecipientMessage: boolean = false;

  public showAddNameMessage: boolean = false;

  public email: Email;

  public body: Body;

  public recipients: string;

  public fullname: string;

  public areValid: boolean = true;

  private ckeditorContent: string;

  // public defaultBody ='';

  public communityIdParam = {};

  public status: number = 1;

  public errorCodes: ErrorCodes;

  private errorMessages: ErrorMessagesComponent;

  public pageContents = null;

  public divContents = null;

  public url: string = null;

  public pageTitle: string = "Invite";

  piwiksub: any;

  private user: User;

  constructor(

    private route: ActivatedRoute,

    private _router: Router,

    public _fb: FormBuilder,

    private _emailService: EmailService,

    private _communityService: CommunityService,

    private helper: HelperService,

    private _meta: Meta,

    private _title: Title,

    private seoService: SEOService,

    private _piwikService: PiwikService,

    private userManageService: UserManagementService) {

    this.errorCodes = new ErrorCodes();

    this.errorMessages = new ErrorMessagesComponent();

    this.status = this.errorCodes.LOADING;

  }

  public ngOnInit() {

    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {

      this.properties = data.envSpecific;

      this.errorMessage = "";

      this.missingCommunityId = "";

      this.status = this.errorCodes.LOADING;

      this.userManageService.getUserInfo(this.properties.userInfoUrl).subscribe(user => {

        this.user = user;

        this.route.queryParams.subscribe(

          communityId => {

            //if(!this.communityId && typeof document !== 'undefined'){

            this.communityId = ConnectHelper.getCommunityFromDomain(this.properties.domain);

            if (!this.communityId) {

              this.communityId = communityId['communityId'];

            }

            if (this.longView) {

              if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {

                this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, PiwikHelper.getSiteId(this.communityId, this.properties.environment)).subscribe();

              }

              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, invite");

            }

            this.communityIdParam = (this.properties.environment != "development") ? {} : {communityId: this.communityId};

            if (this.communityId != null && this.communityId != '') {

              //this.getDivContents();

              this.getPageContents();

              this._communityService.getCommunity(this.properties, this.properties.communityAPI + this.communityId).subscribe(

                community => {

                  this.community = community;

                  this.fullname = this.user.fullname;

                  //console.log("Fullname from session " + Session.getUserFullName());

                  this.body = Composer.initializeInvitationsBody(this.communityId, this.community.title, this.fullname);

                  this.email = Composer.initializeInvitationsEmail(community.title);

                  this.recipients = "";

                  this.status = this.errorCodes.DONE;

                },

                error => {

                  //this.handleError(error)

                  this.handleError("Error getting community with id: " + this.communityId, error);

                  this.status = this.errorMessages.getErrorCode(error.status);

                }

              );

            } else {

              this.status = this.errorCodes.DONE;

              this.missingCommunityId = "There is no community selected!";

            }

          });

        HelperFunctions.scroll();

      });

    });

  }

  ngOnDestroy() {

    if (this.piwiksub) {

      this.piwiksub.unsubscribe();

    }

  }

  private getPageContents() {

    this.helper.getPageHelpContents(this._router.url, this.properties, this.communityId).subscribe(contents => {

      this.pageContents = contents;

    })

  }

  private getDivContents() {

    this.helper.getDivHelpContents(this._router.url, this.properties, this.communityId).subscribe(contents => {

      this.divContents = contents;

    })

  }

  public invite() {

    this.successfulSentMessage = "";

    this.failureSentMessage = "";

    this.inviteErrorMessage = "";

    this.status = this.errorCodes.LOADING;

    HelperFunctions.scroll();

    if (!this.isEmpty(this.recipients) && this.body.fromName != "") {

      if (this.validateEmails()) {

        this.composeEmail();

        this._emailService.sendEmail(this.properties.adminToolsAPIURL + "/sendMail/", this.email).subscribe(

          res => {

            this.status = this.errorCodes.DONE;

            //console.log("Emails Sent: ",res);

            /*if(res == 0) {

            } else if(res > 1) {

              this.successfulSentMessage = res + " emails sent successfully!";

            } else {

              this.successfulSentMessage = res + " email sent successfully!";

            }*/

            if (res['success']) {

              this.successfulSentMessage = "Email sent successfully to: ";

              this.successfulSentRecipients = res['success'];

            }

            if (res['failure']) {

              this.failureSentMessage = "There was an error sending email to: ";

              this.failureSentRecipients = res['failure'];

            }

            this.body = Composer.initializeInvitationsBody(this.communityId, this.community.title, this.fullname);

            this.email = Composer.initializeInvitationsEmail(this.community.title);

            this.recipients = "";

          },

          error => {

            //console.log(error);

            this.handleError("Error inviting emails: " + JSON.stringify(this.recipients) + " to community with id: " + this.communityId + " by: " + this.fullname, error);

            this.status = this.errorCodes.DONE;

            this.inviteErrorMessage = "There was an error sending emails. Please try again.";

          }

        );

      } else {

        this.email.recipients = [];

        this.status = this.errorCodes.DONE;

      }

    } else {

      this.showAddRecipientMessage = true;

      this.status = this.errorCodes.DONE;

    }

  }

  public isEmpty(data: string): boolean {

    if (data != undefined && !data.replace(/\s/g, '').length)

      return true;

    else

      return false;

  }

  public resetMessages() {

    this.errorMessage = "";

    this.successfulSentMessage = "";

    this.failureSentMessage = "";

    this.inviteErrorMessage = "";

  }

  public validateEmails(): boolean {

    if (this.parseEmails()) {

      if (Validator.hasValidEmails(this.email.recipients)) {

        return this.areValid;

      }

    }

    this.areValid = false;

    return this.areValid;

  }

  public parseEmails(): boolean {

    let email = new Array<string>();

    // remove spaces

    this.recipients = this.recipients.replace(/\s/g, '');

    // remove commas

    email = this.recipients.split(",");

    // remove empty fields

    for (let i = 0; i < email.length; i++) {

      if (!(email[i] == "")) {

        this.email.recipients.push(email[i]);

      }

    }

    return true;

  }

  public composeEmail() {

    this.email.body = Composer.formatEmailBodyForInvitation(this.body);

  }

  /*

    public handleError(error) {

      if(error.status == '401') {

        this.status = this.errorCodes.FORBIDDEN;

      } else if(error.status == '403') {

        this.status = this.errorCodes.FORBIDDEN;

      } else if(error.status == '404') {

        this.status = this.errorCodes.NOT_FOUND;

      } else if(error.status == '500') {

        this.status = this.errorCodes.ERROR;

      } else {

        this.status = this.errorCodes.NOT_AVAILABLE;

      }

        console.log('Server responded: ' + error);

    }

  */

  allowEdit() {

    if (!this.user) {

      return false;

    }

    var email = this.user.email;

    var index = -1;

    if (email && this.community != null && this.community.managers != null) {

      index = this.community.managers.indexOf(email);

    }

    return Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || index != -1;

  }

  private handleError(message: string, error) {

    console.error("Invite Page (or component): " + message, error);

  }

  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'");

  }

}

import {NgModule}                   from '@angular/core';

import {CommonModule}               from '@angular/common';

import {FormsModule}                from '@angular/forms';

import {RouterModule}               from '@angular/router';

import {CKEditorModule}             from 'ng2-ckeditor';

import {InviteComponent}            from './invite.component';

import {InviteRoutingModule}        from './invite-routing.module';

import {PreviousRouteRecorder}      from '../../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';

import {LoginGuard} from '../../../openaireLibrary/login/loginGuard.guard';

import {EmailService}               from '../../../openaireLibrary/utils/email/email.service';

import {CommunityService}           from '../../../openaireLibrary/connect/community/community.service';

import {ErrorMessagesModule}        from '../../../openaireLibrary/utils/errorMessages.module';

import {IsRouteEnabled} from "../../../openaireLibrary/error/isRouteEnabled.guard";

import {HelperModule} from "../../../openaireLibrary/utils/helper/helper.module";

import {Schema2jsonldModule} from "../../../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";

import {SEOServiceModule} from "../../../openaireLibrary/sharedComponents/SEO/SEOService.module";

import {PiwikService} from "../../../openaireLibrary/utils/piwik/piwik.service";

@NgModule({

  imports: [

    CommonModule, FormsModule, RouterModule, InviteRoutingModule, CKEditorModule, ErrorMessagesModule,

    HelperModule, Schema2jsonldModule, SEOServiceModule

  ],

  declarations: [

    InviteComponent

  ],

  providers: [

    LoginGuard, PreviousRouteRecorder,

    EmailService, CommunityService, IsRouteEnabled,

    PiwikService

  ],

  exports: [

    InviteComponent

  ]

})

export class InviteModule { }

import {NgModule} from '@angular/core';

import {RouterModule} from '@angular/router';

import {InviteComponent} from './invite.component';

import {LoginGuard} from '../../../openaireLibrary/login/loginGuard.guard';

import {PreviousRouteRecorder} from '../../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';

import {IsRouteEnabled} from "../../../openaireLibrary/error/isRouteEnabled.guard";

@NgModule({

  imports: [

    RouterModule.forChild([

     	{ path: '', component: InviteComponent, canActivate: [LoginGuard, /*IsRouteEnabled*/], canDeactivate: [PreviousRouteRecorder] }

    ])

  ]

})

export class InviteRoutingModule { }

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82.278 58.7"><defs><style>.a{fill:#fff;}.a,.b{stroke:#ebb13e;stroke-miterlimit:10;stroke-width:3px;}.b{fill:none;}</style></defs><g transform="translate(1 2)"><g transform="translate(-9.464 -954.4)"><path class="a" d="M60,979.6a12.864,12.864,0,0,0,1.9-2.1.91.91,0,0,0,0-1.2c-.9-1.1-1.5-1.9-1.9-2.5.2-.5.4-1,.6-1.4l3.3-.5a.9.9,0,0,0,.8-1l-.1-4.2a1.063,1.063,0,0,0-.9-1l-3.2-.5a11.111,11.111,0,0,0-.7-1.6c.1-.1.2-.3.4-.4a5.548,5.548,0,0,0,.6-.8l.3-.4a6.783,6.783,0,0,0,.6-.9,1.083,1.083,0,0,0,0-1.1,19.927,19.927,0,0,0-3.2-3.3,1.059,1.059,0,0,0-1.3-.1l-2.6,2c-.5-.2-.9-.4-1.4-.6l-.5-3.3a.974.974,0,0,0-1-.8H47.5a.974.974,0,0,0-1,.8c-.2,1.1-.4,2.2-.5,3.4l-1.5.6-2.4-1.9c-.1-.1-.2-.1-.3-.2-.6-.3-1.1,0-2.4,1.3a17.966,17.966,0,0,0-1.9,2,.91.91,0,0,0,0,1.2l.2.2a22.13,22.13,0,0,1,1.7,2.3,4.714,4.714,0,0,0-.6,1.5l-3.4.6a.9.9,0,0,0-.8,1l.1,4.2a1.063,1.063,0,0,0,.9,1l3.3.5a11.111,11.111,0,0,0,.7,1.6c-.2.3-.6.7-.9,1.2l-.3.4a6.783,6.783,0,0,0-.6.9,1.083,1.083,0,0,0,0,1.1,32.6,32.6,0,0,0,3.1,3.3,1.23,1.23,0,0,0,1.3.1l2.6-2a11.209,11.209,0,0,0,1.3.5l.5,3.3a.974.974,0,0,0,1,.8h4.2a1.077,1.077,0,0,0,1-.8v-.1a30.679,30.679,0,0,0,.4-3.1l1.5-.6,3,2.5Z"/><path class="a" d="M50.1,965.6a2.9,2.9,0,1,1-2.9,2.9A3.039,3.039,0,0,1,50.1,965.6Z"/></g><circle class="a" cx="7.435" cy="7.435" r="7.435" transform="translate(61.335 13.246)"/><circle class="a" cx="7.435" cy="7.435" r="7.435" transform="translate(4.169 13.246)"/><path class="b" d="M63.951,58.112h0A16.5,16.5,0,0,0,47.438,41.6H34.112A16.5,16.5,0,0,0,17.6,58.112h0" transform="translate(-0.588 -1.412)"/><path class="b" d="M65.5,41.6h0A16.567,16.567,0,0,1,82.012,58.112h0" transform="translate(-2.234 -1.412)"/><path class="b" d="M17.012,41.6h0A16.567,16.567,0,0,0,.5,58.112h0" transform="translate(0 -1.412)"/></g></svg>