From 79bd2632d62f2f600d663815fcc00a01ca981aa1 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
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 @@
<div class="actor-names">
<div class="actor-display-name">{{ account.displayName }}</div>
<div class="actor-name">{{ account.nameWithHost }}</div>
+
+ <span *ngIf="user?.blocked" [ngbTooltip]="user.blockedReason" class="badge badge-danger" i18n>Banned</span>
+
+ <my-user-moderation-dropdown buttonSize="small" [user]="user" (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()">
+ </my-user-moderation-dropdown>
</div>
<div i18n class="actor-followers">{{ account.followersCount }} subscribers</div>
</div>
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 @@
<td>{{ user.roleLabel }}</td>
<td>{{ user.createdAt }}</td>
<td class="action-cell">
- <my-user-moderation-dropdown [user]="user" (userChanged)="onUserChanged()"></my-user-moderation-dropdown>
+ <my-user-moderation-dropdown [user]="user" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()">
+ </my-user-moderation-dropdown>
</td>
</tr>
</ng-template>
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 @@
<div class="dropdown-root" ngbDropdown [placement]="placement">
- <div class="action-button" ngbDropdownToggle role="button">
+ <div class="action-button" [ngClass]="{ small: buttonSize === 'small' }" ngbDropdownToggle role="button">
<span class="icon icon-action"></span>
</div>
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<T> {
@Input() actions: DropdownAction<T>[] = []
@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 @@
-<my-user-ban-modal #userBanModal (userBanned)="onUserBanned()"></my-user-ban-modal>
+<ng-container *ngIf="user && userActions.length !== 0">
+ <my-user-ban-modal #userBanModal (userBanned)="onUserBanned()"></my-user-ban-modal>
-<my-action-dropdown i18n-label label="Actions" [actions]="userActions" [entry]="user"></my-action-dropdown>
\ No newline at end of file
+ <my-action-dropdown i18n-label label="Actions" [actions]="userActions" [entry]="user" [buttonSize]="buttonSize"></my-action-dropdown>
+</ng-container>
\ 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<User>[] = []
@@ -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