aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+admin
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+admin')
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html32
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts3
-rw-r--r--client/src/app/+admin/config/shared/config.service.ts47
-rw-r--r--client/src/app/+admin/users/user-edit/user-create.component.ts4
-rw-r--r--client/src/app/+admin/users/user-edit/user-edit.component.html36
-rw-r--r--client/src/app/+admin/users/user-edit/user-edit.component.scss14
-rw-r--r--client/src/app/+admin/users/user-edit/user-edit.ts21
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 @@
402 <ng-container formGroupName="user"> 402 <ng-container formGroupName="user">
403 <div class="form-group"> 403 <div class="form-group">
404 <label i18n for="userVideoQuota">Default video quota per user</label> 404 <label i18n for="userVideoQuota">Default video quota per user</label>
405 <div class="peertube-select-container"> 405
406 <select id="userVideoQuota" formControlName="videoQuota" class="form-control"> 406 <my-select-custom-value
407 <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled"> 407 id="userVideoQuota"
408 {{ videoQuotaOption.label }} 408 [items]="videoQuotaOptions"
409 </option> 409 formControlName="videoQuota"
410 </select> 410 i18n-inputSuffix inputSuffix="bytes" inputType="number"
411 </div> 411 [clearable]="false"
412 ></my-select-custom-value>
413
412 <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div> 414 <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
413 </div> 415 </div>
414 416
415 <div class="form-group"> 417 <div class="form-group">
416 <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label> 418 <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
417 <div class="peertube-select-container"> 419
418 <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily" class="form-control"> 420 <my-select-custom-value
419 <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled"> 421 id="userVideoQuotaDaily"
420 {{ videoQuotaDailyOption.label }} 422 [items]="videoQuotaDailyOptions"
421 </option> 423 formControlName="videoQuotaDaily"
422 </select> 424 i18n-inputSuffix inputSuffix="bytes" inputType="number"
423 </div> 425 [clearable]="false"
426 ></my-select-custom-value>
427
424 <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div> 428 <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
425 </div> 429 </div>
426 </ng-container> 430 </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 {
19 TRANSCODING_THREADS_VALIDATOR 19 TRANSCODING_THREADS_VALIDATOR
20} from '@app/shared/form-validators/custom-config-validators' 20} from '@app/shared/form-validators/custom-config-validators'
21import { USER_VIDEO_QUOTA_DAILY_VALIDATOR, USER_VIDEO_QUOTA_VALIDATOR } from '@app/shared/form-validators/user-validators' 21import { USER_VIDEO_QUOTA_DAILY_VALIDATOR, USER_VIDEO_QUOTA_VALIDATOR } from '@app/shared/form-validators/user-validators'
22import { FormReactive, FormValidatorService, SelectOptionsItem } from '@app/shared/shared-forms' 22import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
23import { NgbNav } from '@ng-bootstrap/ng-bootstrap' 23import { NgbNav } from '@ng-bootstrap/ng-bootstrap'
24import { CustomConfig, ServerConfig } from '@shared/models' 24import { CustomConfig, ServerConfig } from '@shared/models'
25import { SelectOptionsItem } from 'src/types/select-options-item.model'
25 26
26@Component({ 27@Component({
27 selector: 'my-edit-custom-config', 28 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'
3import { Injectable } from '@angular/core' 3import { Injectable } from '@angular/core'
4import { RestExtractor } from '@app/core' 4import { RestExtractor } from '@app/core'
5import { CustomConfig } from '@shared/models' 5import { CustomConfig } from '@shared/models'
6import { SelectOptionsItem } from '../../../../types/select-options-item.model'
6import { environment } from '../../../../environments/environment' 7import { environment } from '../../../../environments/environment'
7 8
8@Injectable() 9@Injectable()
9export class ConfigService { 10export class ConfigService {
10 private static BASE_APPLICATION_URL = environment.apiUrl + '/api/v1/config' 11 private static BASE_APPLICATION_URL = environment.apiUrl + '/api/v1/config'
11 12
12 videoQuotaOptions: { value: number, label: string, disabled?: boolean }[] = [] 13 videoQuotaOptions: SelectOptionsItem[] = []
13 videoQuotaDailyOptions: { value: number, label: string, disabled?: boolean }[] = [] 14 videoQuotaDailyOptions: SelectOptionsItem[] = []
14 15
15 constructor ( 16 constructor (
16 private authHttp: HttpClient, 17 private authHttp: HttpClient,
17 private restExtractor: RestExtractor 18 private restExtractor: RestExtractor
18 ) { 19 ) {
19 this.videoQuotaOptions = [ 20 this.videoQuotaOptions = [
20 { value: undefined, label: 'Default quota', disabled: true }, 21 { id: -1, label: $localize`Unlimited` },
21 { value: -1, label: $localize`Unlimited` }, 22 { id: 0, label: $localize`None - no upload possible` },
22 { value: undefined, label: '─────', disabled: true }, 23 { id: 100 * 1024 * 1024, label: $localize`100MB` },
23 { value: 0, label: $localize`None - no upload possible` }, 24 { id: 500 * 1024 * 1024, label: $localize`500MB` },
24 { value: 100 * 1024 * 1024, label: $localize`100MB` }, 25 { id: 1024 * 1024 * 1024, label: $localize`1GB` },
25 { value: 500 * 1024 * 1024, label: $localize`500MB` }, 26 { id: 5 * 1024 * 1024 * 1024, label: $localize`5GB` },
26 { value: 1024 * 1024 * 1024, label: $localize`1GB` }, 27 { id: 20 * 1024 * 1024 * 1024, label: $localize`20GB` },
27 { value: 5 * 1024 * 1024 * 1024, label: $localize`5GB` }, 28 { id: 50 * 1024 * 1024 * 1024, label: $localize`50GB` },
28 { value: 20 * 1024 * 1024 * 1024, label: $localize`20GB` }, 29 { id: 100 * 1024 * 1024 * 1024, label: $localize`100GB` },
29 { value: 50 * 1024 * 1024 * 1024, label: $localize`50GB` } 30 { id: 200 * 1024 * 1024 * 1024, label: $localize`200GB` },
31 { id: 500 * 1024 * 1024 * 1024, label: $localize`500GB` }
30 ] 32 ]
31 33
32 this.videoQuotaDailyOptions = [ 34 this.videoQuotaDailyOptions = [
33 { value: undefined, label: 'Default daily upload limit', disabled: true }, 35 { id: -1, label: $localize`Unlimited` },
34 { value: -1, label: $localize`Unlimited` }, 36 { id: 0, label: $localize`None - no upload possible` },
35 { value: undefined, label: '─────', disabled: true }, 37 { id: 10 * 1024 * 1024, label: $localize`10MB` },
36 { value: 0, label: $localize`None - no upload possible` }, 38 { id: 50 * 1024 * 1024, label: $localize`50MB` },
37 { value: 10 * 1024 * 1024, label: $localize`10MB` }, 39 { id: 100 * 1024 * 1024, label: $localize`100MB` },
38 { value: 50 * 1024 * 1024, label: $localize`50MB` }, 40 { id: 500 * 1024 * 1024, label: $localize`500MB` },
39 { value: 100 * 1024 * 1024, label: $localize`100MB` }, 41 { id: 2 * 1024 * 1024 * 1024, label: $localize`2GB` },
40 { value: 500 * 1024 * 1024, label: $localize`500MB` }, 42 { id: 5 * 1024 * 1024 * 1024, label: $localize`5GB` },
41 { value: 2 * 1024 * 1024 * 1024, label: $localize`2GB` }, 43 { id: 10 * 1024 * 1024 * 1024, label: $localize`10GB` },
42 { value: 5 * 1024 * 1024 * 1024, label: $localize`5GB` } 44 { id: 20 * 1024 * 1024 * 1024, label: $localize`20GB` },
45 { id: 50 * 1024 * 1024 * 1024, label: $localize`50GB` }
43 ] 46 ]
44 } 47 }
45 48
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 {
45 45
46 const defaultValues = { 46 const defaultValues = {
47 role: UserRole.USER.toString(), 47 role: UserRole.USER.toString(),
48 videoQuota: '-1', 48 videoQuota: -1,
49 videoQuotaDaily: '-1' 49 videoQuotaDaily: -1
50 } 50 }
51 51
52 this.buildForm({ 52 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 @@
149 149
150 <div class="form-group"> 150 <div class="form-group">
151 <label i18n for="videoQuota">Video quota</label> 151 <label i18n for="videoQuota">Video quota</label>
152 <div class="peertube-select-container"> 152
153 <select id="videoQuota" formControlName="videoQuota" class="form-control"> 153 <my-select-custom-value
154 <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled"> 154 id="videoQuota"
155 {{ videoQuotaOption.label }} 155 [items]="videoQuotaOptions"
156 </option> 156 formControlName="videoQuota"
157 </select> 157 i18n-inputSuffix inputSuffix="bytes" inputType="number"
158 </div> 158 [clearable]="false"
159 ></my-select-custom-value>
159 160
160 <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()"> 161 <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
161 Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br /> 162 Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
162 At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}. 163 At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
163 </div> 164 </div>
165
166 <div *ngIf="formErrors.videoQuota" class="form-error">
167 {{ formErrors.videoQuota }}
168 </div>
164 </div> 169 </div>
165 170
166 <div class="form-group"> 171 <div class="form-group">
167 <label i18n for="videoQuotaDaily">Daily video quota</label> 172 <label i18n for="videoQuotaDaily">Daily video quota</label>
168 <div class="peertube-select-container"> 173
169 <select id="videoQuotaDaily" formControlName="videoQuotaDaily" class="form-control"> 174 <my-select-custom-value
170 <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled"> 175 id="videoQuotaDaily"
171 {{ videoQuotaDailyOption.label }} 176 [items]="videoQuotaDailyOptions"
172 </option> 177 formControlName="videoQuotaDaily"
173 </select> 178 i18n-inputSuffix inputSuffix="bytes" inputType="number"
179 [clearable]="false"
180 ></my-select-custom-value>
181
182 <div *ngIf="formErrors.videoQuotaDaily" class="form-error">
183 {{ formErrors.videoQuotaDaily }}
174 </div> 184 </div>
175 </div> 185 </div>
176 186
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 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4$form-base-input-width: 340px;
5
4label { 6label {
5 font-weight: $font-regular; 7 font-weight: $font-regular;
6 font-size: 100%; 8 font-size: 100%;
@@ -15,18 +17,24 @@ label {
15} 17}
16 18
17input:not([type=submit]) { 19input:not([type=submit]) {
18 @include peertube-input-text(340px); 20 @include peertube-input-text($form-base-input-width);
19 display: block; 21 display: block;
20} 22}
21 23
22my-input-toggle-hidden { 24my-input-toggle-hidden {
23 @include responsive-width(340px); 25 @include responsive-width($form-base-input-width);
24 26
25 display: block; 27 display: block;
26} 28}
27 29
28.peertube-select-container { 30.peertube-select-container {
29 @include peertube-select-container(340px); 31 @include peertube-select-container($form-base-input-width);
32}
33
34my-select-custom-value {
35 @include responsive-width($form-base-input-width);
36
37 display: block;
30} 38}
31 39
32input[type=submit], button { 40input[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'
4import { FormReactive } from '@app/shared/shared-forms' 4import { FormReactive } from '@app/shared/shared-forms'
5import { USER_ROLE_LABELS } from '@shared/core-utils/users' 5import { USER_ROLE_LABELS } from '@shared/core-utils/users'
6import { ServerConfig, UserAdminFlag, UserRole, VideoResolution } from '@shared/models' 6import { ServerConfig, UserAdminFlag, UserRole, VideoResolution } from '@shared/models'
7import { SelectOptionsItem } from '../../../../types/select-options-item.model'
7 8
8@Directive() 9@Directive()
9// tslint:disable-next-line: directive-class-suffix 10// tslint:disable-next-line: directive-class-suffix
10export abstract class UserEdit extends FormReactive implements OnInit { 11export abstract class UserEdit extends FormReactive implements OnInit {
11 videoQuotaOptions: { value: string, label: string, disabled?: boolean }[] = [] 12 videoQuotaOptions: SelectOptionsItem[] = []
12 videoQuotaDailyOptions: { value: string, label: string, disabled?: boolean }[] = [] 13 videoQuotaDailyOptions: SelectOptionsItem[] = []
13 username: string 14 username: string
14 user: User 15 user: User
15 16
@@ -97,19 +98,7 @@ export abstract class UserEdit extends FormReactive implements OnInit {
97 } 98 }
98 99
99 protected buildQuotaOptions () { 100 protected buildQuotaOptions () {
100 // These are used by a HTML select, so convert key into strings 101 this.videoQuotaOptions = this.configService.videoQuotaOptions
101 this.videoQuotaOptions = this.configService 102 this.videoQuotaDailyOptions = this.configService.videoQuotaDailyOptions
102 .videoQuotaOptions.map(q => ({
103 value: q.value?.toString(),
104 label: q.label,
105 disabled: q.disabled
106 }))
107
108 this.videoQuotaDailyOptions = this.configService
109 .videoQuotaDailyOptions.map(q => ({
110 value: q.value?.toString(),
111 label: q.label,
112 disabled: q.disabled
113 }))
114 } 103 }
115} 104}