From 1228010488d38f0e8b74eb63417d1c7674d4f1a3 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Fri, 6 Jul 2018 10:00:09 -0400
Subject: [PATCH] avatar in nav dropdown

---
 src/app/layouts/navbar.component.html | 11 +++++++----
 src/app/layouts/navbar.component.ts   | 11 +++++++----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/app/layouts/navbar.component.html b/src/app/layouts/navbar.component.html
index 98db76249a..126fe26b4e 100644
--- a/src/app/layouts/navbar.component.html
+++ b/src/app/layouts/navbar.component.html
@@ -22,10 +22,13 @@
                     <i class="fa fa-user fa-lg"></i>
                 </a>
                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-profile">
-                    <span class="dropdown-item-text">
-                        {{'loggedInAs' | i18n}}
-                        <small class="text-muted">{{email}}</small>
-                    </span>
+                    <div class="dropdown-item-text d-flex align-items-center" *ngIf="name" appStopProp>
+                        <app-avatar [data]="name" width="25" height="25" fontSize="14" [circle]="true"></app-avatar>
+                        <div class="ml-2">
+                            {{'loggedInAs' | i18n}}
+                            <small class="text-muted">{{name}}</small>
+                        </div>
+                    </div>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="https://help.bitwarden.com" target="_blank" rel="noopener">
                         <i class="fa fa-fw fa-question-circle"></i>
diff --git a/src/app/layouts/navbar.component.ts b/src/app/layouts/navbar.component.ts
index 1cf670b85c..19d3cda3e9 100644
--- a/src/app/layouts/navbar.component.ts
+++ b/src/app/layouts/navbar.component.ts
@@ -5,7 +5,7 @@ import {
 
 import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
-import { UserService } from 'jslib/abstractions/user.service';
+import { TokenService } from 'jslib/abstractions/token.service';
 
 @Component({
     selector: 'app-navbar',
@@ -13,15 +13,18 @@ import { UserService } from 'jslib/abstractions/user.service';
 })
 export class NavbarComponent implements OnInit {
     selfHosted = false;
-    email: string;
+    name: string;
 
     constructor(private messagingService: MessagingService, private platformUtilsService: PlatformUtilsService,
-        private userService: UserService) {
+        private tokenService: TokenService) {
         this.selfHosted = this.platformUtilsService.isSelfHost();
     }
 
     async ngOnInit() {
-        this.email = await this.userService.getEmail();
+        this.name = await this.tokenService.getName();
+        if (this.name == null || this.name.trim() === '') {
+            this.name = await this.tokenService.getEmail();
+        }
     }
 
     lock() {