33 files changed, 378 insertions, 245 deletions

diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 69f648269..036e794d2 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -8,6 +8,11 @@
         <div class="actor-names">
           <div class="actor-display-name">{{ account.displayName }}</div>
           <div class="actor-name">{{ account.nameWithHost }}</div>
+
+          <span *ngIf="user?.blocked" [ngbTooltip]="user.blockedReason" class="badge badge-danger" i18n>Banned</span>
+
+          <my-user-moderation-dropdown buttonSize="small" [user]="user" (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()">
+          </my-user-moderation-dropdown>
         </div>
         <div i18n class="actor-followers">{{ account.followersCount }} subscribers</div>
       </div>
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 909b65bc7..3cedda889 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -3,4 +3,16 @@
 
 .sub-menu {
   @include sub-menu-with-actor;
+}
+
+my-user-moderation-dropdown,
+.badge {
+  margin-left: 10px;
+
+  position: relative;
+  top: 3px;
+}
+
+.badge {
+  font-size: 13px;
 }
\ No newline at end of file
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index af0451e91..e19927d6b 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -1,10 +1,14 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { AccountService } from '@app/shared/account/account.service'
 import { Account } from '@app/shared/account/account.model'
-import { RestExtractor } from '@app/shared'
-import { catchError, switchMap, distinctUntilChanged, map } from 'rxjs/operators'
+import { RestExtractor, UserService } from '@app/shared'
+import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators'
 import { Subscription } from 'rxjs'
+import { NotificationsService } from 'angular2-notifications'
+import { User, UserRight } from '../../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { AuthService, RedirectService } from '@app/core'
 
 @Component({
   templateUrl: './accounts.component.html',
@@ -12,13 +16,19 @@ import { Subscription } from 'rxjs'
 })
 export class AccountsComponent implements OnInit, OnDestroy {
   account: Account
+  user: User
 
   private routeSub: Subscription
 
   constructor (
     private route: ActivatedRoute,
+    private userService: UserService,
     private accountService: AccountService,
-    private restExtractor: RestExtractor
+    private notificationsService: NotificationsService,
+    private restExtractor: RestExtractor,
+    private redirectService: RedirectService,
+    private authService: AuthService,
+    private i18n: I18n
   ) {}
 
   ngOnInit () {
@@ -27,12 +37,40 @@ export class AccountsComponent implements OnInit, OnDestroy {
         map(params => params[ 'accountId' ]),
         distinctUntilChanged(),
         switchMap(accountId => this.accountService.getAccount(accountId)),
+        tap(account => this.getUserIfNeeded(account)),
         catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))
       )
-      .subscribe(account => this.account = account)
+      .subscribe(
+        account => this.account = account,
+
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
+      )
   }
 
   ngOnDestroy () {
     if (this.routeSub) this.routeSub.unsubscribe()
   }
+
+  onUserChanged () {
+    this.getUserIfNeeded(this.account)
+  }
+
+  onUserDeleted () {
+    this.redirectService.redirectToHomepage()
+  }
+
+  private getUserIfNeeded (account: Account) {
+    if (!account.userId) return
+    if (!this.authService.isLoggedIn()) return
+
+    const user = this.authService.getUser()
+    if (user.hasRight(UserRight.MANAGE_USERS)) {
+      this.userService.getUser(account.userId)
+          .subscribe(
+            user => this.user = user,
+
+            err => this.notificationsService.error(this.i18n('Error'), err.message)
+          )
+    }
+  }
 }
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index 5784609ef..8c6db98d9 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -10,9 +10,8 @@ import { FollowingListComponent } from './follows/following-list/following-list.
 import { JobsComponent } from './jobs/job.component'
 import { JobsListComponent } from './jobs/jobs-list/jobs-list.component'
 import { JobService } from './jobs/shared/job.service'
-import { UserCreateComponent, UserListComponent, UsersComponent, UserService, UserUpdateComponent } from './users'
+import { UserCreateComponent, UserListComponent, UsersComponent, UserUpdateComponent } from './users'
 import { ModerationCommentModalComponent, VideoAbuseListComponent, VideoBlacklistListComponent } from './moderation'
-import { UserBanModalComponent } from '@app/+admin/users/user-list/user-ban-modal.component'
 import { ModerationComponent } from '@app/+admin/moderation/moderation.component'
 import { RedundancyCheckboxComponent } from '@app/+admin/follows/shared/redundancy-checkbox.component'
 import { RedundancyService } from '@app/+admin/follows/shared/redundancy.service'
@@ -37,7 +36,6 @@ import { RedundancyService } from '@app/+admin/follows/shared/redundancy.service
     UserCreateComponent,
     UserUpdateComponent,
     UserListComponent,
-    UserBanModalComponent,
 
     ModerationComponent,
     VideoBlacklistListComponent,
@@ -58,7 +56,6 @@ import { RedundancyService } from '@app/+admin/follows/shared/redundancy.service
   providers: [
     FollowService,
     RedundancyService,
-    UserService,
     JobService,
     ConfigService
   ]
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index 4983b0425..25b303f44 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
-import { ConfirmService } from '@app/core'
 import { ServerService } from '@app/core/server/server.service'
 import { CustomConfigValidatorsService, FormReactive, UserValidatorsService } from '@app/shared'
 import { NotificationsService } from 'angular2-notifications'
@@ -29,7 +28,6 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     private notificationsService: NotificationsService,
     private configService: ConfigService,
     private serverService: ServerService,
-    private confirmService: ConfirmService,
     private i18n: I18n
   ) {
     super()
@@ -124,28 +122,6 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
   }
 
   async formValidated () {
-    const newCustomizationJavascript = this.form.value['customizationJavascript']
-    const newCustomizationCSS = this.form.value['customizationCSS']
-
-    const customizations = []
-    if (newCustomizationJavascript && newCustomizationJavascript !== this.oldCustomJavascript) customizations.push('JavaScript')
-    if (newCustomizationCSS && newCustomizationCSS !== this.oldCustomCSS) customizations.push('CSS')
-
-    if (customizations.length !== 0) {
-      const customizationsText = customizations.join('/')
-
-      // FIXME: i18n service does not support string concatenation
-      const message = this.i18n('You set custom {{customizationsText}}. ', { customizationsText }) +
-        this.i18n('This could lead to security issues or bugs if you do not understand it. ') +
-        this.i18n('Are you sure you want to update the configuration?')
-
-      const label = this.i18n('Please type') + ` "I understand the ${customizationsText} I set" ` + this.i18n('to confirm.')
-      const expectedInputValue = `I understand the ${customizationsText} I set`
-
-      const confirmRes = await this.confirmService.confirmWithInput(message, label, expectedInputValue)
-      if (confirmRes === false) return
-    }
-
     const data: CustomConfig = {
       instance: {
         name: this.form.value['instanceName'],
diff --git a/client/src/app/+admin/users/index.ts b/client/src/app/+admin/users/index.ts
index efcd0d9cb..156e54d89 100644
--- a/client/src/app/+admin/users/index.ts
+++ b/client/src/app/+admin/users/index.ts
@@ -1,4 +1,3 @@
-export * from './shared'
 export * from './user-edit'
 export * from './user-list'
 export * from './users.component'
diff --git a/client/src/app/+admin/users/shared/index.ts b/client/src/app/+admin/users/shared/index.ts
deleted file mode 100644
index 1f1302dc5..000000000
--- a/client/src/app/+admin/users/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './user.service'
diff --git a/client/src/app/+admin/users/shared/user.service.ts b/client/src/app/+admin/users/shared/user.service.ts
deleted file mode 100644
index 470beef08..000000000
--- a/client/src/app/+admin/users/shared/user.service.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { catchError, map } from 'rxjs/operators'
-import { HttpClient, HttpParams } from '@angular/common/http'
-import { Injectable } from '@angular/core'
-import { BytesPipe } from 'ngx-pipes'
-import { SortMeta } from 'primeng/components/common/sortmeta'
-import { Observable } from 'rxjs'
-import { ResultList, UserCreate, UserUpdate, User, UserRole } from '../../../../../../shared'
-import { environment } from '../../../../environments/environment'
-import { RestExtractor, RestPagination, RestService } from '../../../shared'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-
-@Injectable()
-export class UserService {
-  private static BASE_USERS_URL = environment.apiUrl + '/api/v1/users/'
-  private bytesPipe = new BytesPipe()
-
-  constructor (
-    private authHttp: HttpClient,
-    private restService: RestService,
-    private restExtractor: RestExtractor,
-    private i18n: I18n
-  ) { }
-
-  addUser (userCreate: UserCreate) {
-    return this.authHttp.post(UserService.BASE_USERS_URL, userCreate)
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  updateUser (userId: number, userUpdate: UserUpdate) {
-    return this.authHttp.put(UserService.BASE_USERS_URL + userId, userUpdate)
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  getUser (userId: number) {
-    return this.authHttp.get<User>(UserService.BASE_USERS_URL + userId)
-               .pipe(catchError(err => this.restExtractor.handleError(err)))
-  }
-
-  getUsers (pagination: RestPagination, sort: SortMeta): Observable<ResultList<User>> {
-    let params = new HttpParams()
-    params = this.restService.addRestGetParams(params, pagination, sort)
-
-    return this.authHttp.get<ResultList<User>>(UserService.BASE_USERS_URL, { params })
-               .pipe(
-                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
-                 map(res => this.restExtractor.applyToResultListData(res, this.formatUser.bind(this))),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  removeUser (user: User) {
-    return this.authHttp.delete(UserService.BASE_USERS_URL + user.id)
-               .pipe(catchError(err => this.restExtractor.handleError(err)))
-  }
-
-  banUser (user: User, reason?: string) {
-    const body = reason ? { reason } : {}
-
-    return this.authHttp.post(UserService.BASE_USERS_URL + user.id + '/block', body)
-               .pipe(catchError(err => this.restExtractor.handleError(err)))
-  }
-
-  unbanUser (user: User) {
-    return this.authHttp.post(UserService.BASE_USERS_URL + user.id + '/unblock', {})
-               .pipe(catchError(err => this.restExtractor.handleError(err)))
-  }
-
-  private formatUser (user: User) {
-    let videoQuota
-    if (user.videoQuota === -1) {
-      videoQuota = this.i18n('Unlimited')
-    } else {
-      videoQuota = this.bytesPipe.transform(user.videoQuota, 0)
-    }
-
-    const videoQuotaUsed = this.bytesPipe.transform(user.videoQuotaUsed, 0)
-
-    const roleLabels: { [ id in UserRole ]: string } = {
-      [UserRole.USER]: this.i18n('User'),
-      [UserRole.ADMINISTRATOR]: this.i18n('Administrator'),
-      [UserRole.MODERATOR]: this.i18n('Moderator')
-    }
-
-    return Object.assign(user, {
-      roleLabel: roleLabels[user.role],
-      videoQuota,
-      videoQuotaUsed
-    })
-  }
-}
diff --git a/client/src/app/+admin/users/user-edit/user-create.component.ts b/client/src/app/+admin/users/user-edit/user-create.component.ts
index 132e280b9..dd8e4efd5 100644
--- a/client/src/app/+admin/users/user-edit/user-create.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-create.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { NotificationsService } from 'angular2-notifications'
-import { UserService } from '../shared'
 import { ServerService } from '../../../core'
 import { UserCreate, UserRole } from '../../../../../../shared'
 import { UserEdit } from './user-edit'
@@ -9,6 +8,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
+import { UserService } from '@app/shared'
 
 @Component({
   selector: 'my-user-create',
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
index 9eb91ac95..cd3885a99 100644
--- a/client/src/app/+admin/users/user-edit/user-update.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-update.component.ts
@@ -2,7 +2,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { NotificationsService } from 'angular2-notifications'
-import { UserService } from '../shared'
 import { ServerService } from '../../../core'
 import { UserEdit } from './user-edit'
 import { User, UserUpdate } from '../../../../../../shared'
@@ -10,6 +9,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
+import { UserService } from '@app/shared'
 
 @Component({
   selector: 'my-user-update',
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index bb1b26442..cca057ba1 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -40,7 +40,8 @@
       <td>{{ user.roleLabel }}</td>
       <td>{{ user.createdAt }}</td>
       <td class="action-cell">
-        <my-action-dropdown i18n-label label="Actions" [actions]="userActions" [entry]="user"></my-action-dropdown>
+        <my-user-moderation-dropdown [user]="user" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()">
+        </my-user-moderation-dropdown>
       </td>
     </tr>
   </ng-template>
@@ -55,4 +56,3 @@
   </ng-template>
 </p-table>
 
-<my-user-ban-modal #userBanModal (userBanned)="onUserBanned()"></my-user-ban-modal>
\ No newline at end of file
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 100ffc00e..dee3ed643 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
@@ -1,13 +1,9 @@
-import { Component, OnInit, ViewChild } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { NotificationsService } from 'angular2-notifications'
 import { SortMeta } from 'primeng/components/common/sortmeta'
 import { ConfirmService } from '../../../core'
-import { RestPagination, RestTable } from '../../../shared'
-import { UserService } from '../shared'
+import { RestPagination, RestTable, UserService } from '../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
-import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
-import { UserBanModalComponent } from '@app/+admin/users/user-list/user-ban-modal.component'
 import { User } from '../../../../../../shared'
 
 @Component({
@@ -16,16 +12,11 @@ import { User } from '../../../../../../shared'
   styleUrls: [ './user-list.component.scss' ]
 })
 export class UserListComponent extends RestTable implements OnInit {
-  @ViewChild('userBanModal') userBanModal: UserBanModalComponent
-
   users: User[] = []
   totalRecords = 0
   rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: 1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
-  userActions: DropdownAction<User>[] = []
-
-  private openedModal: NgbModalRef
 
   constructor (
     private notificationsService: NotificationsService,
@@ -34,96 +25,16 @@ export class UserListComponent extends RestTable implements OnInit {
     private i18n: I18n
   ) {
     super()
-
-    this.userActions = [
-      {
-        label: this.i18n('Edit'),
-        linkBuilder: this.getRouterUserEditLink
-      },
-      {
-        label: this.i18n('Delete'),
-        handler: user => this.removeUser(user)
-      },
-      {
-        label: this.i18n('Ban'),
-        handler: user => this.openBanUserModal(user),
-        isDisplayed: user => !user.blocked
-      },
-      {
-        label: this.i18n('Unban'),
-        handler: user => this.unbanUser(user),
-        isDisplayed: user => user.blocked
-      }
-    ]
   }
 
   ngOnInit () {
     this.loadSort()
   }
 
-  hideBanUserModal () {
-    this.openedModal.close()
-  }
-
-  openBanUserModal (user: User) {
-    if (user.username === 'root') {
-      this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot ban root.'))
-      return
-    }
-
-    this.userBanModal.openModal(user)
-  }
-
-  onUserBanned () {
+  onUserChanged () {
     this.loadData()
   }
 
-  async unbanUser (user: User) {
-    const message = this.i18n('Do you really want to unban {{username}}?', { username: user.username })
-    const res = await this.confirmService.confirm(message, this.i18n('Unban'))
-    if (res === false) return
-
-    this.userService.unbanUser(user)
-      .subscribe(
-        () => {
-          this.notificationsService.success(
-            this.i18n('Success'),
-            this.i18n('User {{username}} unbanned.', { username: user.username })
-          )
-          this.loadData()
-        },
-
-        err => this.notificationsService.error(this.i18n('Error'), err.message)
-      )
-  }
-
-  async removeUser (user: User) {
-    if (user.username === 'root') {
-      this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot delete root.'))
-      return
-    }
-
-    const message = this.i18n('If you remove this user, you will not be able to create another with the same username!')
-    const res = await this.confirmService.confirm(message, this.i18n('Delete'))
-    if (res === false) return
-
-    this.userService.removeUser(user).subscribe(
-      () => {
-        this.notificationsService.success(
-          this.i18n('Success'),
-          this.i18n('User {{username}} deleted.', { username: user.username })
-        )
-        this.loadData()
-      },
-
-      err => this.notificationsService.error(this.i18n('Error'), err.message)
-    )
-  }
-
-  getRouterUserEditLink (user: User) {
-    return [ '/admin', 'users', 'update', user.id ]
-  }
-
   protected loadData () {
     this.userService.getUsers(this.pagination, this.sort)
                     .subscribe(
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 7cd0fff1b..dc4d0bf6a 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -4,9 +4,10 @@ import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router'
 import { AuthService, RedirectService, ServerService, ThemeService } from '@app/core'
 import { is18nPath } from '../../../shared/models/i18n'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { skip } from 'rxjs/operators'
+import { skip, debounceTime } from 'rxjs/operators'
 import { HotkeysService, Hotkey } from 'angular2-hotkeys'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { fromEvent } from 'rxjs'
 
 @Component({
   selector: 'my-app',
@@ -28,6 +29,7 @@ export class AppComponent implements OnInit {
   }
 
   isMenuDisplayed = true
+  isMenuChangedByUser = false
 
   customCSS: SafeHtml
 
@@ -165,6 +167,10 @@ export class AppComponent implements OnInit {
         return false
       }, undefined, this.i18n('Toggle Dark theme'))
     ])
+
+    fromEvent(window, 'resize')
+      .pipe(debounceTime(200))
+      .subscribe(() => this.onResize())
   }
 
   isUserLoggedIn () {
@@ -173,5 +179,10 @@ export class AppComponent implements OnInit {
 
   toggleMenu () {
     this.isMenuDisplayed = !this.isMenuDisplayed
+    this.isMenuChangedByUser = true
+  }
+
+  onResize () {
+    this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
   }
 }
diff --git a/client/src/app/shared/account/account.model.ts b/client/src/app/shared/account/account.model.ts
index 5058e372f..42f2cfeaf 100644
--- a/client/src/app/shared/account/account.model.ts
+++ b/client/src/app/shared/account/account.model.ts
@@ -6,11 +6,14 @@ export class Account extends Actor implements ServerAccount {
   description: string
   nameWithHost: string
 
+  userId?: number
+
   constructor (hash: ServerAccount) {
     super(hash)
 
     this.displayName = hash.displayName
     this.description = hash.description
+    this.userId = hash.userId
     this.nameWithHost = Actor.CREATE_BY_STRING(this.name, this.host)
   }
 }
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 8b7241379..8110e2515 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,5 +1,5 @@
 <div class="dropdown-root" ngbDropdown [placement]="placement">
-  <div class="action-button" ngbDropdownToggle role="button">
+  <div class="action-button" [ngClass]="{ small: buttonSize === 'small' }" ngbDropdownToggle role="button">
     <span class="icon icon-action"></span>
   </div>
 
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 615511093..00f120fb8 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -22,6 +22,12 @@
     background-image: url('../../../assets/images/video/more.svg');
     top: -1px;
   }
+
+  &.small {
+    font-size: 14px;
+    height: 20px;
+    line-height: 20px;
+  }
 }
 
 .dropdown-menu {
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index 17f9cc618..1838ff697 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -17,4 +17,5 @@ export class ActionDropdownComponent<T> {
   @Input() actions: DropdownAction<T>[] = []
   @Input() entry: T
   @Input() placement = 'left'
+  @Input() buttonSize: 'normal' | 'small' = 'normal'
 }
diff --git a/client/src/app/shared/moderation/index.ts b/client/src/app/shared/moderation/index.ts
new file mode 100644
index 000000000..9a77c64c0
--- /dev/null
+++ b/client/src/app/shared/moderation/index.ts
@@ -0,0 +1,2 @@
+export * from './user-ban-modal.component'
+export * from './user-moderation-dropdown.component'
diff --git a/client/src/app/+admin/users/user-list/user-ban-modal.component.html b/client/src/app/shared/moderation/user-ban-modal.component.html
index b2958caa4..b2958caa4 100644
--- a/client/src/app/+admin/users/user-list/user-ban-modal.component.html
+++ b/client/src/app/shared/moderation/user-ban-modal.component.html
diff --git a/client/src/app/+admin/users/user-list/user-ban-modal.component.scss b/client/src/app/shared/moderation/user-ban-modal.component.scss
index 84562f15c..84562f15c 100644
--- a/client/src/app/+admin/users/user-list/user-ban-modal.component.scss
+++ b/client/src/app/shared/moderation/user-ban-modal.component.scss
diff --git a/client/src/app/+admin/users/user-list/user-ban-modal.component.ts b/client/src/app/shared/moderation/user-ban-modal.component.ts
index 4fd4d561c..67ae38e48 100644
--- a/client/src/app/+admin/users/user-list/user-ban-modal.component.ts
+++ b/client/src/app/shared/moderation/user-ban-modal.component.ts
@@ -1,12 +1,12 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { NotificationsService } from 'angular2-notifications'
-import { FormReactive, UserValidatorsService } from '../../../shared'
-import { UserService } from '../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { User } from '../../../../../../shared'
+import { FormReactive, UserValidatorsService } from '@app/shared/forms'
+import { UserService } from '@app/shared/users'
+import { User } from '../../../../../shared'
 
 @Component({
   selector: 'my-user-ban-modal',
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.html b/client/src/app/shared/moderation/user-moderation-dropdown.component.html
new file mode 100644
index 000000000..ed1a4c863
--- /dev/null
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.html
@@ -0,0 +1,5 @@
+<ng-container *ngIf="user && userActions.length !== 0">
+  <my-user-ban-modal #userBanModal (userBanned)="onUserBanned()"></my-user-ban-modal>
+
+  <my-action-dropdown i18n-label label="Actions" [actions]="userActions" [entry]="user" [buttonSize]="buttonSize"></my-action-dropdown>
+</ng-container>
\ No newline at end of file
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.scss b/client/src/app/shared/moderation/user-moderation-dropdown.component.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.scss
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
new file mode 100644
index 000000000..4f88456de
--- /dev/null
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -0,0 +1,135 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { NotificationsService } from 'angular2-notifications'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { UserBanModalComponent } from '@app/shared/moderation/user-ban-modal.component'
+import { UserService } from '@app/shared/users'
+import { AuthService, ConfirmService } from '@app/core'
+import { User, UserRight } from '../../../../../shared/models/users'
+
+@Component({
+  selector: 'my-user-moderation-dropdown',
+  templateUrl: './user-moderation-dropdown.component.html',
+  styleUrls: [ './user-moderation-dropdown.component.scss' ]
+})
+export class UserModerationDropdownComponent implements OnInit {
+  @ViewChild('userBanModal') userBanModal: UserBanModalComponent
+
+  @Input() user: User
+  @Input() buttonSize: 'normal' | 'small' = 'normal'
+
+  @Output() userChanged = new EventEmitter()
+  @Output() userDeleted = new EventEmitter()
+
+  userActions: DropdownAction<User>[] = []
+
+  private openedModal: NgbModalRef
+
+  constructor (
+    private authService: AuthService,
+    private notificationsService: NotificationsService,
+    private confirmService: ConfirmService,
+    private userService: UserService,
+    private i18n: I18n
+  ) { }
+
+  ngOnInit () {
+    this.buildActions()
+  }
+
+  hideBanUserModal () {
+    this.openedModal.close()
+  }
+
+  openBanUserModal (user: User) {
+    if (user.username === 'root') {
+      this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot ban root.'))
+      return
+    }
+
+    this.userBanModal.openModal(user)
+  }
+
+  onUserBanned () {
+    this.userChanged.emit()
+  }
+
+  async unbanUser (user: User) {
+    const message = this.i18n('Do you really want to unban {{username}}?', { username: user.username })
+    const res = await this.confirmService.confirm(message, this.i18n('Unban'))
+    if (res === false) return
+
+    this.userService.unbanUser(user)
+        .subscribe(
+          () => {
+            this.notificationsService.success(
+              this.i18n('Success'),
+              this.i18n('User {{username}} unbanned.', { username: user.username })
+            )
+
+            this.userChanged.emit()
+          },
+
+          err => this.notificationsService.error(this.i18n('Error'), err.message)
+        )
+  }
+
+  async removeUser (user: User) {
+    if (user.username === 'root') {
+      this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot delete root.'))
+      return
+    }
+
+    const message = this.i18n('If you remove this user, you will not be able to create another with the same username!')
+    const res = await this.confirmService.confirm(message, this.i18n('Delete'))
+    if (res === false) return
+
+    this.userService.removeUser(user).subscribe(
+      () => {
+        this.notificationsService.success(
+          this.i18n('Success'),
+          this.i18n('User {{username}} deleted.', { username: user.username })
+        )
+        this.userDeleted.emit()
+      },
+
+      err => this.notificationsService.error(this.i18n('Error'), err.message)
+    )
+  }
+
+  getRouterUserEditLink (user: User) {
+    return [ '/admin', 'users', 'update', user.id ]
+  }
+
+  private buildActions () {
+    this.userActions = []
+
+    if (this.authService.isLoggedIn()) {
+      const authUser = this.authService.getUser()
+
+      if (authUser.hasRight(UserRight.MANAGE_USERS)) {
+        this.userActions = this.userActions.concat([
+          {
+            label: this.i18n('Edit'),
+            linkBuilder: this.getRouterUserEditLink
+          },
+          {
+            label: this.i18n('Delete'),
+            handler: user => this.removeUser(user)
+          },
+          {
+            label: this.i18n('Ban'),
+            handler: user => this.openBanUserModal(user),
+            isDisplayed: user => !user.blocked
+          },
+          {
+            label: this.i18n('Unban'),
+            handler: user => this.unbanUser(user),
+            isDisplayed: user => user.blocked
+          }
+        ])
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 076f1d275..9647a7966 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -56,6 +56,8 @@ import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, N
 import { SubscribeButtonComponent, RemoteSubscribeComponent, UserSubscriptionService } from '@app/shared/user-subscription'
 import { InstanceFeaturesTableComponent } from '@app/shared/instance/instance-features-table.component'
 import { OverviewService } from '@app/shared/overview'
+import { UserBanModalComponent } from '@app/shared/moderation'
+import { UserModerationDropdownComponent } from '@app/shared/moderation/user-moderation-dropdown.component'
 
 @NgModule({
   imports: [
@@ -94,7 +96,9 @@ import { OverviewService } from '@app/shared/overview'
     PeertubeCheckboxComponent,
     SubscribeButtonComponent,
     RemoteSubscribeComponent,
-    InstanceFeaturesTableComponent
+    InstanceFeaturesTableComponent,
+    UserBanModalComponent,
+    UserModerationDropdownComponent
   ],
 
   exports: [
@@ -130,6 +134,8 @@ import { OverviewService } from '@app/shared/overview'
     SubscribeButtonComponent,
     RemoteSubscribeComponent,
     InstanceFeaturesTableComponent,
+    UserBanModalComponent,
+    UserModerationDropdownComponent,
 
     NumberFormatterPipe,
     ObjectLengthPipe,
diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index bd5cd45d4..d9b81c181 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -2,20 +2,26 @@ import { Observable } from 'rxjs'
 import { catchError, map } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { UserCreate, UserUpdateMe, UserVideoQuota } from '../../../../../shared'
+import { ResultList, User, UserCreate, UserRole, UserUpdate, UserUpdateMe, UserVideoQuota } from '../../../../../shared'
 import { environment } from '../../../environments/environment'
-import { RestExtractor } from '../rest'
+import { RestExtractor, RestPagination, RestService } from '../rest'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
+import { SortMeta } from 'primeng/api'
+import { BytesPipe } from 'ngx-pipes'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Injectable()
 export class UserService {
   static BASE_USERS_URL = environment.apiUrl + '/api/v1/users/'
 
+  private bytesPipe = new BytesPipe()
+
   constructor (
     private authHttp: HttpClient,
-    private restExtractor: RestExtractor
-  ) {
-  }
+    private restExtractor: RestExtractor,
+    private restService: RestService,
+    private i18n: I18n
+  ) { }
 
   changePassword (currentPassword: string, newPassword: string) {
     const url = UserService.BASE_USERS_URL + 'me'
@@ -128,4 +134,79 @@ export class UserService {
       .get<string[]>(url, { params })
       .pipe(catchError(res => this.restExtractor.handleError(res)))
   }
+
+  /* ###### Admin methods ###### */
+
+  addUser (userCreate: UserCreate) {
+    return this.authHttp.post(UserService.BASE_USERS_URL, userCreate)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  updateUser (userId: number, userUpdate: UserUpdate) {
+    return this.authHttp.put(UserService.BASE_USERS_URL + userId, userUpdate)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  getUser (userId: number) {
+    return this.authHttp.get<User>(UserService.BASE_USERS_URL + userId)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  getUsers (pagination: RestPagination, sort: SortMeta): Observable<ResultList<User>> {
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    return this.authHttp.get<ResultList<User>>(UserService.BASE_USERS_URL, { params })
+               .pipe(
+                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
+                 map(res => this.restExtractor.applyToResultListData(res, this.formatUser.bind(this))),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  removeUser (user: { id: number }) {
+    return this.authHttp.delete(UserService.BASE_USERS_URL + user.id)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  banUser (user: { id: number }, reason?: string) {
+    const body = reason ? { reason } : {}
+
+    return this.authHttp.post(UserService.BASE_USERS_URL + user.id + '/block', body)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  unbanUser (user: { id: number }) {
+    return this.authHttp.post(UserService.BASE_USERS_URL + user.id + '/unblock', {})
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  private formatUser (user: User) {
+    let videoQuota
+    if (user.videoQuota === -1) {
+      videoQuota = this.i18n('Unlimited')
+    } else {
+      videoQuota = this.bytesPipe.transform(user.videoQuota, 0)
+    }
+
+    const videoQuotaUsed = this.bytesPipe.transform(user.videoQuotaUsed, 0)
+
+    const roleLabels: { [ id in UserRole ]: string } = {
+      [UserRole.USER]: this.i18n('User'),
+      [UserRole.ADMINISTRATOR]: this.i18n('Administrator'),
+      [UserRole.MODERATOR]: this.i18n('Moderator')
+    }
+
+    return Object.assign(user, {
+      roleLabel: roleLabels[user.role],
+      videoQuota,
+      videoQuotaUsed
+    })
+  }
 }
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 6a758ebe0..763791165 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -83,7 +83,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
 
   pageByVideoId (index: number, page: Video[]) {
     // Video are unique in all pages
-    return page[0].id
+    return page.length !== 0 ? page[0].id : 0
   }
 
   videoById (index: number, video: Video) {
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index c1d45ea18..d25666916 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -2,9 +2,11 @@
   [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name"
   class="video-thumbnail"
 >
-<img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
+  <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
 
-<div class="video-thumbnail-overlay">
-  {{ video.durationLabel }}
-</div>
+  <div class="video-thumbnail-overlay">{{ video.durationLabel }}</div>
+
+  <div class="progress-bar" *ngIf="video.userHistory?.currentTime">
+    <div [ngStyle]="{ 'width.%': getProgressPercent() }"></div>
+  </div>
 </a>
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 1dd8e5338..4772edaf0 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -29,6 +29,19 @@
     }
   }
 
+  .progress-bar {
+    height: 3px;
+    width: 100%;
+    position: relative;
+    top: -3px;
+    background-color: rgba(0, 0, 0, 0.20);
+
+    div {
+      height: 100%;
+      background-color: var(--mainColor);
+    }
+  }
+
   .video-thumbnail-overlay {
     position: absolute;
     right: 5px;
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
index 86d8f6f74..ca43700c7 100644
--- a/client/src/app/shared/video/video-thumbnail.component.ts
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -22,4 +22,12 @@ export class VideoThumbnailComponent {
 
     return this.video.thumbnailUrl
   }
+
+  getProgressPercent () {
+    if (!this.video.userHistory) return 0
+
+    const currentTime = this.video.userHistory.currentTime
+
+    return (currentTime / this.video.duration) * 100
+  }
 }
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index 80794faa6..b92c96450 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -66,6 +66,10 @@ export class Video implements VideoServerModel {
     avatar: Avatar
   }
 
+  userHistory?: {
+    currentTime: number
+  }
+
   static buildClientUrl (videoUUID: string) {
     return '/videos/watch/' + videoUUID
   }
@@ -116,6 +120,8 @@ export class Video implements VideoServerModel {
 
     this.blacklisted = hash.blacklisted
     this.blacklistedReason = hash.blacklistedReason
+
+    this.userHistory = hash.userHistory
   }
 
   isVideoNSFWForUser (user: User, serverConfig: ServerConfig) {
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 2255a18a2..724a0bde9 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -58,6 +58,10 @@ export class VideoService implements VideosProvider {
     return VideoService.BASE_VIDEO_URL + uuid + '/views'
   }
 
+  getUserWatchingVideoUrl (uuid: string) {
+    return VideoService.BASE_VIDEO_URL + uuid + '/watching'
+  }
+
   getVideo (uuid: string): Observable<VideoDetails> {
     return this.serverService.localeObservable
                .pipe(
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index ea10b22ad..c5deddf05 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -369,7 +369,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         )
   }
 
-  private async onVideoFetched (video: VideoDetails, videoCaptions: VideoCaption[], startTime = 0) {
+  private async onVideoFetched (video: VideoDetails, videoCaptions: VideoCaption[], startTimeFromUrl: number) {
     this.video = video
 
     // Re init attributes
@@ -377,6 +377,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.completeDescriptionShown = false
     this.remoteServerDown = false
 
+    let startTime = startTimeFromUrl || (this.video.userHistory ? this.video.userHistory.currentTime : 0)
+    // Don't start the video if we are at the end
+    if (this.video.duration - startTime <= 1) startTime = 0
+
     if (this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())) {
       const res = await this.confirmService.confirm(
         this.i18n('This video contains mature or explicit content. Are you sure you want to watch it?'),
@@ -414,7 +418,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       poster: this.video.previewUrl,
       startTime,
       theaterMode: true,
-      language: this.localeId
+      language: this.localeId,
+
+      userWatching: this.user ? {
+        url: this.videoService.getUserWatchingVideoUrl(this.video.uuid),
+        authorizationHeader: this.authService.getRequestHeaderValue()
+      } : undefined
     })
 
     if (this.videojsLocaleLoaded === false) {