Add user moderation dropdown to comments

client/src/app/shared/moderation/user-moderation-dropdown.component.html

@@ -3,6 +3,6 @@
 
   <my-action-dropdown
     [actions]="userActions" [entry]="{ user: user, account: account }"
-    [buttonSize]="buttonSize" [placement]="placement"
+    [buttonSize]="buttonSize" [placement]="placement" [label]="label"
   ></my-action-dropdown>
 </ng-container>

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

@@ -21,6 +21,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
 
   @Input() buttonSize: 'normal' | 'small' = 'normal'
   @Input() placement = 'left'
+  @Input() label: string
 
   @Output() userChanged = new EventEmitter()
   @Output() userDeleted = new EventEmitter()
@@ -36,7 +37,6 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
     private serverService: ServerService,
     private userService: UserService,
     private blocklistService: BlocklistService,
-    private auth: AuthService,
     private i18n: I18n
   ) { }
 
@@ -243,20 +243,20 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
       if (this.user && authUser.hasRight(UserRight.MANAGE_USERS) && authUser.canManage(this.user)) {
         this.userActions.push([
           {
-            label: this.i18n('Edit'),
+            label: this.i18n('Edit user'),
             linkBuilder: ({ user }) => this.getRouterUserEditLink(user)
           },
           {
-            label: this.i18n('Delete'),
+            label: this.i18n('Delete user'),
             handler: ({ user }) => this.removeUser(user)
           },
           {
-            label: this.i18n('Ban'),
+            label: this.i18n('Ban user'),
             handler: ({ user }) => this.openBanUserModal(user),
             isDisplayed: ({ user }) => !user.blocked
           },
           {
-            label: this.i18n('Unban'),
+            label: this.i18n('Unban user'),
             handler: ({ user }) => this.unbanUser(user),
             isDisplayed: ({ user }) => user.blocked
           },

client/src/app/videos/+video-watch/comment/video-comment.component.html

@@ -36,6 +36,9 @@
         <div class="comment-actions">
           <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
           <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div>
+          <my-user-moderation-dropdown
+            buttonSize="small" [account]="commentAccount" [user]="commentUser" label="Options" placement="bottom-left auto"
+          ></my-user-moderation-dropdown>
         </div>
       </ng-container>
 

client/src/app/videos/+video-watch/comment/video-comment.component.scss

@@ -114,6 +114,7 @@
       margin-bottom: 10px;
       display: flex;
 
+      ::ng-deep .dropdown-toggle,
       .comment-action-reply,
       .comment-action-delete {
         color: $grey-foreground-color;
@@ -124,6 +125,12 @@
           color: var(--mainForegroundColor);
         }
       }
+
+      ::ng-deep .action-button {
+        background-color: transparent;
+        padding: 0;
+        font-weight: unset;
+      }
     }
   }
 

client/src/app/videos/+video-watch/comment/video-comment.component.ts

@@ -1,10 +1,14 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'
-import { UserRight } from '../../../../../../shared/models/users'
+import { User, UserRight } from '../../../../../../shared/models/users'
 import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
-import { AuthService } from '../../../core/auth'
-import { Video } from '../../../shared/video/video.model'
+import { AuthService } from '@app/core/auth'
+import { AccountService } from '@app/shared/account/account.service'
+import { Video } from '@app/shared/video/video.model'
 import { VideoComment } from './video-comment.model'
 import { MarkdownService } from '@app/shared/renderer'
+import { Account } from '@app/shared/account/account.model'
+import { Notifier } from '@app/core'
+import { UserService } from '@app/shared'
 
 @Component({
   selector: 'my-video-comment',
@@ -28,9 +32,15 @@ export class VideoCommentComponent implements OnInit, OnChanges {
   sanitizedCommentHTML = ''
   newParentComments: VideoComment[] = []
 
+  commentAccount: Account
+  commentUser: User
+
   constructor (
     private markdownService: MarkdownService,
-    private authService: AuthService
+    private authService: AuthService,
+    private accountService: AccountService,
+    private userService: UserService,
+    private notifier: Notifier
   ) {}
 
   get user () {
@@ -90,9 +100,26 @@ export class VideoCommentComponent implements OnInit, OnChanges {
       )
   }
 
+  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.commentUser = user,
+
+            err => this.notifier.error(err.message)
+          )
+    }
+  }
+
   private async init () {
     const html = await this.markdownService.textMarkdownToHTML(this.comment.text, true)
     this.sanitizedCommentHTML = await this.markdownService.processVideoTimestamps(html)
     this.newParentComments = this.parentComments.concat([ this.comment ])
+    this.commentAccount = new Account(this.comment.account)
+    this.getUserIfNeeded(this.commentAccount)
   }
 }