Add avatar max size limit

3 files changed, 22 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 fe345207a..0d1637c40 100644
--- a/client/src/app/account/account-settings/account-settings.component.html
+++ b/client/src/app/account/account-settings/account-settings.component.html
@@ -9,8 +9,9 @@
 
 <div class="button-file">
   <span>Change your avatar</span>
-  <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" (change)="changeAvatar()" />
+  <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="changeAvatar()" />
 </div>
+<div class="file-max-size">(extensions: {{ avatarExtensions }}, max size: {{ maxAvatarSize | bytes }})</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 accd65214..c8a27dbcd 100644
--- a/client/src/app/account/account-settings/account-settings.component.scss
+++ b/client/src/app/account/account-settings/account-settings.component.scss
@@ -22,11 +22,19 @@
 }
 
 .button-file {
-  @include peertube-button-file(auto);
+  @include peertube-button-file(160px);
 
   margin-top: 10px;
 }
 
+.file-max-size {
+  display: inline-block;
+  font-size: 13px;
+
+  position: relative;
+  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 3e03085ce..d5f5ff30f 100644
--- a/client/src/app/account/account-settings/account-settings.component.ts
+++ b/client/src/app/account/account-settings/account-settings.component.ts
@@ -1,9 +1,8 @@
-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 { ServerService } from '../../core/server'
+import { User } from '../../shared'
 import { UserService } from '../../shared/users'
 
 @Component({
@@ -19,6 +18,7 @@ export class AccountSettingsComponent implements OnInit {
   constructor (
     private userService: UserService,
     private authService: AuthService,
+    private serverService: ServerService,
     private notificationsService: NotificationsService
   ) {}
 
@@ -47,4 +47,12 @@ export class AccountSettingsComponent implements OnInit {
         err => this.notificationsService.error('Error', err.message)
       )
   }
+
+  get maxAvatarSize () {
+    return this.serverService.getConfig().avatar.file.size.max
+  }
+
+  get avatarExtensions () {
+    return this.serverService.getConfig().avatar.file.extensions.join(',')
+  }
 }