Handle input error in markdown textarea

4 files changed, 34 insertions, 43 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index 68126281f..315cd1749 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -132,8 +132,8 @@
           <label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help>
 
           <my-markdown-textarea
-            name="broadcastMessageMessage" formControlName="message" textareaMaxWidth="500px"
-            [classes]="{ 'input-error': formErrors['broadcastMessage.message'] }"
+            name="broadcastMessageMessage" formControlName="message"
+            [formError]="formErrors['broadcastMessage.message']"
           ></my-markdown-textarea>
 
           <div *ngIf="formErrors.broadcastMessage.message" class="form-error">{{ formErrors.broadcastMessage.message }}</div>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index f3bce8ee0..df523cedc 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -7,12 +7,21 @@ form {
   padding-bottom: 1.5rem;
 }
 
-input[type=text] {
-  @include peertube-input-text($form-base-input-width);
+my-markdown-textarea {
+  display: block;
+  max-width: 500px;
+}
 
+.homepage my-markdown-textarea {
   display: block;
+  max-width: 90%;
+
+  ::ng-deep textarea {
+    height: 300px !important;
+  }
 }
 
+input[type=text],
 input[type=number] {
   @include peertube-input-text($form-base-input-width);
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
index 701c3c0c1..5339240bb 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
@@ -2,7 +2,7 @@
 
   <ng-container formGroupName="instanceCustomHomepage">
 
-    <div class="row mt-5"> <!-- homepage grid -->
+    <div class="homepage row mt-5"> <!-- homepage grid -->
       <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">INSTANCE HOMEPAGE</div>
       </div>
@@ -16,9 +16,9 @@
           </div>
 
           <my-markdown-textarea
-            name="instanceCustomHomepageContent" formControlName="content" textareaMaxWidth="90%" textareaHeight="300px"
+            name="instanceCustomHomepageContent" formControlName="content"
             [customMarkdownRenderer]="getCustomMarkdownRenderer()"
-            [classes]="{ 'input-error': formErrors['instanceCustomHomepage.content'] }"
+            [formError]="formErrors['instanceCustomHomepage.content']"
           ></my-markdown-textarea>
 
           <div *ngIf="formErrors.instanceCustomHomepage.content" class="form-error">{{ formErrors.instanceCustomHomepage.content }}</div>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
index 5931cb459..b54733327 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
@@ -37,12 +37,10 @@
           </div>
 
           <my-markdown-textarea
-            name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
+            name="instanceDescription" formControlName="description"
             [customMarkdownRenderer]="getCustomMarkdownRenderer()"
-            [classes]="{ 'input-error': formErrors['instance.description'] }"
+            [formError]="formErrors['instance.description']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
         </div>
 
         <div class="form-group">
@@ -127,22 +125,18 @@
           <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
 
           <my-markdown-textarea
-            name="instanceTerms" formControlName="terms" textareaMaxWidth="500px"
-            [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
+            name="instanceTerms" formControlName="terms"
+            [formError]="formErrors['instance.terms']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
         </div>
 
         <div class="form-group">
           <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
 
           <my-markdown-textarea
-            name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaMaxWidth="500px"
-            [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
+            name="instanceCodeOfConduct" formControlName="codeOfConduct"
+            [formError]="formErrors['instance.codeOfConduct']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
         </div>
 
         <div class="form-group">
@@ -150,11 +144,9 @@
           <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
 
           <my-markdown-textarea
-            name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px"
-            [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
+            name="instanceModerationInformation" formControlName="moderationInformation"
+            [formError]="formErrors['instance.moderationInformation']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
         </div>
 
       </div>
@@ -172,11 +164,9 @@
           <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
 
           <my-markdown-textarea
-            name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px"
-            [classes]="{ 'input-error': formErrors['instance.administrator'] }"
+            name="instanceAdministrator" formControlName="administrator"
+            [formError]="formErrors['instance.administrator']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
         </div>
 
         <div class="form-group">
@@ -184,11 +174,9 @@
           <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
 
           <my-markdown-textarea
-            name="instanceCreationReason" formControlName="creationReason" textareaMaxWidth="500px"
-            [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
+            name="instanceCreationReason" formControlName="creationReason"
+            [formError]="formErrors['instance.creationReason']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
         </div>
 
         <div class="form-group">
@@ -196,11 +184,9 @@
           <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
 
           <my-markdown-textarea
-            name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" textareaMaxWidth="500px"
-            [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
+            name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime"
+            [formError]="formErrors['instance.maintenanceLifetime']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
         </div>
 
         <div class="form-group">
@@ -208,11 +194,9 @@
           <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
 
           <my-markdown-textarea
-            name="instanceBusinessModel" formControlName="businessModel" textareaMaxWidth="500px"
-            [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
+            name="instanceBusinessModel" formControlName="businessModel"
+            [formError]="formErrors['instance.businessModel']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
         </div>
 
       </div>
@@ -230,11 +214,9 @@
           <div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div>
 
           <my-markdown-textarea
-            name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px"
-            [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
+            name="instanceHardwareInformation" formControlName="hardwareInformation"
+            [formError]="formErrors['instance.hardwareInformation']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div>
         </div>
 
       </div>