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 0454df7b70559e1d85a70278f31cb9e164e98638..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
@@ -37,14 +37,14 @@
       </a>
     </div>
     <div>
-      <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:' + user?.account.displayName }">
-        <div class="dashboard-num">{{ user.videoAbusesCount }}</div>
+      <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' + user?.account.displayName + '&quot;' }">
+        <div class="dashboard-num">{{ user.abusesCount }}</div>
         <div class="dashboard-label" i18n>Incriminated in reports</div>
       </a>
     </div>
     <div>
-      <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:' + user?.account.displayName + ' state:accepted' }">
-        <div class="dashboard-num">{{ user.videoAbusesAcceptedCount }} / {{ user.videoAbusesCreatedCount }}</div>
+      <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'reporter:&quot;' + user?.account.displayName + '&quot; state:accepted' }">
+        <div class="dashboard-num">{{ user.abusesAcceptedCount }} / {{ user.abusesCreatedCount }}</div>
         <div class="dashboard-label" i18n>Authored reports accepted</div>
       </a>
     </div>
@@ -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()">
@@ -89,19 +89,30 @@
           {{ formErrors.username }}
         </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
           type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control"
           formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
-          autocomplete="off"
+          autocomplete="off" [readonly]="user && user.pluginAuth !== null"
         >
         <div *ngIf="formErrors.email" class="form-error">
           {{ formErrors.email }}
         </div>
       </div>
-  
+
       <div class="form-group" *ngIf="isCreation()">
         <label i18n for="password">Password</label>
         <my-help *ngIf="isPasswordOptional()">
@@ -111,15 +122,16 @@
             </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>
       </div>
-  
+
       <div class="form-group">
         <label i18n for="role">Role</label>
         <div class="peertube-select-container">
@@ -129,46 +141,67 @@
               </option>
             </select>
         </div>
-  
+
         <div *ngIf="formErrors.role" class="form-error">
           {{ formErrors.role }}
         </div>
       </div>
-  
+
       <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>
-  
+
       <div class="form-group">
         <my-peertube-checkbox
           inputName="byPassAutoBlock" formControlName="byPassAutoBlock"
           i18n-labelText labelText="Doesn't need review before a video goes public"
         ></my-peertube-checkbox>
       </div>
-  
+
       <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
     </form>
 
@@ -180,13 +213,13 @@
 </div>
 
 
-<div *ngIf="!isCreation() && user" class="form-row mt-4"> <!-- danger zone grid -->
+<div *ngIf="!isCreation() && user && user.pluginAuth === null" class="form-row mt-4"> <!-- danger zone grid -->
   <div class="form-group col-12 col-lg-4 col-xl-3">
     <div class="anchor" id="danger"></div> <!-- danger zone anchor -->
-    <div i18n class="account-title">DANGER ZONE</div>
+    <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">