10 files changed, 72 insertions, 43 deletions

diff --git a/client/src/app/account/account-settings/account-settings.component.html b/client/src/app/account/account-settings/account-settings.component.html
index 2509eb5aa..9e9f688d2 100644
--- a/client/src/app/account/account-settings/account-settings.component.html
+++ b/client/src/app/account/account-settings/account-settings.component.html
@@ -1,7 +1,13 @@
-<div class="user-info">
-  {{ user.username }}
+<div class="user">
+  <img [src]="getAvatarPath()" alt="Avatar" />
+
+  <div class="user-info">
+    <div class="user-info-username">{{ user.username }}</div>
+    <div class="user-info-followers">{{ user.account.followersCount }} subscribers</div>
+  </div>
 </div>
 
+
 <div class="account-title">Account settings</div>
 <my-account-change-password></my-account-change-password>
 
diff --git a/client/src/app/account/account-settings/account-settings.component.scss b/client/src/app/account/account-settings/account-settings.component.scss
index a0822631d..f514809b0 100644
--- a/client/src/app/account/account-settings/account-settings.component.scss
+++ b/client/src/app/account/account-settings/account-settings.component.scss
@@ -1,6 +1,21 @@
-.user-info {
-  font-size: 20px;
-  font-weight: $font-bold;
+.user {
+  display: flex;
+
+  img {
+    @include avatar(50px);
+    margin-right: 15px;
+  }
+
+  .user-info {
+    .user-info-username {
+      font-size: 20px;
+      font-weight: $font-bold;
+    }
+
+    .user-info-followers {
+      font-size: 15px;
+    }
+  }
 }
 
 .account-title {
diff --git a/client/src/app/account/account-settings/account-settings.component.ts b/client/src/app/account/account-settings/account-settings.component.ts
index c3b670e02..cba251000 100644
--- a/client/src/app/account/account-settings/account-settings.component.ts
+++ b/client/src/app/account/account-settings/account-settings.component.ts
@@ -15,4 +15,8 @@ export class AccountSettingsComponent implements OnInit {
   ngOnInit () {
     this.user = this.authService.getUser()
   }
+
+  getAvatarPath () {
+    return this.user.getAvatarPath()
+  }
 }
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 9e6c6b888..fd2708c11 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -1,30 +1,25 @@
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
-import { Observable } from 'rxjs/Observable'
-import { Subject } from 'rxjs/Subject'
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
-import { ReplaySubject } from 'rxjs/ReplaySubject'
+
+import { NotificationsService } from 'angular2-notifications'
+import 'rxjs/add/observable/throw'
 import 'rxjs/add/operator/do'
 import 'rxjs/add/operator/map'
 import 'rxjs/add/operator/mergeMap'
-import 'rxjs/add/observable/throw'
-
-import { NotificationsService } from 'angular2-notifications'
-
-import { AuthStatus } from './auth-status.model'
-import { AuthUser } from './auth-user.model'
-import {
-  OAuthClientLocal,
-  UserRole,
-  UserRefreshToken,
-  VideoChannel,
-  User as UserServerModel
-} from '../../../../../shared'
+import { Observable } from 'rxjs/Observable'
+import { ReplaySubject } from 'rxjs/ReplaySubject'
+import { Subject } from 'rxjs/Subject'
+import { OAuthClientLocal, User as UserServerModel, UserRefreshToken, UserRole, VideoChannel } from '../../../../../shared'
+import { Account } from '../../../../../shared/models/accounts'
+import { UserLogin } from '../../../../../shared/models/users/user-login.model'
 // Do not use the barrel (dependency loop)
 import { RestExtractor } from '../../shared/rest'
-import { UserLogin } from '../../../../../shared/models/users/user-login.model'
 import { UserConstructorHash } from '../../shared/users/user.model'
 
+import { AuthStatus } from './auth-status.model'
+import { AuthUser } from './auth-user.model'
+
 interface UserLoginWithUsername extends UserLogin {
   access_token: string
   refresh_token: string
@@ -42,10 +37,7 @@ interface UserLoginWithUserInformation extends UserLogin {
   displayNSFW: boolean
   email: string
   videoQuota: number
-  account: {
-    id: number
-    uuid: string
-  }
+  account: Account
   videoChannels: VideoChannel[]
 }
 
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 0ed8ec518..7a80fa4de 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -1,5 +1,7 @@
 <menu>
   <div *ngIf="isLoggedIn" class="logged-in-block">
+    <img [src]="getUserAvatarPath()" alt="Avatar" />
+
     <div class="logged-in-info">
       <a routerLink="/account/settings" class="logged-in-username">{{ user.username  }}</a>
       <div class="logged-in-email">{{ user.email }}</div>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 9d67ca66c..5d6fd61c6 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -21,9 +21,15 @@ menu {
     justify-content: center;
     margin-bottom: 35px;
 
+    img {
+      margin-left: 20px;
+      margin-right: 10px;
+
+      @include avatar(34px);
+    }
+
     .logged-in-info {
       flex-grow: 1;
-      margin-left: 40px;
 
       .logged-in-username {
         font-size: 16px;
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 4c35bb3a5..8b8b714a8 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -51,6 +51,10 @@ export class MenuComponent implements OnInit {
     )
   }
 
+  getUserAvatarPath () {
+    return this.user.getAvatarPath()
+  }
+
   isRegistrationAllowed () {
     return this.serverService.getConfig().signup.allowed
   }
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index b075ab717..83990d8b8 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -1,10 +1,5 @@
-import {
-  User as UserServerModel,
-  UserRole,
-  VideoChannel,
-  UserRight,
-  hasUserRight
-} from '../../../../../shared'
+import { hasUserRight, User as UserServerModel, UserRight, UserRole, VideoChannel } from '../../../../../shared'
+import { Account } from '../../../../../shared/models/accounts'
 
 export type UserConstructorHash = {
   id: number,
@@ -14,10 +9,7 @@ export type UserConstructorHash = {
   videoQuota?: number,
   displayNSFW?: boolean,
   createdAt?: Date,
-  account?: {
-    id: number
-    uuid: string
-  },
+  account?: Account,
   videoChannels?: VideoChannel[]
 }
 export class User implements UserServerModel {
@@ -27,10 +19,7 @@ export class User implements UserServerModel {
   role: UserRole
   displayNSFW: boolean
   videoQuota: number
-  account: {
-    id: number
-    uuid: string
-  }
+  account: Account
   videoChannels: VideoChannel[]
   createdAt: Date
 
@@ -61,4 +50,10 @@ export class User implements UserServerModel {
   hasRight (right: UserRight) {
     return hasUserRight(this.role, right)
   }
+
+  getAvatarPath () {
+    if (this.account && this.account.avatar) return this.account.avatar.path
+
+    return '/assets/default-avatar.png'
+  }
 }
diff --git a/client/src/assets/default-avatar.png b/client/src/assets/default-avatar.png
new file mode 100644
index 000000000..4b7fd2c0a
--- /dev/null
+++ b/client/src/assets/default-avatar.png
diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
index 5798b8f6e..e44cf064d 100644
--- a/client/src/sass/_mixins.scss
+++ b/client/src/sass/_mixins.scss
@@ -39,3 +39,8 @@
   @include peertube-button;
   @include disable-default-a-behaviour;
 }
+
+@mixin avatar ($size) {
+  width: $size;
+  height: $size;
+}