5 files changed, 266 insertions, 0 deletions

diff --git a/client/src/app/+admin/users/user-edit/index.ts b/client/src/app/+admin/users/user-edit/index.ts
new file mode 100644
index 000000000..edec02fbb
--- /dev/null
+++ b/client/src/app/+admin/users/user-edit/index.ts
@@ -0,0 +1,2 @@
+export * from './user-add.component'
+export * from './user-update.component'
diff --git a/client/src/app/+admin/users/user-edit/user-add.component.ts b/client/src/app/+admin/users/user-edit/user-add.component.ts
new file mode 100644
index 000000000..40f649cff
--- /dev/null
+++ b/client/src/app/+admin/users/user-edit/user-add.component.ts
@@ -0,0 +1,87 @@
+import { Component, OnInit } from '@angular/core'
+import { FormBuilder, FormGroup } from '@angular/forms'
+import { Router } from '@angular/router'
+
+import { NotificationsService } from 'angular2-notifications'
+
+import { UserService } from '../shared'
+import {
+  USER_USERNAME,
+  USER_EMAIL,
+  USER_PASSWORD,
+  USER_VIDEO_QUOTA
+} from '../../../shared'
+import { UserCreate } from '../../../../../../shared'
+import { UserEdit } from './user-edit'
+
+@Component({
+  selector: 'my-user-add',
+  templateUrl: './user-edit.component.html'
+})
+export class UserAddComponent extends UserEdit implements OnInit {
+  error: string
+
+  form: FormGroup
+  formErrors = {
+    'username': '',
+    'email': '',
+    'password': '',
+    'videoQuota': ''
+  }
+  validationMessages = {
+    'username': USER_USERNAME.MESSAGES,
+    'email': USER_EMAIL.MESSAGES,
+    'password': USER_PASSWORD.MESSAGES,
+    'videoQuota': USER_VIDEO_QUOTA.MESSAGES
+  }
+
+  constructor (
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private userService: UserService
+  ) {
+    super()
+  }
+
+  buildForm () {
+    this.form = this.formBuilder.group({
+      username: [ '', USER_USERNAME.VALIDATORS ],
+      email:    [ '', USER_EMAIL.VALIDATORS ],
+      password: [ '', USER_PASSWORD.VALIDATORS ],
+      videoQuota: [ '-1', USER_VIDEO_QUOTA.VALIDATORS ]
+    })
+
+    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
+  }
+
+  ngOnInit () {
+    this.buildForm()
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    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.`)
+        this.router.navigate([ '/admin/users/list' ])
+      },
+
+      err => this.error = err.text
+    )
+  }
+
+  isCreation () {
+    return true
+  }
+
+  getFormButtonTitle () {
+    return 'Add user'
+  }
+}
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
new file mode 100644
index 000000000..0e23cb731
--- /dev/null
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -0,0 +1,55 @@
+<div class="row">
+  <div class="content-padding">
+
+    <h3 *ngIf="isCreation() === true">Add user</h3>
+    <h3 *ngIf="isCreation() === false">Edit user {{ username }}</h3>
+
+    <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+    <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+      <div class="form-group" *ngIf="isCreation()">
+        <label for="username">Username</label>
+        <input
+          type="text" class="form-control" id="username" placeholder="john"
+          formControlName="username"
+        >
+        <div *ngIf="formErrors.username" class="alert alert-danger">
+          {{ formErrors.username }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="email">Email</label>
+        <input
+          type="text" class="form-control" id="email" placeholder="mail@example.com"
+          formControlName="email"
+        >
+        <div *ngIf="formErrors.email" class="alert alert-danger">
+          {{ formErrors.email }}
+        </div>
+      </div>
+
+      <div class="form-group" *ngIf="isCreation()">
+        <label for="password">Password</label>
+        <input
+          type="password" class="form-control" id="password"
+          formControlName="password"
+        >
+        <div *ngIf="formErrors.password" class="alert alert-danger">
+          {{ formErrors.password }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="videoQuota">Video quota</label>
+        <select class="form-control" id="videoQuota" formControlName="videoQuota">
+          <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
+            {{ videoQuotaOption.label }}
+          </option>
+        </select>
+      </div>
+
+      <input type="submit" value="{{ getFormButtonTitle() }}" class="btn btn-default" [disabled]="!form.valid">
+    </form>
+  </div>
+</div>
diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts
new file mode 100644
index 000000000..61db8a906
--- /dev/null
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@@ -0,0 +1,16 @@
+import { FormReactive } from '../../../shared'
+
+export abstract class UserEdit extends FormReactive {
+  videoQuotaOptions = [
+    { value: -1, label: 'Unlimited' },
+    { value: 100 * 1024 * 1024, label: '100MB' },
+    { value: 5 * 1024 * 1024, label: '500MB' },
+    { value: 1024 * 1024 * 1024, label: '1GB' },
+    { value: 5 * 1024 * 1024 * 1024, label: '5GB' },
+    { value: 20 * 1024 * 1024 * 1024, label: '20GB' },
+    { value: 50 * 1024 * 1024 * 1024, label: '50GB' }
+  ]
+
+  abstract isCreation (): boolean
+  abstract getFormButtonTitle (): string
+}
diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts
new file mode 100644
index 000000000..dbac5f974
--- /dev/null
+++ b/client/src/app/+admin/users/user-edit/user-update.component.ts
@@ -0,0 +1,106 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { FormBuilder, FormGroup } from '@angular/forms'
+import { ActivatedRoute, Router } from '@angular/router'
+import { Subscription } from 'rxjs/Subscription'
+
+import { NotificationsService } from 'angular2-notifications'
+
+import { UserService } from '../shared'
+import { USER_EMAIL, USER_VIDEO_QUOTA } from '../../../shared'
+import { UserUpdate } from '../../../../../../shared/models/users/user-update.model'
+import { User } from '../../../shared/users/user.model'
+import { UserEdit } from './user-edit'
+
+@Component({
+  selector: 'my-user-update',
+  templateUrl: './user-edit.component.html'
+})
+export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
+  error: string
+  userId: number
+  username: string
+
+  form: FormGroup
+  formErrors = {
+    'email': '',
+    'videoQuota': ''
+  }
+  validationMessages = {
+    'email': USER_EMAIL.MESSAGES,
+    'videoQuota': USER_VIDEO_QUOTA.MESSAGES
+  }
+
+  private paramsSub: Subscription
+
+  constructor (
+    private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private userService: UserService
+  ) {
+    super()
+  }
+
+  buildForm () {
+    this.form = this.formBuilder.group({
+      email:    [ '', USER_EMAIL.VALIDATORS ],
+      videoQuota: [ '-1', USER_VIDEO_QUOTA.VALIDATORS ]
+    })
+
+    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
+  }
+
+  ngOnInit () {
+    this.buildForm()
+
+    this.paramsSub = this.route.params.subscribe(routeParams => {
+      const userId = routeParams['id']
+      this.userService.getUser(userId).subscribe(
+        user => this.onUserFetched(user),
+
+        err => this.error = err.text
+      )
+    })
+  }
+
+  ngOnDestroy () {
+    this.paramsSub.unsubscribe()
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const userUpdate: UserUpdate = this.form.value
+
+    // A select in HTML is always mapped as a string, we convert it to number
+    userUpdate.videoQuota = parseInt(this.form.value['videoQuota'], 10)
+
+    this.userService.updateUser(this.userId, userUpdate).subscribe(
+      () => {
+        this.notificationsService.success('Success', `User ${this.username} updated.`)
+        this.router.navigate([ '/admin/users/list' ])
+      },
+
+      err => this.error = err.text
+    )
+  }
+
+  isCreation () {
+    return false
+  }
+
+  getFormButtonTitle () {
+    return 'Update user'
+  }
+
+  private onUserFetched (userJson: User) {
+    this.userId = userJson.id
+    this.username = userJson.username
+
+    this.form.patchValue({
+      email: userJson.email,
+      videoQuota: userJson.videoQuota
+    })
+  }
+}