[Library | Trunk]: Add role-verification and managers-members admin pages

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

dashboard/users/dashboard-users.component.html

@@ -0,0 +1,14 @@
+<div>
+  <ul class="uk-tab" uk-tab>
+    <li [class.uk-active]="tab === 'managers'"><a (click)="changeTab('managers')">Managers</a></li>
+    <li [class.uk-active]="tab === 'members'"><a (click)="changeTab('members')">Members</a></li>
+  </ul>
+  <div class="uk-margin-medium-top">
+    <div *ngIf="tab === 'managers'">
+      <managers [id]="id" [type]="type" [name]="name" [link]="link"></managers>
+    </div>
+    <div *ngIf="tab === 'members'">
+      <members [id]="id" [type]="type" [name]="name" [link]="link"></members>
+    </div>
+  </div>
+</div>

dashboard/users/dashboard-users.component.ts

@@ -0,0 +1,28 @@
+import {Component, Input, OnInit} from "@angular/core";
+
+@Component({
+  selector: 'dashboard-users',
+  templateUrl: 'dashboard-users.component.html'
+})
+export class DashboardUsersComponent implements OnInit{
+  
+  @Input()
+  public id: string;
+  @Input()
+  public type: string;
+  @Input()
+  public name: string;
+  @Input()
+  public link: string;
+  public tab: "managers" | "members" = 'managers';
+  
+  constructor() {
+  }
+  
+  ngOnInit() {
+  }
+  
+  changeTab(tab: "managers" | "members") {
+    this.tab = tab;
+  }
+}

dashboard/users/dashboard-users.module.ts

@@ -0,0 +1,12 @@
+import {NgModule} from "@angular/core";
+import {DashboardUsersComponent} from "./dashboard-users.component";
+import {CommonModule} from "@angular/common";
+import {ManagersModule} from "./managers/managers.module";
+import {MembersModule} from "./members/members.module";
+
+@NgModule({
+  imports: [CommonModule, ManagersModule, MembersModule],
+  declarations: [DashboardUsersComponent],
+  exports: [DashboardUsersComponent]
+})
+export class DashboardUsersModule {}

dashboard/users/managers/managers.component.html

@@ -0,0 +1,53 @@
+<div>
+  <div *ngIf="error" class="uk-alert uk-alert-danger uk-flex uk-flex-top">
+    <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
+    <div>
+      {{error}}
+    </div>
+  </div>
+  <div class="uk-grid" uk-grid>
+    <div class="uk-width-expand">
+      <ul class="uk-subnav uk-subnav-pill">
+        <li [class.uk-active]="showManagers" (click)="showManagers = true">
+          <a>Managers</a>
+        </li>
+        <li [class.uk-active]="!showManagers" (click)="showManagers = false">
+          <a>Pending Managers</a>
+        </li>
+      </ul>
+    </div>
+    <div class="uk-width-1-5 uk-flex uk-flex-right">
+      <button class="uk-button uk-button-primary" (click)="openInviteModal()">Invite Manager</button>
+    </div>
+  </div>
+  <div *ngIf="loadManagers || loadPending" class="uk-margin-large-top">
+    <loading></loading>
+  </div>
+  <div *ngIf="!loadManagers && !loadPending" class="uk-margin-medium-top">
+    <div *ngIf="(showManagers && managers.length == 0) || (!showManagers && pending.length == 0)"
+         class="uk-card uk-card-default uk-padding uk-card-body uk-text-center">
+      <div *ngIf="showManagers">No managers for {{name}}</div>
+      <div *ngIf="!showManagers">No pending manager invitations for {{name}}</div>
+    </div>
+    <div *ngIf="(showManagers && managers.length > 0) || (!showManagers && pending.length > 0)"
+         class="uk-overflow-auto uk-height-max-large uk-padding-small">
+      <div class="uk-card uk-card-default uk-card-body" *ngFor="let item of (showManagers)?managers:pending">
+        <div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid>
+          <div class="uk-width-3-4">Email: {{(showManagers) ? item.email : item}}</div>
+          <div *ngIf="properties.environment === 'development'" class="uk-width-expand uk-text-center">
+            <a (click)="openDeleteModal(item)" class="uk-icon-button remove uk-button-danger"
+               uk-icon="icon: close; ratio: 1" title="Remove"></a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<modal-alert #inviteManagerModal (alertOutput)="inviteManager()" [okDisabled]="invited && invited.invalid">
+  <div *ngIf="invited" class="uk-padding uk-text-center">
+    <span class="uk-text-bold">Email: </span>
+    <input class="uk-input space uk-width-medium" [class.uk-form-danger]="invited.invalid" [formControl]="invited">
+  </div>
+</modal-alert>
+<modal-alert #deleteManagerModal (alertOutput)="deleteManager()"></modal-alert>
+<modal-alert #deletePendingModal (alertOutput)="deletePendingManager()"></modal-alert>

dashboard/users/managers/managers.component.ts

@@ -0,0 +1,128 @@
+import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {Subscription} from 'rxjs/Rx';
+import {FormBuilder, FormControl, Validators} from '@angular/forms';
+import {AlertModal} from "../../../utils/modal/alert";
+import {UserRegistryService} from "../../../services/user-registry.service";
+import {EnvProperties} from "../../../utils/properties/env-properties";
+import {properties} from "../../../../../environments/environment";
+
+@Component({
+  selector: 'managers',
+  templateUrl: 'managers.component.html'
+})
+export class ManagersComponent implements OnInit, OnDestroy {
+  
+  @Input()
+  public id: string;
+  @Input()
+  public type: string;
+  @Input()
+  public name: string;
+  @Input()
+  public link: string;
+  public managers: any[];
+  public pending: any[];
+  public showManagers: boolean = true;
+  public subs: any[] = [];
+  public loadManagers: boolean = true;
+  public loadPending: boolean = true;
+  public error: string;
+  public selectedUser: string = null;
+  public invited: FormControl;
+  public properties: EnvProperties = properties;
+  @ViewChild('inviteManagerModal') inviteManagerModal: AlertModal;
+  @ViewChild('deleteManagerModal') deleteManagerModal: AlertModal;
+  @ViewChild('deletePendingModal') deletePendingModal: AlertModal;
+  
+  constructor(private userRegistryService: UserRegistryService,
+              private fb: FormBuilder) {
+  }
+  
+  ngOnInit() {
+    this.subs.push(this.userRegistryService.getManagersEmail(this.type, this.id).subscribe(managers => {
+      this.managers = managers;
+      this.loadManagers = false;
+    }, error => {
+      this.managers = [];
+      this.error = error.error.response;
+      this.loadManagers = false;
+    }));
+    this.subs.push(this.userRegistryService.getPendingManagers(this.type, this.id).subscribe(pending => {
+      this.pending = pending;
+      this.loadPending = false;
+    }, error => {
+      this.managers = [];
+      this.error = error.error.response;
+      this.loadManagers = false;
+    }));
+  }
+  
+  ngOnDestroy() {
+    this.subs.forEach(sub => {
+      if (sub instanceof Subscription) {
+        sub.unsubscribe();
+      }
+    });
+  }
+  
+  openDeleteModal(item: any) {
+    if (this.showManagers) {
+      this.selectedUser = item.email;
+      this.deleteManagerModal.alertTitle = 'Delete ' + item.email + ' from managers';
+      this.deleteManagerModal.open();
+    } else {
+      this.selectedUser = item;
+      this.deletePendingModal.alertTitle = 'Cancel invitation for user ' + item;
+      this.deletePendingModal.open();
+    }
+  }
+  
+  openInviteModal() {
+    this.inviteManagerModal.alertTitle = 'Invite user to join ' + this.name + ' as manager';
+    this.inviteManagerModal.okButtonLeft = false;
+    this.invited = this.fb.control('', [Validators.required, Validators.email]);
+    this.inviteManagerModal.open();
+  }
+  
+  deleteManager() {
+    this.loadManagers = true;
+    this.userRegistryService.removeManager(this.type, this.id, this.selectedUser).subscribe(() => {
+      this.managers = this.managers.filter(manager => manager.email != this.selectedUser);
+      this.loadManagers = false;
+      this.error = null;
+    }, error => {
+      this.error = error.error.response;
+      this.loadManagers = false;
+    });
+  }
+  
+  deletePendingManager() {
+    this.loadPending = true;
+    this.userRegistryService.cancelManagerInvitation(this.type, this.id, this.selectedUser).subscribe(() => {
+      this.pending = this.pending.filter(manager => manager != this.selectedUser);
+      this.error = null;
+      this.loadPending = false;
+    }, error => {
+      this.error = error.error.response;
+      this.loadPending = false;
+    });
+  }
+  
+  inviteManager() {
+    this.loadManagers = true;
+    let details = {
+      name: this.name,
+      link: this.link
+    }
+    this.userRegistryService.inviteManager(this.type, this.id, this.invited.value, details).subscribe(() => {
+      this.error = null;
+      if (!this.pending.includes(this.invited.value)) {
+        this.pending.push(this.invited.value);
+      }
+      this.loadManagers = false;
+    }, error => {
+      this.error = error.error.response;
+      this.loadManagers = false;
+    })
+  }
+}

dashboard/users/managers/managers.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ManagersComponent} from './managers.component';
+import {ReactiveFormsModule} from '@angular/forms';
+import {EmailService} from "../../../utils/email/email.service";
+import {AlertModalModule} from "../../../utils/modal/alertModal.module";
+import {LoadingModule} from "../../../utils/loading/loading.module";
+
+@NgModule({
+  imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule],
+  declarations: [ManagersComponent],
+  exports: [ManagersComponent],
+  providers: [EmailService]
+})
+export class ManagersModule {}

dashboard/users/members/members.component.html

@@ -0,0 +1,53 @@
+<div>
+  <div *ngIf="error" class="uk-alert uk-alert-danger uk-flex uk-flex-top">
+    <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
+    <div>
+      {{error}}
+    </div>
+  </div>
+  <div class="uk-grid" uk-grid>
+    <div class="uk-width-expand">
+      <ul class="uk-subnav uk-subnav-pill">
+        <li [class.uk-active]="showMembers" (click)="showMembers = true">
+          <a>Members</a>
+        </li>
+        <li [class.uk-active]="!showMembers" (click)="showMembers = false">
+          <a>Pending Members</a>
+        </li>
+      </ul>
+    </div>
+    <div class="uk-width-1-5 uk-flex uk-flex-right">
+      <button class="uk-button uk-button-primary" (click)="openInviteModal()">Invite Member</button>
+    </div>
+  </div>
+  <div *ngIf="loadMembers || loadPending" class="uk-margin-large-top">
+    <loading></loading>
+  </div>
+  <div *ngIf="!loadMembers && !loadPending" class="uk-margin-medium-top">
+    <div *ngIf="(showMembers && members.length == 0) || (!showMembers && pending.length == 0)"
+         class="uk-card uk-card-default uk-padding uk-card-body uk-text-center">
+      <div *ngIf="showMembers">No members for {{name}}</div>
+      <div *ngIf="!showMembers">No pending member invitations for {{name}}</div>
+    </div>
+    <div *ngIf="(showMembers && members.length > 0) || (!showMembers && pending.length > 0)"
+         class="uk-overflow-auto uk-height-max-large uk-padding-small">
+      <div class="uk-card uk-card-default uk-card-body" *ngFor="let item of (showMembers)?members:pending">
+        <div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid>
+          <div class="uk-width-3-4">Email: {{(showMembers) ? item.email : item}}</div>
+          <div *ngIf="properties.environment === 'development'" class="uk-width-expand uk-text-center">
+            <a (click)="openDeleteModal(item)" class="uk-icon-button remove uk-button-danger"
+               uk-icon="icon: close; ratio: 1" title="Remove"></a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<modal-alert #inviteMemberModal (alertOutput)="inviteMember()" [okDisabled]="invited && invited.invalid">
+  <div *ngIf="invited" class="uk-padding uk-text-center">
+    <span class="uk-text-bold">Email: </span>
+    <input class="uk-input space uk-width-medium" [class.uk-form-danger]="invited.invalid" [formControl]="invited">
+  </div>
+</modal-alert>
+<modal-alert #deleteMemberModal (alertOutput)="deleteMember()"></modal-alert>
+<modal-alert #deletePendingModal (alertOutput)="deletePendingMember()"></modal-alert>

dashboard/users/members/members.component.ts

@@ -0,0 +1,128 @@
+import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {Subscription} from 'rxjs/Rx';
+import {UserRegistryService} from "../../../services/user-registry.service";
+import {EnvProperties} from "../../../utils/properties/env-properties";
+import {properties} from "../../../../../environments/environment";
+import {FormBuilder, FormControl, Validators} from "@angular/forms";
+import {AlertModal} from "../../../utils/modal/alert";
+
+@Component({
+  selector: 'members',
+  templateUrl: 'members.component.html'
+})
+export class MembersComponent implements OnInit, OnDestroy {
+  
+  @Input()
+  public id: string;
+  @Input()
+  public type: string;
+  @Input()
+  public name: string;
+  @Input()
+  public link: string;
+  public members: any[];
+  public pending: any[];
+  public showMembers: boolean = true;
+  public subs: any[] = [];
+  public loadMembers: boolean = true;
+  public loadPending: boolean = true;
+  public error: string;
+  public selectedUser: string = null;
+  public invited: FormControl;
+  public properties: EnvProperties = properties;
+  @ViewChild('inviteMemberModal') inviteMemberModal: AlertModal;
+  @ViewChild('deleteMemberModal') deleteMemberModal: AlertModal;
+  @ViewChild('deletePendingModal') deletePendingModal: AlertModal;
+  
+  constructor(private userRegistryService: UserRegistryService,
+              private fb: FormBuilder) {
+  }
+  
+  ngOnInit() {
+    this.subs.push(this.userRegistryService.getMembersEmail(this.type, this.id).subscribe(members => {
+      this.members = members;
+      this.loadMembers = false;
+    }, error => {
+      this.members = [];
+      this.error = error.error.response;
+      this.loadMembers = false;
+    }));
+    this.subs.push(this.userRegistryService.getPendingMembers(this.type, this.id).subscribe(pending => {
+      this.pending = pending;
+      this.loadPending = false;
+    }, error => {
+      this.members = [];
+      this.error = error.error.response;
+      this.loadMembers = false;
+    }));
+  }
+  
+  ngOnDestroy() {
+    this.subs.forEach(sub => {
+      if (sub instanceof Subscription) {
+        sub.unsubscribe();
+      }
+    });
+  }
+  
+  openDeleteModal(item: any) {
+    if (this.showMembers) {
+      this.selectedUser = item.email;
+      this.deleteMemberModal.alertTitle = 'Delete ' + item.email + ' from members';
+      this.deleteMemberModal.open();
+    } else {
+      this.selectedUser = item;
+      this.deletePendingModal.alertTitle = 'Cancel invitation for user ' + item;
+      this.deletePendingModal.open();
+    }
+  }
+  
+  openInviteModal() {
+    this.inviteMemberModal.alertTitle = 'Invite user to join ' + this.name + ' as member';
+    this.inviteMemberModal.okButtonLeft = false;
+    this.invited = this.fb.control('', [Validators.required, Validators.email]);
+    this.inviteMemberModal.open();
+  }
+  
+  deleteMember() {
+    this.loadMembers = true;
+    this.userRegistryService.removeMember(this.type, this.id, this.selectedUser).subscribe(() => {
+      this.members = this.members.filter(manager => manager.email != this.selectedUser);
+      this.loadMembers = false;
+      this.error = null;
+    }, error => {
+      this.error = error.error.response;
+      this.loadMembers = false;
+    });
+  }
+  
+  deletePendingMember() {
+    this.loadPending = true;
+    this.userRegistryService.cancelMemberInvitation(this.type, this.id, this.selectedUser).subscribe(() => {
+      this.pending = this.pending.filter(manager => manager != this.selectedUser);
+      this.error = null;
+      this.loadPending = false;
+    }, error => {
+      this.error = error.error.response;
+      this.loadPending = false;
+    });
+  }
+  
+  inviteMember() {
+    this.loadMembers = true;
+    let details = {
+      name: this.name,
+      link: this.link
+    }
+    this.userRegistryService.inviteMember(this.type, this.id, this.invited.value, details).subscribe(() => {
+      this.error = null;
+      if (!this.pending.includes(this.invited.value)) {
+        this.pending.push(this.invited.value);
+      }
+      this.loadMembers = false;
+    }, error => {
+      this.error = error.error.response;
+      this.loadMembers = false;
+    })
+  }
+}

dashboard/users/members/members.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MembersComponent} from './members.component';
+import {ReactiveFormsModule} from '@angular/forms';
+import {EmailService} from "../../../utils/email/email.service";
+import {AlertModalModule} from "../../../utils/modal/alertModal.module";
+import {LoadingModule} from "../../../utils/loading/loading.module";
+
+@NgModule({
+  imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule],
+  declarations: [MembersComponent],
+  exports: [MembersComponent],
+  providers: [EmailService]
+})
+export class MembersModule {}

role-verification/role-verification.component.ts

@@ -0,0 +1,212 @@
+import {Component, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
+import {User} from "../login/utils/helper.class";
+import {ActivatedRoute, Router} from "@angular/router";
+import {UserManagementService} from "../services/user-management.service";
+import {UserRegistryService} from "../services/user-registry.service";
+import {LoginErrorCodes} from "../login/utils/guardHelper.class";
+import {Subscriber} from "rxjs";
+import {FormBuilder, FormControl, Validators} from "@angular/forms";
+import {AlertModal} from "../utils/modal/alert";
+
+@Component({
+  selector: 'role-verification',
+  template: `
+    <modal-alert #managerModal>
+      <div>
+        You have been invited to join <span class="uk-text-bold">{{name}}</span> as a manager.
+        <span class="portal-color">Fill</span> in the <span class="portal-color">verification code</span>, sent to your
+        email, to accept the invitation request.
+      </div>
+      <div *ngIf="!loading" class="uk-margin-medium-top uk-text-center">
+        <input [formControl]="code" class="uk-input uk-width-medium" placeholder="Write verification code"
+               [class.uk-form-danger]="code.invalid && code.touched">
+        <div *ngIf="error" class="uk-text-danger uk-margin-top">{{error}}</div>
+      </div>
+      <div *ngIf="loading" class="uk-margin-medium-top">
+        <loading></loading>
+      </div>
+      <div class="uk-margin-medium-top uk-flex uk-flex-right">
+        <button class="uk-button uk-button-default uk-margin-medium-right" [class.uk-disabled]="loading"
+                (click)="cancel(managerModal)">Cancel
+        </button>
+        <button class="uk-button" [class.portal-button]="code.valid" [class.uk-disabled]="code.invalid || loading"
+                (click)="verifyManager()">Accept
+        </button>
+      </div>
+    </modal-alert>
+    <modal-alert #memberModal>
+      <div *ngIf="!isMember">
+        <div>
+          You have been invited to join <span class="uk-text-bold">{{name}}</span> as a member.
+          <span class="portal-color">Fill</span> in the <span class="portal-color">verification code</span>, sent to
+          your
+          email, to accept the invitation request.
+        </div>
+        <div *ngIf="!loading" class="uk-margin-medium-top uk-text-center">
+          <input [formControl]="code" class="uk-input uk-width-medium" placeholder="Write verification code"
+                 [class.uk-form-danger]="code.invalid && code.touched">
+          <div *ngIf="error" class="uk-text-danger uk-margin-top">{{error}}</div>
+        </div>
+        <div *ngIf="loading" class="uk-margin-medium-top">
+          <loading></loading>
+        </div>
+        <div class="uk-margin-medium-top uk-flex uk-flex-right">
+          <button class="uk-button uk-button-default uk-margin-medium-right" [class.uk-disabled]="loading"
+                  (click)="cancel(memberModal)">Cancel
+          </button>
+          <button class="uk-button" [class.portal-button]="code.valid" [class.uk-disabled]="code.invalid || loading"
+                  (click)="verifyMember()">Accept
+          </button>
+        </div>
+      </div>
+      <div *ngIf="isMember">
+        <div>
+          Welcome! You are now a member of <span class="uk-text-bold">{{name}}</span>!
+          From now on, you will have access to our restricted content.
+        </div>
+        <div class="uk-margin-medium-top uk-flex uk-flex-right">
+          <button class="uk-button uk-button-default" [class.uk-disabled]="loading"
+                  (click)="cancel(memberModal)">Close
+          </button>
+        </div>
+      </div>
+    </modal-alert>
+    <modal-alert #errorModal (alertOutput)="cancel(errorModal)">
+      <div>
+        We are unable to process the request because the link is invalid, or it has expired.
+      </div>
+    </modal-alert>
+  `
+})
+export class RoleVerificationComponent implements OnInit, OnDestroy {
+  
+  @Input()
+  public id: string;
+  @Input()
+  public type: string;
+  @Input()
+  public name: string;
+  public user: User;
+  public verification: any;
+  public code: FormControl;
+  private subs: any[] = [];
+  @ViewChild('managerModal') managerModal: AlertModal;
+  @ViewChild('memberModal') memberModal: AlertModal;
+  @ViewChild('errorModal') errorModal: AlertModal;
+  public error: string = null;
+  public loading: boolean = false;
+  public isMember: boolean = false;
+  
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private fb: FormBuilder,
+              private userManagementService: UserManagementService,
+              private userRegistryService: UserRegistryService) {
+  }
+  
+  ngOnInit() {
+    this.reset();
+    this.subs.push(this.route.queryParams.subscribe(params => {
+      if (params && params['verify']) {
+        this.subs.push(this.userManagementService.getUserInfo(false).subscribe(user => {
+          this.user = user;
+          if (this.user) {
+            this.subs.push(this.userRegistryService.getInvitation(params['verify']).subscribe(verification => {
+              this.verification = verification;
+              if (this.user.email === this.verification.email && this.id === this.verification.entity && this.type === this.verification.type) {
+                if (this.verification.verificationType === 'manager') {
+                  this.openManagerModal();
+                } else if (this.verification.verificationType === 'member') {
+                  this.openMemberModal();
+                }
+              } else {
+                this.openErrorModal();
+              }
+            }, error => {
+              this.openErrorModal();
+            }));
+          } else {
+            this.router.navigate(['/user-info'], {
+              queryParams: {
+                'errorCode': LoginErrorCodes.NOT_LOGIN,
+                'redirectUrl': this.router.url
+              }
+            });
+          }
+        }));
+      }
+    }));
+  }
+  
+  ngOnDestroy() {
+    this.subs.forEach(value => {
+      if (value instanceof Subscriber) {
+        value.unsubscribe();
+      }
+    });
+  }
+  
+  public openManagerModal() {
+    this.error = null;
+    this.managerModal.okButton = false;
+    this.managerModal.cancelButton = false;
+    this.managerModal.alertTitle = 'Manager Invitation';
+    this.managerModal.open();
+  }
+  
+  public openMemberModal() {
+    this.error = null;
+    this.memberModal.okButton = false;
+    this.memberModal.cancelButton = false;
+    this.memberModal.alertTitle = 'Member Invitation';
+    this.memberModal.open();
+  }
+  
+  public openErrorModal() {
+    this.error = null;
+    this.errorModal.cancelButton = false;
+    this.errorModal.okButtonText = 'Ok';
+    this.errorModal.alertTitle = 'Cannot Complete Invitation';
+    this.errorModal.open();
+  }
+  
+  public verifyManager() {
+    this.loading = true;
+    this.userRegistryService.verifyManager(this.verification.id, this.code.value).subscribe(() => {
+      this.loading = false;
+      this.managerModal.cancel();
+      this.error = null;
+      this.userManagementService.getUserInfo(false).subscribe(user => {
+        this.user = user;
+        this.router.navigate(['/admin/' + this.verification.entity]);
+      });
+    }, error => {
+      this.loading = false;
+      this.error = 'The verification code is invalid';
+    });
+  }
+  
+  public verifyMember() {
+    this.loading = true;
+    this.userRegistryService.verifyMember(this.verification.id, this.code.value).subscribe(() => {
+      this.loading = false;
+      this.error = null;
+      this.userManagementService.getUserInfo(false).subscribe(user => {
+        this.user = user;
+        this.memberModal.cancel();
+      });
+    }, error => {
+      this.loading = false;
+      this.error = 'The verification code is invalid';
+    });
+  }
+  
+  public reset() {
+    this.code = this.fb.control('', [Validators.required, Validators.pattern('^[+0-9]{6}$')]);
+  }
+  
+  cancel(modal: AlertModal) {
+    modal.cancel();
+    this.router.navigate([this.router.url.split('?')[0]]);
+  }
+}

role-verification/role-verification.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {RoleVerificationComponent} from "./role-verification.component";
+import {AlertModalModule} from "../utils/modal/alertModal.module";
+import {ReactiveFormsModule} from "@angular/forms";
+import {LoadingModule} from "../utils/loading/loading.module";
+
+@NgModule({
+  imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule],
+  declarations: [RoleVerificationComponent],
+  exports: [RoleVerificationComponent]
+})
+export class RoleVerificationModule {}

services/user-registry.service.ts

@@ -27,38 +27,62 @@ export class UserRegistryService {
       null, CustomOptions.registryOptions());
   }
 
-  public removeManagerRole(type: string, id: string, email: string): Observable<any> {
+  public removeManager(type: string, id: string, email: string): Observable<any> {
     return this.http.delete<any>(properties.registryUrl +
       encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/manager/' + encodeURIComponent(email), CustomOptions.registryOptions());
   }
   
-  public invite(type: string, id: string, email: string, details: any): Observable<any[]> {
+  public removeMember(type: string, id: string, email: string): Observable<any> {
+    return this.http.delete<any>(properties.registryUrl +
+      encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/member/' + encodeURIComponent(email), CustomOptions.registryOptions());
+  }
+
+  public inviteManager(type: string, id: string, email: string, details: any): Observable<any[]> {
     return this.http.post<any>(properties.registryUrl + 'invite/' +
       encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/manager/' + encodeURIComponent(email), details,
       CustomOptions.registryOptions()).pipe(map((response: any) => response.response));
   }
   
-  public cancelInvitation(type: string, id: string, email: string): Observable<any> {
+  public inviteMember(type: string, id: string, email: string, details: any): Observable<any[]> {
+    return this.http.post<any>(properties.registryUrl + 'invite/' +
+      encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/member/' + encodeURIComponent(email), details,
+      CustomOptions.registryOptions()).pipe(map((response: any) => response.response));
+  }
+  
+  public cancelManagerInvitation(type: string, id: string, email: string): Observable<any> {
     return this.http.delete<any>(properties.registryUrl + 'invite/' +
       encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/manager/' + encodeURIComponent(email),
       CustomOptions.registryOptions());
   }
 
+  public cancelMemberInvitation(type: string, id: string, email: string): Observable<any> {
+    return this.http.delete<any>(properties.registryUrl + 'invite/' +
+      encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/member/' + encodeURIComponent(email),
+      CustomOptions.registryOptions());
+  }
+
   public getPendingManagers(type: string, id: string): Observable<any[]> {
     return this.http.get<any>(properties.registryUrl + 'invite/' + encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/managers/',
       CustomOptions.registryOptions()).pipe(map((response: any) => response.response));
   }
   
-  public getSubscribers(type: string, id: string): Observable<any[]> {
+  public getPendingMembers(type: string, id: string): Observable<any[]> {
-    return this.http.get<any>(properties.registryUrl + encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/subscribers/').pipe(map(response => response.response));
+    return this.http.get<any>(properties.registryUrl + 'invite/' + encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/members/',
+      CustomOptions.registryOptions()).pipe(map((response: any) => response.response));
+  }
+
+  public getMembers(type: string, id: string): Observable<any[]> {
+    return this.http.get<any>(properties.registryUrl + encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/members/',
+      CustomOptions.registryOptions()).pipe(map((response:any) => response.response));
   }
 
   public getManagers(type: string, id: string): Observable<any[]> {
     return this.http.get<any>(properties.registryUrl + encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/managers/').pipe(map(response => response.response));
   }
 
-  public getSubscribersEmail(type: string, id: string): Observable<any[]> {
+  public getMembersEmail(type: string, id: string): Observable<any[]> {
-    return this.http.get<any>(properties.registryUrl + encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/subscribers/email').pipe(map(response => response.response));
+    return this.http.get<any>(properties.registryUrl + encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/members/email',
+      CustomOptions.registryOptions()).pipe(map((response:any) => response.response));
   }
 
   public getInvitation(id: string): Observable<any> {
@@ -66,8 +90,12 @@ export class UserRegistryService {
       .pipe(map((response: any) => response.response));
   }
 
-  public verify(id: string, code: string): Observable<any> {
+  public verifyManager(id: string, code: string): Observable<any> {
-    return this.http.post<any>(properties.registryUrl + 'verification/' + encodeURIComponent(id), code, CustomOptions.registryOptions());
+    return this.http.post<any>(properties.registryUrl + 'verification/manager/' + encodeURIComponent(id), code, CustomOptions.registryOptions());
+  }
+  
+  public verifyMember(id: string, code: string): Observable<any> {
+    return this.http.post<any>(properties.registryUrl + 'verification/member/' + encodeURIComponent(id), code, CustomOptions.registryOptions());
   }
 
   public deleteVerification(id: string): Observable<any> {

verification/verification.component.ts

@@ -55,7 +55,7 @@ export class VerificationComponent implements OnInit {
   
   verify() {
     this.loading = true;
-    this.userRegistryService.verify(this.invitation.id, this.code.value).subscribe(() => {
+    this.userRegistryService.verifyManager(this.invitation.id, this.code.value).subscribe(() => {
       this.state = 'verified';
       this.loading = false;
     });