openaire-library/login/userMini.component.ts

import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Session, User} from './utils/helper.class';
import {RouterHelper} from '../utils/routerHelper.class';
import {Subscriber} from "rxjs";
import {MenuItem} from "../sharedComponents/menu";
import {UserManagementService} from "../services/user-management.service";

// declare var logoutClicked;
@Component({
  selector: 'user-mini',
  template: `
    <ng-container *ngIf="!dashboard">

      <ul *ngIf="!mobileView" class="uk-navbar-nav" [class.uk-dark]="dark">
        <li class="uk-parent">
          <a *ngIf="loggedIn" class="login">
            <svg height="60" width="60">
              <circle cx="30" cy="30" r="20" stroke-width="2"></circle>
              <text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em"
                    font-size="16">
                {{firstLetters}}
              </text>
              <svg *ngIf="!firstLetters" ratio="1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20"
                   x="20">
                <circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
                <path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
              </svg>
            </svg>
          </a>
          <a *ngIf="!loggedIn" class="loginLink" id="userMenu-parent" (click)="logIn()">Sign in <span
              class=" uk-margin-small-left uk-margin-small-right uk-icon"><svg width="20" height="20"
                                                                               viewBox="0 0 20 20"
                                                                               xmlns="http://www.w3.org/2000/svg"
                                                                               ratio="1"><circle fill="none"
                                                                                                 stroke="#000"
                                                                                                 stroke-width="1.1"
                                                                                                 cx="9.9" cy="6.4"
                                                                                                 r="4.4"></circle><path
              fill="none" stroke="#000" stroke-width="1.1"
              d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg> </span>
          </a>


          <div *ngIf="loggedIn" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" id="userMenu" uk-toggle>
            <div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
              <div class="uk-first-column uk-height-max-medium uk-overflow-auto">
                <ul class="uk-nav uk-navbar-dropdown-nav">
                  <!--li><a href="" >My profile</a></li>
                  <li><a   routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
                  <li *ngIf="isAuthorized"><a   routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
                  <ng-container *ngFor="let item of userMenuItems ">
                    <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization" [class.uk-active]="isTheActiveSubMenu(item)">
                      <a *ngIf="item.route.length > 0" routerLink="{{item.route}}"
                         [queryParams]=item.params>{{item.title}}</a>
                      <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
                         target="_blank">{{item.title}}</a>
                    </li>
                  </ng-container>
                  <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
                  <li><a (click)="logOut()" id="logout">Log out</a></li>
                </ul>
              </div>
              <div id="logout1"></div>
            </div>
          </div>
        </li>
      </ul>
    </ng-container>

    <ng-container *ngIf="!dashboard">

      <li *ngIf="mobileView" class="uk-nav-header uk-parent ">
          
          <span *ngIf="loggedIn" class="uk-flex uk-flex-middle">
            <span>{{user.fullname + " "}}</span>
            <span class="uk-margin-small-right uk-icon"><svg width="20" height="20"
                                                             viewBox="0 0 20 20"
                                                             xmlns="http://www.w3.org/2000/svg"
                                                             ratio="1"><circle fill="none"
                                                                               stroke="#000"
                                                                               stroke-width="1.1"
                                                                               cx="9.9"
                                                                               cy="6.4"
                                                                               r="4.4"></circle><path
                fill="none" stroke="#000" stroke-width="1.1"
                d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg>
            </span>
          </span>
        <span *ngIf="!loggedIn">
              <a class="loginLink" (click)="logIn()">Sign in <span class="uk-margin-small-right uk-icon"><svg width="20"
                                                                                                              height="20"
                                                                                                              viewBox="0 0 20 20"
                                                                                                              xmlns="http://www.w3.org/2000/svg"
                                                                                                              ratio="1"><circle
                  fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none"
                                                                                                        stroke="#000"
                                                                                                        stroke-width="1.1"
                                                                                                        d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg></span>
              </a>
         </span>

        <ul *ngIf="loggedIn" class="uk-nav-sub">
          <!--li><a href="" >My profile</a></li>
          <li><a   routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
          <li *ngIf="isAuthorized"><a   routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
          <ng-container *ngFor="let item of userMenuItems ">
            <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
              <a *ngIf="item.route.length > 0" routerLink="{{item.route}}">{{item.title}}</a>
              <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}">{{item.title}}</a>
            </li>
          </ng-container>
          <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
          <li><a (click)="logOut()" id="logout">Log out</a></li>
        </ul>
      </li>
    </ng-container>
    <ng-container *ngIf="dashboard">
      <a *ngIf="!loggedIn" class="uk-flex" (click)="logIn()">
        <span>Sign in</span>
        <span class="uk-margin-small-left uk-margin-small-right uk-icon">
            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1">
              <circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
              <path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
            </svg>
        </span>
      </a>
      <a *ngIf="loggedIn" class="login uk-icon">
        <svg height="60" width="60">
          <circle cx="30" cy="30" r="20" stroke-width="2"></circle>
          <text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em"
                font-size="16">
            {{firstLetters}}
          </text>
          <svg *ngIf="!firstLetters" ratio="1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20"
               x="20">
            <circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
            <path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
          </svg>
        </svg>
      </a>
      <div *ngIf="loggedIn" uk-dropdown="mode: click; offset: -2; delay-hide: 0; flip: false; pos: bottom-right"
           #userMenu
           class="uk-padding-remove-horizontal">
        <ul class="uk-nav uk-dropdown-nav">
          <ng-container *ngFor="let item of userMenuItems ">
            <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
              <a *ngIf="item.route.length > 0" routerLink="{{item.route}}"
                 [queryParams]=item.params>{{item.title}}</a>
              <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
                 target="_blank">{{item.title}}</a>
            </li>
          </ng-container>
          <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
          <li><a (click)="logOut()" id="logout">Log out</a></li>
        </ul>
      </div>
    </ng-container>

    <div id="logout2"></div>
  `
})
export class UserMiniComponent implements OnInit, OnChanges {
  @Input() user: User;
  public loggedIn: boolean = false;
  public isAuthorized: boolean = false;
  @Input() public mobileView: boolean = false;
  public firstLetters: string = "";
  @Input() public dashboard: boolean = false;
  public server: boolean = true;
  public routerHelper: RouterHelper = new RouterHelper();
  @Input() userMenuItems;
  @Input() logInUrl;
  @Input() logOutUrl;
  @Input() cookieDomain;
  @Input() dark: boolean = false;
  subscriptions = [];
  
  constructor(private router: Router, private  route: ActivatedRoute, private userManagementService: UserManagementService) {
  }
  
  ngOnInit() {
    if (typeof document !== 'undefined') {
      this.server = false;
    }
    this.initUser();
  }
  
  ngOnChanges(changes: SimpleChanges): void {
    if (changes.user) {
      this.initUser();
    }
  }

  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscriber) {
        subscription.unsubscribe();
      }
    });
  }
  
  initUser() {
    if (this.user) {
      this.loggedIn = true;
      this.parseName();
      this.isAuthorized = Session.isClaimsCurator(this.user) || Session.isPortalAdministrator(this.user);
    } else {
      this.loggedIn = false;
      this.isAuthorized = false;
      this.user = null;
    }
  }
  
  logOut() {
    if (this.user) {
      this.userManagementService.logout();
    }
    this.loggedIn = false;
    this.isAuthorized = false;
    this.user = new User();
  }
  
  logIn() {
    this.userManagementService.login();
  }

  isTheActiveSubMenu(menuItem: MenuItem): boolean {
    let currentRoute = this.router.url.split('?')[0];
    if (menuItem.route == currentRoute || menuItem.route == (currentRoute + "/") ) {
      return true;
    }
    return false;
  }
  parseName() {
    this.firstLetters = "";
    if (this.user && this.user.firstname) {
      this.firstLetters += this.user.firstname.substr(0, 1);
    }
    if (this.user && this.user.lastname) {
      this.firstLetters += this.user.lastname.substr(0, 1);
    }
    if (!this.firstLetters && this.user && this.user.fullname) {
      let matches = this.user.fullname.match(/\b(\w)/g);
      this.firstLetters += matches.join('');
    }
  }
}