51 files changed, 373 insertions, 164 deletions

diff --git a/client/src/app/shared/form-validators/user-validators.ts b/client/src/app/shared/form-validators/user-validators.ts
index 3262853d8..b93de75ea 100644
--- a/client/src/app/shared/form-validators/user-validators.ts
+++ b/client/src/app/shared/form-validators/user-validators.ts
@@ -61,6 +61,15 @@ export const USER_EXISTING_PASSWORD_VALIDATOR: BuildFormValidator = {
   }
 }
 
+export const USER_OTP_TOKEN_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required
+  ],
+  MESSAGES: {
+    required: $localize`OTP token is required.`
+  }
+}
+
 export const USER_PASSWORD_VALIDATOR = {
   VALIDATORS: [
     Validators.required,
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
index 32d3b0093..569a37b17 100644
--- 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
@@ -2,7 +2,6 @@ import * as debug from 'debug'
 import truncate from 'lodash-es/truncate'
 import { SortMeta } from 'primeng/api'
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
-import { DomSanitizer } from '@angular/platform-browser'
 import { ActivatedRoute, Router } from '@angular/router'
 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
 import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared/shared-main'
@@ -73,8 +72,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
     private videoService: VideoService,
     private videoBlocklistService: VideoBlockService,
     private confirmService: ConfirmService,
-    private markdownRenderer: MarkdownService,
-    private sanitizer: DomSanitizer
+    private markdownRenderer: MarkdownService
   ) {
     super()
   }
@@ -216,8 +214,8 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
               abuse.truncatedCommentHtml = abuse.commentHtml = $localize`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)
+              abuse.truncatedCommentHtml = await this.markdownRenderer.textMarkdownToHTML({ markdown: truncated, withHtml: true })
+              abuse.commentHtml = await this.markdownRenderer.textMarkdownToHTML({ markdown: abuse.comment.text, withHtml: true })
             }
           }
 
@@ -274,7 +272,8 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
       },
       {
         label: $localize`Delete report`,
-        handler: abuse => this.isAdminView() && this.removeAbuse(abuse)
+        handler: abuse => this.removeAbuse(abuse),
+        isDisplayed: () => this.isAdminView()
       }
     ]
   }
@@ -452,6 +451,6 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
   }
 
   private toHtml (text: string) {
-    return this.markdownRenderer.textMarkdownToHTML(text)
+    return this.markdownRenderer.textMarkdownToHTML({ markdown: text })
   }
 }
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
index d24a5d58d..12d503f56 100644
--- 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
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { AuthService, HtmlRendererService, Notifier } from '@app/core'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { logger } from '@root-helpers/logger'
@@ -29,7 +29,7 @@ export class AbuseMessageModalComponent extends FormReactive implements OnInit {
   private abuse: UserAbuse
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private modalService: NgbModal,
     private htmlRenderer: HtmlRendererService,
     private auth: AuthService,
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
index 2600da8da..4ad807d25 100644
--- 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
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } 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'
@@ -20,7 +20,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
   private openedModal: NgbModalRef
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private modalService: NgbModal,
     private notifier: Notifier,
     private abuseService: AbuseService
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
index d738a644e..618c3dd4f 100644
--- a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
+++ b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
@@ -58,7 +58,7 @@ export class CustomMarkupService {
   }
 
   async buildElement (text: string) {
-    const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags())
+    const html = await this.markdown.customPageMarkdownToHTML({ markdown: text, additionalAllowedTags: this.getSupportedTags() })
 
     const rootElement = document.createElement('div')
     rootElement.innerHTML = html
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
index e9c466a90..ba12b7139 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
@@ -42,7 +42,11 @@ export class ChannelMiniatureMarkupComponent implements CustomMarkupComponent, O
         tap(channel => {
           this.channel = channel
         }),
-        switchMap(() => from(this.markdown.textMarkdownToHTML(this.channel.description))),
+        switchMap(() => from(this.markdown.textMarkdownToHTML({
+          markdown: this.channel.description,
+          withEmoji: true,
+          withHtml: true
+        }))),
         tap(html => {
           this.descriptionHTML = html
         }),
diff --git a/client/src/app/shared/shared-forms/form-reactive.service.ts b/client/src/app/shared/shared-forms/form-reactive.service.ts
new file mode 100644
index 000000000..f1b7e0ef2
--- /dev/null
+++ b/client/src/app/shared/shared-forms/form-reactive.service.ts
@@ -0,0 +1,101 @@
+import { Injectable } from '@angular/core'
+import { AbstractControl, FormGroup } from '@angular/forms'
+import { wait } from '@root-helpers/utils'
+import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model'
+import { FormValidatorService } from './form-validator.service'
+
+export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors }
+export type FormReactiveValidationMessages = {
+  [ id: string ]: { [ name: string ]: string } | FormReactiveValidationMessages
+}
+
+@Injectable()
+export class FormReactiveService {
+
+  constructor (private formValidatorService: FormValidatorService) {
+
+  }
+
+  buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) {
+    const { formErrors, validationMessages, form } = this.formValidatorService.buildForm(obj, defaultValues)
+
+    form.statusChanges.subscribe(async () => {
+      // FIXME: remove when https://github.com/angular/angular/issues/41519 is fixed
+      await this.waitPendingCheck(form)
+
+      this.onStatusChanged({ form, formErrors, validationMessages })
+    })
+
+    return { form, formErrors, validationMessages }
+  }
+
+  async waitPendingCheck (form: FormGroup) {
+    if (form.status !== 'PENDING') return
+
+    // FIXME: the following line does not work: https://github.com/angular/angular/issues/41519
+    // return firstValueFrom(form.statusChanges.pipe(filter(status => status !== 'PENDING')))
+    // So we have to fallback to active wait :/
+
+    do {
+      await wait(10)
+    } while (form.status === 'PENDING')
+  }
+
+  markAllAsDirty (controlsArg: { [ key: string ]: AbstractControl }) {
+    const controls = controlsArg
+
+    for (const key of Object.keys(controls)) {
+      const control = controls[key]
+
+      if (control instanceof FormGroup) {
+        this.markAllAsDirty(control.controls)
+        continue
+      }
+
+      control.markAsDirty()
+    }
+  }
+
+  forceCheck (form: FormGroup, formErrors: any, validationMessages: FormReactiveValidationMessages) {
+    this.onStatusChanged({ form, formErrors, validationMessages, onlyDirty: false })
+  }
+
+  private onStatusChanged (options: {
+    form: FormGroup
+    formErrors: FormReactiveErrors
+    validationMessages: FormReactiveValidationMessages
+    onlyDirty?: boolean // default true
+  }) {
+    const { form, formErrors, validationMessages, onlyDirty = true } = options
+
+    for (const field of Object.keys(formErrors)) {
+      if (formErrors[field] && typeof formErrors[field] === 'object') {
+        this.onStatusChanged({
+          form: form.controls[field] as FormGroup,
+          formErrors: formErrors[field] as FormReactiveErrors,
+          validationMessages: validationMessages[field] as FormReactiveValidationMessages,
+          onlyDirty
+        })
+
+        continue
+      }
+
+      // clear previous error message (if any)
+      formErrors[field] = ''
+      const control = form.get(field)
+
+      if (!control || (onlyDirty && !control.dirty) || !control.enabled || !control.errors) continue
+
+      const staticMessages = validationMessages[field]
+      for (const key of Object.keys(control.errors)) {
+        const formErrorValue = control.errors[key]
+
+        // Try to find error message in static validation messages first
+        // Then check if the validator returns a string that is the error
+        if (staticMessages[key]) formErrors[field] += staticMessages[key] + ' '
+        else if (typeof formErrorValue === 'string') formErrors[field] += control.errors[key]
+        else throw new Error('Form error value of ' + field + ' is invalid')
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-forms/form-reactive.ts b/client/src/app/shared/shared-forms/form-reactive.ts
index a19ffdd82..d1e7be802 100644
--- a/client/src/app/shared/shared-forms/form-reactive.ts
+++ b/client/src/app/shared/shared-forms/form-reactive.ts
@@ -1,16 +1,9 @@
-
-import { AbstractControl, FormGroup } from '@angular/forms'
-import { wait } from '@root-helpers/utils'
+import { FormGroup } from '@angular/forms'
 import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model'
-import { FormValidatorService } from './form-validator.service'
-
-export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors }
-export type FormReactiveValidationMessages = {
-  [ id: string ]: { [ name: string ]: string } | FormReactiveValidationMessages
-}
+import { FormReactiveService, FormReactiveValidationMessages } from './form-reactive.service'
 
 export abstract class FormReactive {
-  protected abstract formValidatorService: FormValidatorService
+  protected abstract formReactiveService: FormReactiveService
   protected formChanged = false
 
   form: FormGroup
@@ -18,86 +11,22 @@ export abstract class FormReactive {
   validationMessages: FormReactiveValidationMessages
 
   buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) {
-    const { formErrors, validationMessages, form } = this.formValidatorService.buildForm(obj, defaultValues)
+    const { formErrors, validationMessages, form } = this.formReactiveService.buildForm(obj, defaultValues)
 
     this.form = form
     this.formErrors = formErrors
     this.validationMessages = validationMessages
-
-    this.form.statusChanges.subscribe(async () => {
-      // FIXME: remove when https://github.com/angular/angular/issues/41519 is fixed
-      await this.waitPendingCheck()
-
-      this.onStatusChanged(this.form, this.formErrors, this.validationMessages)
-    })
   }
 
   protected async waitPendingCheck () {
-    if (this.form.status !== 'PENDING') return
-
-    // FIXME: the following line does not work: https://github.com/angular/angular/issues/41519
-    // return firstValueFrom(this.form.statusChanges.pipe(filter(status => status !== 'PENDING')))
-    // So we have to fallback to active wait :/
-
-    do {
-      await wait(10)
-    } while (this.form.status === 'PENDING')
+    return this.formReactiveService.waitPendingCheck(this.form)
   }
 
-  protected markAllAsDirty (controlsArg?: { [ key: string ]: AbstractControl }) {
-    const controls = controlsArg || this.form.controls
-
-    for (const key of Object.keys(controls)) {
-      const control = controls[key]
-
-      if (control instanceof FormGroup) {
-        this.markAllAsDirty(control.controls)
-        continue
-      }
-
-      control.markAsDirty()
-    }
+  protected markAllAsDirty () {
+    return this.formReactiveService.markAllAsDirty(this.form.controls)
   }
 
   protected forceCheck () {
-    this.onStatusChanged(this.form, this.formErrors, this.validationMessages, false)
-  }
-
-  private onStatusChanged (
-    form: FormGroup,
-    formErrors: FormReactiveErrors,
-    validationMessages: FormReactiveValidationMessages,
-    onlyDirty = true
-  ) {
-    for (const field of Object.keys(formErrors)) {
-      if (formErrors[field] && typeof formErrors[field] === 'object') {
-        this.onStatusChanged(
-          form.controls[field] as FormGroup,
-          formErrors[field] as FormReactiveErrors,
-          validationMessages[field] as FormReactiveValidationMessages,
-          onlyDirty
-        )
-        continue
-      }
-
-      // clear previous error message (if any)
-      formErrors[field] = ''
-      const control = form.get(field)
-
-      if (control.dirty) this.formChanged = true
-
-      if (!control || (onlyDirty && !control.dirty) || !control.enabled || !control.errors) continue
-
-      const staticMessages = validationMessages[field]
-      for (const key of Object.keys(control.errors)) {
-        const formErrorValue = control.errors[key]
-
-        // Try to find error message in static validation messages first
-        // Then check if the validator returns a string that is the error
-        if (staticMessages[key]) formErrors[field] += staticMessages[key] + ' '
-        else if (typeof formErrorValue === 'string') formErrors[field] += control.errors[key]
-        else throw new Error('Form error value of ' + field + ' is invalid')
-      }
-    }
+    return this.formReactiveService.forceCheck(this.form, this.formErrors, this.validationMessages)
   }
 }
diff --git a/client/src/app/shared/shared-forms/form-validator.service.ts b/client/src/app/shared/shared-forms/form-validator.service.ts
index f67d5bb33..897008242 100644
--- a/client/src/app/shared/shared-forms/form-validator.service.ts
+++ b/client/src/app/shared/shared-forms/form-validator.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
 import { AsyncValidatorFn, FormArray, FormBuilder, FormControl, FormGroup, ValidatorFn } from '@angular/forms'
 import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model'
-import { FormReactiveErrors, FormReactiveValidationMessages } from './form-reactive'
+import { FormReactiveErrors, FormReactiveValidationMessages } from './form-reactive.service'
 
 @Injectable()
 export class FormValidatorService {
diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts
index 495785e7b..bff9862f2 100644
--- a/client/src/app/shared/shared-forms/index.ts
+++ b/client/src/app/shared/shared-forms/index.ts
@@ -1,4 +1,5 @@
 export * from './advanced-input-filter.component'
+export * from './form-reactive.service'
 export * from './form-reactive'
 export * from './form-validator.service'
 export * from './form-validator.service'
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index d667ed663..aa4a1cba8 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input } from '@angular/core'
+import { Component, ElementRef, forwardRef, Input, ViewChild } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Notifier } from '@app/core'
 
@@ -15,6 +15,8 @@ import { Notifier } from '@app/core'
   ]
 })
 export class InputTextComponent implements ControlValueAccessor {
+  @ViewChild('input') inputElement: ElementRef
+
   @Input() inputId = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined
   @Input() value = ''
   @Input() autocomplete = 'off'
@@ -65,4 +67,10 @@ export class InputTextComponent implements ControlValueAccessor {
   update () {
     this.propagateChange(this.value)
   }
+
+  focus () {
+    const el: HTMLElement = this.inputElement.nativeElement
+
+    el.focus({ preventScroll: true })
+  }
 }
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.ts b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
index 089991884..e3371f22c 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
@@ -144,9 +144,9 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
 
       html = result
     } else if (this.markdownType === 'text') {
-      html = await this.markdownService.textMarkdownToHTML(text)
+      html = await this.markdownService.textMarkdownToHTML({ markdown: text })
     } else {
-      html = await this.markdownService.enhancedMarkdownToHTML(text)
+      html = await this.markdownService.enhancedMarkdownToHTML({ markdown: text })
     }
 
     if (this.markdownVideo) {
diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts
index 81f076db6..628affb56 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -1,4 +1,3 @@
-
 import { InputMaskModule } from 'primeng/inputmask'
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
@@ -7,6 +6,7 @@ import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { AdvancedInputFilterComponent } from './advanced-input-filter.component'
 import { DynamicFormFieldComponent } from './dynamic-form-field.component'
+import { FormReactiveService } from './form-reactive.service'
 import { FormValidatorService } from './form-validator.service'
 import { InputSwitchComponent } from './input-switch.component'
 import { InputTextComponent } from './input-text.component'
@@ -96,7 +96,8 @@ import { TimestampInputComponent } from './timestamp-input.component'
   ],
 
   providers: [
-    FormValidatorService
+    FormValidatorService,
+    FormReactiveService
   ]
 })
 export class SharedFormModule { }
diff --git a/client/src/app/shared/shared-instance/instance.service.ts b/client/src/app/shared/shared-instance/instance.service.ts
index 0241f56ef..89f47db24 100644
--- a/client/src/app/shared/shared-instance/instance.service.ts
+++ b/client/src/app/shared/shared-instance/instance.service.ts
@@ -51,7 +51,7 @@ export class InstanceService {
     }
 
     for (const key of Object.keys(html)) {
-      html[key] = await this.markdownService.textMarkdownToHTML(about.instance[key])
+      html[key] = await this.markdownService.textMarkdownToHTML({ markdown: about.instance[key] })
     }
 
     return html
diff --git a/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
index e4b74f3ad..93b3a93d6 100644
--- a/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
+++ b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
@@ -27,13 +27,16 @@ export class AuthInterceptor implements HttpInterceptor {
                .pipe(
                  catchError((err: HttpErrorResponse) => {
                    const error = err.error as PeerTubeProblemDocument
+                   const isOTPMissingError = this.authService.isOTPMissingError(err)
 
-                   if (err.status === HttpStatusCode.UNAUTHORIZED_401 && error && error.code === OAuth2ErrorCode.INVALID_TOKEN) {
-                     return this.handleTokenExpired(req, next)
-                   }
+                   if (!isOTPMissingError) {
+                     if (err.status === HttpStatusCode.UNAUTHORIZED_401 && error && error.code === OAuth2ErrorCode.INVALID_TOKEN) {
+                       return this.handleTokenExpired(req, next)
+                     }
 
-                   if (err.status === HttpStatusCode.UNAUTHORIZED_401) {
-                     return this.handleNotAuthenticated(err)
+                     if (err.status === HttpStatusCode.UNAUTHORIZED_401) {
+                       return this.handleNotAuthenticated(err)
+                     }
                    }
 
                    return observableThrowError(() => err)
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index 37cf63fcd..474baafd7 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -26,7 +26,7 @@
 
           <a
             *ngIf="action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
-            class="dropdown-item"  [routerLink]="action.linkBuilder(entry)" [title]="action.title || ''"
+            class="dropdown-item"  [routerLink]="action.linkBuilder(entry)" [queryParams]="getQueryParams(action, entry)" [title]="action.title || ''"
           >
             <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
           </a>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
index 749773f8a..e39fbd66d 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { Params } from '@angular/router'
 import { GlobalIconName } from '@app/shared/shared-icons'
 
 export type DropdownAction<T> = {
@@ -7,7 +8,10 @@ export type DropdownAction<T> = {
   description?: string
   title?: string
   handler?: (a: T) => any
+
   linkBuilder?: (a: T) => (string | number)[]
+  queryParamsBuilder?: (a: T) => Params
+
   isDisplayed?: (a: T) => boolean
 
   class?: string[]
@@ -21,7 +25,8 @@ export type DropdownDirection = 'horizontal' | 'vertical'
 @Component({
   selector: 'my-action-dropdown',
   styleUrls: [ './action-dropdown.component.scss' ],
-  templateUrl: './action-dropdown.component.html'
+  templateUrl: './action-dropdown.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 
 export class ActionDropdownComponent<T> {
@@ -44,6 +49,12 @@ export class ActionDropdownComponent<T> {
     return [ this.actions as DropdownAction<T>[] ]
   }
 
+  getQueryParams (action: DropdownAction<T>, entry: T) {
+    if (action.queryParamsBuilder) return action.queryParamsBuilder(entry)
+
+    return {}
+  }
+
   areActionsDisplayed (actions: Array<DropdownAction<T> | DropdownAction<T>[]>, entry: T): boolean {
     return actions.some(a => {
       if (Array.isArray(a)) return this.areActionsDisplayed(a, entry)
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index 10d67831f..1761938ee 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -1,10 +1,11 @@
-import { Component, Input, OnChanges } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core'
 import { GlobalIconName } from '@app/shared/shared-icons'
 
 @Component({
   selector: 'my-button',
   styleUrls: [ './button.component.scss' ],
-  templateUrl: './button.component.html'
+  templateUrl: './button.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 
 export class ButtonComponent implements OnChanges {
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 04b223cc5..c1523bc50 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -44,7 +44,15 @@ import {
 import { PluginPlaceholderComponent, PluginSelectorDirective } from './plugins'
 import { ActorRedirectGuard } from './router'
 import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
-import { EmbedComponent, RedundancyService, VideoImportService, VideoOwnershipService, VideoResolver, VideoService } from './video'
+import {
+  EmbedComponent,
+  RedundancyService,
+  VideoFileTokenService,
+  VideoImportService,
+  VideoOwnershipService,
+  VideoResolver,
+  VideoService
+} from './video'
 import { VideoCaptionService } from './video-caption'
 import { VideoChannelService } from './video-channel'
 
@@ -185,6 +193,7 @@ import { VideoChannelService } from './video-channel'
     VideoImportService,
     VideoOwnershipService,
     VideoService,
+    VideoFileTokenService,
     VideoResolver,
 
     VideoCaptionService,
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
index 5e3985526..08811afec 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
@@ -2,7 +2,7 @@ import { Observable, ReplaySubject } from 'rxjs'
 import { catchError, map, tap } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { ComponentPaginationLight, RestExtractor, RestService } from '@app/core'
+import { ComponentPaginationLight, RestExtractor, RestService, ServerService } from '@app/core'
 import {
   ActorImage,
   ResultList,
@@ -25,7 +25,8 @@ export class VideoChannelService {
   constructor (
     private authHttp: HttpClient,
     private restService: RestService,
-    private restExtractor: RestExtractor
+    private restExtractor: RestExtractor,
+    private serverService: ServerService
   ) { }
 
   static extractVideoChannels (result: ResultList<VideoChannelServer>) {
@@ -56,9 +57,11 @@ export class VideoChannelService {
   }): Observable<ResultList<VideoChannel>> {
     const { account, componentPagination, withStats = false, sort, search } = options
 
+    const defaultCount = this.serverService.getHTMLConfig().videoChannels.maxPerUser
+
     const pagination = componentPagination
       ? this.restService.componentToRestPagination(componentPagination)
-      : { start: 0, count: 20 }
+      : { start: 0, count: defaultCount }
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
diff --git a/client/src/app/shared/shared-main/video/index.ts b/client/src/app/shared/shared-main/video/index.ts
index 361601456..a2e47883e 100644
--- a/client/src/app/shared/shared-main/video/index.ts
+++ b/client/src/app/shared/shared-main/video/index.ts
@@ -2,6 +2,7 @@ export * from './embed.component'
 export * from './redundancy.service'
 export * from './video-details.model'
 export * from './video-edit.model'
+export * from './video-file-token.service'
 export * from './video-import.service'
 export * from './video-ownership.service'
 export * from './video.model'
diff --git a/client/src/app/shared/shared-main/video/video-file-token.service.ts b/client/src/app/shared/shared-main/video/video-file-token.service.ts
new file mode 100644
index 000000000..791607249
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/video-file-token.service.ts
@@ -0,0 +1,33 @@
+import { catchError, map, of, tap } from 'rxjs'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor } from '@app/core'
+import { VideoToken } from '@shared/models'
+import { VideoService } from './video.service'
+
+@Injectable()
+export class VideoFileTokenService {
+
+  private readonly store = new Map<string, { token: string, expires: Date }>()
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor
+  ) {}
+
+  getVideoFileToken (videoUUID: string) {
+    const existing = this.store.get(videoUUID)
+    if (existing) return of(existing)
+
+    return this.createVideoFileToken(videoUUID)
+      .pipe(tap(result => this.store.set(videoUUID, { token: result.token, expires: new Date(result.expires) })))
+  }
+
+  private createVideoFileToken (videoUUID: string) {
+    return this.authHttp.post<VideoToken>(`${VideoService.BASE_VIDEO_URL}/${videoUUID}/token`, {})
+      .pipe(
+        map(({ files }) => files),
+        catchError(err => this.restExtractor.handleError(err))
+      )
+  }
+}
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
index c9c6b979c..6fdffb394 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -34,6 +34,7 @@ export class Video implements VideoServerModel {
   language: VideoConstant<string>
   privacy: VideoConstant<VideoPrivacy>
 
+  truncatedDescription: string
   description: string
 
   duration: number
@@ -134,6 +135,8 @@ export class Video implements VideoServerModel {
     this.privacy = hash.privacy
     this.waitTranscoding = hash.waitTranscoding
     this.state = hash.state
+
+    this.truncatedDescription = hash.truncatedDescription
     this.description = hash.description
 
     this.isLive = hash.isLive
diff --git a/client/src/app/shared/shared-moderation/batch-domains-modal.component.ts b/client/src/app/shared/shared-moderation/batch-domains-modal.component.ts
index 20be728f6..ec2fea528 100644
--- a/client/src/app/shared/shared-moderation/batch-domains-modal.component.ts
+++ b/client/src/app/shared/shared-moderation/batch-domains-modal.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { splitAndGetNotEmpty, UNIQUE_HOSTS_VALIDATOR } from '../form-validators/host-validators'
@@ -18,7 +18,7 @@ export class BatchDomainsModalComponent extends FormReactive implements OnInit {
   private openedModal: NgbModalRef
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private modalService: NgbModal
   ) {
     super()
diff --git a/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts
index 78c9b3382..d587a9709 100644
--- a/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts
+++ b/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts
@@ -2,7 +2,7 @@ import { mapValues, pickBy } from 'lodash-es'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
 import { ABUSE_REASON_VALIDATOR } from '@app/shared/form-validators/abuse-validators'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { Account } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@@ -26,7 +26,7 @@ export class AccountReportComponent extends FormReactive implements OnInit {
   private openedModal: NgbModalRef
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private modalService: NgbModal,
     private abuseService: AbuseService,
     private notifier: Notifier
diff --git a/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts
index 7c0907ce4..e35d70c8f 100644
--- a/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts
+++ b/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts
@@ -2,7 +2,7 @@ import { mapValues, pickBy } from 'lodash-es'
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
 import { ABUSE_REASON_VALIDATOR } from '@app/shared/form-validators/abuse-validators'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { VideoComment } from '@app/shared/shared-video-comment'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@@ -27,7 +27,7 @@ export class CommentReportComponent extends FormReactive implements OnInit {
   private openedModal: NgbModalRef
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private modalService: NgbModal,
     private abuseService: AbuseService,
     private notifier: Notifier
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
index 38dd92910..16be8e0a1 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
@@ -3,7 +3,7 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { DomSanitizer } from '@angular/platform-browser'
 import { Notifier } from '@app/core'
 import { ABUSE_REASON_VALIDATOR } from '@app/shared/form-validators/abuse-validators'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { abusePredefinedReasonsMap } from '@shared/core-utils/abuse'
@@ -27,7 +27,7 @@ export class VideoReportComponent extends FormReactive implements OnInit {
   private openedModal: NgbModalRef
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private modalService: NgbModal,
     private abuseService: AbuseService,
     private notifier: Notifier,
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
index 617408f2a..27dcf043a 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
@@ -2,7 +2,7 @@ import { forkJoin } from 'rxjs'
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
 import { prepareIcu } from '@app/helpers'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { User } from '@shared/models'
@@ -25,7 +25,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
   modalMessage = ''
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private modalService: NgbModal,
     private notifier: Notifier,
     private userAdminService: UserAdminService,
diff --git a/client/src/app/shared/shared-moderation/video-block.component.ts b/client/src/app/shared/shared-moderation/video-block.component.ts
index f8b22a3f6..3ff53443a 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.ts
+++ b/client/src/app/shared/shared-moderation/video-block.component.ts
@@ -1,7 +1,7 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
 import { prepareIcu } from '@app/helpers'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { Video } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@@ -25,7 +25,7 @@ export class VideoBlockComponent extends FormReactive implements OnInit {
   private openedModal: NgbModalRef
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private modalService: NgbModal,
     private videoBlocklistService: VideoBlockService,
     private notifier: Notifier
diff --git a/client/src/app/shared/shared-search/find-in-bulk.service.ts b/client/src/app/shared/shared-search/find-in-bulk.service.ts
index d2f8c3213..d6ee04379 100644
--- a/client/src/app/shared/shared-search/find-in-bulk.service.ts
+++ b/client/src/app/shared/shared-search/find-in-bulk.service.ts
@@ -80,13 +80,18 @@ export class FindInBulkService {
           map(result => result.response.data),
           map(data => data.find(finder))
         )
-        .subscribe(result => {
-          if (!result) {
-            obs.error(new Error($localize`Element ${param} not found`))
-          } else {
+        .subscribe({
+          next: result => {
+            if (!result) {
+              obs.error(new Error($localize`Element ${param} not found`))
+              return
+            }
+
             obs.next(result)
             obs.complete()
-          }
+          },
+
+          error: err => obs.error(err)
         })
 
       observableObject.notifier.next(param)
diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.ts b/client/src/app/shared/shared-support-modal/support-modal.component.ts
index 08e997f7b..f330228e1 100644
--- a/client/src/app/shared/shared-support-modal/support-modal.component.ts
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.ts
@@ -27,7 +27,7 @@ export class SupportModalComponent {
 
     const support = this.video?.support || this.videoChannel.support
 
-    this.markdownService.enhancedMarkdownToHTML(support)
+    this.markdownService.enhancedMarkdownToHTML({ markdown: support })
       .then(r => {
         this.htmlSupport = r
       })
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
index 13e2e5424..c2c30d38b 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
@@ -1,7 +1,7 @@
 import { Subject, Subscription } from 'rxjs'
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 import { AuthService, Notifier, ServerService, ThemeService, UserService } from '@app/core'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { HTMLServerConfig, User, UserUpdateMe } from '@shared/models'
 import { SelectOptionsItem } from 'src/types'
 
@@ -22,7 +22,7 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
   private serverConfig: HTMLServerConfig
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private authService: AuthService,
     private notifier: Notifier,
     private userService: UserService,
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
index 7d6b69469..af0870f12 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
@@ -3,7 +3,7 @@ import { Subject, Subscription } from 'rxjs'
 import { first } from 'rxjs/operators'
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 import { AuthService, Notifier, ServerService, User, UserService } from '@app/core'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { UserUpdateMe } from '@shared/models'
 import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
 
@@ -22,7 +22,7 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
   formValuesWatcher: Subscription
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private authService: AuthService,
     private notifier: Notifier,
     private userService: UserService,
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
index 7bcfdd8aa..61bcd5345 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { Notifier } from '@app/core'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { logger } from '@root-helpers/logger'
 import { USER_HANDLE_VALIDATOR } from '../form-validators/user-validators'
 
@@ -15,7 +15,7 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit {
   @Input() showHelp = false
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private notifier: Notifier
   ) {
     super()
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
index 0e09c2697..341b83a04 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
@@ -37,7 +37,7 @@
     class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right bottom-left bottom auto"
     role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label
   >
-    <button class="btn dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
+    <button class="btn dropdown-toggle-split last-in-group" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
       <ng-container
         *ngIf="!isUserLoggedIn(); then userLoggedOut">
       </ng-container>
diff --git a/client/src/app/shared/shared-users/index.ts b/client/src/app/shared/shared-users/index.ts
index 8f90f2515..20e60486d 100644
--- a/client/src/app/shared/shared-users/index.ts
+++ b/client/src/app/shared/shared-users/index.ts
@@ -1,4 +1,5 @@
 export * from './user-admin.service'
 export * from './user-signup.service'
+export * from './two-factor.service'
 
 export * from './shared-users.module'
diff --git a/client/src/app/shared/shared-users/shared-users.module.ts b/client/src/app/shared/shared-users/shared-users.module.ts
index 2a1dadf20..5a1675dc9 100644
--- a/client/src/app/shared/shared-users/shared-users.module.ts
+++ b/client/src/app/shared/shared-users/shared-users.module.ts
@@ -1,6 +1,7 @@
 
 import { NgModule } from '@angular/core'
 import { SharedMainModule } from '../shared-main/shared-main.module'
+import { TwoFactorService } from './two-factor.service'
 import { UserAdminService } from './user-admin.service'
 import { UserSignupService } from './user-signup.service'
 
@@ -15,7 +16,8 @@ import { UserSignupService } from './user-signup.service'
 
   providers: [
     UserSignupService,
-    UserAdminService
+    UserAdminService,
+    TwoFactorService
   ]
 })
 export class SharedUsersModule { }
diff --git a/client/src/app/shared/shared-users/two-factor.service.ts b/client/src/app/shared/shared-users/two-factor.service.ts
new file mode 100644
index 000000000..9ff916f15
--- /dev/null
+++ b/client/src/app/shared/shared-users/two-factor.service.ts
@@ -0,0 +1,52 @@
+import { catchError } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor, UserService } from '@app/core'
+import { TwoFactorEnableResult } from '@shared/models'
+
+@Injectable()
+export class TwoFactorService {
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor
+  ) { }
+
+  // ---------------------------------------------------------------------------
+
+  requestTwoFactor (options: {
+    userId: number
+    currentPassword: string
+  }) {
+    const { userId, currentPassword } = options
+
+    const url = UserService.BASE_USERS_URL + userId + '/two-factor/request'
+
+    return this.authHttp.post<TwoFactorEnableResult>(url, { currentPassword })
+    .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  confirmTwoFactorRequest (options: {
+    userId: number
+    requestToken: string
+    otpToken: string
+  }) {
+    const { userId, requestToken, otpToken } = options
+
+    const url = UserService.BASE_USERS_URL + userId + '/two-factor/confirm-request'
+
+    return this.authHttp.post(url, { requestToken, otpToken })
+    .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  disableTwoFactor (options: {
+    userId: number
+    currentPassword?: string
+  }) {
+    const { userId, currentPassword } = options
+
+    const url = UserService.BASE_USERS_URL + userId + '/two-factor/disable'
+
+    return this.authHttp.post(url, { currentPassword })
+      .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+}
diff --git a/client/src/app/shared/shared-users/user-admin.service.ts b/client/src/app/shared/shared-users/user-admin.service.ts
index 4128358dc..0b04023a3 100644
--- a/client/src/app/shared/shared-users/user-admin.service.ts
+++ b/client/src/app/shared/shared-users/user-admin.service.ts
@@ -125,7 +125,10 @@ export class UserAdminService {
     }
 
     return Object.assign(user, {
-      roleLabel: roleLabels[user.role],
+      role: {
+        id: user.role.id,
+        label: roleLabels[user.role.id]
+      },
       videoQuota,
       videoQuotaUsed,
       rawVideoQuota: user.videoQuota,
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index cf30c1ce1..8e61bdbb3 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -32,7 +32,7 @@
       <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
     </div>
 
-    <div class="journal">
+    <div class="journal" *ngIf="latestLiveSessions.length !== 0">
       <label i18n>Latest live sessions</label>
 
       <div class="journal-session" *ngFor="let session of latestLiveSessions">
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index 1c7458b4b..1f622933d 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -48,10 +48,7 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-text
-                *ngIf="!isConfidentialVideo()"
-                [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getLink()"
-              ></my-input-text>
+              <my-input-text [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getLink()"></my-input-text>
             </div>
           </ng-template>
         </ng-container>
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.ts b/client/src/app/shared/shared-video-miniature/video-download.component.ts
index 47482caaa..667cb107f 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.ts
@@ -2,11 +2,12 @@ import { mapValues, pick } from 'lodash-es'
 import { firstValueFrom } from 'rxjs'
 import { tap } from 'rxjs/operators'
 import { Component, ElementRef, Inject, LOCALE_ID, ViewChild } from '@angular/core'
-import { AuthService, HooksService, Notifier } from '@app/core'
+import { HooksService } from '@app/core'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { logger } from '@root-helpers/logger'
+import { videoRequiresAuth } from '@root-helpers/video'
 import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
-import { BytesPipe, NumberFormatterPipe, VideoDetails, VideoService } from '../shared-main'
+import { BytesPipe, NumberFormatterPipe, VideoDetails, VideoFileTokenService, VideoService } from '../shared-main'
 
 type DownloadType = 'video' | 'subtitles'
 type FileMetadata = { [key: string]: { label: string, value: string }}
@@ -32,6 +33,8 @@ export class VideoDownloadComponent {
 
   type: DownloadType = 'video'
 
+  videoFileToken: string
+
   private activeModal: NgbModalRef
 
   private bytesPipe: BytesPipe
@@ -42,10 +45,9 @@ export class VideoDownloadComponent {
 
   constructor (
     @Inject(LOCALE_ID) private localeId: string,
-    private notifier: Notifier,
     private modalService: NgbModal,
     private videoService: VideoService,
-    private auth: AuthService,
+    private videoFileTokenService: VideoFileTokenService,
     private hooks: HooksService
   ) {
     this.bytesPipe = new BytesPipe()
@@ -71,6 +73,8 @@ export class VideoDownloadComponent {
   }
 
   show (video: VideoDetails, videoCaptions?: VideoCaption[]) {
+    this.videoFileToken = undefined
+
     this.video = video
     this.videoCaptions = videoCaptions
 
@@ -84,6 +88,11 @@ export class VideoDownloadComponent {
       this.subtitleLanguageId = this.videoCaptions[0].language.id
     }
 
+    if (videoRequiresAuth(this.video)) {
+      this.videoFileTokenService.getVideoFileToken(this.video.uuid)
+        .subscribe(({ token }) => this.videoFileToken = token)
+    }
+
     this.activeModal.shown.subscribe(() => {
       this.hooks.runAction('action:modal.video-download.shown', 'common')
     })
@@ -155,7 +164,7 @@ export class VideoDownloadComponent {
     if (!file) return ''
 
     const suffix = this.isConfidentialVideo()
-      ? '?access_token=' + this.auth.getAccessToken()
+      ? '?videoFileToken=' + this.videoFileToken
       : ''
 
     switch (this.downloadType) {
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
index 9ddfd7dda..1e92e1952 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
@@ -47,6 +47,7 @@
       <ng-option i18n value="-publishedAt">Sort by <strong>"Recently Added"</strong></ng-option>
       <ng-option i18n value="-originallyPublishedAt">Sort by <strong>"Original Publication Date"</strong></ng-option>
 
+      <ng-option i18n value="name">Sort by <strong>"Name"</strong></ng-option>
       <ng-option i18n *ngIf="isTrendingSortEnabled('most-viewed')" value="-trending">Sort by <strong>"Recent Views"</strong></ng-option>
       <ng-option i18n *ngIf="isTrendingSortEnabled('hot')" value="-hot">Sort by <strong>"Hot"</strong></ng-option>
       <ng-option i18n *ngIf="isTrendingSortEnabled('most-liked')" value="-likes">Sort by <strong>"Likes"</strong></ng-option>
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index e8d2ca1c4..6fdf24b2d 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -52,6 +52,12 @@
             <ng-container *ngIf="displayOptions.privacyText && displayOptions.state && getStateLabel(video)"> - </ng-container>
             <ng-container *ngIf="displayOptions.state">{{ getStateLabel(video) }}</ng-container>
           </div>
+
+          <div *ngIf="containedInPlaylists" class="video-contained-in-playlists">
+            <a *ngFor="let playlist of containedInPlaylists" class="chip rectangular bg-secondary text-light" [routerLink]="['/w/p/', playlist.playlistShortUUID]">
+              {{ playlist.playlistDisplayName }}
+            </a>
+          </div>
         </div>
       </div>
 
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index a397efdca..ba2adfc5a 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -4,6 +4,10 @@
 
 $more-button-width: 40px;
 
+.chip {
+  @include chip;
+}
+
 .video-miniature {
   font-size: 14px;
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index 534a78b3f..85c63c173 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -11,7 +11,7 @@ import {
   Output
 } from '@angular/core'
 import { AuthService, ScreenService, ServerService, User } from '@app/core'
-import { HTMLServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models'
+import { HTMLServerConfig, VideoExistInPlaylist, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models'
 import { LinkType } from '../../../types/link.type'
 import { ActorAvatarSize } from '../shared-actor-image/actor-avatar.component'
 import { Video } from '../shared-main'
@@ -21,13 +21,15 @@ import { VideoActionsDisplayType } from './video-actions-dropdown.component'
 export type MiniatureDisplayOptions = {
   date?: boolean
   views?: boolean
-  by?: boolean
   avatar?: boolean
   privacyLabel?: boolean
   privacyText?: boolean
   state?: boolean
   blacklistInfo?: boolean
   nsfw?: boolean
+
+  by?: boolean
+  forceChannelInBy?: boolean
 }
 @Component({
   selector: 'my-video-miniature',
@@ -38,6 +40,7 @@ export type MiniatureDisplayOptions = {
 export class VideoMiniatureComponent implements OnInit {
   @Input() user: User
   @Input() video: Video
+  @Input() containedInPlaylists: VideoExistInPlaylist[]
 
   @Input() displayOptions: MiniatureDisplayOptions = {
     date: true,
@@ -47,7 +50,8 @@ export class VideoMiniatureComponent implements OnInit {
     privacyLabel: false,
     privacyText: false,
     state: false,
-    blacklistInfo: false
+    blacklistInfo: false,
+    forceChannelInBy: false
   }
 
   @Input() displayVideoActions = true
@@ -267,6 +271,11 @@ export class VideoMiniatureComponent implements OnInit {
   }
 
   private setUpBy () {
+    if (this.displayOptions.forceChannelInBy) {
+      this.ownerDisplayType = 'videoChannel'
+      return
+    }
+
     const accountName = this.video.account.name
 
     // If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.html b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
index 6ea2661e4..6c6db4b96 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
@@ -12,6 +12,7 @@
     </div>
 
     <my-video-miniature
+      [containedInPlaylists]="videosContainedInPlaylists ? videosContainedInPlaylists[video.id] : undefined"
       [video]="video" [displayAsRow]="true" [displayOptions]="miniatureDisplayOptions"
       [displayVideoActions]="false" [user]="user"
     ></my-video-miniature>
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
index fa3c79bbb..460a0080e 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
@@ -2,7 +2,7 @@ import { Observable, Subject } from 'rxjs'
 import { AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef } from '@angular/core'
 import { ComponentPagination, Notifier, User } from '@app/core'
 import { logger } from '@root-helpers/logger'
-import { ResultList, VideoSortField } from '@shared/models'
+import { ResultList, VideosExistInPlaylists, VideoSortField } from '@shared/models'
 import { PeerTubeTemplateDirective, Video } from '../shared-main'
 import { MiniatureDisplayOptions } from './video-miniature.component'
 
@@ -14,6 +14,7 @@ export type SelectionType = { [ id: number ]: boolean }
   styleUrls: [ './videos-selection.component.scss' ]
 })
 export class VideosSelectionComponent implements AfterContentInit {
+  @Input() videosContainedInPlaylists: VideosExistInPlaylists
   @Input() user: User
   @Input() pagination: ComponentPagination
 
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
index e019fdd26..2fc39fc75 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
@@ -3,11 +3,11 @@ import { Subject, Subscription } from 'rxjs'
 import { debounceTime, filter } from 'rxjs/operators'
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'
 import { AuthService, DisableForReuseHook, Notifier } from '@app/core'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { secondsToTime } from '@shared/core-utils'
 import {
+  CachedVideoExistInPlaylist,
   Video,
-  VideoExistInPlaylist,
   VideoPlaylistCreate,
   VideoPlaylistElementCreate,
   VideoPlaylistElementUpdate,
@@ -59,7 +59,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   private pendingAddId: number
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private authService: AuthService,
     private notifier: Notifier,
     private videoPlaylistService: VideoPlaylistService,
@@ -330,7 +330,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
     }
   }
 
-  private rebuildPlaylists (existResult: VideoExistInPlaylist[]) {
+  private rebuildPlaylists (existResult: CachedVideoExistInPlaylist[]) {
     debugLogger('Got existing results for %d.', this.video.id, existResult)
 
     const oldPlaylists = this.videoPlaylists
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
index dd9fe0a5a..225c4eb64 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
@@ -32,7 +32,7 @@ export class VideoPlaylistMiniatureComponent implements OnInit {
   async ngOnInit () {
     this.buildPlaylistUrl()
     if (this.displayDescription) {
-      this.playlistDescription = await this.markdownService.textMarkdownToHTML(this.playlist.description)
+      this.playlistDescription = await this.markdownService.textMarkdownToHTML({ markdown: this.playlist.description })
     }
   }
 
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
index d71f8f72e..330a51f91 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
@@ -8,6 +8,8 @@ import { buildBulkObservable, objectToFormData } from '@app/helpers'
 import { Account, AccountService, VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { NGX_LOADING_BAR_IGNORED } from '@ngx-loading-bar/http-client'
 import {
+  CachedVideoExistInPlaylist,
+  CachedVideosExistInPlaylists,
   ResultList,
   VideoExistInPlaylist,
   VideoPlaylist as VideoPlaylistServerModel,
@@ -34,11 +36,11 @@ export class VideoPlaylistService {
 
   // Use a replay subject because we "next" a value before subscribing
   private videoExistsInPlaylistNotifier = new ReplaySubject<number>(1)
-  private videoExistsInPlaylistCacheSubject = new Subject<VideosExistInPlaylists>()
-  private readonly videoExistsInPlaylistObservable: Observable<VideosExistInPlaylists>
+  private videoExistsInPlaylistCacheSubject = new Subject<CachedVideosExistInPlaylists>()
+  private readonly videoExistsInPlaylistObservable: Observable<CachedVideosExistInPlaylists>
 
-  private videoExistsObservableCache: { [ id: number ]: Observable<VideoExistInPlaylist[]> } = {}
-  private videoExistsCache: { [ id: number ]: VideoExistInPlaylist[] } = {}
+  private videoExistsObservableCache: { [ id: number ]: Observable<CachedVideoExistInPlaylist[]> } = {}
+  private videoExistsCache: { [ id: number ]: CachedVideoExistInPlaylist[] } = {}
 
   private myAccountPlaylistCache: ResultList<CachedPlaylist> = undefined
   private myAccountPlaylistCacheRunning: Observable<ResultList<CachedPlaylist>>
@@ -346,7 +348,7 @@ export class VideoPlaylistService {
                )
   }
 
-  private doVideosExistInPlaylist (videoIds: number[]): Observable<VideosExistInPlaylists> {
+  doVideosExistInPlaylist (videoIds: number[]): Observable<VideosExistInPlaylists> {
     const url = VideoPlaylistService.MY_VIDEO_PLAYLIST_URL + 'videos-exist'
 
     let params = new HttpParams()