4 files changed, 55 insertions, 9 deletions

diff --git a/client/src/app/+admin/users/shared/user.service.ts b/client/src/app/+admin/users/shared/user.service.ts
index 1c1cd575e..ffd7ba7da 100644
--- a/client/src/app/+admin/users/shared/user.service.ts
+++ b/client/src/app/+admin/users/shared/user.service.ts
@@ -2,12 +2,15 @@ import { Injectable } from '@angular/core'
 import 'rxjs/add/operator/catch'
 import 'rxjs/add/operator/map'
 
+import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'
+
 import { AuthHttp, RestExtractor, RestDataSource, User } from '../../../shared'
 import { UserCreate } from '../../../../../../shared'
 
 @Injectable()
 export class UserService {
   private static BASE_USERS_URL = API_URL + '/api/v1/users/'
+  private bytesPipe = new BytesPipe()
 
   constructor (
     private authHttp: AuthHttp,
@@ -21,10 +24,30 @@ export class UserService {
   }
 
   getDataSource () {
-    return new RestDataSource(this.authHttp, UserService.BASE_USERS_URL)
+    return new RestDataSource(this.authHttp, UserService.BASE_USERS_URL, this.formatDataSource.bind(this))
   }
 
   removeUser (user: User) {
     return this.authHttp.delete(UserService.BASE_USERS_URL + user.id)
   }
+
+  private formatDataSource (users: User[]) {
+    const newUsers = []
+
+    users.forEach(user => {
+      let videoQuota
+      if (user.videoQuota === -1) {
+        videoQuota = 'Unlimited'
+      } else {
+        videoQuota = this.bytesPipe.transform(user.videoQuota)
+      }
+
+      const newUser = Object.assign(user, {
+        videoQuota
+      })
+      newUsers.push(newUser)
+    })
+
+    return newUsers
+  }
 }
diff --git a/client/src/app/+admin/users/user-add/user-add.component.html b/client/src/app/+admin/users/user-add/user-add.component.html
index 9b487aa75..f84d72c7c 100644
--- a/client/src/app/+admin/users/user-add/user-add.component.html
+++ b/client/src/app/+admin/users/user-add/user-add.component.html
@@ -9,7 +9,7 @@
       <div class="form-group">
         <label for="username">Username</label>
         <input
-          type="text" class="form-control" id="username" placeholder="Username"
+          type="text" class="form-control" id="username" placeholder="john"
           formControlName="username"
         >
         <div *ngIf="formErrors.username" class="alert alert-danger">
@@ -20,7 +20,7 @@
       <div class="form-group">
         <label for="email">Email</label>
         <input
-          type="text" class="form-control" id="email" placeholder="Email"
+          type="text" class="form-control" id="email" placeholder="mail@example.com"
           formControlName="email"
         >
         <div *ngIf="formErrors.email" class="alert alert-danger">
@@ -31,7 +31,7 @@
       <div class="form-group">
         <label for="password">Password</label>
         <input
-          type="password" class="form-control" id="password" placeholder="Password"
+          type="password" class="form-control" id="password"
           formControlName="password"
         >
         <div *ngIf="formErrors.password" class="alert alert-danger">
@@ -39,6 +39,19 @@
         </div>
       </div>
 
+      <div class="form-group">
+        <label for="videoQuota">Video quota</label>
+        <select class="form-control" id="videoQuota" formControlName="videoQuota">
+          <option value="-1">Unlimited</option>
+          <option value="100000000">100MB</option>
+          <option value="500000000">500MB</option>
+          <option value="1000000000">1GB</option>
+          <option value="5000000000">5GB</option>
+          <option value="20000000000">20GB</option>
+          <option value="50000000000">50GB</option>
+        </select>
+      </div>
+
       <input type="submit" value="Add user" class="btn btn-default" [disabled]="!form.valid">
     </form>
   </div>
diff --git a/client/src/app/+admin/users/user-add/user-add.component.ts b/client/src/app/+admin/users/user-add/user-add.component.ts
index 0dd99eccd..91377a933 100644
--- a/client/src/app/+admin/users/user-add/user-add.component.ts
+++ b/client/src/app/+admin/users/user-add/user-add.component.ts
@@ -9,7 +9,8 @@ import {
   FormReactive,
   USER_USERNAME,
   USER_EMAIL,
-  USER_PASSWORD
+  USER_PASSWORD,
+  USER_VIDEO_QUOTA
 } from '../../../shared'
 import { UserCreate } from '../../../../../../shared'
 
@@ -24,12 +25,14 @@ export class UserAddComponent extends FormReactive implements OnInit {
   formErrors = {
     'username': '',
     'email': '',
-    'password': ''
+    'password': '',
+    'videoQuota': ''
   }
   validationMessages = {
     'username': USER_USERNAME.MESSAGES,
     'email': USER_EMAIL.MESSAGES,
-    'password': USER_PASSWORD.MESSAGES
+    'password': USER_PASSWORD.MESSAGES,
+    'videoQuota': USER_VIDEO_QUOTA.MESSAGES
   }
 
   constructor (
@@ -45,7 +48,8 @@ export class UserAddComponent extends FormReactive implements OnInit {
     this.form = this.formBuilder.group({
       username: [ '', USER_USERNAME.VALIDATORS ],
       email:    [ '', USER_EMAIL.VALIDATORS ],
-      password: [ '', USER_PASSWORD.VALIDATORS ]
+      password: [ '', USER_PASSWORD.VALIDATORS ],
+      videoQuota: [ '-1', USER_VIDEO_QUOTA.VALIDATORS ]
     })
 
     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
@@ -60,6 +64,9 @@ export class UserAddComponent extends FormReactive implements OnInit {
 
     const userCreate: UserCreate = this.form.value
 
+    // A select in HTML is always mapped as a string, we convert it to number
+    userCreate.videoQuota = parseInt(this.form.value['videoQuota'], 10)
+
     this.userService.addUser(userCreate).subscribe(
       () => {
         this.notificationsService.success('Success', `User ${userCreate.username} created.`)
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index 12826741c..dbb85cedd 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -30,7 +30,7 @@ export class UserListComponent {
     },
     pager: {
       display: true,
-      perPage: 10
+      perPage: 1
     },
     columns: {
       id: {
@@ -43,6 +43,9 @@ export class UserListComponent {
       email: {
         title: 'Email'
       },
+      videoQuota: {
+        title: 'Video quota'
+      },
       role: {
         title: 'Role',
         sort: false