Pass a user observable to the globalnav library that can be used to populate the user name in the title bar

projects/globalnav/src/lib/globalnav.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { MediaMatcher } from '@angular/cdk/layout';
-import { NavItem, PrimaryNavItem } from './globalnav.service';
+import { Observable } from 'rxjs';
 import {
     faBars,
     faLightbulb,
@@ -14,6 +14,14 @@ import {
     faUsers
 } from '@fortawesome/free-solid-svg-icons';
 
+import {
+    expireTokenCookies,
+    NavItem,
+    PrimaryNavItem,
+    setLoginStatus,
+    User
+} from './globalnav.service';
+
 @Component({
     selector: 'globalnav-sidenav',
     templateUrl: './globalnav.component.html',
@@ -22,25 +30,47 @@ import {
 
 export class GlobalnavComponent implements OnInit {
     @Input() mycroftUrls: any;
-    @Input() userName: string;
+    @Input() user$: Observable<User>;
     public footerItems: NavItem[];
     public isLoggedIn: boolean;
     public signInIcon = faSignInAlt;
-    public signOutIcon = faSignInAlt;
+    public signOutIcon = faSignOutAlt;
     public menuIcon = faBars;
     public mobileQuery: MediaQueryList;
     public navigationItems: PrimaryNavItem[];
+    public userName: string;
 
-    constructor(media: MediaMatcher) {
+    constructor(private media: MediaMatcher) {
         this.mobileQuery = media.matchMedia('(max-width: 600px)');
     }
 
     ngOnInit() {
+        this.isLoggedIn = setLoginStatus();
+        this.getUser();
         this.buildNavigationItems();
-        this.setLoginStatus();
         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 {
         const aboutMycroftNav: PrimaryNavItem = {
             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() {
         const accountNav: PrimaryNavItem = {
             children: [

projects/globalnav/src/lib/globalnav.module.ts

@@ -12,7 +12,6 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { GlobalnavComponent } from './globalnav.component';
-import { GlobalnavService } from './globalnav.service';
 import { NavItemComponent } from './nav-item/nav-item.component';
 import { PrimaryNavItemComponent } from './primary-nav-item/primary-nav-item.component';
 import { FooterComponent } from './footer/footer.component';
@@ -39,8 +38,6 @@ import { FooterComponent } from './footer/footer.component';
     exports: [
         GlobalnavComponent
     ],
-    providers: [
-        GlobalnavService
-    ]
+    providers: []
 })
 export class GlobalnavModule { }

projects/globalnav/src/lib/globalnav.service.ts

@@ -14,12 +14,25 @@ export interface PrimaryNavItem {
   url?: string;
 }
 
-
-@Injectable({
-  providedIn: 'root'
-})
-export class GlobalnavService {
-
-    constructor() {
-    }
+export interface User {
+    name: string;
+}
+
+export function expireTokenCookies(): void {
+    const expiration = new Date();
+    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;
 }

projects/market/src/app/app.component.html

@@ -1,6 +1,6 @@
 <globalnav-sidenav
     [mycroftUrls]="environment.mycroftUrls"
-    [userName]="userName"
+    [user$]="user$"
 >
     <!--
         Inject the marketplace app into the <mat-sidenav-content> component

projects/market/src/app/app.component.ts

@@ -1,6 +1,7 @@
 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';
 
 @Component({
@@ -10,22 +11,13 @@ import { environment } from '../environments/environment';
 })
 export class AppComponent implements OnInit {
     public environment = environment;
-    public userName = '';
+    public user$: Observable<User>;
 
     constructor(private service: AppService) {
     }
 
     ngOnInit() {
         this.service.setLoginStatus();
-        this.getUser();
-    }
-
-    getUser() {
-        if (this.service.isLoggedIn) {
-            this.service.getUser().subscribe(
-                (user) => { this.userName = user.name; }
-            );
-        }
-
+        this.user$ = this.service.getUser();
     }
 }

projects/market/src/app/app.service.ts

@@ -5,6 +5,10 @@ import { Observable } from 'rxjs';
 
 const userUrl = '/api/user';
 
+export interface User {
+    name: string;
+}
+
 @Injectable({
   providedIn: 'root'
 })