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 @@ + + + Ban {{ userToBan.username }} + + + + + + + + + + {{ formErrors.reason }} + + + + + A banned user will no longer be able to login. + + + + Cancel + + + + + + + \ 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 @@ - Forgot your password diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts index 8e8822510..7c0220885 100644 --- a/client/src/app/login/login.component.ts +++ b/client/src/app/login/login.component.ts @@ -69,7 +69,7 @@ export class LoginComponent extends FormReactive implements OnInit { askResetPassword () { this.userService.askResetPassword(this.forgotPasswordEmail) .subscribe( - res => { + () => { const message = this.i18n( 'An email with the reset password instructions will be sent to {{email}}.', { email: this.forgotPasswordEmail } diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html index c87ba4c82..8b7241379 100644 --- a/client/src/app/shared/buttons/action-dropdown.component.html +++ b/client/src/app/shared/buttons/action-dropdown.component.html @@ -1,16 +1,17 @@ - - + + - - - - + + + + {{ action.label }} - - {{ action.label }} - - - + + {{ action.label }} + + + + \ 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 index cc459b972..615511093 100644 --- a/client/src/app/shared/buttons/action-dropdown.component.scss +++ b/client/src/app/shared/buttons/action-dropdown.component.scss @@ -5,17 +5,28 @@ @include peertube-button; @include grey-button; + display: inline-block; + padding: 0 10px; + + &::after { + display: none; + } + &: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; } +} + +.dropdown-menu { + .dropdown-item { + cursor: pointer; + color: #000 !important; + } } \ 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 index 407d24b80..17f9cc618 100644 --- a/client/src/app/shared/buttons/action-dropdown.component.ts +++ b/client/src/app/shared/buttons/action-dropdown.component.ts @@ -1,11 +1,10 @@ import { Component, Input } from '@angular/core' export type DropdownAction = { - type: 'custom' | 'delete' | 'edit' label?: string handler?: (T) => any linkBuilder?: (T) => (string | number)[] - iconClass?: string + isDisplayed?: (T) => boolean } @Component({ @@ -17,4 +16,5 @@ export type DropdownAction = { export class ActionDropdownComponent { @Input() actions: DropdownAction[] = [] @Input() entry: T + @Input() placement = 'left' } diff --git a/client/src/app/shared/forms/form-validators/user-validators.service.ts b/client/src/app/shared/forms/form-validators/user-validators.service.ts index 5edae2e38..ec9566ef3 100644 --- a/client/src/app/shared/forms/form-validators/user-validators.service.ts +++ b/client/src/app/shared/forms/form-validators/user-validators.service.ts @@ -14,6 +14,8 @@ export class UserValidatorsService { readonly USER_DESCRIPTION: BuildFormValidator readonly USER_TERMS: BuildFormValidator + readonly USER_BAN_REASON: BuildFormValidator + constructor (private i18n: I18n) { this.USER_USERNAME = { @@ -99,5 +101,16 @@ export class UserValidatorsService { 'required': this.i18n('You must to agree with the instance terms in order to registering on it.') } } + + this.USER_BAN_REASON = { + VALIDATORS: [ + Validators.minLength(3), + Validators.maxLength(250) + ], + MESSAGES: { + 'minlength': this.i18n('Ban reason must be at least 3 characters long.'), + 'maxlength': this.i18n('Ban reason cannot be more than 250 characters long.') + } + } } } diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index b120d4090..ba8701f5c 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -310,8 +310,4 @@ table { } } } - - bs-dropdown-container { - z-index: 10000; - } } diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index f06daec5d..674aa649e 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -17,9 +17,12 @@ p-table { td { border: 1px solid #E5E5E5 !important; padding-left: 15px !important; - overflow: hidden !important; - text-overflow: ellipsis !important; - white-space: nowrap !important; + + &:not(.action-cell) { + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + } } tr { diff --git a/server/lib/oauth-model.ts b/server/lib/oauth-model.ts index f13c25795..f159ad6a9 100644 --- a/server/lib/oauth-model.ts +++ b/server/lib/oauth-model.ts @@ -1,4 +1,4 @@ -import { AccessDeniedError} from 'oauth2-server' +import { AccessDeniedError } from 'oauth2-server' import { logger } from '../helpers/logger' import { UserModel } from '../models/account/user' import { OAuthClientModel } from '../models/oauth/oauth-client'