[Library | Trunk]: 1. Add compose email for invitation in monitor dashboard. 2. Add messages on invitation modals.

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

dashboard/users/dashboard-users.component.html

@@ -4,6 +4,6 @@
     <li [class.uk-active]="tab === 'member'"><a (click)="changeTab('member')"><span class="title">Members</span></a></li>
   </ul>
 </ng-template>
-<role-users [id]="id" [type]="type" [name]="name" [link]="link" [isPortalAdmin]="isPortalAdmin" [role]="tab">
+<role-users [id]="id" [type]="type" [name]="name" [link]="link" [isPortalAdmin]="isPortalAdmin" [role]="tab" [messages]="messages">
   <ng-container [ngTemplateOutlet]="tabs"></ng-container>
 </role-users>

dashboard/users/dashboard-users.component.ts

@@ -16,6 +16,8 @@ export class DashboardUsersComponent implements OnInit{
   public name: string;
   @Input()
   public link: string;
+  @Input()
+  public messages: Map<"member" | "manager", string> = null;
   public user: User;
   public tab: "manager" | "member" = 'manager';
   

dashboard/users/role-users/role-users.component.html

@@ -55,7 +55,7 @@
                 <span class="uk-text-bold">{{(showActive) ? item.email : item}}</span>
               </div>
             </div>
-            <div *ngIf="isPortalAdmin" class="uk-width-expand">
+            <div *ngIf="isPortalAdmin || !showActive" class="uk-width-expand">
               <div class="uk-padding-small uk-padding-remove-horizontal uk-flex uk-flex-center">
                 <a (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle">
                   <icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon>
@@ -70,10 +70,15 @@
   </div>
 </div>
 <modal-alert #inviteModal (alertOutput)="invite()" [okDisabled]="invited && invited.invalid">
-  <div *ngIf="invited" class="uk-padding uk-padding-remove-horizontal uk-text-center">
+  <div class="uk-padding uk-padding-remove-horizontal">
+    <div *ngIf="messages && messages.get(role)" class="uk-margin-medium-bottom uk-text-small">
+      <div [innerHTML]="messages.get(role) | safeHtml"></div>
+    </div>
+    <div *ngIf="invited" class="uk-text-center">
       <div dashboard-input [formInput]="invited"
            placeholder="Write an email..."></div>
     </div>
+  </div>
 </modal-alert>
 <modal-alert #deleteModal (alertOutput)="deleteActive()">
   <div *ngIf="selectedUser" class="uk-padding-small uk-padding-remove-horizontal">

dashboard/users/role-users/role-users.component.ts

@@ -9,6 +9,7 @@ import {Session} from "../../../login/utils/helper.class";
 import {UserManagementService} from "../../../services/user-management.service";
 import {Router} from "@angular/router";
 import {LoginErrorCodes} from "../../../login/utils/guardHelper.class";
+import {Composer} from "../../../utils/email/composer";
 
 declare var UIkit;
 
@@ -28,7 +29,10 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
   public link: string;
   @Input()
   public isPortalAdmin: boolean = false;
-  @Input() role: "member" | "manager" = "manager";
+  @Input()
+  public role: "member" | "manager" = "manager";
+  @Input()
+  public messages: Map<"member" | "manager", string> = null;
   public active: any[];
   public pending: any[];
   public showActive: boolean = true;
@@ -170,10 +174,10 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
     this.showActive = false;
     this.loadPending = true;
     let details = {
-      name: this.name,
-      link: this.link
+      link: this.link,
+      email: Composer.composeEmailForMonitorDashboard(this.name, this.invited.value, this.role)
     }
-    this.userRegistryService.invite(this.type, this.id, this.invited.value, details, this.role).subscribe(() => {
+    this.userRegistryService.invite(this.type, this.id, details, this.role).subscribe(() => {
       this.error = null;
       if (!this.pending.includes(this.invited.value)) {
         this.pending.push(this.invited.value);

dashboard/users/role-users/role-users.module.ts

@@ -10,9 +10,10 @@ import {person_add, remove_circle_outline} from "../../../utils/icons/icons";
 import {IconsModule} from "../../../utils/icons/icons.module";
 import {InputModule} from "../../../sharedComponents/input/input.module";
 import {PageContentModule} from "../../sharedComponents/page-content/page-content.module";
+import {SafeHtmlPipeModule} from "../../../utils/pipes/safeHTMLPipe.module";
 
 @NgModule({
-  imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule, PageContentModule],
+  imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule, PageContentModule, SafeHtmlPipeModule],
   declarations: [RoleUsersComponent],
   exports: [RoleUsersComponent],
   providers: [EmailService]

services/user-registry.service.ts

@@ -37,9 +37,9 @@ export class UserRegistryService {
       encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/' + role + '/' + encodeURIComponent(email), CustomOptions.registryOptions());
   }
   
-  public invite(type: string, id: string, email: string, details: any, role: "member" | "manager" = "manager"): Observable<any[]> {
+  public invite(type: string, id: string, details: any, role: "member" | "manager" = "manager"): Observable<any[]> {
     return this.http.post<any>(properties.registryUrl + 'invite/' +
-      encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/' + role + '/' + encodeURIComponent(email), details,
+      encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/' + role, details,
       CustomOptions.registryOptions()).pipe(map((response: any) => response.response));
   }
   

utils/email/composer.ts

@@ -1,6 +1,7 @@
 import {Email} from "./email";
 import {Body} from "./body";
 import {FormArray} from "@angular/forms";
+import {properties} from "../../../../environments/environment";
 
 export class Composer {
   private static noteBodySize = "14px";
@@ -225,4 +226,23 @@ export class Composer {
 
     return email = {body: "", subject: this.subjectPrefix + communityTitle, recipients: []};
   }
+  
+  public static composeEmailForMonitorDashboard(name: string, recipient: string, role: "manager" | "member") {
+    let email: Email = new Email();
+    email.subject = 'OpenAIRE Monitor Dashboard | ' + name;
+    email.body = '<p>Dear ((__user__)),</p>' +
+      '<p>You have been invited to be a ' + role +' of the OpenAIRE Monitor Dashboard for the ' + name + '.</p>' +
+      '<p>Click <a href="((__link__))">this URL</a> and use the verification code below to accept the invitation.</p>' +
+      '<p>The verification code is <b>((__code__))</b>.</p>' +
+      (role === "manager"?
+      '<p>As a manager of the OpenAIRE Monitor Dashboard, you will have access to the administration part of the dashboard, ' +
+      'where you will be able to customize and manage the profile of the ' + name + '.</p>':
+      '<p>As a member of the OpenAIRE Monitor Dashboard, you will have access to the restricted access areas of the profile for the ' + name + '.') +
+      '<p>Please contact us at <a href="mailto:' + properties.helpdeskEmail+'">' +  properties.helpdeskEmail +
+      '</a> if you have any questions or concerns.</p>' +
+      '<p>Kind Regards<br>The OpenAIRE Team</p>' +
+      '<p><a href="' + properties.domain + '">OpenAIRE Monitor</a></p>'
+    email.recipient = recipient;
+    return email;
+  }
 }

utils/email/email.ts

@@ -1,5 +1,6 @@
 export class Email {
   body: string;
   subject: string;
-  recipients: string[];
+  recipients?: string[];
+  recipient?: string;
 }