From 141b177db088891e84040f68aa95008fb52f1d44 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 9 Aug 2018 17:51:25 +0200 Subject: Add ability to ban/unban users --- client/src/app/+admin/admin.module.ts | 2 + client/src/app/+admin/users/shared/user.service.ts | 12 ++++ .../users/user-list/user-ban-modal.component.html | 32 ++++++++++ .../users/user-list/user-ban-modal.component.scss | 6 ++ .../users/user-list/user-ban-modal.component.ts | 68 ++++++++++++++++++++++ .../users/user-list/user-list.component.html | 33 ++++++++--- .../users/user-list/user-list.component.scss | 18 ++++++ .../+admin/users/user-list/user-list.component.ts | 60 ++++++++++++++++++- client/src/app/login/login.component.html | 1 - client/src/app/login/login.component.ts | 2 +- .../shared/buttons/action-dropdown.component.html | 23 ++++---- .../shared/buttons/action-dropdown.component.scss | 17 +++++- .../shared/buttons/action-dropdown.component.ts | 4 +- .../form-validators/user-validators.service.ts | 13 +++++ client/src/sass/application.scss | 4 -- client/src/sass/primeng-custom.scss | 9 ++- 16 files changed, 269 insertions(+), 35 deletions(-) create mode 100644 client/src/app/+admin/users/user-list/user-ban-modal.component.html create mode 100644 client/src/app/+admin/users/user-list/user-ban-modal.component.scss create mode 100644 client/src/app/+admin/users/user-list/user-ban-modal.component.ts (limited to 'client') diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts index d7ae2f7f0..04b7ec5c1 100644 --- a/client/src/app/+admin/admin.module.ts +++ b/client/src/app/+admin/admin.module.ts @@ -13,6 +13,7 @@ import { JobService } from './jobs/shared/job.service' import { UserCreateComponent, UserListComponent, UsersComponent, UserService, UserUpdateComponent } from './users' import { VideoAbuseListComponent, VideoAbusesComponent } from './video-abuses' import { VideoBlacklistComponent, VideoBlacklistListComponent } from './video-blacklist' +import { UserBanModalComponent } from '@app/+admin/users/user-list/user-ban-modal.component' @NgModule({ imports: [ @@ -33,6 +34,7 @@ import { VideoBlacklistComponent, VideoBlacklistListComponent } from './video-bl UserCreateComponent, UserUpdateComponent, UserListComponent, + UserBanModalComponent, VideoBlacklistComponent, VideoBlacklistListComponent, diff --git a/client/src/app/+admin/users/shared/user.service.ts b/client/src/app/+admin/users/shared/user.service.ts index 1af1e4ef2..ad7fb1eee 100644 --- a/client/src/app/+admin/users/shared/user.service.ts +++ b/client/src/app/+admin/users/shared/user.service.ts @@ -59,6 +59,18 @@ export class UserService { .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) { diff --git a/client/src/app/+admin/users/user-list/user-ban-modal.component.html b/client/src/app/+admin/users/user-list/user-ban-modal.component.html new file mode 100644 index 000000000..b2958caa4 --- /dev/null +++ b/client/src/app/+admin/users/user-list/user-ban-modal.component.html @@ -0,0 +1,32 @@ + + + + + + \ No newline at end of file diff --git a/client/src/app/+admin/users/user-list/user-ban-modal.component.scss b/client/src/app/+admin/users/user-list/user-ban-modal.component.scss new file mode 100644 index 000000000..84562f15c --- /dev/null +++ b/client/src/app/+admin/users/user-list/user-ban-modal.component.scss @@ -0,0 +1,6 @@ +@import 'variables'; +@import 'mixins'; + +textarea { + @include peertube-textarea(100%, 60px); +} diff --git a/client/src/app/+admin/users/user-list/user-ban-modal.component.ts b/client/src/app/+admin/users/user-list/user-ban-modal.component.ts new file mode 100644 index 000000000..444de1c04 --- /dev/null +++ b/client/src/app/+admin/users/user-list/user-ban-modal.component.ts @@ -0,0 +1,68 @@ +import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core' +import { NotificationsService } from 'angular2-notifications' +import { FormReactive, User, 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' + +@Component({ + selector: 'my-user-ban-modal', + templateUrl: './user-ban-modal.component.html', + styleUrls: [ './user-ban-modal.component.scss' ] +}) +export class UserBanModalComponent extends FormReactive implements OnInit { + @ViewChild('modal') modal: NgbModal + @Output() userBanned = new EventEmitter() + + private userToBan: User + private openedModal: NgbModalRef + + constructor ( + protected formValidatorService: FormValidatorService, + private modalService: NgbModal, + private notificationsService: NotificationsService, + private userService: UserService, + private userValidatorsService: UserValidatorsService, + private i18n: I18n + ) { + super() + } + + ngOnInit () { + this.buildForm({ + reason: this.userValidatorsService.USER_BAN_REASON + }) + } + + openModal (user: User) { + this.userToBan = user + this.openedModal = this.modalService.open(this.modal) + } + + hideBanUserModal () { + this.userToBan = undefined + this.openedModal.close() + } + + async banUser () { + const reason = this.form.value['reason'] || undefined + + this.userService.banUser(this.userToBan, reason) + .subscribe( + () => { + this.notificationsService.success( + this.i18n('Success'), + this.i18n('User {{username}} banned.', { username: this.userToBan.username }) + ) + + this.userBanned.emit(this.userToBan) + this.hideBanUserModal() + }, + + err => this.notificationsService.error(this.i18n('Error'), err.message) + ) + } + +} 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 ef5a6c648..a92fe95ef 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 @@ -9,31 +9,50 @@ + Username Email Video quota Role Created - + - - - {{ user.username }} + + + + + + + + + + {{ user.username }} + (banned) + {{ user.email }} {{ user.videoQuota }} {{ user.roleLabel }} {{ user.createdAt }} - - + + + + + + + + Ban reason: + {{ user.blockedReason }} + + \ No newline at end of file diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss index 4fc36e11e..2d11dd7a0 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/users/user-list/user-list.component.scss @@ -4,3 +4,21 @@ .add-button { @include create-button('../../../../assets/images/global/add.svg'); } + +my-action-dropdown /deep/ .icon { + &.icon-ban { + background-image: url('../../../../assets/images/global/edit-black.svg'); + } +} + +tr.banned { + color: red; +} + +.banned-info { + font-style: italic; +} + +.ban-reason-label { + font-weight: $font-semibold; +} \ 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 3c83859e0..f5f8f3e4a 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,4 +1,4 @@ -import { Component, OnInit } from '@angular/core' +import { Component, OnInit, ViewChild } from '@angular/core' import { NotificationsService } from 'angular2-notifications' import { SortMeta } from 'primeng/components/common/sortmeta' import { ConfirmService } from '../../../core' @@ -6,6 +6,8 @@ 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' +import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' +import { UserBanModalComponent } from '@app/+admin/users/user-list/user-ban-modal.component' @Component({ selector: 'my-user-list', @@ -13,6 +15,8 @@ import { DropdownAction } from '@app/shared/buttons/action-dropdown.component' styleUrls: [ './user-list.component.scss' ] }) export class UserListComponent extends RestTable implements OnInit { + @ViewChild('userBanModal') userBanModal: UserBanModalComponent + users: User[] = [] totalRecords = 0 rowsPerPage = 10 @@ -20,6 +24,9 @@ export class UserListComponent extends RestTable implements OnInit { pagination: RestPagination = { count: this.rowsPerPage, start: 0 } userActions: DropdownAction[] = [] + private userToBan: User + private openedModal: NgbModalRef + constructor ( private notificationsService: NotificationsService, private confirmService: ConfirmService, @@ -30,12 +37,22 @@ export class UserListComponent extends RestTable implements OnInit { this.userActions = [ { - type: 'edit', + label: this.i18n('Edit'), linkBuilder: this.getRouterUserEditLink }, { - type: 'delete', + 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 } ] } @@ -44,6 +61,43 @@ export class UserListComponent extends RestTable implements OnInit { this.loadSort() } + hideBanUserModal () { + this.userToBan = undefined + 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.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.')) diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html index fac63d44d..3a6d61327 100644 --- a/client/src/app/login/login.component.html +++ b/client/src/app/login/login.component.html @@ -50,7 +50,6 @@ -