From 79bd2632d62f2f600d663815fcc00a01ca981aa1 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 5 Oct 2018 16:56:14 +0200 Subject: Add user moderation in the account page --- client/src/app/+accounts/accounts.component.html | 5 ++ client/src/app/+accounts/accounts.component.scss | 12 ++++ client/src/app/+accounts/accounts.component.ts | 48 +++++++++++++-- .../users/user-list/user-list.component.html | 3 +- client/src/app/shared/account/account.model.ts | 3 + .../shared/buttons/action-dropdown.component.html | 2 +- .../shared/buttons/action-dropdown.component.scss | 6 ++ .../shared/buttons/action-dropdown.component.ts | 1 + client/src/app/shared/moderation/index.ts | 2 +- .../shared/moderation/user-ban-modal.component.ts | 3 +- .../user-moderation-dropdown.component.html | 6 +- .../user-moderation-dropdown.component.ts | 69 ++++++++++++---------- client/src/app/shared/users/user.service.ts | 6 +- 13 files changed, 121 insertions(+), 45 deletions(-) (limited to 'client/src') 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 @@
{{ account.displayName }}
{{ account.nameWithHost }}
+ + Banned + + +
{{ account.followersCount }} subscribers
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/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index 2479ce9e4..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 @@ {{ user.roleLabel }} {{ user.createdAt }} - + + 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 @@
-
+
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 { @Input() actions: DropdownAction[] = [] @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 index 2245294c5..9a77c64c0 100644 --- a/client/src/app/shared/moderation/index.ts +++ b/client/src/app/shared/moderation/index.ts @@ -1,2 +1,2 @@ export * from './user-ban-modal.component' -export * from './user-moderation-dropdown.component' \ No newline at end of file +export * from './user-moderation-dropdown.component' diff --git a/client/src/app/shared/moderation/user-ban-modal.component.ts b/client/src/app/shared/moderation/user-ban-modal.component.ts index d49783cd2..67ae38e48 100644 --- a/client/src/app/shared/moderation/user-ban-modal.component.ts +++ b/client/src/app/shared/moderation/user-ban-modal.component.ts @@ -5,7 +5,8 @@ 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 { FormReactive, UserValidatorsService } from '@app/shared/forms' -import { User, UserService } from '@app/shared/users' +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 index ed8a4dc66..ed1a4c863 100644 --- a/client/src/app/shared/moderation/user-moderation-dropdown.component.html +++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.html @@ -1,3 +1,5 @@ - + + - \ No newline at end of file + + \ No newline at end of file diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts index d92423476..4f88456de 100644 --- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts +++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts @@ -4,9 +4,9 @@ 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 { User, UserService } from '@app/shared/users' +import { UserService } from '@app/shared/users' import { AuthService, ConfirmService } from '@app/core' -import { UserRight } from '../../../../../shared/models/users' +import { User, UserRight } from '../../../../../shared/models/users' @Component({ selector: 'my-user-moderation-dropdown', @@ -17,7 +17,10 @@ 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[] = [] @@ -32,34 +35,7 @@ export class UserModerationDropdownComponent implements OnInit { ) { } ngOnInit () { - 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 - } - ]) - } - } + this.buildActions() } hideBanUserModal () { @@ -115,7 +91,7 @@ export class UserModerationDropdownComponent implements OnInit { this.i18n('Success'), this.i18n('User {{username}} deleted.', { username: user.username }) ) - this.userChanged.emit() + this.userDeleted.emit() }, err => this.notificationsService.error(this.i18n('Error'), err.message) @@ -125,4 +101,35 @@ export class UserModerationDropdownComponent implements OnInit { 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/users/user.service.ts b/client/src/app/shared/users/user.service.ts index 5ab290a59..d9b81c181 100644 --- a/client/src/app/shared/users/user.service.ts +++ b/client/src/app/shared/users/user.service.ts @@ -170,19 +170,19 @@ export class UserService { ) } - removeUser (user: User) { + removeUser (user: { id: number }) { return this.authHttp.delete(UserService.BASE_USERS_URL + user.id) .pipe(catchError(err => this.restExtractor.handleError(err))) } - banUser (user: User, reason?: string) { + 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: User) { + unbanUser (user: { id: number }) { return this.authHttp.post(UserService.BASE_USERS_URL + user.id + '/unblock', {}) .pipe(catchError(err => this.restExtractor.handleError(err))) } -- cgit v1.2.3