Move alert into to pt-alert-primary

[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / config / edit-custom-config / edit-basic-configuration.component.html

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 1f542e45885e83a6b483b64c55823581923c3f9b..d0d66d6317dc0fb45673fe1dd8fc2d7b4509b2e9 100644 (file)
--- 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
@@ -1,13 +1,13 @@
 <ng-container [formGroup]="form">
-  <div class="form-row mt-5"> <!-- appearance grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-5"> <!-- appearance grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">APPEARANCE</div>
       <div i18n class="inner-form-description">
         Use <a routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or <a routerLink="/admin/config/edit-custom" fragment="advanced-configuration">add slight customizations</a>.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="theme">
         <div class="form-group">
@@ -44,7 +44,6 @@
 
             <div class="peertube-select-container">
               <select id="trendingVideosAlgorithmsDefault" formControlName="default" class="form-control">
-                <option i18n value="best">Best videos</option>
                 <option i18n value="hot">Hot videos</option>
                 <option i18n value="most-viewed">Most viewed videos</option>
                 <option i18n value="most-liked">Most liked videos</option>
@@ -56,18 +55,48 @@
         </ng-container>
       </div>
 
+      <ng-container formGroupName="client">
+
+        <ng-container formGroupName="videos">
+          <ng-container formGroupName="miniature">
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="clientVideosMiniaturePreferAuthorDisplayName" formControlName="preferAuthorDisplayName"
+                i18n-labelText labelText="Prefer author display name in video miniature"
+              ></my-peertube-checkbox>
+            </div>
+          </ng-container>
+        </ng-container>
+
+        <ng-container formGroupName="menu">
+          <ng-container formGroupName="login">
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="clientMenuLoginRedirectOnSingleExternalAuth" formControlName="redirectOnSingleExternalAuth"
+                i18n-labelText labelText="Redirect users on single external auth when users click on the login button in menu"
+              >
+                <ng-container ngProjectAs="description">
+                  <span *ngIf="countExternalAuth() === 0" i18n>⚠️ You don't have any external auth plugin enabled.</span>
+                  <span *ngIf="countExternalAuth() > 1" i18n>⚠️ You have multiple external auth plugins enabled.</span>
+                </ng-container>
+             </my-peertube-checkbox>
+            </div>
+          </ng-container>
+        </ng-container>
+      </ng-container>
+
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- broadcast grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- broadcast grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">BROADCAST MESSAGE</div>
       <div i18n class="inner-for-description">
         Display a message on your instance
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="broadcastMessage">
 
@@ -115,15 +144,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- new users grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- new users grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">NEW USERS</div>
       <div i18n class="inner-for-description">
         Manage <a routerLink="/admin/users">users</a> to set their quota individually.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="signup">
         <div class="form-group">
@@ -134,7 +163,7 @@
             <ng-container ngProjectAs="description">
               <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
 
-              <div class="alert alert-info alert-signup" *ngIf="signupAlertMessage">{{ signupAlertMessage }}</div>
+              <div class="alert pt-alert-primary alert-signup" *ngIf="signupAlertMessage">{{ signupAlertMessage }}</div>
             </ng-container>
 
             <ng-container ngProjectAs="extra">
@@ -156,7 +185,7 @@
 
                 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
 
-                <small i18n *ngIf="hasUnlimitedSignup()" class="text-muted">Signup won't be limited to a fixed number of users.</small>
+                <small i18n *ngIf="hasUnlimitedSignup()" class="muted">Signup won't be limited to a fixed number of users.</small>
               </div>
 
               <div [ngClass]="getDisabledSignupClass()" class="mt-3">
@@ -210,20 +239,20 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- videos grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- videos grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">VIDEOS</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="import">
 
         <ng-container formGroupName="videos">
 
-          <div class="form-group mt-4">
+          <div class="form-group">
             <label i18n for="importConcurrency">Import jobs concurrency</label>
-            <span i18n class="text-muted ml-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
+            <span i18n class="muted ms-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
 
             <div class="number-with-unit">
               <input type="number" name="importConcurrency" formControlName="concurrency" />
@@ -237,14 +266,22 @@
             <my-peertube-checkbox
               inputName="importVideosHttpEnabled" formControlName="enabled"
               i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)"
-            ></my-peertube-checkbox>
+            >
+            <ng-container ngProjectAs="description">
+              <span i18n>⚠️ If enabled, we recommend to use <a href="https://docs.joinpeertube.org/maintain-configuration?id=security">a HTTP proxy</a> to prevent private URL access from your PeerTube server</span>
+            </ng-container>
+          </my-peertube-checkbox>
           </div>
 
           <div class="form-group" formGroupName="torrent">
             <my-peertube-checkbox
               inputName="importVideosTorrentEnabled" formControlName="enabled"
               i18n-labelText labelText="Allow import with a torrent file or a magnet URI"
-            ></my-peertube-checkbox>
+            >
+            <ng-container ngProjectAs="description">
+              <span i18n>⚠️ We don't recommend to enable this feature if you don't trust your users</span>
+            </ng-container>
+          </my-peertube-checkbox>
           </div>
 
         </ng-container>
@@ -272,12 +309,34 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- search grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- video channels grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
+      <div i18n class="inner-form-title">VIDEO CHANNELS</div>
+    </div>
+
+    <div class="col-12 col-lg-8 col-xl-9">
+      <div class="form-group" formGroupName="videoChannels">
+        <label i18n for="videoChannelsMaxPerUser">Max video channels per user</label>
+
+        <div class="number-with-unit">
+          <input
+            type="number" min="1" id="videoChannelsMaxPerUser" class="form-control"
+            formControlName="maxPerUser" [ngClass]="{ 'input-error': formErrors['videoChannels.maxPerUser'] }"
+          >
+          <span i18n>{form.value['videoChannels']['maxPerUser'], plural, =1 {channel} other {channels}}</span>
+        </div>
+
+        <div *ngIf="formErrors.videoChannels.maxPerUser" class="form-error">{{ formErrors.videoChannels.maxPerUser }}</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row mt-4"> <!-- search grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">SEARCH</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="search">
         <ng-container formGroupName="remoteUri">
@@ -361,15 +420,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- federation grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- federation grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">FEDERATION</div>
       <div i18n class="inner-form-description">
         Manage <a routerLink="/admin/follows">relations</a> with other instances.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="followers">
         <ng-container formGroupName="instance">
@@ -416,7 +475,7 @@
                   <p i18n>⚠️ This functionality requires a lot of attention and extra moderation.</p>
 
                   <span i18n>
-                    See <a href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferer" target="_blank">the documentation</a> for more information about the expected URL
+                    See <a href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferrer" target="_blank">the documentation</a> for more information about the expected URL
                   </span>
                 </ng-container>
 
@@ -440,12 +499,12 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- administrators grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- administrators grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">ADMINISTRATORS</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <div class="form-group" formGroupName="admin">
         <label i18n for="adminEmail">Admin email</label>
@@ -468,8 +527,8 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- Twitter grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- Twitter grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">TWITTER</div>
       <div i18n class="inner-form-description">
         Provide the Twitter account representing your instance to improve link previews.
@@ -477,7 +536,7 @@
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="services">
         <ng-container formGroupName="twitter">