client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
<ng-container [formGroup]="form">
<ng-container formGroupName="instance">
<div class="pt-two-cols mt-5"> <!-- instance grid -->
<div class="title-col">
<h2 i18n>INSTANCE</h2>
</div>
<div class="content-col">
<div class="form-group">
<label i18n for="avatarfile">Square icon</label>
<div class="label-small-info">
<p i18n class="mb-0">Square icon can be used on your custom homepage.</p>
</div>
<my-actor-avatar-edit
class="d-block mb-4"
actorType="account" previewImage="false" [username]="instanceName" displayUsername="false"
[avatars]="instanceAvatars" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
></my-actor-avatar-edit>
</div>
<div class="form-group">
<label i18n for="bannerfile">Banner</label>
<div class="label-small-info">
<p i18n class="mb-0">Banner is displayed in the about, login and registration pages and be used on your custom homepage.</p>
<p i18n>It can also be displayed on external websites to promote your instance, such as <a target="_blank" href="https://joinpeertube.org/instances">JoinPeerTube.org</a>.</p>
</div>
<my-actor-banner-edit
[previewImage]="false" class="d-block mb-4"
[bannerUrl]="instanceBannerUrl" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
></my-actor-banner-edit>
</div>
<div class="form-group">
<label i18n for="instanceName">Name</label>
<input
type="text" id="instanceName" class="form-control"
formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
>
<div *ngIf="formErrors.instance.name" class="form-error" role="alert">{{ formErrors.instance.name }}</div>
</div>
<div class="form-group">
<label i18n for="instanceShortDescription">Short description</label>
<textarea
id="instanceShortDescription" formControlName="shortDescription" class="form-control small"
[ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
></textarea>
<div *ngIf="formErrors.instance.shortDescription" class="form-error" role="alert">{{ formErrors.instance.shortDescription }}</div>
</div>
<div class="form-group">
<label i18n for="instanceDescription">Description</label>
<div class="label-small-info">
<my-custom-markup-help></my-custom-markup-help>
</div>
<my-markdown-textarea
inputId="instanceDescription" formControlName="description"
[customMarkdownRenderer]="getCustomMarkdownRenderer()" [debounceTime]="500"
[formError]="formErrors['instance.description']"
></my-markdown-textarea>
</div>
<div class="form-group">
<label i18n for="instanceCategories">Main instance categories</label>
<div>
<my-select-checkbox
inputId="instanceCategories"
formControlName="categories" [availableItems]="categoryItems"
[selectableGroup]="false"
i18n-placeholder placeholder="Add a new category"
>
</my-select-checkbox>
</div>
</div>
<div class="form-group">
<label i18n for="instanceLanguages">Main languages you/your moderators speak</label>
<div>
<my-select-checkbox
inputId="instanceLanguages"
formControlName="languages" [availableItems]="languageItems"
[selectableGroup]="false"
i18n-placeholder placeholder="Add a new language"
>
</my-select-checkbox>
</div>
</div>
</div>
</div>
<div class="pt-two-cols mt-4"> <!-- moderation & nsfw grid -->
<div class="title-col">
<h2 i18n>MODERATION & NSFW</h2>
<div i18n class="inner-form-description">
Manage <a class="link-orange" routerLink="/admin/users">users</a> to build a moderation team.
</div>
</div>
<div class="content-col">
<div class="form-group">
<my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
<ng-template ptTemplate="label">
<ng-container i18n>This instance is dedicated to sensitive or NSFW content</ng-container>
</ng-template>
<ng-template ptTemplate="help">
<ng-container i18n>
Enabling it will allow other administrators to know that you are mainly federating sensitive content.<br />
Moreover, the NSFW checkbox on video upload will be automatically checked by default.
</ng-container>
</ng-template>
</my-peertube-checkbox>
</div>
<div class="form-group">
<label i18n for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label>
<my-help>
<ng-template ptTemplate="customHtml">
<ng-container i18n>
With <strong>Hide</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
</ng-container>
</ng-template>
</my-help>
<div class="peertube-select-container">
<select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy" class="form-control">
<option i18n value="do_not_list">Hide</option>
<option i18n value="blur">Blur thumbnails</option>
<option i18n value="display">Display</option>
</select>
</div>
<div *ngIf="formErrors.instance.defaultNSFWPolicy" class="form-error" role="alert">{{ formErrors.instance.defaultNSFWPolicy }}</div>
</div>
<div class="form-group">
<label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
<my-markdown-textarea
inputId="instanceTerms" formControlName="terms" markdownType="enhanced"
[formError]="formErrors['instance.terms']"
></my-markdown-textarea>
</div>
<div class="form-group">
<label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
<my-markdown-textarea
inputId="instanceCodeOfConduct" formControlName="codeOfConduct" markdownType="enhanced"
[formError]="formErrors['instance.codeOfConduct']"
></my-markdown-textarea>
</div>
<div class="form-group">
<label i18n for="instanceModerationInformation">Moderation information</label><my-help helpType="markdownText"></my-help>
<div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
<my-markdown-textarea
inputId="instanceModerationInformation" formControlName="moderationInformation" markdownType="enhanced"
[formError]="formErrors['instance.moderationInformation']"
></my-markdown-textarea>
</div>
</div>
</div>
<div class="pt-two-cols mt-4"> <!-- you and your instance grid -->
<div class="title-col">
<h2 i18n>YOU AND YOUR INSTANCE</h2>
</div>
<div class="content-col">
<div class="form-group">
<label i18n for="instanceAdministrator">Who is behind the instance?</label><my-help helpType="markdownText"></my-help>
<div i18n class="label-small-info">A single person? A non-profit? A company?</div>
<my-markdown-textarea
inputId="instanceAdministrator" formControlName="administrator" markdownType="enhanced"
[formError]="formErrors['instance.administrator']"
></my-markdown-textarea>
</div>
<div class="form-group">
<label i18n for="instanceCreationReason">Why did you create this instance?</label><my-help helpType="markdownText"></my-help>
<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
inputId="instanceCreationReason" formControlName="creationReason" markdownType="enhanced"
[formError]="formErrors['instance.creationReason']"
></my-markdown-textarea>
</div>
<div class="form-group">
<label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label><my-help helpType="markdownText"></my-help>
<div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
<my-markdown-textarea
inputId="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" markdownType="enhanced"
[formError]="formErrors['instance.maintenanceLifetime']"
></my-markdown-textarea>
</div>
<div class="form-group">
<label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label><my-help helpType="markdownText"></my-help>
<div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
<my-markdown-textarea
inputId="instanceBusinessModel" formControlName="businessModel" markdownType="enhanced"
[formError]="formErrors['instance.businessModel']"
></my-markdown-textarea>
</div>
</div>
</div>
<div class="pt-two-cols mt-4"> <!-- other information grid -->
<div class="title-col">
<h2 i18n>OTHER INFORMATION</h2>
</div>
<div class="content-col">
<div class="form-group">
<label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>
<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
inputId="instanceHardwareInformation" formControlName="hardwareInformation" markdownType="enhanced"
[formError]="formErrors['instance.hardwareInformation']"
></my-markdown-textarea>
</div>
</div>
</div>
</ng-container>
</ng-container>