From 94148c9028829b5576a5dcbfba2c7fb9cf6443d3 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 27 Jul 2020 11:40:30 +0200 Subject: Add abuse messages management in my account --- .../shared-abuse-list/abuse-details.component.html | 115 +++++ .../shared-abuse-list/abuse-details.component.scss | 34 ++ .../shared-abuse-list/abuse-details.component.ts | 55 +++ .../abuse-list-table.component.html | 194 ++++++++ .../abuse-list-table.component.scss | 107 +++++ .../abuse-list-table.component.ts | 487 +++++++++++++++++++++ .../abuse-message-modal.component.html | 50 +++ .../abuse-message-modal.component.scss | 72 +++ .../abuse-message-modal.component.ts | 127 ++++++ client/src/app/shared/shared-abuse-list/index.ts | 7 + .../moderation-comment-modal.component.html | 38 ++ .../moderation-comment-modal.component.scss | 6 + .../moderation-comment-modal.component.ts | 70 +++ .../shared-abuse-list/processed-abuse.model.ts | 25 ++ .../shared-abuse-list/shared-abuse-list.module.ts | 42 ++ .../app/shared/shared-main/account/actor.model.ts | 12 +- .../abuse-message-modal.component.html | 40 -- .../abuse-message-modal.component.scss | 57 --- .../abuse-message-modal.component.ts | 115 ----- .../app/shared/shared-moderation/abuse.service.ts | 93 ++-- client/src/app/shared/shared-moderation/index.ts | 1 - .../app/shared/shared-moderation/moderation.scss | 50 +++ .../server-blocklist.component.scss | 13 + .../shared-moderation/shared-moderation.module.ts | 7 +- 24 files changed, 1566 insertions(+), 251 deletions(-) create mode 100644 client/src/app/shared/shared-abuse-list/abuse-details.component.html create mode 100644 client/src/app/shared/shared-abuse-list/abuse-details.component.scss create mode 100644 client/src/app/shared/shared-abuse-list/abuse-details.component.ts create mode 100644 client/src/app/shared/shared-abuse-list/abuse-list-table.component.html create mode 100644 client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss create mode 100644 client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts create mode 100644 client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html create mode 100644 client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss create mode 100644 client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts create mode 100644 client/src/app/shared/shared-abuse-list/index.ts create mode 100644 client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html create mode 100644 client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss create mode 100644 client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts create mode 100644 client/src/app/shared/shared-abuse-list/processed-abuse.model.ts create mode 100644 client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts delete mode 100644 client/src/app/shared/shared-moderation/abuse-message-modal.component.html delete mode 100644 client/src/app/shared/shared-moderation/abuse-message-modal.component.scss delete mode 100644 client/src/app/shared/shared-moderation/abuse-message-modal.component.ts create mode 100644 client/src/app/shared/shared-moderation/moderation.scss (limited to 'client/src/app/shared') diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html new file mode 100644 index 000000000..431fdf5aa --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html @@ -0,0 +1,115 @@ +
+ +
+ + +
+ Reporter + + + + Avatar +
+ {{ abuse.reporterAccount.nameWithHost }} +
+ + + + {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}} + + +
+ +
+ Reportee + + + Avatar +
+ {{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }} +
+ + + + {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}} + + +
+ +
+ Updated + +
+ + +
+ + Report + #{{ abuse.id }} + + +
+ +
+ + + +
{{ reason.label }}
+ + +
+ +
+ Reported part + + {{ startAt }} - {{ endAt }} + +
+ +
+ Note + +
+ +
+ + +
+
+
+ The video was deleted + The video was blocked +
+ +
+
+ +
+
+ Comment: +
+ +
+
+
+
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss new file mode 100644 index 000000000..d83eb974d --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss @@ -0,0 +1,34 @@ +@import 'variables'; +@import 'mixins'; +@import 'miniature'; + +.screenratio { + div { + @include miniature-thumbnail; + + display: inline-flex; + justify-content: center; + align-items: center; + color: pvar(--inputPlaceholderColor); + } + + @include large-screen-ratio($selector: 'div, ::ng-deep iframe') { + width: 100% !important; + height: 100% !important; + left: 0; + }; +} + +.comment-html { + background-color: #ececec; + padding: 10px; +} + +.abuse-details-date-updated { + font-size: 90%; + margin-top: .1rem; +} + +.abuse-details-links { + @include disable-default-a-behaviour; +} diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.ts b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts new file mode 100644 index 000000000..cdd4bf2c8 --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts @@ -0,0 +1,55 @@ +import { Component, Input } from '@angular/core' +import { durationToString } from '@app/helpers' +import { Actor } from '@app/shared/shared-main' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { AbusePredefinedReasonsString } from '@shared/models' +import { ProcessedAbuse } from './processed-abuse.model' + +@Component({ + selector: 'my-abuse-details', + templateUrl: './abuse-details.component.html', + styleUrls: [ '../shared-moderation/moderation.scss', './abuse-details.component.scss' ] +}) +export class AbuseDetailsComponent { + @Input() abuse: ProcessedAbuse + @Input() isAdminView: boolean + @Input() baseRoute: string + + private predefinedReasonsTranslations: { [key in AbusePredefinedReasonsString]: string } + + constructor ( + private i18n: I18n + ) { + this.predefinedReasonsTranslations = { + violentOrRepulsive: this.i18n('Violent or Repulsive'), + hatefulOrAbusive: this.i18n('Hateful or Abusive'), + spamOrMisleading: this.i18n('Spam or Misleading'), + privacy: this.i18n('Privacy'), + rights: this.i18n('Rights'), + serverRules: this.i18n('Server rules'), + thumbnails: this.i18n('Thumbnails'), + captions: this.i18n('Captions') + } + } + + get startAt () { + return durationToString(this.abuse.video.startAt) + } + + get endAt () { + return durationToString(this.abuse.video.endAt) + } + + getPredefinedReasons () { + if (!this.abuse.predefinedReasons) return [] + + return this.abuse.predefinedReasons.map(r => ({ + id: r, + label: this.predefinedReasonsTranslations[r] + })) + } + + switchToDefaultAvatar ($event: Event) { + ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL() + } +} diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html new file mode 100644 index 000000000..a6f707a47 --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html @@ -0,0 +1,194 @@ + + +
+
+
+
+
+ +
+ + +
+ + + Clear filters +
+
+
+ + + + + + Reporter + Video/Comment/Account + Created + State + Messages + + + + + + + + + + + + + + +
+ Avatar +
+ {{ abuse.reporterAccount.displayName }} + {{ abuse.reporterAccount.nameWithHost }} +
+
+ + + + Deleted account + + + + + + + +
+
+ + + {{ abuse.nth }}/{{ abuse.count }} + +
+ +
+
+ + + {{ abuse.video.name }} +
+
by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }}
+
+
+ + + + +
+
+ Deleted +
+ +
+
+ {{ abuse.video.name }} + +
+
by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }}
+
+
+ + + + + + + + + + + + + + + + + + Account deleted + + + + + + {{ abuse.createdAt | date: 'short' }} + + + + + + + + + + {{ abuse.countMessages }} + + + + + + + + + + + + + + + + + + + + + + +
+ No abuses found matching current filters. + No abuses found. +
+ + + + + + + diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss new file mode 100644 index 000000000..7ed7c9e87 --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss @@ -0,0 +1,107 @@ +@import 'variables'; +@import 'mixins'; +@import 'miniature'; + +.table-video-link { + @include disable-outline; + + position: relative; + top: 3px; +} + +.table-comment-link, +.table-account-link { + @include disable-outline; + + color: var(--mainForegroundColor); + + ::ng-deep p:last-child { + margin: 0; + } +} + +.table-account-link { + display: flex; + flex-direction: column; +} + +.comment-flagged-account, +.account-flagged-handle { + font-size: 11px; + color: var(--greyForegroundColor); +} + +.table-video { + display: inline-flex; + + .table-video-image { + @include miniature-thumbnail; + + $image-height: 45px; + + height: $image-height; + width: #{(16/9) * $image-height}; + margin-right: 0.5rem; + border-radius: 2px; + border: none; + background: transparent; + display: inline-flex; + justify-content: center; + align-items: center; + position: relative; + + img { + height: 100%; + width: 100%; + border-radius: 2px; + } + + span { + color: pvar(--inputPlaceholderColor); + } + + .table-video-image-label { + @include static-thumbnail-overlay; + position: absolute; + border-radius: 3px; + font-size: 10px; + padding: 0 3px; + line-height: 1.3; + bottom: 2px; + right: 2px; + } + } + + .table-video-text { + display: inline-flex; + flex-direction: column; + justify-content: center; + font-size: 90%; + color: pvar(--mainForegroundColor); + line-height: 1rem; + + div .glyphicon { + font-size: 80%; + color: gray; + margin-left: 0.1rem; + } + + div + div { + color: var(--greyForegroundColor); + font-size: 11px; + } + } +} + +.abuse-states .glyphicon-comment { + margin-left: 0.5rem; +} + +.abuse-messages { + my-global-icon { + width: 22px; + margin-left: 3px; + position: relative; + top: -2px; + } +} diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts new file mode 100644 index 000000000..1d17c9ec9 --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts @@ -0,0 +1,487 @@ +import * as debug from 'debug' +import truncate from 'lodash-es/truncate' +import { SortMeta } from 'primeng/api' +import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils' +import { environment } from 'src/environments/environment' +import { AfterViewInit, Component, OnInit, ViewChild, Input } from '@angular/core' +import { DomSanitizer } from '@angular/platform-browser' +import { ActivatedRoute, Params, Router } from '@angular/router' +import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core' +import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared/shared-main' +import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation' +import { VideoCommentService } from '@app/shared/shared-video-comment' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { AbuseState, AdminAbuse } from '@shared/models' +import { AbuseMessageModalComponent } from './abuse-message-modal.component' +import { ModerationCommentModalComponent } from './moderation-comment-modal.component' +import { ProcessedAbuse } from './processed-abuse.model' + +const logger = debug('peertube:moderation:AbuseListTableComponent') + +@Component({ + selector: 'my-abuse-list-table', + templateUrl: './abuse-list-table.component.html', + styleUrls: [ '../shared-moderation/moderation.scss', './abuse-list-table.component.scss' ] +}) +export class AbuseListTableComponent extends RestTable implements OnInit, AfterViewInit { + @Input() viewType: 'admin' | 'user' + @Input() baseRoute: string + + @ViewChild('abuseMessagesModal', { static: true }) abuseMessagesModal: AbuseMessageModalComponent + @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent + + abuses: ProcessedAbuse[] = [] + totalRecords = 0 + sort: SortMeta = { field: 'createdAt', order: 1 } + pagination: RestPagination = { count: this.rowsPerPage, start: 0 } + + abuseActions: DropdownAction[][] = [] + + constructor ( + private notifier: Notifier, + private abuseService: AbuseService, + private blocklistService: BlocklistService, + private commentService: VideoCommentService, + private videoService: VideoService, + private videoBlocklistService: VideoBlockService, + private confirmService: ConfirmService, + private i18n: I18n, + private markdownRenderer: MarkdownService, + private sanitizer: DomSanitizer, + private route: ActivatedRoute, + private router: Router + ) { + super() + } + + ngOnInit () { + this.abuseActions = [ + this.buildInternalActions(), + + this.buildFlaggedAccountActions(), + + this.buildCommentActions(), + + this.buildVideoActions(), + + this.buildAccountActions() + ] + + this.initialize() + + this.route.queryParams + .subscribe(params => { + this.search = params.search || '' + + logger('On URL change (search: %s).', this.search) + + this.setTableFilter(this.search) + this.loadData() + }) + } + + ngAfterViewInit () { + if (this.search) this.setTableFilter(this.search) + } + + isAdminView () { + return this.viewType === 'admin' + } + + getIdentifier () { + return 'AbuseListTableComponent' + } + + openModerationCommentModal (abuse: AdminAbuse) { + this.moderationCommentModal.openModal(abuse) + } + + onModerationCommentUpdated () { + this.loadData() + } + + /* Table filter functions */ + onAbuseSearch (event: Event) { + this.onSearch(event) + this.setQueryParams((event.target as HTMLInputElement).value) + } + + setQueryParams (search: string) { + const queryParams: Params = {} + if (search) Object.assign(queryParams, { search }) + + this.router.navigate([ this.baseRoute ], { queryParams }) + } + + resetTableFilter () { + this.setTableFilter('') + this.setQueryParams('') + this.resetSearch() + } + /* END Table filter functions */ + + isAbuseAccepted (abuse: AdminAbuse) { + return abuse.state.id === AbuseState.ACCEPTED + } + + isAbuseRejected (abuse: AdminAbuse) { + return abuse.state.id === AbuseState.REJECTED + } + + getVideoUrl (abuse: AdminAbuse) { + return Video.buildClientUrl(abuse.video.uuid) + } + + getCommentUrl (abuse: AdminAbuse) { + return Video.buildClientUrl(abuse.comment.video.uuid) + ';threadId=' + abuse.comment.threadId + } + + getAccountUrl (abuse: ProcessedAbuse) { + return '/accounts/' + abuse.flaggedAccount.nameWithHost + } + + getVideoEmbed (abuse: AdminAbuse) { + return buildVideoEmbed( + buildVideoLink({ + baseUrl: `${environment.embedUrl}/videos/embed/${abuse.video.uuid}`, + title: false, + warningTitle: false, + startTime: abuse.startAt, + stopTime: abuse.endAt + }) + ) + } + + switchToDefaultAvatar ($event: Event) { + ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL() + } + + async removeAbuse (abuse: AdminAbuse) { + const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this abuse report?'), this.i18n('Delete')) + if (res === false) return + + this.abuseService.removeAbuse(abuse).subscribe( + () => { + this.notifier.success(this.i18n('Abuse deleted.')) + this.loadData() + }, + + err => this.notifier.error(err.message) + ) + } + + updateAbuseState (abuse: AdminAbuse, state: AbuseState) { + this.abuseService.updateAbuse(abuse, { state }) + .subscribe( + () => this.loadData(), + + err => this.notifier.error(err.message) + ) + } + + onCountMessagesUpdated (event: { abuseId: number, countMessages: number }) { + const abuse = this.abuses.find(a => a.id === event.abuseId) + + if (!abuse) { + console.error('Cannot find abuse %d.', event.abuseId) + return + } + + abuse.countMessages = event.countMessages + } + + openAbuseMessagesModal (abuse: AdminAbuse) { + this.abuseMessagesModal.openModal(abuse) + } + + isLocalAbuse (abuse: AdminAbuse) { + if (this.viewType === 'user') return true + + return Actor.IS_LOCAL(abuse.reporterAccount.host) + } + + protected loadData () { + logger('Loading data.') + + const options = { + pagination: this.pagination, + sort: this.sort, + search: this.search + } + + const observable = this.viewType === 'admin' + ? this.abuseService.getAdminAbuses(options) + : this.abuseService.getUserAbuses(options) + + return observable.subscribe( + async resultList => { + this.totalRecords = resultList.total + + this.abuses = [] + + for (const a of resultList.data) { + const abuse = a as ProcessedAbuse + + abuse.reasonHtml = await this.toHtml(abuse.reason) + + if (abuse.moderationComment) { + abuse.moderationCommentHtml = await this.toHtml(abuse.moderationComment) + } + + if (abuse.video) { + abuse.embedHtml = this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse)) + + if (abuse.video.channel?.ownerAccount) { + abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount) + } + } + + if (abuse.comment) { + if (abuse.comment.deleted) { + abuse.truncatedCommentHtml = abuse.commentHtml = this.i18n('Deleted comment') + } else { + const truncated = truncate(abuse.comment.text, { length: 100 }) + abuse.truncatedCommentHtml = await this.markdownRenderer.textMarkdownToHTML(truncated, true) + abuse.commentHtml = await this.markdownRenderer.textMarkdownToHTML(abuse.comment.text, true) + } + } + + if (abuse.reporterAccount) { + abuse.reporterAccount = new Account(abuse.reporterAccount) + } + + if (abuse.flaggedAccount) { + abuse.flaggedAccount = new Account(abuse.flaggedAccount) + } + + if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt + + this.abuses.push(abuse) + } + }, + + err => this.notifier.error(err.message) + ) + } + + private buildInternalActions (): DropdownAction[] { + return [ + { + label: this.i18n('Internal actions'), + isHeader: true + }, + { + label: this.isAdminView() + ? this.i18n('Messages with reporter') + : this.i18n('Messages with moderators'), + handler: abuse => this.openAbuseMessagesModal(abuse), + isDisplayed: abuse => this.isLocalAbuse(abuse) + }, + { + label: this.i18n('Update note'), + handler: abuse => this.openModerationCommentModal(abuse), + isDisplayed: abuse => this.isAdminView() && !!abuse.moderationComment + }, + { + label: this.i18n('Mark as accepted'), + handler: abuse => this.updateAbuseState(abuse, AbuseState.ACCEPTED), + isDisplayed: abuse => this.isAdminView() && !this.isAbuseAccepted(abuse) + }, + { + label: this.i18n('Mark as rejected'), + handler: abuse => this.updateAbuseState(abuse, AbuseState.REJECTED), + isDisplayed: abuse => this.isAdminView() && !this.isAbuseRejected(abuse) + }, + { + label: this.i18n('Add internal note'), + handler: abuse => this.openModerationCommentModal(abuse), + isDisplayed: abuse => this.isAdminView() && !abuse.moderationComment + }, + { + label: this.i18n('Delete report'), + handler: abuse => this.isAdminView() && this.removeAbuse(abuse) + } + ] + } + + private buildFlaggedAccountActions (): DropdownAction[] { + if (!this.isAdminView()) return [] + + return [ + { + label: this.i18n('Actions for the flagged account'), + isHeader: true, + isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video + }, + + { + label: this.i18n('Mute account'), + isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video, + handler: abuse => this.muteAccountHelper(abuse.flaggedAccount) + }, + + { + label: this.i18n('Mute server account'), + isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video, + handler: abuse => this.muteServerHelper(abuse.flaggedAccount.host) + } + ] + } + + private buildAccountActions (): DropdownAction[] { + if (!this.isAdminView()) return [] + + return [ + { + label: this.i18n('Actions for the reporter'), + isHeader: true, + isDisplayed: abuse => !!abuse.reporterAccount + }, + + { + label: this.i18n('Mute reporter'), + isDisplayed: abuse => !!abuse.reporterAccount, + handler: abuse => this.muteAccountHelper(abuse.reporterAccount) + }, + + { + label: this.i18n('Mute server'), + isDisplayed: abuse => abuse.reporterAccount && !abuse.reporterAccount.userId, + handler: abuse => this.muteServerHelper(abuse.reporterAccount.host) + } + ] + } + + private buildVideoActions (): DropdownAction[] { + if (!this.isAdminView()) return [] + + return [ + { + label: this.i18n('Actions for the video'), + isHeader: true, + isDisplayed: abuse => abuse.video && !abuse.video.deleted + }, + { + label: this.i18n('Block video'), + isDisplayed: abuse => abuse.video && !abuse.video.deleted && !abuse.video.blacklisted, + handler: abuse => { + this.videoBlocklistService.blockVideo(abuse.video.id, undefined, true) + .subscribe( + () => { + this.notifier.success(this.i18n('Video blocked.')) + + this.updateAbuseState(abuse, AbuseState.ACCEPTED) + }, + + err => this.notifier.error(err.message) + ) + } + }, + { + label: this.i18n('Unblock video'), + isDisplayed: abuse => abuse.video && !abuse.video.deleted && abuse.video.blacklisted, + handler: abuse => { + this.videoBlocklistService.unblockVideo(abuse.video.id) + .subscribe( + () => { + this.notifier.success(this.i18n('Video unblocked.')) + + this.updateAbuseState(abuse, AbuseState.ACCEPTED) + }, + + err => this.notifier.error(err.message) + ) + } + }, + { + label: this.i18n('Delete video'), + isDisplayed: abuse => abuse.video && !abuse.video.deleted, + handler: async abuse => { + const res = await this.confirmService.confirm( + this.i18n('Do you really want to delete this video?'), + this.i18n('Delete') + ) + if (res === false) return + + this.videoService.removeVideo(abuse.video.id) + .subscribe( + () => { + this.notifier.success(this.i18n('Video deleted.')) + + this.updateAbuseState(abuse, AbuseState.ACCEPTED) + }, + + err => this.notifier.error(err.message) + ) + } + } + ] + } + + private buildCommentActions (): DropdownAction[] { + if (!this.isAdminView()) return [] + + return [ + { + label: this.i18n('Actions for the comment'), + isHeader: true, + isDisplayed: abuse => abuse.comment && !abuse.comment.deleted + }, + + { + label: this.i18n('Delete comment'), + isDisplayed: abuse => abuse.comment && !abuse.comment.deleted, + handler: async abuse => { + const res = await this.confirmService.confirm( + this.i18n('Do you really want to delete this comment?'), + this.i18n('Delete') + ) + if (res === false) return + + this.commentService.deleteVideoComment(abuse.comment.video.id, abuse.comment.id) + .subscribe( + () => { + this.notifier.success(this.i18n('Comment deleted.')) + + this.updateAbuseState(abuse, AbuseState.ACCEPTED) + }, + + err => this.notifier.error(err.message) + ) + } + } + ] + } + + private muteAccountHelper (account: Account) { + this.blocklistService.blockAccountByInstance(account) + .subscribe( + () => { + this.notifier.success( + this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost }) + ) + + account.mutedByInstance = true + }, + + err => this.notifier.error(err.message) + ) + } + + private muteServerHelper (host: string) { + this.blocklistService.blockServerByInstance(host) + .subscribe( + () => { + this.notifier.success( + this.i18n('Server {{host}} muted by the instance.', { host: host }) + ) + }, + + err => this.notifier.error(err.message) + ) + } + + private toHtml (text: string) { + return this.markdownRenderer.textMarkdownToHTML(text) + } +} diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html new file mode 100644 index 000000000..cb965b71d --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html @@ -0,0 +1,50 @@ + +
+

+ Messages with the reporter + Messages with the moderation team +

+ + +
+ +
+
+
+ +
{{ message.account.name }}
+ +
+
{{ message.message }}
+
{{ message.createdAt | date }}
+
+
+
+ +
+ No messages for now. +
+ +
+
+ + +
+ {{ formErrors.message }} +
+
+ +
+ +
+
+ +
+ + diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss new file mode 100644 index 000000000..4dd025fc4 --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss @@ -0,0 +1,72 @@ +@import 'variables'; +@import 'mixins'; + +form { + margin: 20px 20px 0 0; + + .form-group:first-child { + // Keep place to display error message without modifying the height + min-height: 125px; + } +} + +textarea { + @include peertube-textarea(100%, 70px); + + margin-top: 20px; +} + +.messages { + display: flex; + flex-direction: column; + overflow-y: scroll; +} + +.no-messages { + display: flex; + font-size: 15px; + justify-content: center; +} + +.message-block { + margin: 0 5px 10px 0; + max-width: 60%; + + .author { + color: var(--greyForegroundColor); + font-size: 14px; + padding: 0 0 3px 10px; + } + + .bubble { + border-radius: 10px; + padding: 5px 10px; + color: var(--mainForegroundColor); + background-color: var(--greyBackgroundColor); + + .content { + font-size: 15px; + } + + .date { + font-size: 13px; + color: var(--greyForegroundColor); + } + } + + &.by-me { + + .bubble { + color: var(--mainBackgroundColor); + background-color: var(--mainColorLighter); + + .date { + color: var(--mainBackgroundColor); + } + } + } + + &.by-moderator { + align-self: flex-end; + } +} diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts new file mode 100644 index 000000000..03f5ad735 --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts @@ -0,0 +1,127 @@ +import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' +import { AuthService, Notifier } from '@app/core' +import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { AbuseMessage, UserAbuse } from '@shared/models' +import { AbuseService } from '../shared-moderation' + +@Component({ + selector: 'my-abuse-message-modal', + templateUrl: './abuse-message-modal.component.html', + styleUrls: [ './abuse-message-modal.component.scss' ] +}) +export class AbuseMessageModalComponent extends FormReactive implements OnInit { + @ViewChild('modal', { static: true }) modal: NgbModal + @ViewChild('messagesBlock', { static: false }) messagesBlock: ElementRef + + @Input() isAdminView: boolean + + @Output() countMessagesUpdated = new EventEmitter<{ abuseId: number, countMessages: number }>() + + abuseMessages: AbuseMessage[] = [] + textareaMessage: string + sendingMessage = false + noResults = false + + private openedModal: NgbModalRef + private abuse: UserAbuse + + constructor ( + protected formValidatorService: FormValidatorService, + private abuseValidatorsService: AbuseValidatorsService, + private modalService: NgbModal, + private i18n: I18n, + private auth: AuthService, + private notifier: Notifier, + private abuseService: AbuseService + ) { + super() + } + + ngOnInit () { + this.buildForm({ + message: this.abuseValidatorsService.ABUSE_MESSAGE + }) + } + + openModal (abuse: UserAbuse) { + this.abuse = abuse + + this.openedModal = this.modalService.open(this.modal, { centered: true }) + + this.loadMessages() + } + + hide () { + this.abuseMessages = [] + this.openedModal.close() + } + + addMessage () { + this.sendingMessage = true + + this.abuseService.addAbuseMessage(this.abuse, this.form.value['message']) + .subscribe( + () => { + this.form.reset() + this.sendingMessage = false + this.countMessagesUpdated.emit({ abuseId: this.abuse.id, countMessages: this.abuseMessages.length + 1 }) + + this.loadMessages() + }, + + err => { + this.sendingMessage = false + console.error(err) + this.notifier.error('Sorry but you cannot send this message. Please retry later') + } + ) + } + + deleteMessage (abuseMessage: AbuseMessage) { + this.abuseService.deleteAbuseMessage(this.abuse, abuseMessage) + .subscribe( + () => { + this.countMessagesUpdated.emit({ abuseId: this.abuse.id, countMessages: this.abuseMessages.length - 1 }) + + this.abuseMessages = this.abuseMessages.filter(m => m.id !== abuseMessage.id) + }, + + err => this.notifier.error(err.message) + ) + } + + isMessageByMe (abuseMessage: AbuseMessage) { + return this.auth.getUser().account.id === abuseMessage.account.id + } + + getPlaceholderMessage () { + if (this.isAdminView) { + return this.i18n('Add a message to communicate with the reporter') + } + + return this.i18n('Add a message to communicate with the moderation team') + } + + private loadMessages () { + this.abuseService.listAbuseMessages(this.abuse) + .subscribe( + res => { + this.abuseMessages = res.data + this.noResults = this.abuseMessages.length === 0 + + setTimeout(() => { + if (!this.messagesBlock) return + + const element = this.messagesBlock.nativeElement as HTMLElement + element.scrollIntoView({ block: 'end', inline: 'nearest' }) + }) + }, + + err => this.notifier.error(err.message) + ) + } + +} diff --git a/client/src/app/shared/shared-abuse-list/index.ts b/client/src/app/shared/shared-abuse-list/index.ts new file mode 100644 index 000000000..3bdd18201 --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/index.ts @@ -0,0 +1,7 @@ +export * from './abuse-message-modal.component' +export * from './abuse-list-table.component' +export * from './abuse-details.component' +export * from './moderation-comment-modal.component' +export * from './processed-abuse.model' + +export * from './shared-abuse-list.module' diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html new file mode 100644 index 000000000..8082e93f4 --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html @@ -0,0 +1,38 @@ + +
+

Moderation comment

+ + +
+ +
+
+
+ +
+ {{ formErrors.moderationComment }} +
+
+ +
+ This comment can only be seen by you or the other moderators. +
+ +
+ + + +
+
+
+ + diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss new file mode 100644 index 000000000..afcdb9a16 --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss @@ -0,0 +1,6 @@ +@import 'variables'; +@import 'mixins'; + +textarea { + @include peertube-textarea(100%, 100px); +} diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts new file mode 100644 index 000000000..ecb7966bf --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts @@ -0,0 +1,70 @@ +import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core' +import { Notifier } from '@app/core' +import { FormReactive, FormValidatorService, AbuseValidatorsService } from '@app/shared/shared-forms' +import { AbuseService } from '@app/shared/shared-moderation' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { AdminAbuse } from '@shared/models' + +@Component({ + selector: 'my-moderation-comment-modal', + templateUrl: './moderation-comment-modal.component.html', + styleUrls: [ './moderation-comment-modal.component.scss' ] +}) +export class ModerationCommentModalComponent extends FormReactive implements OnInit { + @ViewChild('modal', { static: true }) modal: NgbModal + @Output() commentUpdated = new EventEmitter() + + private abuseToComment: AdminAbuse + private openedModal: NgbModalRef + + constructor ( + protected formValidatorService: FormValidatorService, + private modalService: NgbModal, + private notifier: Notifier, + private abuseService: AbuseService, + private abuseValidatorsService: AbuseValidatorsService, + private i18n: I18n + ) { + super() + } + + ngOnInit () { + this.buildForm({ + moderationComment: this.abuseValidatorsService.ABUSE_MODERATION_COMMENT + }) + } + + openModal (abuseToComment: AdminAbuse) { + this.abuseToComment = abuseToComment + this.openedModal = this.modalService.open(this.modal, { centered: true }) + + this.form.patchValue({ + moderationComment: this.abuseToComment.moderationComment + }) + } + + hide () { + this.abuseToComment = undefined + this.openedModal.close() + this.form.reset() + } + + async banUser () { + const moderationComment: string = this.form.value[ 'moderationComment' ] + + this.abuseService.updateAbuse(this.abuseToComment, { moderationComment }) + .subscribe( + () => { + this.notifier.success(this.i18n('Comment updated.')) + + this.commentUpdated.emit(moderationComment) + this.hide() + }, + + err => this.notifier.error(err.message) + ) + } + +} diff --git a/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts b/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts new file mode 100644 index 000000000..fce1a8db3 --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts @@ -0,0 +1,25 @@ +import { SafeHtml } from '@angular/platform-browser' +import { AdminAbuse } from '@shared/models' +import { Account } from '@app/shared/shared-main' + +// Don't use an abuse model because we need external services to compute some properties +// And this model is only used in this component +export type ProcessedAbuse = AdminAbuse & { + moderationCommentHtml?: string, + reasonHtml?: string + embedHtml?: SafeHtml + updatedAt?: Date + + // override bare server-side definitions with rich client-side definitions + reporterAccount?: Account + flaggedAccount?: Account + + truncatedCommentHtml?: string + commentHtml?: string + + video: AdminAbuse['video'] & { + channel: AdminAbuse['video']['channel'] & { + ownerAccount: Account + } + } +} diff --git a/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts b/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts new file mode 100644 index 000000000..663cd902b --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts @@ -0,0 +1,42 @@ + +import { TableModule } from 'primeng/table' +import { NgModule } from '@angular/core' +import { SharedFormModule } from '../shared-forms/shared-form.module' +import { SharedGlobalIconModule } from '../shared-icons' +import { SharedMainModule } from '../shared-main/shared-main.module' +import { SharedModerationModule } from '../shared-moderation' +import { SharedVideoCommentModule } from '../shared-video-comment' +import { AbuseDetailsComponent } from './abuse-details.component' +import { AbuseListTableComponent } from './abuse-list-table.component' +import { AbuseMessageModalComponent } from './abuse-message-modal.component' +import { ModerationCommentModalComponent } from './moderation-comment-modal.component' + +@NgModule({ + imports: [ + TableModule, + + SharedMainModule, + SharedFormModule, + SharedModerationModule, + SharedGlobalIconModule, + SharedVideoCommentModule + ], + + declarations: [ + AbuseDetailsComponent, + AbuseListTableComponent, + ModerationCommentModalComponent, + AbuseMessageModalComponent + ], + + exports: [ + AbuseDetailsComponent, + AbuseListTableComponent, + ModerationCommentModalComponent, + AbuseMessageModalComponent + ], + + providers: [ + ] +}) +export class SharedAbuseListModule { } diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts index bda88bdee..950e256ff 100644 --- a/client/src/app/shared/shared-main/account/actor.model.ts +++ b/client/src/app/shared/shared-main/account/actor.model.ts @@ -41,6 +41,13 @@ export abstract class Actor implements ActorServer { return accountName + '@' + host } + static IS_LOCAL (host: string) { + const absoluteAPIUrl = getAbsoluteAPIUrl() + const thisHost = new URL(absoluteAPIUrl).host + + return host.trim() === thisHost + } + protected constructor (hash: ActorServer) { this.id = hash.id this.url = hash.url @@ -53,10 +60,7 @@ export abstract class Actor implements ActorServer { if (hash.updatedAt) this.updatedAt = new Date(hash.updatedAt.toString()) this.avatar = hash.avatar - - const absoluteAPIUrl = getAbsoluteAPIUrl() - const thisHost = new URL(absoluteAPIUrl).host - this.isLocal = this.host.trim() === thisHost + this.isLocal = Actor.IS_LOCAL(this.host) this.updateComputedAttributes() } diff --git a/client/src/app/shared/shared-moderation/abuse-message-modal.component.html b/client/src/app/shared/shared-moderation/abuse-message-modal.component.html deleted file mode 100644 index 67c6a3081..000000000 --- a/client/src/app/shared/shared-moderation/abuse-message-modal.component.html +++ /dev/null @@ -1,40 +0,0 @@ - -
-

Messages

- - -
- -
-
-
- -
{{ message.account.name }}
- -
-
{{ message.message }}
-
{{ message.createdAt | date }}
-
-
-
- -
-
- - -
- {{ formErrors.message }} -
-
- -
- -
-
- -
- - diff --git a/client/src/app/shared/shared-moderation/abuse-message-modal.component.scss b/client/src/app/shared/shared-moderation/abuse-message-modal.component.scss deleted file mode 100644 index 89d6b88c1..000000000 --- a/client/src/app/shared/shared-moderation/abuse-message-modal.component.scss +++ /dev/null @@ -1,57 +0,0 @@ -@import 'variables'; -@import 'mixins'; - -form { - margin: 20px 20px 0 0; -} - -textarea { - @include peertube-textarea(100%, 70px); - - margin-top: 20px; -} - -.messages { - display: flex; - flex-direction: column; - overflow-y: scroll; - margin-right: 5px; -} - -.message-block { - margin-bottom: 10px; - max-width: 60%; - - .author { - color: var(--greyForegroundColor); - font-size: 14px; - } - - .bubble { - color: var(--mainForegroundColor); - background-color: var(--greyBackgroundColor); - border-radius: 10px; - padding: 5px 10px; - - &.by-me { - color: var(--mainForegroundColor); - background-color: var(--secondaryColor); - } - - &.by-moderator { - color: #fff; - background-color: var(--mainColor); - - align-self: flex-end; - } - - .content { - font-size: 15px; - } - - .date { - font-size: 13px; - color: var(--greyForegroundColor); - } - } -} diff --git a/client/src/app/shared/shared-moderation/abuse-message-modal.component.ts b/client/src/app/shared/shared-moderation/abuse-message-modal.component.ts deleted file mode 100644 index 5822dfe1d..000000000 --- a/client/src/app/shared/shared-moderation/abuse-message-modal.component.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { Component, ElementRef, EventEmitter, Output, ViewChild, OnInit } from '@angular/core' -import { Notifier, AuthService } from '@app/core' -import { FormReactive, FormValidatorService, AbuseValidatorsService } from '@app/shared/shared-forms' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { AbuseMessage, UserAbuse } from '@shared/models' -import { AbuseService } from './abuse.service' - -@Component({ - selector: 'my-abuse-message-modal', - templateUrl: './abuse-message-modal.component.html', - styleUrls: [ './abuse-message-modal.component.scss' ] -}) -export class AbuseMessageModalComponent extends FormReactive implements OnInit { - @ViewChild('modal', { static: true }) modal: NgbModal - @ViewChild('messagesBlock', { static: false }) messagesBlock: ElementRef - - @Output() countMessagesUpdated = new EventEmitter<{ abuseId: number, countMessages: number }>() - - abuseMessages: AbuseMessage[] = [] - textareaMessage: string - sendingMessage = false - - private openedModal: NgbModalRef - private abuse: UserAbuse - - constructor ( - protected formValidatorService: FormValidatorService, - private abuseValidatorsService: AbuseValidatorsService, - private modalService: NgbModal, - private auth: AuthService, - private notifier: Notifier, - private i18n: I18n, - private abuseService: AbuseService - ) { - super() - } - - ngOnInit () { - this.buildForm({ - message: this.abuseValidatorsService.ABUSE_MESSAGE - }) - } - - openModal (abuse: UserAbuse) { - this.abuse = abuse - - this.openedModal = this.modalService.open(this.modal, { centered: true }) - - this.loadMessages() - } - - hide () { - this.abuseMessages = [] - this.openedModal.close() - } - - addMessage () { - this.sendingMessage = true - - this.abuseService.addAbuseMessage(this.abuse, this.form.value['message']) - .subscribe( - () => { - this.form.reset() - this.sendingMessage = false - this.countMessagesUpdated.emit({ abuseId: this.abuse.id, countMessages: this.abuseMessages.length + 1 }) - - this.loadMessages() - }, - - err => { - this.sendingMessage = false - console.error(err) - this.notifier.error('Sorry but you cannot send this message. Please retry later') - } - ) - } - - deleteMessage (abuseMessage: AbuseMessage) { - this.abuseService.deleteAbuseMessage(this.abuse, abuseMessage) - .subscribe( - () => { - this.countMessagesUpdated.emit({ abuseId: this.abuse.id, countMessages: this.abuseMessages.length - 1 }) - - this.abuseMessages = this.abuseMessages.filter(m => m.id !== abuseMessage.id) - }, - - err => this.notifier.error(err.message) - ) - } - - isMessageByMe (abuseMessage: AbuseMessage) { - return this.auth.getUser().account.id === abuseMessage.account.id - } - - private loadMessages () { - this.abuseService.listAbuseMessages(this.abuse) - .subscribe( - res => { - this.abuseMessages = res.data - - setTimeout(() => { - if (!this.messagesBlock) return - - const element = this.messagesBlock.nativeElement as HTMLElement - element.scrollIntoView({ block: 'end', inline: 'nearest' }) - }) - }, - - err => this.notifier.error(err.message) - ) - } - -} diff --git a/client/src/app/shared/shared-moderation/abuse.service.ts b/client/src/app/shared/shared-moderation/abuse.service.ts index 652d8370f..c1aa62023 100644 --- a/client/src/app/shared/shared-moderation/abuse.service.ts +++ b/client/src/app/shared/shared-moderation/abuse.service.ts @@ -5,13 +5,24 @@ import { catchError, map } from 'rxjs/operators' import { HttpClient, HttpParams } from '@angular/common/http' import { Injectable } from '@angular/core' import { RestExtractor, RestPagination, RestService } from '@app/core' -import { AdminAbuse, AbuseCreate, AbuseFilter, AbusePredefinedReasonsString, AbuseState, AbuseUpdate, ResultList, UserAbuse, AbuseMessage } from '@shared/models' -import { environment } from '../../../environments/environment' import { I18n } from '@ngx-translate/i18n-polyfill' +import { + AbuseCreate, + AbuseFilter, + AbuseMessage, + AbusePredefinedReasonsString, + AbuseState, + AbuseUpdate, + AdminAbuse, + ResultList, + UserAbuse +} from '@shared/models' +import { environment } from '../../../environments/environment' @Injectable() export class AbuseService { private static BASE_ABUSE_URL = environment.apiUrl + '/api/v1/abuses' + private static BASE_MY_ABUSE_URL = environment.apiUrl + '/api/v1/users/me/abuses' constructor ( private i18n: I18n, @@ -32,33 +43,7 @@ export class AbuseService { params = this.restService.addRestGetParams(params, pagination, sort) if (search) { - const filters = this.restService.parseQueryStringFilter(search, { - id: { prefix: '#' }, - state: { - prefix: 'state:', - handler: v => { - if (v === 'accepted') return AbuseState.ACCEPTED - if (v === 'pending') return AbuseState.PENDING - if (v === 'rejected') return AbuseState.REJECTED - - return undefined - } - }, - videoIs: { - prefix: 'videoIs:', - handler: v => { - if (v === 'deleted') return v - if (v === 'blacklisted') return v - - return undefined - } - }, - searchReporter: { prefix: 'reporter:' }, - searchReportee: { prefix: 'reportee:' }, - predefinedReason: { prefix: 'tag:' } - }) - - params = this.restService.addObjectParams(params, filters) + params = this.buildParamsFromSearch(search, params) } return this.authHttp.get>(url, { params }) @@ -67,6 +52,27 @@ export class AbuseService { ) } + getUserAbuses (options: { + pagination: RestPagination, + sort: SortMeta, + search?: string + }): Observable> { + const { pagination, sort, search } = options + const url = AbuseService.BASE_MY_ABUSE_URL + + let params = new HttpParams() + params = this.restService.addRestGetParams(params, pagination, sort) + + if (search) { + params = this.buildParamsFromSearch(search, params) + } + + return this.authHttp.get>(url, { params }) + .pipe( + catchError(res => this.restExtractor.handleError(res)) + ) + } + reportVideo (parameters: AbuseCreate) { const url = AbuseService.BASE_ABUSE_URL @@ -180,4 +186,33 @@ export class AbuseService { return reasons } + private buildParamsFromSearch (search: string, params: HttpParams) { + const filters = this.restService.parseQueryStringFilter(search, { + id: { prefix: '#' }, + state: { + prefix: 'state:', + handler: v => { + if (v === 'accepted') return AbuseState.ACCEPTED + if (v === 'pending') return AbuseState.PENDING + if (v === 'rejected') return AbuseState.REJECTED + + return undefined + } + }, + videoIs: { + prefix: 'videoIs:', + handler: v => { + if (v === 'deleted') return v + if (v === 'blacklisted') return v + + return undefined + } + }, + searchReporter: { prefix: 'reporter:' }, + searchReportee: { prefix: 'reportee:' }, + predefinedReason: { prefix: 'tag:' } + }) + + return this.restService.addObjectParams(params, filters) + } } diff --git a/client/src/app/shared/shared-moderation/index.ts b/client/src/app/shared/shared-moderation/index.ts index c8082d4b3..41c910ffe 100644 --- a/client/src/app/shared/shared-moderation/index.ts +++ b/client/src/app/shared/shared-moderation/index.ts @@ -1,6 +1,5 @@ export * from './report-modals' -export * from './abuse-message-modal.component' export * from './abuse.service' export * from './account-block.model' export * from './account-blocklist.component' diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss new file mode 100644 index 000000000..260346dc5 --- /dev/null +++ b/client/src/app/shared/shared-moderation/moderation.scss @@ -0,0 +1,50 @@ +@import 'variables'; +@import 'mixins'; +@import 'miniature'; + +.moderation-expanded { + font-size: 90%; + + .moderation-expanded-label { + font-weight: $font-semibold; + display: inline-block; + vertical-align: top; + text-align: right; + } + + .moderation-expanded-text { + display: inline-flex; + word-wrap: break-word; + + ::ng-deep p:last-child { + margin-bottom: 0px !important; + } + } +} + +.input-group { + @include peertube-input-group(300px); + + .dropdown-toggle::after { + margin-left: 0; + } +} + +.chip { + @include chip; +} + +.caption { + justify-content: flex-end; + + input { + @include peertube-input-text(250px); + flex-grow: 1; + } +} + +my-action-dropdown.show { + ::ng-deep .dropdown-root { + display: block !important; + } +} diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.scss b/client/src/app/shared/shared-moderation/server-blocklist.component.scss index 9ddb76850..31db4d92b 100644 --- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss +++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss @@ -32,3 +32,16 @@ a { .block-button { @include create-button; } + +.caption { + justify-content: flex-end; + + input { + @include peertube-input-text(250px); + flex-grow: 1; + } +} + +.chip { + @include chip; +} diff --git a/client/src/app/shared/shared-moderation/shared-moderation.module.ts b/client/src/app/shared/shared-moderation/shared-moderation.module.ts index b5b6daf27..b1b98f8d0 100644 --- a/client/src/app/shared/shared-moderation/shared-moderation.module.ts +++ b/client/src/app/shared/shared-moderation/shared-moderation.module.ts @@ -4,7 +4,6 @@ import { SharedFormModule } from '../shared-forms/shared-form.module' import { SharedGlobalIconModule } from '../shared-icons' import { SharedMainModule } from '../shared-main/shared-main.module' import { SharedVideoCommentModule } from '../shared-video-comment' -import { AbuseMessageModalComponent } from './abuse-message-modal.component' import { AbuseService } from './abuse.service' import { BatchDomainsModalComponent } from './batch-domains-modal.component' import { BlocklistService } from './blocklist.service' @@ -30,8 +29,7 @@ import { VideoBlockService } from './video-block.service' VideoReportComponent, BatchDomainsModalComponent, CommentReportComponent, - AccountReportComponent, - AbuseMessageModalComponent + AccountReportComponent ], exports: [ @@ -41,8 +39,7 @@ import { VideoBlockService } from './video-block.service' VideoReportComponent, BatchDomainsModalComponent, CommentReportComponent, - AccountReportComponent, - AbuseMessageModalComponent + AccountReportComponent ], providers: [ -- cgit v1.2.3