4 files changed, 41 insertions, 34 deletions

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
   }
 }