OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Continue user mute in ban modal PR

pull/4666/head
Chocobozzz 2022-02-28 10:41:23 +01:00 committed by Chocobozzz
parent 5a8de57d57
commit a282e4d8a0
10 changed files with 137 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/app/+admin/overview/users/user-list/user-list.component.html
View File

@ -62,10 +62,10 @@
</div>
</th>
<th *ngIf="isSelected('username')" pResizableColumn pSortableColumn="username">{{ getColumn('username').label }} <p-sortIcon field="username"></p-sortIcon></th>
<th *ngIf="isSelected('role')" style="width: 120px;" pSortableColumn="role">{{ getColumn('role').label }} <p-sortIcon field="role"></p-sortIcon></th>
<th *ngIf="isSelected('email')">{{ getColumn('email').label }}</th>
<th *ngIf="isSelected('quota')" style="width: 160px;" pSortableColumn="videoQuotaUsed">{{ getColumn('quota').label }} <p-sortIcon field="videoQuotaUsed"></p-sortIcon></th>
<th *ngIf="isSelected('quotaDaily')" style="width: 160px;">{{ getColumn('quotaDaily').label }}</th>
<th *ngIf="isSelected('role')" style="width: 120px;" pSortableColumn="role">{{ getColumn('role').label }} <p-sortIcon field="role"></p-sortIcon></th>
<th *ngIf="isSelected('pluginAuth')" style="width: 140px;" pResizableColumn >{{ getColumn('pluginAuth').label }}</th>
<th *ngIf="isSelected('createdAt')" style="width: 150px;" pSortableColumn="createdAt">{{ getColumn('createdAt').label }} <p-sortIcon field="createdAt"></p-sortIcon></th>
<th *ngIf="isSelected('lastLoginDate')" style="width: 150px;" pSortableColumn="lastLoginDate">{{ getColumn('lastLoginDate').label }} <p-sortIcon field="lastLoginDate"></p-sortIcon></th>
@ -84,8 +84,9 @@
</td>
<td class="action-cell">
<my-user-moderation-dropdown *ngIf="!isInSelectionMode()" [user]="user" container="body"
(userChanged)="onUserChanged()" (userDeleted)="onUserChanged()">
<my-user-moderation-dropdown
*ngIf="!isInSelectionMode()" [user]="user" [account]="user.accountMutedStatus" [displayOptions]="userModerationDisplayOptions"
container="body" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()">
</my-user-moderation-dropdown>
</td>
@ -99,6 +100,14 @@
</div>
</div>
</a>
<div *ngIf="user.accountMutedStatus.mutedByInstance" class="badges-username badge badge-red" i18n>Muted</div>
<div *ngIf="user.blocked" class="badges-username badge badge-red" i18n>Banned</div>
</td>
<td *ngIf="isSelected('role')">
<span *ngIf="user.blocked" class="badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span>
<span *ngIf="!user.blocked" class="badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span>
</td>
<td *ngIf="isSelected('email')" [title]="user.email">
@ -138,11 +147,6 @@
</div>
</td>
<td *ngIf="isSelected('role')">
<span *ngIf="user.blocked" class="badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span>
<span *ngIf="!user.blocked" class="badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span>
</td>
<td *ngIf="isSelected('pluginAuth')">
<ng-container *ngIf="user.pluginAuth">{{ user.pluginAuth }}</ng-container>
</td>

4
client/src/app/+admin/overview/users/user-list/user-list.component.scss
View File

@ -23,6 +23,10 @@ tr.banned > td {
font-weight: $font-semibold;
}
.badges-username {
margin-left: 15px;
}
.user-table-primary-text .glyphicon {
@include margin-left(0.1rem);

42
client/src/app/+admin/overview/users/user-list/user-list.component.ts
View File

@ -2,9 +2,10 @@ import { SortMeta } from 'primeng/api'
import { Component, OnInit, ViewChild } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
import { getAPIHost } from '@app/helpers'
import { AdvancedInputFilter } from '@app/shared/shared-forms'
import { DropdownAction } from '@app/shared/shared-main'
import { UserBanModalComponent } from '@app/shared/shared-moderation'
import { Actor, DropdownAction } from '@app/shared/shared-main'
import { AccountMutedStatus, BlocklistService, UserBanModalComponent, UserModerationDisplayType } from '@app/shared/shared-moderation'
import { UserAdminService } from '@app/shared/shared-users'
import { User, UserRole } from '@shared/models'
@ -23,7 +24,7 @@ type UserForList = User & {
export class UserListComponent extends RestTable implements OnInit {
@ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent
users: User[] = []
users: (User & { accountMutedStatus: AccountMutedStatus })[] = []
totalRecords = 0
sort: SortMeta = { field: 'createdAt', order: 1 }
@ -47,6 +48,12 @@ export class UserListComponent extends RestTable implements OnInit {
}
]
userModerationDisplayOptions: UserModerationDisplayType = {
instanceAccount: true,
instanceUser: true,
myAccount: false
}
requiresEmailVerification = false
private _selectedColumns: string[]
@ -58,6 +65,7 @@ export class UserListComponent extends RestTable implements OnInit {
private confirmService: ConfirmService,
private serverService: ServerService,
private auth: AuthService,
private blocklist: BlocklistService,
private userAdminService: UserAdminService
) {
super()
@ -115,9 +123,9 @@ export class UserListComponent extends RestTable implements OnInit {
this.columns = [
{ id: 'username', label: $localize`Username` },
{ id: 'role', label: $localize`Role` },
{ id: 'email', label: $localize`Email` },
{ id: 'quota', label: $localize`Video quota` },
{ id: 'role', label: $localize`Role` },
{ id: 'createdAt', label: $localize`Created` }
]
@ -237,11 +245,35 @@ export class UserListComponent extends RestTable implements OnInit {
search: this.search
}).subscribe({
next: resultList => {
this.users = resultList.data
this.users = resultList.data.map(u => ({
...u,
accountMutedStatus: {
...u.account,
nameWithHost: Actor.CREATE_BY_STRING(u.account.name, u.account.host),
mutedByInstance: false,
mutedByUser: false,
mutedServerByInstance: false,
mutedServerByUser: false
}
}))
this.totalRecords = resultList.total
this.loadMutedStatus()
},
error: err => this.notifier.error(err.message)
})
}
private loadMutedStatus () {
this.blocklist.getStatus({ accounts: this.users.map(u => u.username + '@' + getAPIHost()) })
.subscribe(blockStatus => {
for (const user of this.users) {
user.accountMutedStatus.mutedByInstance = blockStatus.accounts[user.username + '@' + getAPIHost()].blockedByServer
}
})
}
}

5
client/src/app/helpers/utils/url.ts
View File

@ -13,6 +13,10 @@ function getAbsoluteAPIUrl () {
return absoluteAPIUrl
}
function getAPIHost () {
return new URL(getAbsoluteAPIUrl()).host
}
function getAbsoluteEmbedUrl () {
let absoluteEmbedUrl = environment.originServerUrl
if (!absoluteEmbedUrl) {
@ -52,5 +56,6 @@ function objectToFormData (obj: any, form?: FormData, namespace?: string) {
export {
objectToFormData,
getAbsoluteAPIUrl,
getAPIHost,
getAbsoluteEmbedUrl
}

8
client/src/app/shared/shared-main/account/actor.model.ts
View File

@ -1,4 +1,4 @@
import { getAbsoluteAPIUrl } from '@app/helpers'
import { getAbsoluteAPIUrl, getAPIHost } from '@app/helpers'
import { Actor as ServerActor, ActorImage } from '@shared/models'
export abstract class Actor implements ServerActor {
@ -32,8 +32,7 @@ export abstract class Actor implements ServerActor {
}
static CREATE_BY_STRING (accountName: string, host: string, forceHostname = false) {
const absoluteAPIUrl = getAbsoluteAPIUrl()
const thisHost = new URL(absoluteAPIUrl).host
const thisHost = getAPIHost()
if (host.trim() === thisHost && !forceHostname) return accountName
@ -41,8 +40,7 @@ export abstract class Actor implements ServerActor {
}
static IS_LOCAL (host: string) {
const absoluteAPIUrl = getAbsoluteAPIUrl()
const thisHost = new URL(absoluteAPIUrl).host
const thisHost = getAPIHost()
return host.trim() === thisHost
}

15
client/src/app/shared/shared-moderation/blocklist.service.ts
View File

@ -1,5 +1,6 @@
import { SortMeta } from 'primeng/api'
import { catchError, map } from 'rxjs/operators'
import { from } from 'rxjs'
import { catchError, concatMap, map, toArray } from 'rxjs/operators'
import { HttpClient, HttpParams } from '@angular/common/http'
import { Injectable } from '@angular/core'
import { RestExtractor, RestPagination, RestService } from '@app/core'
@ -120,11 +121,15 @@ export class BlocklistService {
)
}
blockAccountByInstance (account: Pick<Account, 'nameWithHost'>) {
const body = { accountName: account.nameWithHost }
blockAccountByInstance (accountsArg: Pick<Account, 'nameWithHost'> | Pick<Account, 'nameWithHost'>[]) {
const accounts = Array.isArray(accountsArg) ? accountsArg : [ accountsArg ]
return this.authHttp.post(BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/accounts', body)
.pipe(catchError(err => this.restExtractor.handleError(err)))
return from(accounts)
.pipe(
concatMap(a => this.authHttp.post(BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/accounts', { accountName: a.nameWithHost })),
toArray(),
catchError(err => this.restExtractor.handleError(err))
)
}
unblockAccountByInstance (account: Pick<Account, 'nameWithHost'>) {

17
client/src/app/shared/shared-moderation/user-ban-modal.component.html
View File

@ -1,11 +1,15 @@
<ng-template #modal>
<div class="modal-header">
<h4 i18n class="modal-title">Ban</h4>
<h4 i18n class="modal-title">{{ getModalTitle() }}</h4>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
</div>
<div class="modal-body">
<div class="description" i18n>
A banned user will no longer be able to login.
</div>
<form novalidate [formGroup]="form" (ngSubmit)="banUser()">
<div class="form-group">
<textarea
@ -17,15 +21,12 @@
</div>
</div>
<div i18n>
A banned user will no longer be able to login.
</div>
<div class="form-group">
<my-peertube-checkbox
inputName="banMute" formControlName="mute"
i18n-labelText labelText="Mute this account"
></my-peertube-checkbox>
i18n-labelText labelText="Mute to also hide videos/comments"
>
</my-peertube-checkbox>
</div>
<div class="form-group inputs">
@ -34,7 +35,7 @@
(click)="hide()" (key.enter)="hide()"
>
<input type="submit" i18n-value [value]="modalMessage" class="peertube-button orange-button" [disabled]="!form.valid" />
<input type="submit" i18n-value [value]="getModalTitle()" class="peertube-button orange-button" [disabled]="!form.valid" />
</div>
</form>
</div>

5
client/src/app/shared/shared-moderation/user-ban-modal.component.scss
View File

@ -1,6 +1,11 @@
@use '_variables' as *;
@use '_mixins' as *;
.description {
font-size: 15px;
margin-bottom: 15px;
}
textarea {
@include peertube-textarea(100%, 60px);
}

41
client/src/app/shared/shared-moderation/user-ban-modal.component.ts
View File

@ -1,3 +1,4 @@
import { forkJoin } from 'rxjs'
import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
import { Notifier } from '@app/core'
import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
@ -42,9 +43,6 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
openModal (user: User | User[]) {
this.usersToBan = user
this.openedModal = this.modalService.open(this.modal, { centered: true })
const isSingleUser = !(Array.isArray(this.usersToBan) && this.usersToBan.length > 1)
this.modalMessage = isSingleUser ? $localize`Ban this user` : $localize`Ban these users`
}
hide () {
@ -56,7 +54,13 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
const reason = this.form.value['reason'] || undefined
const mute = this.form.value['mute']
this.userAdminService.banUsers(this.usersToBan, reason)
const observables = [
this.userAdminService.banUsers(this.usersToBan, reason)
]
if (mute) observables.push(this.muteAccounts())
forkJoin(observables)
.subscribe({
next: () => {
const message = Array.isArray(this.usersToBan)
@ -67,22 +71,6 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
this.userBanned.emit(this.usersToBan)
if (mute) {
const users = Array.isArray(this.usersToBan) ? this.usersToBan : [ this.usersToBan ]
users.forEach(user => {
const account = new Account(user.account)
this.blocklistService.blockAccountByInstance(account)
.subscribe({
next: () => {
this.notifier.success($localize`Account ${user.username} muted by the instance.`)
account.mutedByInstance = true
},
error: err => this.notifier.error(err.message)
})
})
}
this.hide()
},
@ -90,4 +78,17 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
})
}
getModalTitle () {
if (Array.isArray(this.usersToBan)) return $localize`Ban ${this.usersToBan.length} users`
return $localize`Ban "${this.usersToBan.username}"`
}
private muteAccounts () {
const accounts = Array.isArray(this.usersToBan)
? this.usersToBan.map(u => new Account(u.account))
: new Account(this.usersToBan.account)
return this.blocklistService.blockAccountByInstance(accounts)
}
}

46
client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
View File

@ -7,6 +7,16 @@ import { BlocklistService } from './blocklist.service'
import { BulkService } from './bulk.service'
import { UserBanModalComponent } from './user-ban-modal.component'
export type AccountMutedStatus =
Pick<Account, 'id' | 'nameWithHost' | 'host' | 'userId' |
'mutedByInstance' | 'mutedByUser' | 'mutedServerByInstance' | 'mutedServerByUser'>
export type UserModerationDisplayType = {
myAccount?: boolean
instanceAccount?: boolean
instanceUser?: boolean
}
@Component({
selector: 'my-user-moderation-dropdown',
templateUrl: './user-moderation-dropdown.component.html'
@ -15,8 +25,8 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
@ViewChild('userBanModal') userBanModal: UserBanModalComponent
@Input() user: User
@Input() account: Account
@Input() prependActions: DropdownAction<{ user: User, account: Account }>[]
@Input() account: AccountMutedStatus
@Input() prependActions: DropdownAction<{ user: User, account: AccountMutedStatus }>[]
@Input() buttonSize: 'normal' | 'small' = 'normal'
@Input() buttonStyled = true
@ -24,10 +34,16 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
@Input() label: string
@Input() container: 'body' | undefined = undefined
@Input() displayOptions: UserModerationDisplayType = {
myAccount: true,
instanceAccount: true,
instanceUser: true
}
@Output() userChanged = new EventEmitter()
@Output() userDeleted = new EventEmitter()
userActions: DropdownAction<{ user: User, account: Account }>[][] = []
userActions: DropdownAction<{ user: User, account: AccountMutedStatus }>[][] = []
requiresEmailVerification = false
@ -111,7 +127,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
})
}
blockAccountByUser (account: Account) {
blockAccountByUser (account: AccountMutedStatus) {
this.blocklistService.blockAccountByUser(account)
.subscribe({
next: () => {
@ -125,7 +141,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
})
}
unblockAccountByUser (account: Account) {
unblockAccountByUser (account: AccountMutedStatus) {
this.blocklistService.unblockAccountByUser(account)
.subscribe({
next: () => {
@ -167,7 +183,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
})
}
blockAccountByInstance (account: Account) {
blockAccountByInstance (account: AccountMutedStatus) {
this.blocklistService.blockAccountByInstance(account)
.subscribe({
next: () => {
@ -181,7 +197,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
})
}
unblockAccountByInstance (account: Account) {
unblockAccountByInstance (account: AccountMutedStatus) {
this.blocklistService.unblockAccountByInstance(account)
.subscribe({
next: () => {
@ -246,7 +262,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
return user && this.authService.getUser().id === user.id
}
private isMyAccount (account: Account) {
private isMyAccount (account: AccountMutedStatus) {
return account && this.authService.getUser().account.id === account.id
}
@ -267,9 +283,9 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
}
private buildMyAccountModerationActions () {
if (!this.account || !this.authService.isLoggedIn()) return []
if (!this.account || !this.displayOptions.myAccount || !this.authService.isLoggedIn()) return []
const myAccountActions: DropdownAction<{ user: User, account: Account }>[] = [
const myAccountActions: DropdownAction<{ user: User, account: AccountMutedStatus }>[] = [
{
label: $localize`My account moderation`,
class: [ 'red' ],
@ -315,9 +331,9 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
const authUser = this.authService.getUser()
let instanceActions: DropdownAction<{ user: User, account: Account }>[] = []
let instanceActions: DropdownAction<{ user: User, account: AccountMutedStatus }>[] = []
if (this.user && authUser.hasRight(UserRight.MANAGE_USERS) && authUser.canManage(this.user)) {
if (this.user && this.displayOptions.instanceUser && authUser.hasRight(UserRight.MANAGE_USERS) && authUser.canManage(this.user)) {
instanceActions = instanceActions.concat([
{
label: $localize`Edit user`,
@ -351,7 +367,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
}
// Instance actions on account blocklists
if (this.account && authUser.hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)) {
if (this.account && this.displayOptions.instanceAccount && authUser.hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)) {
instanceActions = instanceActions.concat([
{
label: $localize`Mute this account`,
@ -369,7 +385,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
}
// Instance actions on server blocklists
if (this.account && authUser.hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)) {
if (this.account && this.displayOptions.instanceAccount && authUser.hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)) {
instanceActions = instanceActions.concat([
{
label: $localize`Mute the instance`,
@ -386,7 +402,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
])
}
if (this.account && authUser.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)) {
if (this.account && this.displayOptions.instanceAccount && authUser.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)) {
instanceActions = instanceActions.concat([
{
label: $localize`Remove comments from your instance`,