Add description for sensitive configuration options, reword others

6 files changed, 105 insertions, 50 deletions

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 ac0447d25..f61593677 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
@@ -165,7 +165,7 @@
 
           <div class="form-group">
             <label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label>
-            <div class="label-small-info">With you own funds? With users donations? Advertising?</div>
+            <div class="label-small-info">With your own funds? With users donations? Advertising?</div>
 
             <textarea
               id="instanceBusinessModel" formControlName="businessModel" class="small"
@@ -233,23 +233,23 @@
             <my-peertube-checkbox
               inputName="signupEnabled" formControlName="enabled"
               i18n-labelText labelText="Signup enabled"
-            ></my-peertube-checkbox>
-          </div>
-
-          <div class="form-group">
-            <my-peertube-checkbox *ngIf="isSignupEnabled()"
-              inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
-              i18n-labelText labelText="Signup requires email verification"
-            ></my-peertube-checkbox>
-          </div>
-
-          <div *ngIf="isSignupEnabled()" class="form-group">
-            <label i18n for="signupLimit">Signup limit</label>
-            <input
-              type="text" id="signupLimit"
-              formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
             >
-            <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
+              <ng-container ngProjectAs="extra">
+                <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }"
+                  inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
+                  i18n-labelText labelText="Signup requires email verification"
+                ></my-peertube-checkbox>
+      
+                <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
+                  <label i18n for="signupLimit">Signup limit</label>
+                  <input
+                    type="text" id="signupLimit"
+                    formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
+                  >
+                  <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
+                </div>
+              </ng-container>
+            </my-peertube-checkbox>
           </div>
         </ng-container>
 
@@ -291,14 +291,14 @@
             <div class="form-group" formGroupName="http">
               <my-peertube-checkbox
                 inputName="importVideosHttpEnabled" formControlName="enabled"
-                i18n-labelText labelText="Video import with HTTP URL (i.e. YouTube) enabled"
+                i18n-labelText labelText="Allow import with HTTP URL (i.e. YouTube)"
               ></my-peertube-checkbox>
             </div>
 
             <div class="form-group" formGroupName="torrent">
               <my-peertube-checkbox
                 inputName="importVideosTorrentEnabled" formControlName="enabled"
-                i18n-labelText labelText="Video import with a torrent file or a magnet URI enabled"
+                i18n-labelText labelText="Allow import with a torrent file or a magnet URI"
               ></my-peertube-checkbox>
             </div>
 
@@ -315,8 +315,12 @@
               <div class="form-group">
                 <my-peertube-checkbox
                   inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
-                  i18n-labelText labelText="New videos of users automatically blacklisted enabled"
-                ></my-peertube-checkbox>
+                  i18n-labelText labelText="Blacklist new videos automatically"
+                >
+                <ng-container ngProjectAs="description">
+                  <span i18n>Videos of regular users will stay private until a moderator reviews them. Can be overriden per user.</span>
+                </ng-container>
+              </my-peertube-checkbox>
               </div>
 
             </ng-container>
@@ -339,7 +343,7 @@
             <div class="form-group">
               <my-peertube-checkbox
                 inputName="followersInstanceManualApproval" formControlName="manualApproval"
-                i18n-labelText labelText="Manually approve new instance follower"
+                i18n-labelText labelText="Manually approve new instance followers"
               ></my-peertube-checkbox>
             </div>
           </ng-container>
@@ -355,7 +359,11 @@
                 <my-peertube-checkbox
                   inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
                   i18n-labelText labelText="Automatically follow other instances that follow you"
-                ></my-peertube-checkbox>
+                >
+                  <ng-container ngProjectAs="description">
+                    <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
+                  </ng-container>
+                </my-peertube-checkbox>
               </div>
             </ng-container>
 
@@ -363,17 +371,24 @@
               <div class="form-group">
                 <my-peertube-checkbox
                   inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
-                  i18n-labelText labelText="Automatically follow instance of the public index (below)"
-                ></my-peertube-checkbox>
-              </div>
-
-              <div class="form-group">
-                <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
-                <input
-                  type="text" id="followingsInstanceAutoFollowIndexUrl"
-                  formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
+                  i18n-labelText labelText="Automatically follow instances of the public index"
+                  [(ngModel)]="isAutoFollowIndexEnabled"
                 >
-                <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
+                  <ng-container ngProjectAs="description">
+                    <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
+                  </ng-container>
+
+                  <ng-container ngProjectAs="extra">
+                    <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled }">
+                      <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
+                      <input
+                        type="text" id="followingsInstanceAutoFollowIndexUrl"
+                        formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
+                      >
+                      <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
+                    </div>
+                  </ng-container>
+                </my-peertube-checkbox>
               </div>
 
             </ng-container>
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 2b4d0da2c..60d608028 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
@@ -53,3 +53,8 @@ textarea {
   font-style: italic;
   margin-bottom: 10px;
 }
+
+.disabled-checkbox-extra {
+  opacity: .5;
+  pointer-events: none;
+}
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 49bb4db0e..1bc907b73 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
@@ -24,6 +24,8 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
   languageItems: SelectItem[] = []
   categoryItems: SelectItem[] = []
 
+  isAutoFollowIndexEnabled = false
+
   private serverConfig: ServerConfig
 
   constructor (
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html
index 496ee970a..a4a1d41b3 100644
--- a/client/src/app/search/search.component.html
+++ b/client/src/app/search/search.component.html
@@ -2,7 +2,7 @@
   <div class="results-header">
     <div class="first-line">
       <div class="results-counter" *ngIf="pagination.totalItems">
-        <span i18n>{{ pagination.totalItems | myNumberFormatter }} results</span>
+        <span i18n>{{ pagination.totalItems | myNumberFormatter }} {pagination.totalItems, plural, =1 {result} other {results}}</span>
         <span *ngIf="currentSearch" i18n>
           for <span class="search-value">{{ currentSearch }}</span>
         </span>
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.html b/client/src/app/shared/forms/peertube-checkbox.component.html
index 1c0114d97..c740d852c 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/forms/peertube-checkbox.component.html
@@ -1,18 +1,43 @@
-<div class="root">
-  <label class="form-group-checkbox">
-    <input type="checkbox" [(ngModel)]="checked" (ngModelChange)="onModelChange()" [id]="inputName" [disabled]="disabled" />
-    <span role="checkbox" [attr.aria-checked]="checked"></span>
-    <span *ngIf="labelText">{{ labelText }}</span>
-    <span *ngIf="!labelText && labelInnerHTML" [innerHTML]="labelInnerHTML"></span>
+<div class="root flex-column">
+  <div class="d-flex">
+    <label class="form-group-checkbox">
+      <input
+        type="checkbox"
+        [(ngModel)]="checked"
+        (ngModelChange)="onModelChange()"
+        [id]="inputName"
+        [disabled]="disabled"
+      />
+      <span role="checkbox" [attr.aria-checked]="checked"></span>
+      <span *ngIf="labelText">{{ labelText }}</span>
+      <span
+        *ngIf="!labelText && labelInnerHTML"
+        [innerHTML]="labelInnerHTML"
+      ></span>
 
-    <span *ngIf="labelTemplate">
-      <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
-    </span>
-  </label>
+      <span *ngIf="labelTemplate">
+        <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
+      </span>
+    </label>
+
+    <my-help
+      *ngIf="helpTemplate"
+      [tooltipPlacement]="helpPlacement"
+      helpType="custom"
+    >
+      <ng-template ptTemplate="customHtml">
+        <ng-template *ngTemplateOutlet="helpTemplate"></ng-template>
+      </ng-template>
+    </my-help>
+  </div>
 
-  <my-help *ngIf="helpTemplate" [tooltipPlacement]="helpPlacement" helpType="custom">
-    <ng-template ptTemplate="customHtml">
-      <ng-template *ngTemplateOutlet="helpTemplate"></ng-template>
-    </ng-template>
-  </my-help>
+  <div class="ml-4 d-flex flex-column">
+    <small class="wrapper mt-2 text-muted">
+      <ng-content select="description"></ng-content>
+    </small>
+
+    <span class="wrapper mt-3">
+      <ng-content select="extra"></ng-content>
+    </span>
+  </div>
 </div>
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index 3b467d49d..3120509b3 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -26,4 +26,12 @@
     position: relative;
     top: 2px;
   }
-}
+
+  small {
+    font-size: 90%;
+  }
+
+  .wrapper:empty {
+    display: none;
+  }
+}
\ No newline at end of file