D-Net

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> Monitor 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" [extraLeft]="false" class="uk-width-medium" placeholder="Write verification code">

          <div *ngIf="error" class="uk-text-danger uk-margin-remove uk-width-1-1">{{error}}</div>

        </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> 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" [extraLeft]="false" class="uk-width-medium" placeholder="Write verification code">

            <div *ngIf="error" class="uk-text-danger uk-margin-remove uk-width-1-1">{{error}}</div>

          </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 {

  @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 = 'Invalid request';

    this.errorModal.open();

  }

  public verifyManager() {

    this.loading = true;

    this.subs.push(this.userRegistryService.verify(this.verification.id, this.code.value).subscribe(() => {

      this.loading = false;

      this.managerModal.cancel();

      this.error = null;

      this.userManagementService.updateUserInfo(() => {

        this.router.navigate(['/admin/' + 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]]);

  }

}