Handle input error in custom input text

12 files changed, 49 insertions, 57 deletions

diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
index bfa414164..e484ab8b0 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
@@ -123,13 +123,7 @@
             </ng-template>
           </my-help>
 
-          <my-input-text
-            formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
-          ></my-input-text>
-
-          <div *ngIf="formErrors.password" class="form-error">
-            {{ formErrors.password }}
-          </div>
+          <my-input-text formControlName="password" inputId="password" [formError]="formErrors['password']" autocomplete="new-password"></my-input-text>
         </div>
 
         <div class="form-group">
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.html b/client/src/app/+admin/overview/users/user-edit/user-password.component.html
index 35f36e465..13f57024b 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-password.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.html
@@ -1,4 +1,5 @@
 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+
   <div class="input-group">
     <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
       formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 834ea6e51..aac2611c6 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -58,12 +58,10 @@
           <div class="form-group">
             <label i18n for="password">Password</label>
 
-            <my-input-text formControlName="password" inputId="password"
-                                    i18n-placeholder placeholder="Password"
-                                    [ngClass]="{ 'input-error': formErrors['password'] }"
-                                    autocomplete="current-password" [tabindex]="2"></my-input-text>
-
-            <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
+            <my-input-text
+              formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
+              [formError]="formErrors['password']" autocomplete="current-password" [tabindex]="2"
+            ></my-input-text>
           </div>
 
           <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
index c9f9d8f55..d85be846b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -25,14 +25,10 @@
   </div>
 
   <div class="form-group">
-    <my-input-text formControlName="password"
-                            id="password"
-                            i18n-placeholder placeholder="Current password"
-                            [ngClass]="{ 'input-error': formErrors['password'] }"
-                            autocomplete="current-password"></my-input-text>
-    <div *ngIf="formErrors['password']" class="form-error">
-      {{ formErrors['password'] }}
-    </div>
+    <my-input-text
+      formControlName="password" id="password" i18n-placeholder placeholder="Current password"
+      [formError]="formErrors['password']" autocomplete="current-password"
+    ></my-input-text>
   </div>
 
   <input type="submit" i18n-value value="Change email" [disabled]="!form.valid">
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index f1deb4273..f961d3294 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -3,32 +3,20 @@
 <form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
 
   <label i18n for="current-password">Change password</label>
-  <my-input-text formControlName="current-password"
-                          inputId="current-password"
-                          i18n-placeholder placeholder="Current password"
-                          [ngClass]="{ 'input-error': formErrors['current-password'] }"
-                          autocomplete="current-password"></my-input-text>
-  <div *ngIf="formErrors['current-password']" class="form-error">
-    {{ formErrors['current-password'] }}
-  </div>
+  <my-input-text
+    formControlName="current-password" inputId="current-password" i18n-placeholder placeholder="Current password"
+    [formError]="formErrors['current-password']" autocomplete="current-password"
+  ></my-input-text>
 
-  <my-input-text formControlName="new-password"
-                          inputId="new-password"
-                          i18n-placeholder placeholder="New password"
-                          [ngClass]="{ 'input-error': formErrors['new-password'] }"
-                          autocomplete="new-password"></my-input-text>
-  <div *ngIf="formErrors['new-password']" class="form-error">
-    {{ formErrors['new-password'] }}
-  </div>
+  <my-input-text
+    formControlName="new-password" inputId="new-password" i18n-placeholder placeholder="New password"
+    [formError]="formErrors['new-password']" autocomplete="new-password"
+  ></my-input-text>
 
-  <my-input-text formControlName="new-confirmed-password"
-                          inputId="new-confirmed-password"
-                          i18n-placeholder placeholder="Confirm new password"
-                          [ngClass]="{ 'input-error': formErrors['new-confirmed-password'] }"
-                          autocomplete="new-password"></my-input-text>
-  <div *ngIf="formErrors['new-confirmed-password']" class="form-error">
-    {{ formErrors['new-confirmed-password'] }}
-  </div>
+  <my-input-text
+    formControlName="new-confirmed-password" inputId="new-confirmed-password" i18n-placeholder placeholder="Confirm new password"
+    [formError]="formErrors['new-confirmed-password']" autocomplete="new-password"
+  ></my-input-text>
 
   <input type="submit" i18n-value value="Change password" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+reset-password/reset-password.component.html b/client/src/app/+reset-password/reset-password.component.html
index 130873593..fa53e7526 100644
--- a/client/src/app/+reset-password/reset-password.component.html
+++ b/client/src/app/+reset-password/reset-password.component.html
@@ -7,10 +7,8 @@
 
       <my-input-text
         formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
-        [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
+        [formError]="formErrors['password']" autocomplete="new-password"
       ></my-input-text>
-
-      <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
     </div>
 
     <div class="form-group">
@@ -18,10 +16,8 @@
 
       <my-input-text
         formControlName="password-confirm" inputId="password-confirm" i18n-placeholder placeholder="Confirmed password"
-        [ngClass]="{ 'input-error': formErrors['password-confirm'] }" autocomplete="new-password"
+        [formError]="formErrors['password-confirm']" autocomplete="new-password"
       ></my-input-text>
-
-      <div *ngIf="formErrors['password-confirm']" class="form-error">{{ formErrors['password-confirm'] }}</div>
     </div>
 
     <input
diff --git a/client/src/app/+signup/+register/steps/register-step-user.component.html b/client/src/app/+signup/+register/steps/register-step-user.component.html
index bffcf0346..3e0d35006 100644
--- a/client/src/app/+signup/+register/steps/register-step-user.component.html
+++ b/client/src/app/+signup/+register/steps/register-step-user.component.html
@@ -64,10 +64,8 @@
 
       <my-input-text
         formControlName="password" inputId="password"
-        [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
+        [formError]="formErrors['password']" autocomplete="new-password"
       ></my-input-text>
-
-      <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
     </div>
   </div>
 </form>
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 61f9ae8ff..2dd6cf4ad 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
@@ -18,7 +18,7 @@
     </select>
   </div>
 
-  <my-input-text *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-text>
+  <my-input-text *ngIf="setting.type === 'input-password'" [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>
 
@@ -40,7 +40,7 @@
 
   <div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div>
 
-  <div *ngIf="setting.type !== 'markdown-text' && setting.type !== 'markdown-enhanced' && formErrors[setting.name]" class="form-error">
+  <div *ngIf="hasDedicatedFormError() && formErrors[setting.name]" class="form-error">
     {{ formErrors[setting.name] }}
   </div>
 
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.ts b/client/src/app/shared/shared-forms/dynamic-form-field.component.ts
index b63890797..e1a1f8034 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.ts
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.ts
@@ -12,4 +12,15 @@ export class DynamicFormFieldComponent {
   @Input() form: FormGroup
   @Input() formErrors: any
   @Input() setting: RegisterClientFormFieldOptions
+
+  hasDedicatedFormError () {
+    const dedicated = new Set<RegisterClientFormFieldOptions['type']>([
+      'input-checkbox',
+      'input',
+      'select',
+      'input-textarea'
+    ])
+
+    return dedicated.has(this.setting.type)
+  }
 }
diff --git a/client/src/app/shared/shared-forms/input-text.component.html b/client/src/app/shared/shared-forms/input-text.component.html
index f890c4f02..abb53a085 100644
--- a/client/src/app/shared/shared-forms/input-text.component.html
+++ b/client/src/app/shared/shared-forms/input-text.component.html
@@ -3,6 +3,7 @@
     [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
     [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
     #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
+    [ngClass]="{ 'input-error': formError }"
   />
 
   <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
@@ -18,3 +19,5 @@
     <span class="copy-text">Copy</span>
   </button>
 </div>
+
+<div *ngIf="formError" class="form-error">{{ formError }}</div>
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 ed4637c17..d667ed663 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -24,6 +24,7 @@ export class InputTextComponent implements ControlValueAccessor {
   @Input() withCopy = false
   @Input() readonly = false
   @Input() show = false
+  @Input() formError: string
 
   constructor (private notifier: Notifier) { }
 
diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss
index f09d84882..2994a57ae 100644
--- a/client/src/sass/class-helpers.scss
+++ b/client/src/sass/class-helpers.scss
@@ -77,6 +77,10 @@
   }
 }
 
+.input-group .input-error {
+  z-index: 3;
+}
+
 .form-error,
 .form-warning {
   display: block;
@@ -87,7 +91,9 @@
   color: $red;
 }
 
-.input-error:focus {
+// Disable red error on input focus
+.input-error:focus,
+.input-group:focus-within {
   & + .form-error,
   & + * + .form-error, // Markdown textarea
   & + * + * + .form-error {