Pass a user observable to the globalnav library that can be used to populate the user name in the title bar
parent
42618ebde5
commit
aba359028b
|
@ -1,6 +1,6 @@
|
||||||
import { Component, Input, OnInit } from '@angular/core';
|
import { Component, Input, OnInit } from '@angular/core';
|
||||||
import { MediaMatcher } from '@angular/cdk/layout';
|
import { MediaMatcher } from '@angular/cdk/layout';
|
||||||
import { NavItem, PrimaryNavItem } from './globalnav.service';
|
import { Observable } from 'rxjs';
|
||||||
import {
|
import {
|
||||||
faBars,
|
faBars,
|
||||||
faLightbulb,
|
faLightbulb,
|
||||||
|
@ -14,6 +14,14 @@ import {
|
||||||
faUsers
|
faUsers
|
||||||
} from '@fortawesome/free-solid-svg-icons';
|
} from '@fortawesome/free-solid-svg-icons';
|
||||||
|
|
||||||
|
import {
|
||||||
|
expireTokenCookies,
|
||||||
|
NavItem,
|
||||||
|
PrimaryNavItem,
|
||||||
|
setLoginStatus,
|
||||||
|
User
|
||||||
|
} from './globalnav.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'globalnav-sidenav',
|
selector: 'globalnav-sidenav',
|
||||||
templateUrl: './globalnav.component.html',
|
templateUrl: './globalnav.component.html',
|
||||||
|
@ -22,25 +30,47 @@ import {
|
||||||
|
|
||||||
export class GlobalnavComponent implements OnInit {
|
export class GlobalnavComponent implements OnInit {
|
||||||
@Input() mycroftUrls: any;
|
@Input() mycroftUrls: any;
|
||||||
@Input() userName: string;
|
@Input() user$: Observable<User>;
|
||||||
public footerItems: NavItem[];
|
public footerItems: NavItem[];
|
||||||
public isLoggedIn: boolean;
|
public isLoggedIn: boolean;
|
||||||
public signInIcon = faSignInAlt;
|
public signInIcon = faSignInAlt;
|
||||||
public signOutIcon = faSignInAlt;
|
public signOutIcon = faSignOutAlt;
|
||||||
public menuIcon = faBars;
|
public menuIcon = faBars;
|
||||||
public mobileQuery: MediaQueryList;
|
public mobileQuery: MediaQueryList;
|
||||||
public navigationItems: PrimaryNavItem[];
|
public navigationItems: PrimaryNavItem[];
|
||||||
|
public userName: string;
|
||||||
|
|
||||||
constructor(media: MediaMatcher) {
|
constructor(private media: MediaMatcher) {
|
||||||
this.mobileQuery = media.matchMedia('(max-width: 600px)');
|
this.mobileQuery = media.matchMedia('(max-width: 600px)');
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
this.isLoggedIn = setLoginStatus();
|
||||||
|
this.getUser();
|
||||||
this.buildNavigationItems();
|
this.buildNavigationItems();
|
||||||
this.setLoginStatus();
|
|
||||||
this.buildAccountNav();
|
this.buildAccountNav();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getUser() {
|
||||||
|
if (this.isLoggedIn) {
|
||||||
|
this.user$.subscribe(
|
||||||
|
(user) => {
|
||||||
|
if (user.name) {
|
||||||
|
this.userName = user.name;
|
||||||
|
} else {
|
||||||
|
this.userName = 'Logged In';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
(response) => {
|
||||||
|
if (response.status === 401) {
|
||||||
|
expireTokenCookies();
|
||||||
|
this.isLoggedIn = setLoginStatus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
buildNavigationItems(): void {
|
buildNavigationItems(): void {
|
||||||
const aboutMycroftNav: PrimaryNavItem = {
|
const aboutMycroftNav: PrimaryNavItem = {
|
||||||
children: [
|
children: [
|
||||||
|
@ -108,13 +138,6 @@ export class GlobalnavComponent implements OnInit {
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
setLoginStatus(): void {
|
|
||||||
const cookies = document.cookie;
|
|
||||||
const seleneTokenExists = cookies.includes('seleneToken');
|
|
||||||
const seleneTokenEmpty = cookies.includes('seleneToken=""');
|
|
||||||
this.isLoggedIn = seleneTokenExists && !seleneTokenEmpty;
|
|
||||||
}
|
|
||||||
|
|
||||||
buildAccountNav() {
|
buildAccountNav() {
|
||||||
const accountNav: PrimaryNavItem = {
|
const accountNav: PrimaryNavItem = {
|
||||||
children: [
|
children: [
|
||||||
|
|
|
@ -12,7 +12,6 @@ import { MatToolbarModule } from '@angular/material/toolbar';
|
||||||
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
||||||
|
|
||||||
import { GlobalnavComponent } from './globalnav.component';
|
import { GlobalnavComponent } from './globalnav.component';
|
||||||
import { GlobalnavService } from './globalnav.service';
|
|
||||||
import { NavItemComponent } from './nav-item/nav-item.component';
|
import { NavItemComponent } from './nav-item/nav-item.component';
|
||||||
import { PrimaryNavItemComponent } from './primary-nav-item/primary-nav-item.component';
|
import { PrimaryNavItemComponent } from './primary-nav-item/primary-nav-item.component';
|
||||||
import { FooterComponent } from './footer/footer.component';
|
import { FooterComponent } from './footer/footer.component';
|
||||||
|
@ -39,8 +38,6 @@ import { FooterComponent } from './footer/footer.component';
|
||||||
exports: [
|
exports: [
|
||||||
GlobalnavComponent
|
GlobalnavComponent
|
||||||
],
|
],
|
||||||
providers: [
|
providers: []
|
||||||
GlobalnavService
|
|
||||||
]
|
|
||||||
})
|
})
|
||||||
export class GlobalnavModule { }
|
export class GlobalnavModule { }
|
||||||
|
|
|
@ -14,12 +14,25 @@ export interface PrimaryNavItem {
|
||||||
url?: string;
|
url?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface User {
|
||||||
@Injectable({
|
name: string;
|
||||||
providedIn: 'root'
|
}
|
||||||
})
|
|
||||||
export class GlobalnavService {
|
export function expireTokenCookies(): void {
|
||||||
|
const expiration = new Date();
|
||||||
constructor() {
|
const cookieDomain: string = document.domain.replace('market.', '');
|
||||||
}
|
|
||||||
|
document.cookie = 'seleneToken=""' +
|
||||||
|
'; expires=' + expiration.toUTCString() +
|
||||||
|
'; domain=' + cookieDomain;
|
||||||
|
document.cookie = 'tartarusToken=""' +
|
||||||
|
'; expires=' + expiration.toUTCString() +
|
||||||
|
'; domain=' + cookieDomain;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setLoginStatus(): boolean {
|
||||||
|
const cookies = document.cookie;
|
||||||
|
const seleneTokenExists = cookies.includes('seleneToken');
|
||||||
|
const seleneTokenEmpty = cookies.includes('seleneToken=""');
|
||||||
|
return seleneTokenExists && !seleneTokenEmpty;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<globalnav-sidenav
|
<globalnav-sidenav
|
||||||
[mycroftUrls]="environment.mycroftUrls"
|
[mycroftUrls]="environment.mycroftUrls"
|
||||||
[userName]="userName"
|
[user$]="user$"
|
||||||
>
|
>
|
||||||
<!--
|
<!--
|
||||||
Inject the marketplace app into the <mat-sidenav-content> component
|
Inject the marketplace app into the <mat-sidenav-content> component
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
|
||||||
import { AppService } from './app.service';
|
import { AppService, User } from './app.service';
|
||||||
import { environment } from '../environments/environment';
|
import { environment } from '../environments/environment';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -10,22 +11,13 @@ import { environment } from '../environments/environment';
|
||||||
})
|
})
|
||||||
export class AppComponent implements OnInit {
|
export class AppComponent implements OnInit {
|
||||||
public environment = environment;
|
public environment = environment;
|
||||||
public userName = '';
|
public user$: Observable<User>;
|
||||||
|
|
||||||
constructor(private service: AppService) {
|
constructor(private service: AppService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.service.setLoginStatus();
|
this.service.setLoginStatus();
|
||||||
this.getUser();
|
this.user$ = this.service.getUser();
|
||||||
}
|
|
||||||
|
|
||||||
getUser() {
|
|
||||||
if (this.service.isLoggedIn) {
|
|
||||||
this.service.getUser().subscribe(
|
|
||||||
(user) => { this.userName = user.name; }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,6 +5,10 @@ import { Observable } from 'rxjs';
|
||||||
|
|
||||||
const userUrl = '/api/user';
|
const userUrl = '/api/user';
|
||||||
|
|
||||||
|
export interface User {
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root'
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue