From d9cb88db1c20da772a2705e933b7a7852ff388d9 Mon Sep 17 00:00:00 2001
From: Chris Veilleux <veilleux.chris@gmail.com>
Date: Fri, 8 Feb 2019 17:37:46 -0600
Subject: [PATCH] moved account menu from sidenav to right side of toolbar

---
 .../account-menu/account-menu.component.html  | 42 ++++++++++++++++++
 .../account-menu/account-menu.component.scss  | 20 +++++++++
 .../account-menu/account-menu.component.ts    | 31 +++++++++++++
 .../src/lib/globalnav.component.html          | 26 ++++++-----
 .../src/lib/globalnav.component.scss          | 20 ++-------
 .../globalnav/src/lib/globalnav.component.ts  | 43 -------------------
 .../globalnav/src/lib/globalnav.module.ts     |  4 +-
 7 files changed, 112 insertions(+), 74 deletions(-)
 create mode 100644 projects/globalnav/src/lib/account-menu/account-menu.component.html
 create mode 100644 projects/globalnav/src/lib/account-menu/account-menu.component.scss
 create mode 100644 projects/globalnav/src/lib/account-menu/account-menu.component.ts

diff --git a/projects/globalnav/src/lib/account-menu/account-menu.component.html b/projects/globalnav/src/lib/account-menu/account-menu.component.html
new file mode 100644
index 0000000..4b4d956
--- /dev/null
+++ b/projects/globalnav/src/lib/account-menu/account-menu.component.html
@@ -0,0 +1,42 @@
+<button mat-button [mat-menu-trigger-for]="menu" class="account-button">
+    <fa-icon [icon]="accountIcon"></fa-icon>
+</button>
+<mat-menu #menu>
+    <!--
+        If the user is not authenticated, the menu will present them with
+        "Log In" or "Create Account" options
+    -->
+    <button *ngIf="!isAuthenticated" mat-menu-item>
+        <fa-icon [icon]="logInIcon" class="menu-item-icon"></fa-icon>
+        <span class="menu-item-text">Log In</span>
+    </button>
+    <button *ngIf="!isAuthenticated" mat-menu-item>
+        <fa-icon [icon]="accountIcon" class="menu-item-icon"></fa-icon>
+        <span class="menu-item-text">Create Account</span>
+    </button>
+    <!--
+        If the user is authenticated, the menu will present them with
+        account management options
+    -->
+    <button *ngIf="isAuthenticated" mat-menu-item>
+        <fa-icon [icon]="skillsIcon" class="menu-item-icon"></fa-icon>
+        <span class="menu-item-text">Skills</span>
+    </button>
+    <button *ngIf="isAuthenticated" mat-menu-item>
+        <fa-icon [icon]="devicesIcon" class="menu-item-icon"></fa-icon>
+        <span class="menu-item-text">Devices</span>
+    </button>
+    <button *ngIf="isAuthenticated" mat-menu-item>
+        <fa-icon [icon]="accountIcon" class="menu-item-icon"></fa-icon>
+        <span class="menu-item-text">Profile</span>
+    </button>
+    <mat-divider *ngIf="isAuthenticated" class="menu-divider"></mat-divider>
+    <button *ngIf="isAuthenticated" mat-menu-item>
+        <fa-icon [icon]="addDeviceIcon" class="menu-item-icon"></fa-icon>
+        <span class="menu-item-text">Add Device</span>
+    </button>
+    <button *ngIf="isAuthenticated" mat-menu-item>
+        <fa-icon [icon]="logOutIcon" class="menu-item-icon"></fa-icon>
+        <span class="menu-item-text">Logout</span>
+    </button>
+</mat-menu>
diff --git a/projects/globalnav/src/lib/account-menu/account-menu.component.scss b/projects/globalnav/src/lib/account-menu/account-menu.component.scss
new file mode 100644
index 0000000..16bbde5
--- /dev/null
+++ b/projects/globalnav/src/lib/account-menu/account-menu.component.scss
@@ -0,0 +1,20 @@
+.account-button {
+    color: #fee255;
+    font-size: 20px;
+    margin-right: -16px
+}
+
+.menu-item-icon {
+    color: #22a7f0;
+    margin-right: 8px;
+}
+
+.menu-item-text {
+    color: #2c3e50;
+}
+
+.menu-divider {
+    margin-left: auto;
+    margin-right: auto;
+    width: 80%;
+}
diff --git a/projects/globalnav/src/lib/account-menu/account-menu.component.ts b/projects/globalnav/src/lib/account-menu/account-menu.component.ts
new file mode 100644
index 0000000..95a7113
--- /dev/null
+++ b/projects/globalnav/src/lib/account-menu/account-menu.component.ts
@@ -0,0 +1,31 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import {
+    faComment,
+    faPlusCircle,
+    faSignInAlt,
+    faSignOutAlt,
+    faMicrochip,
+    faUserCircle
+} from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+  selector: 'globalnav-account-menu',
+  templateUrl: './account-menu.component.html',
+  styleUrls: ['./account-menu.component.scss']
+})
+export class AccountMenuComponent implements OnInit {
+    public accountIcon = faUserCircle;
+    public addDeviceIcon = faPlusCircle;
+    public devicesIcon = faMicrochip;
+    @Input() isAuthenticated: boolean;
+    public logInIcon = faSignInAlt;
+    public logOutIcon = faSignOutAlt;
+    public skillsIcon = faComment;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/projects/globalnav/src/lib/globalnav.component.html b/projects/globalnav/src/lib/globalnav.component.html
index 8187258..59981de 100644
--- a/projects/globalnav/src/lib/globalnav.component.html
+++ b/projects/globalnav/src/lib/globalnav.component.html
@@ -1,20 +1,18 @@
-<mat-toolbar fxLayout="row" fxLayoutAlign="space-between" color="primary">
-
-    <!-- At the start of the title bar, put the hamburger menu icon and -->
-    <!-- the Mycroft logo.  The latter is also a link to the WordPress home page-->
-    <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
-        <button mat-icon-button class="menu-button" (click)="snav.toggle()">
-            <fa-icon [icon]="menuIcon"></fa-icon>
-        </button>
-        <a href="{{mycroftUrls.wordpress}}">
-            <div class="globalnav-logo"></div>
-        </a>
-    </div>
-
+<mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" color="primary">
+    <!--
+        At the start of the title bar, put the hamburger menu icon and
+        the Mycroft logo.  The latter is also a link to the WordPress home page
+    -->
+    <button mat-icon-button class="menu-button" (click)="snav.toggle()">
+        <fa-icon [icon]="menuIcon"></fa-icon>
+    </button>
+    <a href="{{mycroftUrls.wordpress}}">
+        <div id=mycroft-logo class="mycroft-logo"></div>
+    </a>
+    <globalnav-account-menu [isAuthenticated]="isLoggedIn"></globalnav-account-menu>
 </mat-toolbar>
 
 <mat-sidenav-container>
-
     <!--
         This is the global sidenav menu for navigating all Mycroft sites.
         When the viewport is mobile device size, the menu is hidden until
diff --git a/projects/globalnav/src/lib/globalnav.component.scss b/projects/globalnav/src/lib/globalnav.component.scss
index 63d7593..0468385 100644
--- a/projects/globalnav/src/lib/globalnav.component.scss
+++ b/projects/globalnav/src/lib/globalnav.component.scss
@@ -4,33 +4,21 @@ mat-toolbar {
     z-index: 2;  // Put this on top of the sidenav container
 
     .menu-button {
-        margin-left: -10px;
-        margin-right: 10px;
+        margin-left: -8px;
         fa-icon {
-            color: white;
+            color: #2c3e50;
             font-size: 20px;
         }
     }
 
-     // Use inline css to display the logo at top of sidebar because Angular
+    // Use inline css to display the logo at top of sidebar because Angular
     // libraries do not support static assets yet.
-   .globalnav-logo {
+   .mycroft-logo {
         background: url("toolbar-logo.svg") no-repeat;
         height: 25px;
         margin-top: -5px;
         width: 168px;
     }
-
-    .sign-in-button {
-        background-color: #22a7f0;
-        color: white;
-        font-size: 16px;
-        fa-icon {
-            color: white;
-            font-size: 16px;
-            margin-right: 10px
-        }
-    }
 }
 
 mat-sidenav-container {
diff --git a/projects/globalnav/src/lib/globalnav.component.ts b/projects/globalnav/src/lib/globalnav.component.ts
index c1744e4..74d4d08 100644
--- a/projects/globalnav/src/lib/globalnav.component.ts
+++ b/projects/globalnav/src/lib/globalnav.component.ts
@@ -79,8 +79,6 @@ export class GlobalnavComponent implements OnInit {
             this.defineForumNav(),
             this.defineContributeNav(),
             this.defineMarketNav(),
-            this.defineAccountNav(),
-            this.defineAuthenticationNav()
         ];
 
         this.footerItems = [
@@ -156,45 +154,4 @@ export class GlobalnavComponent implements OnInit {
             text: 'Marketplace'
         };
     }
-
-    private defineAccountNav(): PrimaryNavItem {
-        let deviceUrl = this.mycroftUrls.account + '/device';
-        let skillUrl = this.mycroftUrls.account + '/skill';
-        let profileUrl = this.mycroftUrls.account + '/profile';
-        const singleSignOnUrl = this.mycroftUrls.singleSignOn + '/login?redirect=';
-
-        if (!this.isLoggedIn) {
-            deviceUrl = singleSignOnUrl + deviceUrl;
-            skillUrl = singleSignOnUrl + skillUrl;
-            profileUrl = singleSignOnUrl + profileUrl;
-        }
-        return {
-            children: [
-                {text: 'Devices', url: deviceUrl},
-                {text: 'Skills', url: skillUrl},
-                {text: 'Profile', url: profileUrl},
-            ],
-            icon: faUserCircle,
-            text: 'My Account',
-        };
-
-    }
-
-    private defineAuthenticationNav(): PrimaryNavItem {
-        let authenticateNav: PrimaryNavItem = {
-            icon: faSignInAlt,
-            text: 'Sign In',
-            url: this.mycroftUrls.singleSignOn + '/login?redirect=' + window.location.href
-        };
-
-        if (this.isLoggedIn) {
-            authenticateNav = {
-                icon: faSignOutAlt,
-                text: 'Sign Out',
-                url: this.mycroftUrls.singleSignOn + '/logout?redirect=' + window.location.href
-            };
-        }
-
-        return authenticateNav;
-    }
 }
diff --git a/projects/globalnav/src/lib/globalnav.module.ts b/projects/globalnav/src/lib/globalnav.module.ts
index a47ec7f..fed8b0a 100644
--- a/projects/globalnav/src/lib/globalnav.module.ts
+++ b/projects/globalnav/src/lib/globalnav.module.ts
@@ -15,6 +15,7 @@ import { GlobalnavComponent } from './globalnav.component';
 import { NavItemComponent } from './nav-item/nav-item.component';
 import { PrimaryNavItemComponent } from './primary-nav-item/primary-nav-item.component';
 import { FooterComponent } from './footer/footer.component';
+import { AccountMenuComponent } from './account-menu/account-menu.component';
 
 @NgModule({
     imports: [
@@ -33,7 +34,8 @@ import { FooterComponent } from './footer/footer.component';
         GlobalnavComponent,
         NavItemComponent,
         PrimaryNavItemComponent,
-        FooterComponent
+        FooterComponent,
+        AccountMenuComponent
     ],
     exports: [
         GlobalnavComponent