[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
This commit is contained in:
k.triantafyllou
parent
018fe9f6d2
commit
c7beacfec2
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {}
|
||||
|
|
@ -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]]);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {}
|
||||
|
|
@ -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 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 invite(type: string, id: string, email: string, details: any): Observable<any[]> {
|
||||
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 getPendingMembers(type: string, id: string): Observable<any[]> {
|
||||
return this.http.get<any>(properties.registryUrl + 'invite/' + encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/members/',
|
||||
CustomOptions.registryOptions()).pipe(map((response: any) => response.response));
|
||||
}
|
||||
|
||||
public getSubscribers(type: string, id: string): Observable<any[]> {
|
||||
return this.http.get<any>(properties.registryUrl + encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/subscribers/').pipe(map(response => 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[]> {
|
||||
return this.http.get<any>(properties.registryUrl + encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/subscribers/email').pipe(map(response => response.response));
|
||||
public getMembersEmail(type: string, id: string): Observable<any[]> {
|
||||
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> {
|
||||
return this.http.post<any>(properties.registryUrl + 'verification/' + encodeURIComponent(id), code, CustomOptions.registryOptions());
|
||||
public verifyManager(id: string, code: string): Observable<any> {
|
||||
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> {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue