From fd8fb56c7683485d2113d5656ba06aa73b2f6ab2 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 11 Feb 2025 08:41:47 +0100
Subject: [PATCH] Fix error messages when updating the form

---
 .../+video-edit/video-update.component.ts     | 51 ++++++++--------
 .../dynamic-form-field.component.html         | 58 ++++++++++++-------
 .../shared-forms/form-validator.service.ts    | 11 ++--
 .../player/src/shared/stats/stats-card.ts     |  2 +-
 4 files changed, 69 insertions(+), 53 deletions(-)

diff --git a/client/src/app/+videos/+video-edit/video-update.component.ts b/client/src/app/+videos/+video-edit/video-update.component.ts
index 3bc1faeb5..0bccf0bcc 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@@ -1,35 +1,35 @@
+import { NgIf } from '@angular/common'
+import { HttpErrorResponse } from '@angular/common/http'
+import { Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, CanComponentDeactivate, ConfirmService, Notifier, ServerService, UserService } from '@app/core'
+import { buildHTTPErrorResponse, genericUploadErrorHandler } from '@app/helpers'
+import { FormReactive } from '@app/shared/shared-forms/form-reactive'
+import { FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
+import { VideoCaptionEdit } from '@app/shared/shared-main/video-caption/video-caption-edit.model'
+import { VideoCaptionService } from '@app/shared/shared-main/video-caption/video-caption.service'
+import { VideoChapterService } from '@app/shared/shared-main/video/video-chapter.service'
+import { VideoChaptersEdit } from '@app/shared/shared-main/video/video-chapters-edit.model'
+import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
+import { VideoEdit } from '@app/shared/shared-main/video/video-edit.model'
+import { Video } from '@app/shared/shared-main/video/video.model'
+import { VideoService } from '@app/shared/shared-main/video/video.service'
+import { LiveVideoService } from '@app/shared/shared-video-live/live-video.service'
+import { LoadingBarService } from '@ngx-loading-bar/core'
+import { simpleObjectsDeepEqual } from '@peertube/peertube-core-utils'
+import { HttpStatusCode, LiveVideo, LiveVideoUpdate, VideoPrivacy, VideoSource, VideoState } from '@peertube/peertube-models'
 import debug from 'debug'
 import { UploadState, UploadxService } from 'ngx-uploadx'
 import { of, Subject, Subscription } from 'rxjs'
 import { catchError, map, switchMap } from 'rxjs/operators'
 import { SelectChannelItem } from 'src/types/select-options-item.model'
-import { HttpErrorResponse } from '@angular/common/http'
-import { Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { ActivatedRoute, Router, RouterLink } from '@angular/router'
-import { AuthService, CanComponentDeactivate, ConfirmService, Notifier, ServerService, UserService } from '@app/core'
-import { buildHTTPErrorResponse, genericUploadErrorHandler } from '@app/helpers'
-import { FormReactive } from '@app/shared/shared-forms/form-reactive'
-import { FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
-import { LoadingBarService } from '@ngx-loading-bar/core'
-import { simpleObjectsDeepEqual } from '@peertube/peertube-core-utils'
-import { HttpStatusCode, LiveVideo, LiveVideoUpdate, VideoPrivacy, VideoSource, VideoState } from '@peertube/peertube-models'
-import { hydrateFormFromVideo } from './shared/video-edit-utils'
-import { VideoUploadService } from './shared/video-upload.service'
-import { VideoEditComponent } from './shared/video-edit.component'
-import { ButtonComponent } from '../../shared/shared-main/buttons/button.component'
 import { ReactiveFileComponent } from '../../shared/shared-forms/reactive-file.component'
-import { NgIf } from '@angular/common'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { ButtonComponent } from '../../shared/shared-main/buttons/button.component'
 import { UploadProgressComponent } from '../../shared/standalone-upload/upload-progress.component'
-import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
-import { VideoEdit } from '@app/shared/shared-main/video/video-edit.model'
-import { VideoCaptionEdit } from '@app/shared/shared-main/video-caption/video-caption-edit.model'
-import { VideoCaptionService } from '@app/shared/shared-main/video-caption/video-caption.service'
-import { VideoChapterService } from '@app/shared/shared-main/video/video-chapter.service'
-import { VideoChaptersEdit } from '@app/shared/shared-main/video/video-chapters-edit.model'
-import { Video } from '@app/shared/shared-main/video/video.model'
-import { VideoService } from '@app/shared/shared-main/video/video.service'
-import { LiveVideoService } from '@app/shared/shared-video-live/live-video.service'
+import { hydrateFormFromVideo } from './shared/video-edit-utils'
+import { VideoEditComponent } from './shared/video-edit.component'
+import { VideoUploadService } from './shared/video-upload.service'
 
 const debugLogger = debug('peertube:video-update')
 
@@ -38,7 +38,6 @@ const debugLogger = debug('peertube:video-update')
   styleUrls: [ './shared/video-edit.component.scss' ],
   templateUrl: './video-update.component.html',
   imports: [
-    RouterLink,
     UploadProgressComponent,
     FormsModule,
     ReactiveFormsModule,
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.html b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
index 5b10bf335..e5ac7e6fe 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.html
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
@@ -10,35 +10,51 @@
 
   <div *ngIf="setting.descriptionHTML" class="label-small-info" [innerHTML]="setting.descriptionHTML"></div>
 
-  <input *ngIf="setting.type === 'input'" type="text" [id]="setting.name" [formControlName]="setting.name" />
+  @switch (setting.type) {
+    @case ('input') {
+      <input type="text" [id]="setting.name" [formControlName]="setting.name" />
+    }
 
-  <div *ngIf="setting.type === 'select'" class="peertube-select-container">
-    <select  [id]="setting.name" [formControlName]="setting.name" class="form-control">
-      <option *ngFor="let option of setting.options" [value]="option.value">{{ option.label }}</option>
-    </select>
-  </div>
+    @case ('select') {
+      <div class="peertube-select-container">
+        <select  [id]="setting.name" [formControlName]="setting.name" class="form-control">
+          <option *ngFor="let option of setting.options" [value]="option.value">{{ option.label }}</option>
+        </select>
+      </div>
+    }
 
-  <my-input-text *ngIf="setting.type === 'input-password'" [formError]="formErrors['settings.name']" [formControlName]="setting.name" [inputId]="setting.name"></my-input-text>
+    @case ('input-password') {
+      <my-input-text [formError]="formErrors['settings.name']" [formControlName]="setting.name" [inputId]="setting.name"></my-input-text>
+    }
 
-  <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
+    @case ('input-textarea') {
+      <textarea type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
 
-  <my-help *ngIf="setting.type === 'markdown-text'" helpType="markdownText"></my-help>
+    }
 
-  <my-help *ngIf="setting.type === 'markdown-enhanced'" helpType="markdownEnhanced"></my-help>
+    @case ('markdown-text') {
+      <my-help helpType="markdownText"></my-help>
 
-  <my-markdown-textarea
-    *ngIf="setting.type === 'markdown-text'"
-    markdownType="text" [inputId]="setting.name" [formControlName]="setting.name"
-    [formError]="formErrors['settings.name']"
-  ></my-markdown-textarea>
+      <my-markdown-textarea
+        markdownType="text" [inputId]="setting.name" [formControlName]="setting.name"
+        [formError]="formErrors['settings.name']"
+      ></my-markdown-textarea>
+    }
 
-  <my-markdown-textarea
-    *ngIf="setting.type === 'markdown-enhanced'"
-    markdownType="enhanced" [inputId]="setting.name" [formControlName]="setting.name"
-    [formError]="formErrors['settings.name']"
-  ></my-markdown-textarea>
+    @case ('markdown-enhanced') {
+      <my-help helpType="markdownEnhanced"></my-help>
 
-  <div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div>
+      <my-markdown-textarea
+        markdownType="enhanced" [inputId]="setting.name" [formControlName]="setting.name"
+        [formError]="formErrors['settings.name']"
+      ></my-markdown-textarea>
+
+    }
+
+    @case ('html') {
+      <div [innerHTML]="setting.html"></div>
+    }
+  }
 
   <div *ngIf="hasDedicatedFormError() && formErrors[setting.name]" class="form-error" role="alert">
     {{ formErrors[setting.name] }}
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 d7267b258..f83ac7454 100644
--- a/client/src/app/shared/shared-forms/form-validator.service.ts
+++ b/client/src/app/shared/shared-forms/form-validator.service.ts
@@ -49,16 +49,15 @@ export class FormValidatorService {
     defaultValues: BuildFormDefaultValues = {}
   ) {
     for (const name of objectKeysTyped(formToBuild)) {
-      if (typeof formErrors[name] === 'string') {
-        formErrors[name] = ''
-      }
-
       const field = formToBuild[name]
+
       if (this.isRecursiveField(field)) {
+        formErrors[name] = {}
+
         this.updateFormGroup(
           // FIXME: typings
           (form as any)[name],
-          formErrors[name] as FormReactiveErrors,
+          formErrors[name],
           validationMessages[name] as FormReactiveValidationMessages,
           formToBuild[name] as BuildFormArgument,
           defaultValues[name] as BuildFormDefaultValues
@@ -66,6 +65,8 @@ export class FormValidatorService {
         continue
       }
 
+      formErrors[name] = ''
+
       if (field?.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string }
 
       const defaultValue = defaultValues[name] ?? ''
diff --git a/client/src/standalone/player/src/shared/stats/stats-card.ts b/client/src/standalone/player/src/shared/stats/stats-card.ts
index 01971c7d0..a40bc37de 100644
--- a/client/src/standalone/player/src/shared/stats/stats-card.ts
+++ b/client/src/standalone/player/src/shared/stats/stats-card.ts
@@ -317,7 +317,7 @@ class StatsCard extends Component {
 
     const p2pEnabled = this.options_.p2pEnabled && this.mode === 'p2p-media-loader'
 
-    this.setInfoValue(this.playerMode, this.mode)
+    this.setInfoValue(this.playerMode, this.mode === 'p2p-media-loader' ? 'P2P Media Loader (v2)' : 'Web Video')
     this.setInfoValue(this.p2p, player.localize(p2pEnabled ? 'enabled' : 'disabled'))
     this.setInfoValue(this.uuid, this.options_.videoUUID)