Add ability to set a custom quota

[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / users / user-edit / user-edit.component.html

diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index d103f8e2f7d31a065a6da05f278f257b0f238c2c..243c6556a5dd9bfd978c6214d2a5e198112771c1 100644 (file)
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -60,7 +60,7 @@
 <div class="form-row" *ngIf="!isInBigView()"> <!-- hidden on large screens, as it is then displayed on the right side of the form -->
   <div class="col-12 col-xl-3"></div>
 
-  <div class="form-group-right col-12 col-xl-9">
+  <div class="col-12 col-xl-9">
     <ng-template *ngTemplateOutlet="dashboard"></ng-template>
   </div>
 </div>
@@ -76,7 +76,7 @@
     </div>
   </div>
 
-  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
+  <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
 
     <form role="form" (ngSubmit)="formValidated()" [formGroup]="form" [ngClass]="{ 'col-5': isInBigView() }">
       <div class="form-group" *ngIf="isCreation()">
@@ -90,6 +90,17 @@
         </div>
       </div>
 
+      <div class="form-group" *ngIf="isCreation()">
+        <label i18n for="channelName">Channel name</label>
+        <input
+          type="text" id="channelName" i18n-placeholder placeholder="john_channel" class="form-control"
+          formControlName="channelName" [ngClass]="{ 'input-error': formErrors['channelName'] }"
+        >
+        <div *ngIf="formErrors.channelName" class="form-error">
+          {{ formErrors.channelName }}
+        </div>
+      </div>
+
       <div class="form-group">
         <label i18n for="email">Email</label>
         <input
@@ -111,10 +122,11 @@
             </ng-container>
           </ng-template>
         </my-help>
-        <input
-          type="password" id="password" autocomplete="new-password" class="form-control"
-          formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
-        >
+
+        <my-input-toggle-hidden
+          formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
+        ></my-input-toggle-hidden>
+
         <div *ngIf="formErrors.password" class="form-error">
           {{ formErrors.password }}
         </div>
@@ -137,27 +149,48 @@
 
       <div class="form-group">
         <label i18n for="videoQuota">Video quota</label>
-        <div class="peertube-select-container">
-          <select id="videoQuota" formControlName="videoQuota" class="form-control">
-            <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled">
-              {{ videoQuotaOption.label }}
-            </option>
-          </select>
-        </div>
+
+        <my-select-custom-value
+          id="videoQuota"
+          [items]="videoQuotaOptions"
+          formControlName="videoQuota"
+          i18n-inputSuffix inputSuffix="bytes" inputType="number"
+          [clearable]="false"
+        ></my-select-custom-value>
 
         <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
           Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
           At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
         </div>
+
+        <div *ngIf="formErrors.videoQuota" class="form-error">
+          {{ formErrors.videoQuota }}
+        </div>
       </div>
 
       <div class="form-group">
         <label i18n for="videoQuotaDaily">Daily video quota</label>
+
+        <my-select-custom-value
+          id="videoQuotaDaily"
+          [items]="videoQuotaDailyOptions"
+          formControlName="videoQuotaDaily"
+          i18n-inputSuffix inputSuffix="bytes" inputType="number"
+          [clearable]="false"
+        ></my-select-custom-value>
+
+        <div *ngIf="formErrors.videoQuotaDaily" class="form-error">
+          {{ formErrors.videoQuotaDaily }}
+        </div>
+      </div>
+
+      <div class="form-group" *ngIf="!isCreation() && getAuthPlugins().length !== 0">
+        <label i18n for="pluginAuth">Auth plugin</label>
+
         <div class="peertube-select-container">
-          <select id="videoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
-            <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
-              {{ videoQuotaDailyOption.label }}
-            </option>
+          <select id="pluginAuth" formControlName="pluginAuth" class="form-control">
+            <option [value]="null" i18n>None (local authentication)</option>
+            <option *ngFor="let authPlugin of getAuthPlugins()" [value]="authPlugin">{{ authPlugin }}</option>
           </select>
         </div>
       </div>
@@ -186,7 +219,7 @@
     <div i18n class="account-title account-title-danger">DANGER ZONE</div>
   </div>
 
-  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
+  <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
 
     <div class="danger-zone">
       <div class="form-group reset-password-email">