From af5767ffae41b2d5604e41ba9a7225c623dd6735 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 12 Oct 2018 17:26:40 +0200
Subject: Add user/instance block by users in the client

---
 .../my-account-blocklist.component.html            | 26 ++++++++++
 .../my-account-blocklist.component.scss            |  7 +++
 .../my-account-blocklist.component.ts              | 59 +++++++++++++++++++++
 .../my-account-server-blocklist.component.html     | 27 ++++++++++
 .../my-account-server-blocklist.component.scss     |  7 +++
 .../my-account-server-blocklist.component.ts       | 60 ++++++++++++++++++++++
 .../app/+my-account/my-account-routing.module.ts   | 20 ++++++++
 .../src/app/+my-account/my-account.component.html  | 16 +++++-
 .../src/app/+my-account/my-account.component.scss  |  2 +-
 client/src/app/+my-account/my-account.component.ts | 15 ++++--
 client/src/app/+my-account/my-account.module.ts    |  6 ++-
 11 files changed, 239 insertions(+), 6 deletions(-)
 create mode 100644 client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html
 create mode 100644 client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.scss
 create mode 100644 client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts
 create mode 100644 client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html
 create mode 100644 client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.scss
 create mode 100644 client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts

(limited to 'client/src/app/+my-account')

diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html
new file mode 100644
index 000000000..a96a11f5e
--- /dev/null
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html
@@ -0,0 +1,26 @@
+<div class="admin-sub-header">
+  <div i18n class="form-sub-title">Muted accounts</div>
+</div>
+
+<p-table
+  [value]="blockedAccounts" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
+>
+
+  <ng-template pTemplate="header">
+    <tr>
+      <th i18n>Account</th>
+      <th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-accountBlock>
+    <tr>
+      <td>{{ accountBlock.blockedAccount.nameWithHost }}</td>
+      <td>{{ accountBlock.createdAt }}</td>
+      <td class="action-cell">
+        <button class="unblock-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.scss b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.scss
new file mode 100644
index 000000000..6028b75ea
--- /dev/null
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.scss
@@ -0,0 +1,7 @@
+@import '_variables';
+@import '_mixins';
+
+.unblock-button {
+  @include peertube-button;
+  @include grey-button;
+}
\ No newline at end of file
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts
new file mode 100644
index 000000000..fbad28410
--- /dev/null
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts
@@ -0,0 +1,59 @@
+import { Component, OnInit } from '@angular/core'
+import { NotificationsService } from 'angular2-notifications'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { RestPagination, RestTable } from '@app/shared'
+import { SortMeta } from 'primeng/components/common/sortmeta'
+import { BlocklistService, AccountBlock } from '@app/shared/blocklist'
+
+@Component({
+  selector: 'my-account-blocklist',
+  styleUrls: [ './my-account-blocklist.component.scss' ],
+  templateUrl: './my-account-blocklist.component.html'
+})
+export class MyAccountBlocklistComponent extends RestTable implements OnInit {
+  blockedAccounts: AccountBlock[] = []
+  totalRecords = 0
+  rowsPerPage = 10
+  sort: SortMeta = { field: 'createdAt', order: -1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  constructor (
+    private notificationsService: NotificationsService,
+    private blocklistService: BlocklistService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.initialize()
+  }
+
+  unblockAccount (accountBlock: AccountBlock) {
+    const blockedAccount = accountBlock.blockedAccount
+
+    this.blocklistService.unblockAccountByUser(blockedAccount)
+        .subscribe(
+          () => {
+            this.notificationsService.success(
+              this.i18n('Success'),
+              this.i18n('Account {{nameWithHost}} unmuted.', { nameWithHost: blockedAccount.nameWithHost })
+            )
+
+            this.loadData()
+          }
+        )
+  }
+
+  protected loadData () {
+    return this.blocklistService.getUserAccountBlocklist(this.pagination, this.sort)
+      .subscribe(
+        resultList => {
+          this.blockedAccounts = resultList.data
+          this.totalRecords = resultList.total
+        },
+
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
+      )
+  }
+}
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html
new file mode 100644
index 000000000..680334740
--- /dev/null
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html
@@ -0,0 +1,27 @@
+<div class="admin-sub-header">
+  <div i18n class="form-sub-title">Muted instances</div>
+</div>
+
+<p-table
+  [value]="blockedAccounts" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
+>
+
+  <ng-template pTemplate="header">
+    <tr>
+      <th i18n>Instance</th>
+      <th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th></th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-serverBlock>
+    <tr>
+      <td>{{ serverBlock.blockedServer.host }}</td>
+      <td>{{ serverBlock.createdAt }}</td>
+      <td class="action-cell">
+        <button class="unblock-button" (click)="unblockServer(serverBlock)" i18n>Unmute</button>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.scss b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.scss
new file mode 100644
index 000000000..6028b75ea
--- /dev/null
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.scss
@@ -0,0 +1,7 @@
+@import '_variables';
+@import '_mixins';
+
+.unblock-button {
+  @include peertube-button;
+  @include grey-button;
+}
\ No newline at end of file
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts
new file mode 100644
index 000000000..b994c2c99
--- /dev/null
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts
@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core'
+import { NotificationsService } from 'angular2-notifications'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { RestPagination, RestTable } from '@app/shared'
+import { SortMeta } from 'primeng/components/common/sortmeta'
+import { ServerBlock } from '../../../../../shared'
+import { BlocklistService } from '@app/shared/blocklist'
+
+@Component({
+  selector: 'my-account-server-blocklist',
+  styleUrls: [ './my-account-server-blocklist.component.scss' ],
+  templateUrl: './my-account-server-blocklist.component.html'
+})
+export class MyAccountServerBlocklistComponent extends RestTable implements OnInit {
+  blockedAccounts: ServerBlock[] = []
+  totalRecords = 0
+  rowsPerPage = 10
+  sort: SortMeta = { field: 'createdAt', order: -1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  constructor (
+    private notificationsService: NotificationsService,
+    private blocklistService: BlocklistService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.initialize()
+  }
+
+  unblockServer (serverBlock: ServerBlock) {
+    const host = serverBlock.blockedServer.host
+
+    this.blocklistService.unblockServerByUser(host)
+      .subscribe(
+        () => {
+          this.notificationsService.success(
+            this.i18n('Success'),
+            this.i18n('Instance {{host}} unmuted.', { host })
+          )
+
+          this.loadData()
+        }
+      )
+  }
+
+  protected loadData () {
+    return this.blocklistService.getUserServerBlocklist(this.pagination, this.sort)
+      .subscribe(
+        resultList => {
+          this.blockedAccounts = resultList.data
+          this.totalRecords = resultList.total
+        },
+
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
+      )
+  }
+}
diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts
index 4b2168e35..49f9c94a7 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -11,6 +11,8 @@ import { MyAccountVideoChannelUpdateComponent } from '@app/+my-account/my-accoun
 import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component'
 import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component'
 import { MyAccountOwnershipComponent } from '@app/+my-account/my-account-ownership/my-account-ownership.component'
+import { MyAccountBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-blocklist.component'
+import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-server-blocklist.component'
 
 const myAccountRoutes: Routes = [
   {
@@ -94,6 +96,24 @@ const myAccountRoutes: Routes = [
             title: 'Ownership changes'
           }
         }
+      },
+      {
+        path: 'blocklist/accounts',
+        component: MyAccountBlocklistComponent,
+        data: {
+          meta: {
+            title: 'Accounts blocklist'
+          }
+        }
+      },
+      {
+        path: 'blocklist/servers',
+        component: MyAccountServerBlocklistComponent,
+        data: {
+          meta: {
+            title: 'Instances blocklist'
+          }
+        }
       }
     ]
   }
diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html
index b602fd69f..41333c25a 100644
--- a/client/src/app/+my-account/my-account.component.html
+++ b/client/src/app/+my-account/my-account.component.html
@@ -19,7 +19,21 @@
       </div>
     </div>
 
-    <a i18n routerLink="/my-account/ownership" routerLinkActive="active" class="title-page">Ownership changes</a>
+    <div ngbDropdown class="misc">
+      <span role="button" class="title-page" [ngClass]="{ active: miscLabel !== '' }" ngbDropdownToggle>
+        <ng-container i18n>Misc</ng-container>
+        <ng-container *ngIf="miscLabel"> - {{ miscLabel }}</ng-container>
+      </span>
+
+      <div ngbDropdownMenu>
+        <a class="dropdown-item" i18n routerLink="/my-account/blocklist/accounts">Muted accounts</a>
+
+        <a class="dropdown-item" i18n routerLink="/my-account/blocklist/servers">Muted instances</a>
+
+        <a class="dropdown-item" i18n routerLink="/my-account/ownership">Ownership changes</a>
+      </div>
+    </div>
+
   </div>
 
   <div class="margin-content">
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index 20b2639b5..6243c6dcf 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -1,4 +1,4 @@
-.my-library {
+.my-library, .misc {
   span[role=button] {
     cursor: pointer;
   }
diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts
index bad60a8fb..d728caf07 100644
--- a/client/src/app/+my-account/my-account.component.ts
+++ b/client/src/app/+my-account/my-account.component.ts
@@ -13,6 +13,7 @@ import { Subscription } from 'rxjs'
 export class MyAccountComponent implements OnInit, OnDestroy {
 
   libraryLabel = ''
+  miscLabel = ''
 
   private routeSub: Subscription
 
@@ -23,11 +24,11 @@ export class MyAccountComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit () {
-    this.updateLibraryLabel(this.router.url)
+    this.updateLabels(this.router.url)
 
     this.routeSub = this.router.events
         .pipe(filter(event => event instanceof NavigationStart))
-        .subscribe((event: NavigationStart) => this.updateLibraryLabel(event.url))
+        .subscribe((event: NavigationStart) => this.updateLabels(event.url))
   }
 
   ngOnDestroy () {
@@ -40,7 +41,7 @@ export class MyAccountComponent implements OnInit, OnDestroy {
     return importConfig.http.enabled || importConfig.torrent.enabled
   }
 
-  private updateLibraryLabel (url: string) {
+  private updateLabels (url: string) {
     const [ path ] = url.split('?')
 
     if (path.startsWith('/my-account/video-channels')) {
@@ -54,5 +55,13 @@ export class MyAccountComponent implements OnInit, OnDestroy {
     } else {
       this.libraryLabel = ''
     }
+
+    if (path.startsWith('/my-account/blocklist/accounts')) {
+      this.miscLabel = this.i18n('Muted accounts')
+    } else if (path.startsWith('/my-account/blocklist/servers')) {
+      this.miscLabel = this.i18n('Muted instances')
+    } else {
+      this.miscLabel = ''
+    }
   }
 }
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index ad21162a8..017ebd57d 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -19,6 +19,8 @@ import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-i
 import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component'
 import { MyAccountDangerZoneComponent } from '@app/+my-account/my-account-settings/my-account-danger-zone'
 import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component'
+import { MyAccountBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-blocklist.component'
+import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-server-blocklist.component'
 
 @NgModule({
   imports: [
@@ -45,7 +47,9 @@ import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-sub
     ActorAvatarInfoComponent,
     MyAccountVideoImportsComponent,
     MyAccountDangerZoneComponent,
-    MyAccountSubscriptionsComponent
+    MyAccountSubscriptionsComponent,
+    MyAccountBlocklistComponent,
+    MyAccountServerBlocklistComponent
   ],
 
   exports: [
-- 
cgit v1.2.3