Give moderators access to edit channels (#4608)

* give admins access to edit all channels

closes #4598

* test(channels): +admin update another users channel

* Fix tests

* fix(server): delete another users channel

Since the channel owner isn't necessary the auth user we need to check
the right account whether it's the last video or not.

* REMOVE_ANY_VIDEO_CHANNEL > MANAGE_ANY_VIDEO_CHANNEL

Merge REMOVE_ANY_VIDEO_CHANNEL and MANY_VIDEO_CHANNELS to
MANAGE_ANY_VIDEO_CHANNEL.

* user-right: moderator can't manage admins channel

* client: MyVideoChannelCreateComponent > VideoChannelCreateComponent

* client: MyVideoChannelEdit > VideoChannelEdit

* Revert "user-right: moderator can't manage admins channel"

This reverts commit 2c627c154e2bfe6af2e0f45efb27faf4117572f3.

* server: clean dupl validator functionality

* fix ensureUserCanManageChannel usage

It's not async anymore.

* server: merge channel validator middleares

ensureAuthUserOwnsChannelValidator & ensureUserCanManageChannel gets
merged into one middleware.

* client(VideoChannelEdit): redirect to prev route

* fix(VideoChannels): handle anon users

* client: new routes for create/update channel

* Refactor channel validators

Co-authored-by: Chocobozzz <me@florianbigard.com>

7 files changed, 562 insertions, 0 deletions

diff --git a/client/src/app/+manage/manage-routing.module.ts b/client/src/app/+manage/manage-routing.module.ts
new file mode 100644
index 000000000..14ae4f1e0
--- /dev/null
+++ b/client/src/app/+manage/manage-routing.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { VideoChannelCreateComponent } from './video-channel-edit/video-channel-create.component'
+import { VideoChannelUpdateComponent } from './video-channel-edit/video-channel-update.component'
+
+const manageRoutes: Routes = [
+  {
+    path: 'create',
+    component: VideoChannelCreateComponent,
+    data: {
+      meta: {
+        title: $localize`Create a new video channel`
+      }
+    }
+  },
+  {
+    path: 'update/:videoChannelName',
+    component: VideoChannelUpdateComponent,
+    data: {
+      meta: {
+        title: $localize`Update video channel`
+      }
+    }
+  }
+]
+
+@NgModule({
+  imports: [ RouterModule.forChild(manageRoutes) ],
+  exports: [ RouterModule ]
+})
+export class ManageRoutingModule {}
diff --git a/client/src/app/+manage/manage.module.ts b/client/src/app/+manage/manage.module.ts
new file mode 100644
index 000000000..28939ec5a
--- /dev/null
+++ b/client/src/app/+manage/manage.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core'
+import { SharedFormModule } from '@app/shared/shared-forms'
+import { SharedGlobalIconModule } from '@app/shared/shared-icons'
+import { SharedMainModule } from '@app/shared/shared-main'
+import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
+import { SharedActorImageEditModule } from '@app/shared/shared-actor-image-edit'
+import { VideoChannelCreateComponent } from './video-channel-edit/video-channel-create.component'
+import { VideoChannelUpdateComponent } from './video-channel-edit/video-channel-update.component'
+import { ManageRoutingModule } from './manage-routing.module'
+
+@NgModule({
+  imports: [
+    ManageRoutingModule,
+    SharedMainModule,
+    SharedFormModule,
+    SharedGlobalIconModule,
+    SharedActorImageModule,
+    SharedActorImageEditModule
+  ],
+
+  declarations: [
+    VideoChannelCreateComponent,
+    VideoChannelUpdateComponent
+  ],
+
+  exports: [
+  ],
+
+  providers: []
+})
+export class ManageModule { }
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-create.component.ts b/client/src/app/+manage/video-channel-edit/video-channel-create.component.ts
new file mode 100644
index 000000000..5f8e0278e
--- /dev/null
+++ b/client/src/app/+manage/video-channel-edit/video-channel-create.component.ts
@@ -0,0 +1,120 @@
+import { of } from 'rxjs'
+import { switchMap } from 'rxjs/operators'
+import { Component, OnInit } from '@angular/core'
+import { Router } from '@angular/router'
+import { AuthService, Notifier } from '@app/core'
+import {
+  VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
+  VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
+  VIDEO_CHANNEL_NAME_VALIDATOR,
+  VIDEO_CHANNEL_SUPPORT_VALIDATOR
+} from '@app/shared/form-validators/video-channel-validators'
+import { FormValidatorService } from '@app/shared/shared-forms'
+import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
+import { HttpStatusCode, VideoChannelCreate } from '@shared/models'
+import { VideoChannelEdit } from './video-channel-edit'
+
+@Component({
+  templateUrl: './video-channel-edit.component.html',
+  styleUrls: [ './video-channel-edit.component.scss' ]
+})
+export class VideoChannelCreateComponent extends VideoChannelEdit implements OnInit {
+  error: string
+  videoChannel = new VideoChannel({})
+
+  private avatar: FormData
+  private banner: FormData
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private authService: AuthService,
+    private notifier: Notifier,
+    private router: Router,
+    private videoChannelService: VideoChannelService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      name: VIDEO_CHANNEL_NAME_VALIDATOR,
+      'display-name': VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
+      description: VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
+      support: VIDEO_CHANNEL_SUPPORT_VALIDATOR
+    })
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const body = this.form.value
+    const videoChannelCreate: VideoChannelCreate = {
+      name: body.name,
+      displayName: body['display-name'],
+      description: body.description || null,
+      support: body.support || null
+    }
+
+    this.videoChannelService.createVideoChannel(videoChannelCreate)
+      .pipe(
+        switchMap(() => this.uploadAvatar()),
+        switchMap(() => this.uploadBanner())
+      ).subscribe({
+        next: () => {
+          this.authService.refreshUserInformation()
+
+          this.notifier.success($localize`Video channel ${videoChannelCreate.displayName} created.`)
+          this.router.navigate([ '/my-library', 'video-channels' ])
+        },
+
+        error: err => {
+          if (err.status === HttpStatusCode.CONFLICT_409) {
+            this.error = $localize`This name already exists on this instance.`
+            return
+          }
+
+          this.error = err.message
+        }
+      })
+  }
+
+  onAvatarChange (formData: FormData) {
+    this.avatar = formData
+  }
+
+  onAvatarDelete () {
+    this.avatar = null
+  }
+
+  onBannerChange (formData: FormData) {
+    this.banner = formData
+  }
+
+  onBannerDelete () {
+    this.banner = null
+  }
+
+  isCreation () {
+    return true
+  }
+
+  getFormButtonTitle () {
+    return $localize`Create`
+  }
+
+  getUsername () {
+    return this.form.value.name
+  }
+
+  private uploadAvatar () {
+    if (!this.avatar) return of(undefined)
+
+    return this.videoChannelService.changeVideoChannelImage(this.getUsername(), this.avatar, 'avatar')
+  }
+
+  private uploadBanner () {
+    if (!this.banner) return of(undefined)
+
+    return this.videoChannelService.changeVideoChannelImage(this.getUsername(), this.banner, 'banner')
+  }
+}
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
new file mode 100644
index 000000000..3751747a9
--- /dev/null
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@@ -0,0 +1,96 @@
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<div class="margin-content">
+  <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+
+    <div class="form-row"> <!-- channel grid -->
+      <div class="form-group col-12 col-lg-4 col-xl-3">
+        <div *ngIf="isCreation()" class="video-channel-title" i18n>NEW CHANNEL</div>
+        <div *ngIf="!isCreation() && videoChannel" class="video-channel-title" i18n>CHANNEL</div>
+      </div>
+  
+      <div class="form-group col-12 col-lg-8 col-xl-9">
+        <h6 i18n>Banner image of the channel</h6>
+  
+        <my-actor-banner-edit
+          *ngIf="videoChannel" [previewImage]="isCreation()"
+          [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
+        ></my-actor-banner-edit>
+  
+        <my-actor-avatar-edit
+          *ngIf="videoChannel" [previewImage]="isCreation()"
+          [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
+          [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
+        ></my-actor-avatar-edit>
+  
+        <div class="form-group" *ngIf="isCreation()">
+          <label i18n for="name">Name</label>
+          <div class="input-group">
+            <input
+              type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
+              formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
+            >
+            <div class="input-group-append">
+              <span class="input-group-text">@{{ instanceHost }}</span>
+            </div>
+          </div>
+          <div *ngIf="formErrors['name']" class="form-error">
+            {{ formErrors['name'] }}
+          </div>
+        </div>
+  
+        <div class="form-group">
+          <label i18n for="display-name">Display name</label>
+          <input
+            type="text" id="display-name" class="form-control"
+            formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
+          >
+          <div *ngIf="formErrors['display-name']" class="form-error">
+            {{ formErrors['display-name'] }}
+          </div>
+        </div>
+  
+        <div class="form-group">
+          <label i18n for="description">Description</label>
+          <textarea
+            id="description" formControlName="description" class="form-control"
+            [ngClass]="{ 'input-error': formErrors['description'] }"
+          ></textarea>
+          <div *ngIf="formErrors.description" class="form-error">
+            {{ formErrors.description }}
+          </div>
+        </div>
+  
+        <div class="form-group">
+          <label for="support">Support</label>
+          <my-help
+            helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support the channel (membership platform...).<br /><br />
+      When a video is uploaded in this channel, the video support field will be automatically filled by this text."
+          ></my-help>
+          <my-markdown-textarea
+              id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced"
+              [classes]="{ 'input-error': formErrors['support'] }"
+          ></my-markdown-textarea>
+          <div *ngIf="formErrors.support" class="form-error">
+            {{ formErrors.support }}
+          </div>
+        </div>
+  
+        <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
+          <my-peertube-checkbox
+            inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
+            i18n-labelText labelText="Overwrite support field of all videos of this channel"
+          ></my-peertube-checkbox>
+        </div>
+  
+      </div>
+    </div>
+  
+    <div class="form-row"> <!-- submit placement block -->
+      <div class="col-md-7 col-xl-5"></div>
+      <div class="col-md-5 col-xl-5 d-inline-flex">
+        <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+      </div>
+    </div>
+  </form>  
+</div>
\ No newline at end of file
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
new file mode 100644
index 000000000..d010d6277
--- /dev/null
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
@@ -0,0 +1,77 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.margin-content {
+  padding-top: 20px;
+}
+
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
+.video-channel-title {
+  @include settings-big-title;
+}
+
+my-actor-avatar-edit,
+my-actor-banner-edit {
+  display: block;
+  margin-bottom: 20px;
+}
+
+my-actor-banner-edit {
+  max-width: 500px;
+}
+
+.input-group {
+  @include peertube-input-group(fit-content);
+}
+
+.input-group-append {
+  height: 30px;
+}
+
+input {
+  &[type=text] {
+    @include peertube-input-text(340px);
+
+    display: block;
+
+    &#name {
+      width: auto;
+      flex-grow: 1;
+    }
+  }
+
+  &[type=submit] {
+    @include peertube-button;
+    @include orange-button;
+    @include margin-left(auto);
+  }
+}
+
+textarea {
+  @include peertube-textarea(500px, 150px);
+
+  display: block;
+}
+
+.peertube-select-container {
+  @include peertube-select-container(340px);
+}
+
+.breadcrumb {
+  @include breadcrumb;
+}
+
+@media screen and (max-width: $small-view) {
+  input[type=text]#name {
+    width: auto !important;
+  }
+
+  label[for=name] + div,
+  textarea {
+    width: 100%;
+  }
+}
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.ts b/client/src/app/+manage/video-channel-edit/video-channel-edit.ts
new file mode 100644
index 000000000..963b4cbbe
--- /dev/null
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.ts
@@ -0,0 +1,18 @@
+import { FormReactive } from '@app/shared/shared-forms'
+import { VideoChannel } from '@app/shared/shared-main'
+
+export abstract class VideoChannelEdit extends FormReactive {
+  videoChannel: VideoChannel
+
+  abstract isCreation (): boolean
+  abstract getFormButtonTitle (): string
+
+  get instanceHost () {
+    return window.location.host
+  }
+
+  // Should be implemented by the child
+  isBulkUpdateVideosDisplayed () {
+    return false
+  }
+}
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-update.component.ts b/client/src/app/+manage/video-channel-edit/video-channel-update.component.ts
new file mode 100644
index 000000000..21b6167b2
--- /dev/null
+++ b/client/src/app/+manage/video-channel-edit/video-channel-update.component.ts
@@ -0,0 +1,189 @@
+import { Subscription } from 'rxjs'
+import { HttpErrorResponse } from '@angular/common/http'
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, Notifier, RedirectService, ServerService } from '@app/core'
+import { genericUploadErrorHandler } from '@app/helpers'
+import {
+  VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
+  VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
+  VIDEO_CHANNEL_SUPPORT_VALIDATOR
+} from '@app/shared/form-validators/video-channel-validators'
+import { FormValidatorService } from '@app/shared/shared-forms'
+import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
+import { HTMLServerConfig, VideoChannelUpdate } from '@shared/models'
+import { VideoChannelEdit } from './video-channel-edit'
+
+@Component({
+  selector: 'my-video-channel-update',
+  templateUrl: './video-channel-edit.component.html',
+  styleUrls: [ './video-channel-edit.component.scss' ]
+})
+export class VideoChannelUpdateComponent extends VideoChannelEdit implements OnInit, OnDestroy {
+  error: string
+  videoChannel: VideoChannel
+
+  private paramsSub: Subscription
+  private oldSupportField: string
+  private serverConfig: HTMLServerConfig
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private authService: AuthService,
+    private notifier: Notifier,
+    private router: Router,
+    private route: ActivatedRoute,
+    private videoChannelService: VideoChannelService,
+    private serverService: ServerService,
+    private redirectService: RedirectService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.serverConfig = this.serverService.getHTMLConfig()
+
+    this.buildForm({
+      'display-name': VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
+      description: VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
+      support: VIDEO_CHANNEL_SUPPORT_VALIDATOR,
+      bulkVideosSupportUpdate: null
+    })
+
+    this.paramsSub = this.route.params.subscribe(routeParams => {
+      const videoChannelName = routeParams['videoChannelName']
+
+      this.videoChannelService.getVideoChannel(videoChannelName)
+        .subscribe({
+          next: videoChannelToUpdate => {
+            this.videoChannel = videoChannelToUpdate
+
+            this.oldSupportField = videoChannelToUpdate.support
+
+            this.form.patchValue({
+              'display-name': videoChannelToUpdate.displayName,
+              description: videoChannelToUpdate.description,
+              support: videoChannelToUpdate.support
+            })
+          },
+
+          error: err => {
+            this.error = err.message
+          }
+        })
+    })
+  }
+
+  ngOnDestroy () {
+    if (this.paramsSub) this.paramsSub.unsubscribe()
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const body = this.form.value
+    const videoChannelUpdate: VideoChannelUpdate = {
+      displayName: body['display-name'],
+      description: body.description || null,
+      support: body.support || null,
+      bulkVideosSupportUpdate: body.bulkVideosSupportUpdate || false
+    }
+
+    this.videoChannelService.updateVideoChannel(this.videoChannel.name, videoChannelUpdate)
+      .subscribe({
+        next: () => {
+          this.authService.refreshUserInformation()
+
+          this.notifier.success($localize`Video channel ${videoChannelUpdate.displayName} updated.`)
+
+          this.redirectService.redirectToPreviousRoute([ '/c', this.videoChannel.name ])
+        },
+
+        error: err => {
+          this.error = err.message
+        }
+      })
+  }
+
+  onAvatarChange (formData: FormData) {
+    this.videoChannelService.changeVideoChannelImage(this.videoChannel.name, formData, 'avatar')
+        .subscribe({
+          next: data => {
+            this.notifier.success($localize`Avatar changed.`)
+
+            this.videoChannel.updateAvatar(data.avatar)
+          },
+
+          error: (err: HttpErrorResponse) => genericUploadErrorHandler({
+            err,
+            name: $localize`avatar`,
+            notifier: this.notifier
+          })
+        })
+  }
+
+  onAvatarDelete () {
+    this.videoChannelService.deleteVideoChannelImage(this.videoChannel.name, 'avatar')
+                            .subscribe({
+                              next: () => {
+                                this.notifier.success($localize`Avatar deleted.`)
+
+                                this.videoChannel.resetAvatar()
+                              },
+
+                              error: err => this.notifier.error(err.message)
+                            })
+  }
+
+  onBannerChange (formData: FormData) {
+    this.videoChannelService.changeVideoChannelImage(this.videoChannel.name, formData, 'banner')
+        .subscribe({
+          next: data => {
+            this.notifier.success($localize`Banner changed.`)
+
+            this.videoChannel.updateBanner(data.banner)
+          },
+
+          error: (err: HttpErrorResponse) => genericUploadErrorHandler({
+            err,
+            name: $localize`banner`,
+            notifier: this.notifier
+          })
+        })
+  }
+
+  onBannerDelete () {
+    this.videoChannelService.deleteVideoChannelImage(this.videoChannel.name, 'banner')
+                            .subscribe({
+                              next: () => {
+                                this.notifier.success($localize`Banner deleted.`)
+
+                                this.videoChannel.resetBanner()
+                              },
+
+                              error: err => this.notifier.error(err.message)
+                            })
+  }
+
+  get maxAvatarSize () {
+    return this.serverConfig.avatar.file.size.max
+  }
+
+  get avatarExtensions () {
+    return this.serverConfig.avatar.file.extensions.join(',')
+  }
+
+  isCreation () {
+    return false
+  }
+
+  getFormButtonTitle () {
+    return $localize`Update`
+  }
+
+  isBulkUpdateVideosDisplayed () {
+    if (this.oldSupportField === undefined) return false
+
+    return this.oldSupportField !== this.form.value['support']
+  }
+}