5 files changed, 34 insertions, 12 deletions

diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 80acfcce0..8b21137af 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -24,19 +24,25 @@
     </div>
 
     <div class="block administrator" *ngIf="html.administrator">
-      <div i18n class="section-title">Who are we?</div>
+      <div i18n class="section-title">Who we are</div>
 
       <div [innerHTML]="html.administrator"></div>
     </div>
 
+    <div class="block creation-reason" *ngIf="creationReason">
+      <div i18n class="section-title">Why we created this instance</div>
+
+      <p>{{ creationReason }}</p>
+    </div>
+
     <div class="block maintenance-lifetime" *ngIf="maintenanceLifetime">
-      <div i18n class="section-title">How long do we plan to maintain this instance?</div>
+      <div i18n class="section-title">How long we plan to maintain this instance</div>
 
       <p>{{ maintenanceLifetime }}</p>
     </div>
 
     <div class="block business-model" *ngIf="businessModel">
-      <div i18n class="section-title">How will we pay this instance?</div>
+      <div i18n class="section-title">How we will pay this instance</div>
 
       <p>{{ businessModel }}</p>
     </div>
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index e2c448501..b6cade4fe 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -25,6 +25,7 @@ export class AboutInstanceComponent implements OnInit {
     administrator: ''
   }
 
+  creationReason = ''
   maintenanceLifetime = ''
   businessModel = ''
 
@@ -61,6 +62,7 @@ export class AboutInstanceComponent implements OnInit {
       async ([ about, translations ]) => {
         this.shortDescription = about.instance.shortDescription
 
+        this.creationReason = about.instance.creationReason
         this.maintenanceLifetime = about.instance.maintenanceLifetime
         this.businessModel = about.instance.businessModel
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 5aa6fda3c..ef24e5b24 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -21,7 +21,7 @@
           <div class="form-group">
             <label i18n for="instanceShortDescription">Short description</label>
             <textarea
-              id="instanceShortDescription" formControlName="shortDescription"
+              id="instanceShortDescription" formControlName="shortDescription" class="small"
               [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
             ></textarea>
             <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
@@ -130,14 +130,26 @@
           <div i18n class="inner-form-title">You and your instance</div>
 
           <div class="form-group">
-            <label i18n for="instanceAdministrator">Who is behind the instance? </label>
+            <label i18n for="instanceAdministrator">Who is behind the instance?</label>
             <div class="label-small-info">A single person? A non profit? A company?</div>
 
+            <my-markdown-textarea
+              id="instanceAdministrator" formControlName="administrator" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true"
+              [classes]="{ 'input-error': formErrors['instance.administrator'] }"
+            ></my-markdown-textarea>
+
+            <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
+          </div>
+
+          <div class="form-group">
+            <label i18n for="instanceCreationReason">Why did you create this instance?</label>
+            <div class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
+
             <textarea
-              id="instanceAdministrator" formControlName="administrator"
-              [ngClass]="{ 'input-error': formErrors['instance.administrator'] }"
+              id="instanceCreationReason" formControlName="creationReason" class="small"
+              [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
             ></textarea>
-            <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
+            <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
           </div>
 
           <div class="form-group">
@@ -145,7 +157,7 @@
             <div class="label-small-info">It's important to know for users who want to register on your instance</div>
 
             <textarea
-              id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime"
+              id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="small"
               [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
             ></textarea>
             <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
@@ -156,7 +168,7 @@
             <div class="label-small-info">With you own funds? With users donations? Advertising?</div>
 
             <textarea
-              id="instanceBusinessModel" formControlName="businessModel"
+              id="instanceBusinessModel" formControlName="businessModel" class="small"
               [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
             ></textarea>
             <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</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 68f1b01b7..2b4d0da2c 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
@@ -44,8 +44,8 @@ textarea {
 
   display: block;
 
-  &#instanceShortDescription {
-    height: 100px;
+  &.small {
+    height: 75px;
   }
 }
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index 3119ab040..e6f56bc97 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -100,6 +100,8 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
 
         terms: null,
         codeOfConduct: null,
+
+        creationReason: null,
         moderationInformation: null,
         administrator: null,
         maintenanceLifetime: null,