Add ability to set a custom quota

7 files changed, 86 insertions, 71 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 844620ca2..637203b96 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -402,25 +402,29 @@
             <ng-container formGroupName="user">
               <div class="form-group">
                 <label i18n for="userVideoQuota">Default video quota per user</label>
-                <div class="peertube-select-container">
-                  <select id="userVideoQuota" 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="userVideoQuota"
+                  [items]="videoQuotaOptions"
+                  formControlName="videoQuota"
+                  i18n-inputSuffix inputSuffix="bytes" inputType="number"
+                  [clearable]="false"
+                ></my-select-custom-value>
+
                 <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
               </div>
 
               <div class="form-group">
                 <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
-                <div class="peertube-select-container">
-                  <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
-                    <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
-                      {{ videoQuotaDailyOption.label }}
-                    </option>
-                  </select>
-                </div>
+
+                <my-select-custom-value
+                  id="userVideoQuotaDaily"
+                  [items]="videoQuotaDailyOptions"
+                  formControlName="videoQuotaDaily"
+                  i18n-inputSuffix inputSuffix="bytes" inputType="number"
+                  [clearable]="false"
+                ></my-select-custom-value>
+
                 <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
               </div>
             </ng-container>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index a9f72d7db..56be97e84 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -19,9 +19,10 @@ import {
   TRANSCODING_THREADS_VALIDATOR
 } from '@app/shared/form-validators/custom-config-validators'
 import { USER_VIDEO_QUOTA_DAILY_VALIDATOR, USER_VIDEO_QUOTA_VALIDATOR } from '@app/shared/form-validators/user-validators'
-import { FormReactive, FormValidatorService, SelectOptionsItem } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { NgbNav } from '@ng-bootstrap/ng-bootstrap'
 import { CustomConfig, ServerConfig } from '@shared/models'
+import { SelectOptionsItem } from 'src/types/select-options-item.model'
 
 @Component({
   selector: 'my-edit-custom-config',
diff --git a/client/src/app/+admin/config/shared/config.service.ts b/client/src/app/+admin/config/shared/config.service.ts
index 5f98aa545..d29b752f7 100644
--- a/client/src/app/+admin/config/shared/config.service.ts
+++ b/client/src/app/+admin/config/shared/config.service.ts
@@ -3,43 +3,46 @@ import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { RestExtractor } from '@app/core'
 import { CustomConfig } from '@shared/models'
+import { SelectOptionsItem } from '../../../../types/select-options-item.model'
 import { environment } from '../../../../environments/environment'
 
 @Injectable()
 export class ConfigService {
   private static BASE_APPLICATION_URL = environment.apiUrl + '/api/v1/config'
 
-  videoQuotaOptions: { value: number, label: string, disabled?: boolean }[] = []
-  videoQuotaDailyOptions: { value: number, label: string, disabled?: boolean }[] = []
+  videoQuotaOptions: SelectOptionsItem[] = []
+  videoQuotaDailyOptions: SelectOptionsItem[] = []
 
   constructor (
     private authHttp: HttpClient,
     private restExtractor: RestExtractor
     ) {
     this.videoQuotaOptions = [
-      { value: undefined, label: 'Default quota', disabled: true },
-      { value: -1, label: $localize`Unlimited` },
-      { value: undefined, label: '─────', disabled: true },
-      { value: 0, label: $localize`None - no upload possible` },
-      { value: 100 * 1024 * 1024, label: $localize`100MB` },
-      { value: 500 * 1024 * 1024, label: $localize`500MB` },
-      { value: 1024 * 1024 * 1024, label: $localize`1GB` },
-      { value: 5 * 1024 * 1024 * 1024, label: $localize`5GB` },
-      { value: 20 * 1024 * 1024 * 1024, label: $localize`20GB` },
-      { value: 50 * 1024 * 1024 * 1024, label: $localize`50GB` }
+      { id: -1, label: $localize`Unlimited` },
+      { id: 0, label: $localize`None - no upload possible` },
+      { id: 100 * 1024 * 1024, label: $localize`100MB` },
+      { id: 500 * 1024 * 1024, label: $localize`500MB` },
+      { id: 1024 * 1024 * 1024, label: $localize`1GB` },
+      { id: 5 * 1024 * 1024 * 1024, label: $localize`5GB` },
+      { id: 20 * 1024 * 1024 * 1024, label: $localize`20GB` },
+      { id: 50 * 1024 * 1024 * 1024, label: $localize`50GB` },
+      { id: 100 * 1024 * 1024 * 1024, label: $localize`100GB` },
+      { id: 200 * 1024 * 1024 * 1024, label: $localize`200GB` },
+      { id: 500 * 1024 * 1024 * 1024, label: $localize`500GB` }
     ]
 
     this.videoQuotaDailyOptions = [
-      { value: undefined, label: 'Default daily upload limit', disabled: true },
-      { value: -1, label: $localize`Unlimited` },
-      { value: undefined, label: '─────', disabled: true },
-      { value: 0, label: $localize`None - no upload possible` },
-      { value: 10 * 1024 * 1024, label: $localize`10MB` },
-      { value: 50 * 1024 * 1024, label: $localize`50MB` },
-      { value: 100 * 1024 * 1024, label: $localize`100MB` },
-      { value: 500 * 1024 * 1024, label: $localize`500MB` },
-      { value: 2 * 1024 * 1024 * 1024, label: $localize`2GB` },
-      { value: 5 * 1024 * 1024 * 1024, label: $localize`5GB` }
+      { id: -1, label: $localize`Unlimited` },
+      { id: 0, label: $localize`None - no upload possible` },
+      { id: 10 * 1024 * 1024, label: $localize`10MB` },
+      { id: 50 * 1024 * 1024, label: $localize`50MB` },
+      { id: 100 * 1024 * 1024, label: $localize`100MB` },
+      { id: 500 * 1024 * 1024, label: $localize`500MB` },
+      { id: 2 * 1024 * 1024 * 1024, label: $localize`2GB` },
+      { id: 5 * 1024 * 1024 * 1024, label: $localize`5GB` },
+      { id: 10 * 1024 * 1024 * 1024, label: $localize`10GB` },
+      { id: 20 * 1024 * 1024 * 1024, label: $localize`20GB` },
+      { id: 50 * 1024 * 1024 * 1024, label: $localize`50GB` }
     ]
   }
 
diff --git a/client/src/app/+admin/users/user-edit/user-create.component.ts b/client/src/app/+admin/users/user-edit/user-create.component.ts
index d0aac1cb9..da333240c 100644
--- a/client/src/app/+admin/users/user-edit/user-create.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-create.component.ts
@@ -45,8 +45,8 @@ export class UserCreateComponent extends UserEdit implements OnInit {
 
     const defaultValues = {
       role: UserRole.USER.toString(),
-      videoQuota: '-1',
-      videoQuotaDaily: '-1'
+      videoQuota: -1,
+      videoQuotaDaily: -1
     }
 
     this.buildForm({
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 fb34d6b22..243c6556a 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -149,28 +149,38 @@
 
       <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>
-        <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>
+
+        <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>
 
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss
index 3b7715062..aa87b8d6d 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss
@@ -1,6 +1,8 @@
 @import '_variables';
 @import '_mixins';
 
+$form-base-input-width: 340px;
+
 label {
   font-weight: $font-regular;
   font-size: 100%;
@@ -15,18 +17,24 @@ label {
 }
 
 input:not([type=submit]) {
-  @include peertube-input-text(340px);
+  @include peertube-input-text($form-base-input-width);
   display: block;
 }
 
 my-input-toggle-hidden {
-  @include responsive-width(340px);
+  @include responsive-width($form-base-input-width);
 
   display: block;
 }
 
 .peertube-select-container {
-  @include peertube-select-container(340px);
+  @include peertube-select-container($form-base-input-width);
+}
+
+my-select-custom-value {
+  @include responsive-width($form-base-input-width);
+
+  display: block;
 }
 
 input[type=submit], button {
diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts
index faa2f5ad8..2fc3c5d3b 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@@ -4,12 +4,13 @@ import { AuthService, ScreenService, ServerService, User } from '@app/core'
 import { FormReactive } from '@app/shared/shared-forms'
 import { USER_ROLE_LABELS } from '@shared/core-utils/users'
 import { ServerConfig, UserAdminFlag, UserRole, VideoResolution } from '@shared/models'
+import { SelectOptionsItem } from '../../../../types/select-options-item.model'
 
 @Directive()
 // tslint:disable-next-line: directive-class-suffix
 export abstract class UserEdit extends FormReactive implements OnInit {
-  videoQuotaOptions: { value: string, label: string, disabled?: boolean }[] = []
-  videoQuotaDailyOptions: { value: string, label: string, disabled?: boolean }[] = []
+  videoQuotaOptions: SelectOptionsItem[] = []
+  videoQuotaDailyOptions: SelectOptionsItem[] = []
   username: string
   user: User
 
@@ -97,19 +98,7 @@ export abstract class UserEdit extends FormReactive implements OnInit {
   }
 
   protected buildQuotaOptions () {
-    // These are used by a HTML select, so convert key into strings
-    this.videoQuotaOptions = this.configService
-                                 .videoQuotaOptions.map(q => ({
-                                   value: q.value?.toString(),
-                                   label: q.label,
-                                   disabled: q.disabled
-                                 }))
-
-    this.videoQuotaDailyOptions = this.configService
-                                      .videoQuotaDailyOptions.map(q => ({
-                                        value: q.value?.toString(),
-                                        label: q.label,
-                                        disabled: q.disabled
-                                      }))
+    this.videoQuotaOptions = this.configService.videoQuotaOptions
+    this.videoQuotaDailyOptions = this.configService.videoQuotaDailyOptions
   }
 }