Begin to add avatar to actors

3 files changed, 43 insertions, 5 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 f14eadd49..fe345207a 100644
--- a/client/src/app/account/account-settings/account-settings.component.html
+++ b/client/src/app/account/account-settings/account-settings.component.html
@@ -1,5 +1,5 @@
 <div class="user">
-  <img [src]="getAvatarPath()" alt="Avatar" />
+  <img [src]="getAvatarUrl()" alt="Avatar" />
 
   <div class="user-info">
     <div class="user-info-username">{{ user.username }}</div>
@@ -7,6 +7,10 @@
   </div>
 </div>
 
+<div class="button-file">
+  <span>Change your avatar</span>
+  <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" (change)="changeAvatar()" />
+</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 7f1ade377..accd65214 100644
--- a/client/src/app/account/account-settings/account-settings.component.scss
+++ b/client/src/app/account/account-settings/account-settings.component.scss
@@ -21,6 +21,12 @@
   }
 }
 
+.button-file {
+  @include peertube-button-file(auto);
+
+  margin-top: 10px;
+}
+
 .account-title {
   text-transform: uppercase;
   color: $orange-color;
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 cba251000..3e03085ce 100644
--- a/client/src/app/account/account-settings/account-settings.component.ts
+++ b/client/src/app/account/account-settings/account-settings.component.ts
@@ -1,6 +1,10 @@
-import { Component, OnInit } from '@angular/core'
+import { HttpEventType, HttpResponse } from '@angular/common/http'
+import { Component, OnInit, ViewChild } from '@angular/core'
+import { NotificationsService } from 'angular2-notifications'
+import { VideoPrivacy } from '../../../../../shared/models/videos'
 import { User } from '../../shared'
 import { AuthService } from '../../core'
+import { UserService } from '../../shared/users'
 
 @Component({
   selector: 'my-account-settings',
@@ -8,15 +12,39 @@ import { AuthService } from '../../core'
   styleUrls: [ './account-settings.component.scss' ]
 })
 export class AccountSettingsComponent implements OnInit {
+  @ViewChild('avatarfileInput') avatarfileInput
+
   user: User = null
 
-  constructor (private authService: AuthService) {}
+  constructor (
+    private userService: UserService,
+    private authService: AuthService,
+    private notificationsService: NotificationsService
+  ) {}
 
   ngOnInit () {
     this.user = this.authService.getUser()
   }
 
-  getAvatarPath () {
-    return this.user.getAvatarPath()
+  getAvatarUrl () {
+    return this.user.getAvatarUrl()
+  }
+
+  changeAvatar () {
+    const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
+
+    const formData = new FormData()
+    formData.append('avatarfile', avatarfile)
+
+    this.userService.changeAvatar(formData)
+      .subscribe(
+        data => {
+          this.notificationsService.success('Success', 'Avatar changed.')
+
+          this.user.account.avatar = data.avatar
+        },
+
+        err => this.notificationsService.error('Error', err.message)
+      )
   }
 }