import {AfterViewInit, 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"; import {properties} from "../../../environments/environment"; import {EmailService} from "../utils/email/email.service"; import {Composer} from "../utils/email/composer"; @Component({ selector: 'role-verification', template: ` <modal-alert #managerModal> <div> You have been invited to join <span class="uk-text-bold">{{name}}</span> {{(service === 'monitor'?'Monitor':'Research Community')}} Dashboard 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-flex uk-flex-center"> <div dashboard-input [formInput]="code" class="uk-width-medium" placeholder="Write verification code"> <span *ngIf="error" error>{{error}}</span> </div> </div> <div *ngIf="loading" class="uk-margin-medium-top uk-flex uk-flex-center"> <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 *ngIf="service == 'monitor'" #memberModal> <div *ngIf="!isMember"> <div> You have been invited to join <span class="uk-text-bold">{{name}}</span> Monitor Dashboard 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-flex uk-flex-wrap uk-flex-center"> <div dashboard-input [formInput]="code" class="uk-width-medium" placeholder="Write verification code"> <span *ngIf="error" error>{{error}}</span> </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 the OpenAIRE Monitor Dashboard for the <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, AfterViewInit { @Input() public id: string; @Input() public type: string; @Input() public name: string; @Input() public service: "connect" | "monitor" = "monitor"; 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 emailService: EmailService, private userManagementService: UserManagementService, private userRegistryService: UserRegistryService) { } ngOnInit() { this.reset(); } ngAfterViewInit() { 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.toLowerCase() && this.id === this.verification.entity && this.type === this.verification.type) { if (this.verification.verificationType === 'manager') { this.openManagerModal(); } else if (this.verification.verificationType === 'member' && this.service === "monitor") { this.openMemberModal(); } else { this.openErrorModal(); } } 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 = 'Invalid request'; this.errorModal.open(); } public verifyManager() { this.loading = true; this.subs.push(this.userRegistryService.verify(this.verification.id, this.code.value).subscribe(() => { this.managerModal.cancel(); this.error = null; this.userManagementService.updateUserInfo(() => { if(this.service === "monitor") { this.loading = false; this.router.navigate(['/admin/' + this.verification.entity]); } else { this.subs.push(this.emailService.notifyManagers(this.id, 'manager', Composer.composeEmailToInformOldManagersForTheNewOnes(this.name, this.id)).subscribe(() => { this.subs.push(this.emailService.notifyNewManager(Composer.composeEmailForNewManager(this.id, this.name)).subscribe( () => { this.loading = false; window.location.href = properties.adminPortalURL + '/' + this.verification.entity; }, error1 => { console.error(error1); this.loading = false; window.location.href = properties.adminPortalURL + '/' + this.verification.entity; } )); }, error => { console.error(error); this.loading = false; window.location.href = properties.adminPortalURL + '/' + this.verification.entity; })); } }); }, error => { this.loading = false; this.error = 'The verification code is invalid'; })); } public verifyMember() { this.loading = true; this.subs.push(this.userRegistryService.verify(this.verification.id, this.code.value, "member").subscribe(() => { this.loading = false; this.error = null; this.userManagementService.updateUserInfo(() => { this.isMember = true; }); }, 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]]); } }