openaire-library/role-verification/role-verification.component.ts

213 lines
7.8 KiB
TypeScript

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]]);
}
}