Added a little profile image, feedback would be good on this change, im not too sure

src/Ombi/ClientApp/package.json

@@ -55,6 +55,7 @@
     "rxjs": "^6.5.2",
     "spinkit": "^1.2.5",
     "store": "^2.0.12",
+    "ts-md5": "^1.2.7",
     "tslib": "^1.10.0",
     "tslint-angular": "^1.1.2",
     "zone.js": "~0.10.2"

src/Ombi/ClientApp/src/app/app.component.html

@@ -170,7 +170,7 @@
 
 
 <div>
-    <app-my-nav id="main-container" [showNav]="showNav" [isAdmin]="isAdmin" [applicationName]="applicationName" [username]="username" (logoutClick)="logOut();" (themeChange)="onSetTheme($event)">
+    <app-my-nav id="main-container" [showNav]="showNav" [isAdmin]="isAdmin" [applicationName]="applicationName" [username]="username" [email]="user.email" (logoutClick)="logOut();" (themeChange)="onSetTheme($event)">
     </app-my-nav>
 
 

src/Ombi/ClientApp/src/app/auth/IUserLogin.ts

@@ -12,4 +12,5 @@ export interface ILocalUser {
     roles: string[];
     name: string;
     username:string;
+    email: string;
 }

src/Ombi/ClientApp/src/app/auth/auth.service.ts

@@ -52,8 +52,9 @@ export class AuthService extends ServiceHelpers {
             const json = this.jwtHelperService.decodeToken(token);
             const roles = json.role;
             const name = json.sub;
+            const email = json.Email;
 
-            const u = { name, roles: [] as string[] };
+            const u = { name, roles: [] as string[], email };
             if (roles instanceof Array) {
                 u.roles = roles;
             } else {

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html

@@ -3,6 +3,9 @@
         [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
         [opened]="!(isHandset$ | async)">
         <mat-toolbar>{{applicationName}}</mat-toolbar>
+        <div class="profile-img-container">
+            <img class="profile-img" src="https://www.gravatar.com/avatar/{{emailHash}}?d=https://raw.githubusercontent.com/tidusjar/Ombi/gh-pages/img/android-chrome-512x512.png" />
+        </div>
         <mat-nav-list>
             <span *ngFor="let nav of navItems">
 

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss

@@ -88,3 +88,11 @@
 /*bottom-nav-link:hover{
     background-color:rgb(226, 52, 36) !important;
 }*/
+
+.profile-img-container {
+    text-align: center;padding-bottom: 15px;
+}
+.profile-img {
+    width: 100px;
+    border-radius: 100%;
+}

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts

@@ -7,6 +7,7 @@ import { StorageService } from '../shared/storage/storage-service';
 import { SettingsService } from '../services';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { SearchFilter } from './SearchFilter';
+import {Md5} from 'ts-md5/dist/md5';
 
 export enum SearchFilterType {
   Movie = 1,
@@ -31,6 +32,7 @@ export class MyNavComponent implements OnInit {
   @Input() public applicationName: string;
   @Input() public username: string;
   @Input() public isAdmin: string;
+  @Input() public email: string;
   @Output() public logoutClick = new EventEmitter();
   @Output() public themeChange = new EventEmitter<string>();
   public theme: string;
@@ -38,6 +40,7 @@ export class MyNavComponent implements OnInit {
   public navItems: INavBar[];
   public searchFilter: SearchFilter;
   public SearchFilterType = SearchFilterType;
+  public emailHash: string|Int32Array;
 
   constructor(private breakpointObserver: BreakpointObserver,
     private settingsService: SettingsService,
@@ -53,6 +56,10 @@ export class MyNavComponent implements OnInit {
       tvShows: true
     }
 
+
+    const md5 = new Md5();
+    this.emailHash = md5.appendStr(this.email).end();
+
     this.issuesEnabled = await this.settingsService.issueEnabled().toPromise();
     const customizationSettings = await this.settingsService.getCustomization().toPromise();
     console.log("issues enabled: " + this.issuesEnabled);

src/Ombi/ClientApp/src/app/usermanagement/usermanagement.component.html

@@ -8,7 +8,7 @@
 
   </div>
   <div class="content">
-      <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+      <table mat-table *ngIf="dataSource" [dataSource]="dataSource" matSort class="mat-elevation-z8">
 
         <ng-container matColumnDef="select">
                 <th mat-header-cell *matHeaderCellDef>

src/Ombi/ClientApp/yarn.lock

@@ -8713,6 +8713,11 @@ trim-newlines@^1.0.0:
   dependencies:
     glob "^7.1.2"
 
+ts-md5@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/ts-md5/-/ts-md5-1.2.7.tgz#b76471fc2fd38f0502441f6c3b9494ed04537401"
+  integrity sha512-emODogvKGWi1KO1l9c6YxLMBn6CEH3VrH5mVPIyOtxBG52BvV4jP3GWz6bOZCz61nLgBc3ffQYE4+EHfCD+V7w==
+
 ts-node@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-5.0.1.tgz#78e5d1cb3f704de1b641e43b76be2d4094f06f81"

src/Ombi/Controllers/V1/TokenController.cs

@@ -135,6 +135,10 @@ namespace Ombi.Controllers.V1
                 new Claim("Id", user.Id)
             };
             claims.AddRange(roles.Select(role => new Claim("role", role)));
+            if(user.Email.HasValue())
+            {
+                claims.Add(new Claim("Email", user.Email));
+            }
 
             var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(StartupSingleton.Instance.SecurityKey));
             var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);