openaire-library/login/userMini.component.ts

157 lines
5.6 KiB
TypeScript
Raw Normal View History

2022-02-28 13:38:26 +01:00
import {Component, EventEmitter, Input, OnChanges, OnInit, Output, 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";
@Component({
selector: 'user-mini',
template: `
<ul *ngIf="!mobileView" class="uk-navbar-nav" [class.uk-dark]="dark">
<li class="uk-parent">
<a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
<ng-container *ngIf="loggedIn">
<a class="login uk-icon">
<svg height="60" width="60">
<circle cx="30" cy="30" r="20" stroke-width="2"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".4em" font-size="16">
{{firstLetters ? firstLetters : 'AN'}}
</text>
</svg>
</a>
<div class="uk-navbar-dropdown" uk-drop="pos: bottom-right">
<ul class="uk-nav uk-navbar-dropdown-nav">
<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()">Log out</a></li>
</ul>
</div>
</ng-container>
</li>
</ul>
<ul *ngIf="mobileView" class="uk-nav uk-nav-default">
<li>
<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">
<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>
<a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
<ul *ngIf="loggedIn" class="uk-nav-sub">
<ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}" (click)="closeCanvas()">{{item.title}}</a>
<a *ngIf="item.route.length == 0 && item.url.length > 0" (click)="closeCanvas()"
href="{{item.url}}">{{item.title}}</a>
</li>
</ng-container>
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
2022-02-28 13:38:26 +01:00
<li><a (click)="logOut()">Log out</a></li>
</ul>
</li>
</ul>
`
})
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 = "";
public server: boolean = true;
public routerHelper: RouterHelper = new RouterHelper();
@Input() userMenuItems;
@Input() logInUrl;
@Input() logOutUrl;
@Input() cookieDomain;
@Input() dark: boolean = false;
2022-02-28 13:38:26 +01:00
@Output() closeCanvasEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
private subscriptions = [];
2022-02-28 13:38:26 +01:00
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();
}
}
2022-02-28 13:38:26 +01:00
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
}
2022-02-28 13:38:26 +01:00
closeCanvas() {
this.closeCanvasEmitter.emit(true);
}
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();
}
2022-02-28 13:38:26 +01:00
isTheActiveSubMenu(menuItem: MenuItem): boolean {
let currentRoute = this.router.url.split('?')[0];
2022-02-28 13:38:26 +01:00
return menuItem.route == currentRoute || menuItem.route == (currentRoute + "/");
}
2022-02-28 13:38:26 +01:00
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('');
}
}
}