Add reason when banning a user

13 files changed, 103 insertions, 31 deletions

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 166fafef0..ef5a6c648 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
@@ -30,8 +30,9 @@
       <td>{{ user.roleLabel }}</td>
       <td>{{ user.createdAt }}</td>
       <td class="action-cell">
-        <my-edit-button [routerLink]="getRouterUserEditLink(user)"></my-edit-button>
-        <my-delete-button (click)="removeUser(user)"></my-delete-button>
+        <my-action-dropdown i18n-label label="Actions" [actions]="userActions" [entry]="user"></my-action-dropdown>
+        <!--<my-edit-button [routerLink]="getRouterUserEditLink(user)"></my-edit-button>-->
+        <!--<my-delete-button (click)="removeUser(user)"></my-delete-button>-->
       </td>
     </tr>
   </ng-template>
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 ab25608c1..3c83859e0 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
@@ -5,6 +5,7 @@ import { ConfirmService } from '../../../core'
 import { RestPagination, RestTable, User } from '../../../shared'
 import { UserService } from '../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
 
 @Component({
   selector: 'my-user-list',
@@ -17,6 +18,7 @@ export class UserListComponent extends RestTable implements OnInit {
   rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: 1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+  userActions: DropdownAction<User>[] = []
 
   constructor (
     private notificationsService: NotificationsService,
@@ -25,6 +27,17 @@ export class UserListComponent extends RestTable implements OnInit {
     private i18n: I18n
   ) {
     super()
+
+    this.userActions = [
+      {
+        type: 'edit',
+        linkBuilder: this.getRouterUserEditLink
+      },
+      {
+        type: 'delete',
+        handler: user => this.removeUser(user)
+      }
+    ]
   }
 
   ngOnInit () {
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
new file mode 100644
index 000000000..c87ba4c82
--- /dev/null
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -0,0 +1,16 @@
+<div class="dropdown-root" dropdown container="body" dropup="true" placement="right" role="button">
+  <div class="action-button" dropdownToggle>
+    <span class="icon icon-action"></span>
+  </div>
+
+  <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
+    <li role="menuitem" *ngFor="let action of actions">
+      <my-delete-button *ngIf="action.type === 'delete'" [label]="action.label" (click)="action.handler(entry)"></my-delete-button>
+      <my-edit-button *ngIf="action.type === 'edit'" [label]="action.label" [routerLink]="action.linkBuilder(entry)"></my-edit-button>
+
+      <a *ngIf="action.type === 'custom'" class="dropdown-item" href="#" (click)="action.handler(entry)">
+        <span *ngIf="action.iconClass" class="icon" [ngClass]="action.iconClass"></span> <ng-container>{{ action.label }}</ng-container>
+      </a>
+    </li>
+  </ul>
+</div>
\ No newline at end of file
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
new file mode 100644
index 000000000..cc459b972
--- /dev/null
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -0,0 +1,21 @@
+@import '_variables';
+@import '_mixins';
+
+.action-button {
+  @include peertube-button;
+  @include grey-button;
+
+  &:hover, &:active, &:focus {
+    background-color: $grey-color;
+  }
+
+  display: inline-block;
+  padding: 0 10px;
+
+  .icon-action {
+    @include icon(21px);
+
+    background-image: url('../../../assets/images/video/more.svg');
+    top: -1px;
+  }
+}
\ No newline at end of file
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
new file mode 100644
index 000000000..407d24b80
--- /dev/null
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core'
+
+export type DropdownAction<T> = {
+  type: 'custom' | 'delete' | 'edit'
+  label?: string
+  handler?: (T) => any
+  linkBuilder?: (T) => (string | number)[]
+  iconClass?: string
+}
+
+@Component({
+  selector: 'my-action-dropdown',
+  styleUrls: [ './action-dropdown.component.scss' ],
+  templateUrl: './action-dropdown.component.html'
+})
+
+export class ActionDropdownComponent<T> {
+  @Input() actions: DropdownAction<T>[] = []
+  @Input() entry: T
+}
diff --git a/client/src/app/shared/misc/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index 343aea207..343aea207 100644
--- a/client/src/app/shared/misc/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
diff --git a/client/src/app/shared/buttons/delete-button.component.html b/client/src/app/shared/buttons/delete-button.component.html
new file mode 100644
index 000000000..792490219
--- /dev/null
+++ b/client/src/app/shared/buttons/delete-button.component.html
@@ -0,0 +1,6 @@
+<span class="action-button action-button-delete" [title]="label" role="button">
+  <span class="icon icon-delete-grey"></span>
+
+  <span class="button-label" *ngIf="label">{{ label }}</span>
+  <span class="button-label" i18n *ngIf="!label">Delete</span>
+</span>
diff --git a/client/src/app/shared/misc/delete-button.component.ts b/client/src/app/shared/buttons/delete-button.component.ts
index 2ffd98212..cd2bcccdf 100644
--- a/client/src/app/shared/misc/delete-button.component.ts
+++ b/client/src/app/shared/buttons/delete-button.component.ts
@@ -7,5 +7,5 @@ import { Component, Input } from '@angular/core'
 })
 
 export class DeleteButtonComponent {
-  @Input() label = 'Delete'
+  @Input() label: string
 }
diff --git a/client/src/app/shared/misc/edit-button.component.html b/client/src/app/shared/buttons/edit-button.component.html
index 78fbc326e..7efc54ce7 100644
--- a/client/src/app/shared/misc/edit-button.component.html
+++ b/client/src/app/shared/buttons/edit-button.component.html
@@ -1,4 +1,6 @@
 <a class="action-button action-button-edit" [routerLink]="routerLink" title="Edit">
   <span class="icon icon-edit"></span>
-  <span i18n class="button-label">Edit</span>
+
+  <span class="button-label" *ngIf="label">{{ label }}</span>
+  <span i18n class="button-label" *ngIf="!label">Edit</span>
 </a>
diff --git a/client/src/app/shared/misc/edit-button.component.ts b/client/src/app/shared/buttons/edit-button.component.ts
index 201a618ec..7abaacc26 100644
--- a/client/src/app/shared/misc/edit-button.component.ts
+++ b/client/src/app/shared/buttons/edit-button.component.ts
@@ -7,5 +7,6 @@ import { Component, Input } from '@angular/core'
 })
 
 export class EditButtonComponent {
+  @Input() label: string
   @Input() routerLink = []
 }
diff --git a/client/src/app/shared/misc/delete-button.component.html b/client/src/app/shared/misc/delete-button.component.html
deleted file mode 100644
index 7387d0a88..000000000
--- a/client/src/app/shared/misc/delete-button.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<span class="action-button action-button-delete" [title]="label">
-  <span class="icon icon-delete-grey"></span>
-  <span class="button-label">{{ label }}</span>
-</span>
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 62ce97102..94de3af9f 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -17,8 +17,8 @@ import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
 
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
-import { DeleteButtonComponent } from './misc/delete-button.component'
-import { EditButtonComponent } from './misc/edit-button.component'
+import { DeleteButtonComponent } from './buttons/delete-button.component'
+import { EditButtonComponent } from './buttons/edit-button.component'
 import { FromNowPipe } from './misc/from-now.pipe'
 import { LoaderComponent } from './misc/loader.component'
 import { NumberFormatterPipe } from './misc/number-formatter.pipe'
@@ -52,6 +52,7 @@ import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validator
 import { VideoCaptionService } from '@app/shared/video-caption'
 import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.component'
 import { VideoImportService } from '@app/shared/video-import/video-import.service'
+import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.component'
 
 @NgModule({
   imports: [
@@ -78,6 +79,7 @@ import { VideoImportService } from '@app/shared/video-import/video-import.servic
     VideoFeedComponent,
     DeleteButtonComponent,
     EditButtonComponent,
+    ActionDropdownComponent,
     NumberFormatterPipe,
     ObjectLengthPipe,
     FromNowPipe,
@@ -110,6 +112,7 @@ import { VideoImportService } from '@app/shared/video-import/video-import.servic
     VideoFeedComponent,
     DeleteButtonComponent,
     EditButtonComponent,
+    ActionDropdownComponent,
     MarkdownTextareaComponent,
     InfiniteScrollerDirective,
     HelpComponent,
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index 581ea7859..2748001d0 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -7,7 +7,6 @@ import {
   VideoChannel
 } from '../../../../../shared'
 import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type'
-import { Actor } from '@app/shared/actor/actor.model'
 import { Account } from '@app/shared/account/account.model'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
 
@@ -22,6 +21,9 @@ export type UserConstructorHash = {
   createdAt?: Date,
   account?: AccountServerModel,
   videoChannels?: VideoChannel[]
+
+  blocked?: boolean
+  blockedReason?: string
 }
 export class User implements UserServerModel {
   id: number
@@ -35,35 +37,26 @@ export class User implements UserServerModel {
   videoChannels: VideoChannel[]
   createdAt: Date
 
+  blocked: boolean
+  blockedReason?: string
+
   constructor (hash: UserConstructorHash) {
     this.id = hash.id
     this.username = hash.username
     this.email = hash.email
     this.role = hash.role
 
+    this.videoChannels = hash.videoChannels
+    this.videoQuota = hash.videoQuota
+    this.nsfwPolicy = hash.nsfwPolicy
+    this.autoPlayVideo = hash.autoPlayVideo
+    this.createdAt = hash.createdAt
+    this.blocked = hash.blocked
+    this.blockedReason = hash.blockedReason
+
     if (hash.account !== undefined) {
       this.account = new Account(hash.account)
     }
-
-    if (hash.videoChannels !== undefined) {
-      this.videoChannels = hash.videoChannels
-    }
-
-    if (hash.videoQuota !== undefined) {
-      this.videoQuota = hash.videoQuota
-    }
-
-    if (hash.nsfwPolicy !== undefined) {
-      this.nsfwPolicy = hash.nsfwPolicy
-    }
-
-    if (hash.autoPlayVideo !== undefined) {
-      this.autoPlayVideo = hash.autoPlayVideo
-    }
-
-    if (hash.createdAt !== undefined) {
-      this.createdAt = hash.createdAt
-    }
   }
 
   get accountAvatarUrl () {