client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html

   1 <ng-container [formGroup]="form">
   2   <div class="form-row mt-5"> <!-- appearance grid -->
   3     <div class="form-group col-12 col-lg-4 col-xl-3">
   4       <div i18n class="inner-form-title">APPEARANCE</div>
   5       <div i18n class="inner-form-description">
   6         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>.
   7       </div>
   8     </div>
   9
  10     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  11
  12       <ng-container formGroupName="theme">
  13         <div class="form-group">
  14           <label i18n for="themeDefault">Theme</label>
  15
  16           <div class="peertube-select-container">
  17             <select formControlName="default" id="themeDefault" class="form-control">
  18               <option i18n value="default">default</option>
  19
  20               <option *ngFor="let theme of getAvailableThemes()" [value]="theme">{{ theme }}</option>
  21             </select>
  22           </div>
  23         </div>
  24       </ng-container>
  25
  26       <div class="form-group" formGroupName="instance">
  27         <label i18n for="instanceDefaultClientRoute">Landing page</label>
  28
  29         <my-select-custom-value
  30           id="instanceDefaultClientRoute"
  31           [items]="defaultLandingPageOptions"
  32           formControlName="defaultClientRoute"
  33           inputType="text"
  34           [clearable]="false"
  35         ></my-select-custom-value>
  36
  37         <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
  38       </div>
  39
  40       <div class="form-group" formGroupName="trending">
  41         <ng-container formGroupName="videos">
  42           <ng-container formGroupName="algorithms">
  43             <label i18n for="trendingVideosAlgorithmsDefault">Default trending page</label>
  44
  45             <div class="peertube-select-container">
  46               <select id="trendingVideosAlgorithmsDefault" formControlName="default" class="form-control">
  47                 <option i18n value="best">Best videos</option>
  48                 <option i18n value="hot">Hot videos</option>
  49                 <option i18n value="most-viewed">Most viewed videos</option>
  50                 <option i18n value="most-liked">Most liked videos</option>
  51               </select>
  52             </div>
  53
  54             <div *ngIf="formErrors.trending.videos.algorithms.default" class="form-error">{{ formErrors.trending.videos.algorithms.default }}</div>
  55           </ng-container>
  56         </ng-container>
  57       </div>
  58
  59     </div>
  60   </div>
  61
  62   <div class="form-row mt-4"> <!-- broadcast grid -->
  63     <div class="form-group col-12 col-lg-4 col-xl-3">
  64       <div i18n class="inner-form-title">BROADCAST MESSAGE</div>
  65       <div i18n class="inner-for-description">
  66         Display a message on your instance
  67       </div>
  68     </div>
  69
  70     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  71
  72       <ng-container formGroupName="broadcastMessage">
  73
  74         <div class="form-group">
  75           <my-peertube-checkbox
  76             inputName="broadcastMessageEnabled" formControlName="enabled"
  77             i18n-labelText labelText="Enable broadcast message"
  78           ></my-peertube-checkbox>
  79         </div>
  80
  81         <div class="form-group">
  82           <my-peertube-checkbox
  83             inputName="broadcastMessageDismissable" formControlName="dismissable"
  84             i18n-labelText labelText="Allow users to dismiss the broadcast message "
  85           ></my-peertube-checkbox>
  86         </div>
  87
  88         <div class="form-group">
  89           <label i18n for="broadcastMessageLevel">Broadcast message level</label>
  90
  91           <div class="peertube-select-container">
  92             <select id="broadcastMessageLevel" formControlName="level" class="form-control">
  93               <option value="info">info</option>
  94               <option value="warning">warning</option>
  95               <option value="error">error</option>
  96             </select>
  97           </div>
  98
  99           <div *ngIf="formErrors.broadcastMessage.level" class="form-error">{{ formErrors.broadcastMessage.level }}</div>
 100         </div>
 101
 102         <div class="form-group">
 103           <label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help>
 104
 105           <my-markdown-textarea
 106             name="broadcastMessageMessage" formControlName="message" textareaMaxWidth="500px"
 107             [classes]="{ 'input-error': formErrors['broadcastMessage.message'] }"
 108           ></my-markdown-textarea>
 109
 110           <div *ngIf="formErrors.broadcastMessage.message" class="form-error">{{ formErrors.broadcastMessage.message }}</div>
 111         </div>
 112
 113       </ng-container>
 114
 115     </div>
 116   </div>
 117
 118   <div class="form-row mt-4"> <!-- new users grid -->
 119     <div class="form-group col-12 col-lg-4 col-xl-3">
 120       <div i18n class="inner-form-title">NEW USERS</div>
 121       <div i18n class="inner-for-description">
 122         Manage <a routerLink="/admin/users">users</a> to set their quota individually.
 123       </div>
 124     </div>
 125
 126     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 127
 128       <ng-container formGroupName="signup">
 129         <div class="form-group">
 130           <my-peertube-checkbox
 131             inputName="signupEnabled" formControlName="enabled"
 132             i18n-labelText labelText="Enable Signup"
 133           >
 134             <ng-container ngProjectAs="description">
 135               <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
 136
 137               <div class="alert alert-info alert-signup" *ngIf="signupAlertMessage">{{ signupAlertMessage }}</div>
 138             </ng-container>
 139
 140             <ng-container ngProjectAs="extra">
 141               <my-peertube-checkbox [ngClass]="getDisabledSignupClass()"
 142                 inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
 143                 i18n-labelText labelText="Signup requires email verification"
 144               ></my-peertube-checkbox>
 145
 146               <div [ngClass]="getDisabledSignupClass()" class="mt-3">
 147                 <label i18n for="signupLimit">Signup limit</label>
 148
 149                 <div class="number-with-unit">
 150                   <input
 151                     type="number" min="-1" id="signupLimit" class="form-control"
 152                     formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
 153                   >
 154                   <span i18n>{form.value['signup']['limit'], plural, =1 {user} other {users}}</span>
 155                 </div>
 156
 157                 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
 158
 159                 <small i18n *ngIf="hasUnlimitedSignup()" class="text-muted">Signup won't be limited to a fixed number of users.</small>
 160               </div>
 161
 162               <div [ngClass]="getDisabledSignupClass()" class="mt-3">
 163                 <label i18n for="signupMinimumAge">Minimum required age to create an account</label>
 164
 165                 <div class="number-with-unit">
 166                     <input
 167                       type="number" min="1" id="signupMinimumAge" class="form-control"
 168                       formControlName="minimumAge" [ngClass]="{ 'input-error': formErrors['signup.minimumAge'] }"
 169                     >
 170                     <span i18n>{form.value['signup']['minimumAge'], plural, =1 {year old} other {years old}}</span>
 171                 </div>
 172
 173                 <div *ngIf="formErrors.signup.minimumAge" class="form-error">{{ formErrors.signup.minimumAge }}</div>
 174               </div>
 175             </ng-container>
 176           </my-peertube-checkbox>
 177         </div>
 178       </ng-container>
 179
 180       <ng-container formGroupName="user">
 181         <div class="form-group">
 182           <label i18n for="userVideoQuota">Default video quota per user</label>
 183
 184           <my-select-custom-value
 185             id="userVideoQuota"
 186             [items]="getVideoQuotaOptions()"
 187             formControlName="videoQuota"
 188             i18n-inputSuffix inputSuffix="bytes" inputType="number"
 189             [clearable]="false"
 190           ></my-select-custom-value>
 191
 192           <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
 193         </div>
 194
 195         <div class="form-group">
 196           <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
 197
 198           <my-select-custom-value
 199             id="userVideoQuotaDaily"
 200             [items]="getVideoQuotaDailyOptions()"
 201             formControlName="videoQuotaDaily"
 202             i18n-inputSuffix inputSuffix="bytes" inputType="number"
 203             [clearable]="false"
 204           ></my-select-custom-value>
 205
 206           <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
 207         </div>
 208       </ng-container>
 209
 210     </div>
 211   </div>
 212
 213   <div class="form-row mt-4"> <!-- videos grid -->
 214     <div class="form-group col-12 col-lg-4 col-xl-3">
 215       <div i18n class="inner-form-title">VIDEOS</div>
 216     </div>
 217
 218     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 219
 220       <ng-container formGroupName="import">
 221
 222         <ng-container formGroupName="videos">
 223
 224           <div class="form-group mt-4">
 225             <label i18n for="importConcurrency">Import jobs concurrency</label>
 226             <span i18n class="text-muted ml-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
 227
 228             <div class="number-with-unit">
 229               <input type="number" name="importConcurrency" formControlName="concurrency" />
 230               <span i18n>jobs in parallel</span>
 231             </div>
 232
 233             <div *ngIf="formErrors.import.concurrency" class="form-error">{{ formErrors.import.concurrency }}</div>
 234           </div>
 235
 236           <div class="form-group" formGroupName="http">
 237             <my-peertube-checkbox
 238               inputName="importVideosHttpEnabled" formControlName="enabled"
 239               i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)"
 240             ></my-peertube-checkbox>
 241           </div>
 242
 243           <div class="form-group" formGroupName="torrent">
 244             <my-peertube-checkbox
 245               inputName="importVideosTorrentEnabled" formControlName="enabled"
 246               i18n-labelText labelText="Allow import with a torrent file or a magnet URI"
 247             ></my-peertube-checkbox>
 248           </div>
 249
 250         </ng-container>
 251       </ng-container>
 252
 253       <ng-container formGroupName="autoBlacklist">
 254         <ng-container formGroupName="videos">
 255           <ng-container formGroupName="ofUsers">
 256
 257             <div class="form-group">
 258               <my-peertube-checkbox
 259                 inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
 260                 i18n-labelText labelText="Block new videos automatically"
 261               >
 262               <ng-container ngProjectAs="description">
 263                 <span i18n>Unless a user is marked as trusted, their videos will stay private until a moderator reviews them.</span>
 264               </ng-container>
 265             </my-peertube-checkbox>
 266             </div>
 267
 268           </ng-container>
 269         </ng-container>
 270       </ng-container>
 271
 272     </div>
 273   </div>
 274
 275   <div class="form-row mt-4"> <!-- search grid -->
 276     <div class="form-group col-12 col-lg-4 col-xl-3">
 277       <div i18n class="inner-form-title">SEARCH</div>
 278     </div>
 279
 280     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 281
 282       <ng-container formGroupName="search">
 283         <ng-container formGroupName="remoteUri">
 284
 285           <div class="form-group">
 286             <my-peertube-checkbox
 287               inputName="searchRemoteUriUsers" formControlName="users"
 288               i18n-labelText labelText="Allow users to do remote URI/handle search"
 289             >
 290               <ng-container ngProjectAs="description">
 291                 <span i18n>Allow <strong>your users</strong> to look up remote videos/actors that may not be federated with your instance</span>
 292               </ng-container>
 293             </my-peertube-checkbox>
 294           </div>
 295
 296           <div class="form-group">
 297             <my-peertube-checkbox
 298               inputName="searchRemoteUriAnonymous" formControlName="anonymous"
 299               i18n-labelText labelText="Allow anonymous to do remote URI/handle search"
 300             >
 301               <ng-container ngProjectAs="description">
 302                 <span i18n>Allow <strong>anonymous users</strong> to look up remote videos/actors that may not be federated with your instance</span>
 303               </ng-container>
 304             </my-peertube-checkbox>
 305           </div>
 306
 307         </ng-container>
 308
 309         <ng-container formGroupName="searchIndex">
 310           <div class="form-group">
 311             <my-peertube-checkbox
 312               inputName="searchIndexEnabled" formControlName="enabled"
 313               i18n-labelText labelText="Enable global search"
 314             >
 315               <ng-container ngProjectAs="description">
 316                 <p i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</p>
 317
 318                 <span i18n>
 319                   You should only use moderated search indexes in production, or <a href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
 320                 </span>
 321               </ng-container>
 322
 323               <ng-container ngProjectAs="extra">
 324                 <div [ngClass]="getDisabledSearchIndexClass()">
 325                   <label i18n for="searchIndexUrl">Search index URL</label>
 326
 327                   <input
 328                     type="text"  id="searchIndexUrl" class="form-control"
 329                     formControlName="url" [ngClass]="{ 'input-error': formErrors['search.searchIndex.url'] }"
 330                   >
 331
 332                   <div *ngIf="formErrors.search.searchIndex.url" class="form-error">{{ formErrors.search.searchIndex.url }}</div>
 333                 </div>
 334
 335                 <div class="mt-3">
 336                   <my-peertube-checkbox [ngClass]="getDisabledSearchIndexClass()"
 337                     inputName="searchIndexDisableLocalSearch" formControlName="disableLocalSearch"
 338                     i18n-labelText labelText="Disable local search in search bar"
 339                   ></my-peertube-checkbox>
 340                 </div>
 341
 342                 <div class="mt-3">
 343                   <my-peertube-checkbox [ngClass]="getDisabledSearchIndexClass()"
 344                     inputName="searchIndexIsDefaultSearch" formControlName="isDefaultSearch"
 345                     i18n-labelText labelText="Search bar uses the global search index by default"
 346                   >
 347                     <ng-container ngProjectAs="description">
 348                       <span i18n>Otherwise the local search stays used by default</span>
 349                     </ng-container>
 350                   </my-peertube-checkbox>
 351                 </div>
 352
 353               </ng-container>
 354             </my-peertube-checkbox>
 355           </div>
 356
 357         </ng-container>
 358
 359       </ng-container>
 360
 361     </div>
 362   </div>
 363
 364   <div class="form-row mt-4"> <!-- federation grid -->
 365     <div class="form-group col-12 col-lg-4 col-xl-3">
 366       <div i18n class="inner-form-title">FEDERATION</div>
 367       <div i18n class="inner-form-description">
 368         Manage <a routerLink="/admin/follows">relations</a> with other instances.
 369       </div>
 370     </div>
 371
 372     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 373
 374       <ng-container formGroupName="followers">
 375         <ng-container formGroupName="instance">
 376
 377           <div class="form-group">
 378             <my-peertube-checkbox
 379               inputName="followersInstanceEnabled" formControlName="enabled"
 380               i18n-labelText labelText="Other instances can follow yours"
 381             ></my-peertube-checkbox>
 382           </div>
 383
 384           <div class="form-group">
 385             <my-peertube-checkbox
 386               inputName="followersInstanceManualApproval" formControlName="manualApproval"
 387               i18n-labelText labelText="Manually approve new instance followers"
 388             ></my-peertube-checkbox>
 389           </div>
 390         </ng-container>
 391       </ng-container>
 392
 393       <ng-container formGroupName="followings">
 394         <ng-container formGroupName="instance">
 395
 396           <ng-container formGroupName="autoFollowBack">
 397             <div class="form-group">
 398               <my-peertube-checkbox
 399                 inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
 400                 i18n-labelText labelText="Automatically follow back instances"
 401               >
 402                 <ng-container ngProjectAs="description">
 403                   <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
 404                 </ng-container>
 405               </my-peertube-checkbox>
 406             </div>
 407           </ng-container>
 408
 409           <ng-container formGroupName="autoFollowIndex">
 410             <div class="form-group">
 411               <my-peertube-checkbox
 412                 inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
 413                 i18n-labelText labelText="Automatically follow instances of a public index"
 414               >
 415                 <ng-container ngProjectAs="description">
 416                   <p i18n>⚠️ This functionality requires a lot of attention and extra moderation.</p>
 417
 418                   <span i18n>
 419                     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
 420                   </span>
 421                 </ng-container>
 422
 423                 <ng-container ngProjectAs="extra">
 424                   <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
 425                     <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
 426                     <input
 427                       type="text" id="followingsInstanceAutoFollowIndexUrl" class="form-control"
 428                       formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
 429                     >
 430                     <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
 431                   </div>
 432                 </ng-container>
 433               </my-peertube-checkbox>
 434             </div>
 435
 436           </ng-container>
 437         </ng-container>
 438       </ng-container>
 439
 440     </div>
 441   </div>
 442
 443   <div class="form-row mt-4"> <!-- administrators grid -->
 444     <div class="form-group col-12 col-lg-4 col-xl-3">
 445       <div i18n class="inner-form-title">ADMINISTRATORS</div>
 446     </div>
 447
 448     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 449
 450       <div class="form-group" formGroupName="admin">
 451         <label i18n for="adminEmail">Admin email</label>
 452
 453         <input
 454           type="text" id="adminEmail" class="form-control"
 455           formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
 456         >
 457
 458         <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
 459       </div>
 460
 461       <div class="form-group" formGroupName="contactForm">
 462         <my-peertube-checkbox
 463           inputName="enableContactForm" formControlName="enabled"
 464           i18n-labelText labelText="Enable contact form"
 465         ></my-peertube-checkbox>
 466       </div>
 467
 468     </div>
 469   </div>
 470
 471   <div class="form-row mt-4"> <!-- Twitter grid -->
 472     <div class="form-group col-12 col-lg-4 col-xl-3">
 473       <div i18n class="inner-form-title">TWITTER</div>
 474       <div i18n class="inner-form-description">
 475         Provide the Twitter account representing your instance to improve link previews.
 476         If you don't have a Twitter account, just leave the default value.
 477       </div>
 478     </div>
 479
 480     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 481
 482       <ng-container formGroupName="services">
 483         <ng-container formGroupName="twitter">
 484
 485           <div class="form-group">
 486             <label for="servicesTwitterUsername" i18n>Your Twitter username</label>
 487
 488             <input
 489               type="text" id="servicesTwitterUsername" class="form-control"
 490               formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
 491             >
 492
 493             <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
 494           </div>
 495
 496           <div class="form-group">
 497             <my-peertube-checkbox inputName="servicesTwitterWhitelisted" formControlName="whitelisted">
 498               <ng-template ptTemplate="label">
 499                 <ng-container i18n>Instance allowed by Twitter</ng-container>
 500               </ng-template>
 501
 502               <ng-template ptTemplate="help">
 503                 <ng-container i18n>
 504                   If your instance is explicitly allowed by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
 505                   If the instance is not, we use an image link card that will redirect to your PeerTube instance.<br /><br />
 506                   Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/w/blabla) on
 507                   <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
 508                   to see if you instance is allowed.
 509                 </ng-container>
 510               </ng-template>
 511             </my-peertube-checkbox>
 512           </div>
 513
 514         </ng-container>
 515       </ng-container>
 516
 517     </div>
 518   </div>
 519 </ng-container>