diff options
author | Chocobozzz <me@florianbigard.com> | 2021-10-27 09:36:37 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2021-10-29 11:48:21 +0200 |
commit | 00004f7f6b966a975498612117212b5373f4103c (patch) | |
tree | 4899b77da3c55bf1fbb77f927d9da5cd873e2c2a /client/src/app/+admin/overview/users | |
parent | bd898dd76babf6ab33a0040297bfb40a69a69dda (diff) | |
download | PeerTube-00004f7f6b966a975498612117212b5373f4103c.tar.gz PeerTube-00004f7f6b966a975498612117212b5373f4103c.tar.zst PeerTube-00004f7f6b966a975498612117212b5373f4103c.zip |
Put admin users in overview tab
Diffstat (limited to 'client/src/app/+admin/overview/users')
15 files changed, 1286 insertions, 0 deletions
diff --git a/client/src/app/+admin/overview/users/index.ts b/client/src/app/+admin/overview/users/index.ts new file mode 100644 index 000000000..6f15ab578 --- /dev/null +++ b/client/src/app/+admin/overview/users/index.ts | |||
@@ -0,0 +1,3 @@ | |||
1 | export * from './user-edit' | ||
2 | export * from './user-list' | ||
3 | export * from './users.routes' | ||
diff --git a/client/src/app/+admin/overview/users/user-edit/index.ts b/client/src/app/+admin/overview/users/user-edit/index.ts new file mode 100644 index 000000000..ec734ef92 --- /dev/null +++ b/client/src/app/+admin/overview/users/user-edit/index.ts | |||
@@ -0,0 +1,3 @@ | |||
1 | export * from './user-create.component' | ||
2 | export * from './user-update.component' | ||
3 | export * from './user-password.component' | ||
diff --git a/client/src/app/+admin/overview/users/user-edit/user-create.component.ts b/client/src/app/+admin/overview/users/user-edit/user-create.component.ts new file mode 100644 index 000000000..b61b22fd0 --- /dev/null +++ b/client/src/app/+admin/overview/users/user-edit/user-create.component.ts | |||
@@ -0,0 +1,98 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | ||
2 | import { Router } from '@angular/router' | ||
3 | import { ConfigService } from '@app/+admin/config/shared/config.service' | ||
4 | import { AuthService, Notifier, ScreenService, ServerService, UserService } from '@app/core' | ||
5 | import { | ||
6 | USER_CHANNEL_NAME_VALIDATOR, | ||
7 | USER_EMAIL_VALIDATOR, | ||
8 | USER_PASSWORD_OPTIONAL_VALIDATOR, | ||
9 | USER_PASSWORD_VALIDATOR, | ||
10 | USER_ROLE_VALIDATOR, | ||
11 | USER_USERNAME_VALIDATOR, | ||
12 | USER_VIDEO_QUOTA_DAILY_VALIDATOR, | ||
13 | USER_VIDEO_QUOTA_VALIDATOR | ||
14 | } from '@app/shared/form-validators/user-validators' | ||
15 | import { FormValidatorService } from '@app/shared/shared-forms' | ||
16 | import { UserCreate, UserRole } from '@shared/models' | ||
17 | import { UserEdit } from './user-edit' | ||
18 | |||
19 | @Component({ | ||
20 | selector: 'my-user-create', | ||
21 | templateUrl: './user-edit.component.html', | ||
22 | styleUrls: [ './user-edit.component.scss' ] | ||
23 | }) | ||
24 | export class UserCreateComponent extends UserEdit implements OnInit { | ||
25 | error: string | ||
26 | |||
27 | constructor ( | ||
28 | protected serverService: ServerService, | ||
29 | protected formValidatorService: FormValidatorService, | ||
30 | protected configService: ConfigService, | ||
31 | protected screenService: ScreenService, | ||
32 | protected auth: AuthService, | ||
33 | private router: Router, | ||
34 | private notifier: Notifier, | ||
35 | private userService: UserService | ||
36 | ) { | ||
37 | super() | ||
38 | |||
39 | this.buildQuotaOptions() | ||
40 | } | ||
41 | |||
42 | ngOnInit () { | ||
43 | super.ngOnInit() | ||
44 | |||
45 | const defaultValues = { | ||
46 | role: UserRole.USER.toString(), | ||
47 | videoQuota: -1, | ||
48 | videoQuotaDaily: -1 | ||
49 | } | ||
50 | |||
51 | this.buildForm({ | ||
52 | username: USER_USERNAME_VALIDATOR, | ||
53 | channelName: USER_CHANNEL_NAME_VALIDATOR, | ||
54 | email: USER_EMAIL_VALIDATOR, | ||
55 | password: this.isPasswordOptional() ? USER_PASSWORD_OPTIONAL_VALIDATOR : USER_PASSWORD_VALIDATOR, | ||
56 | role: USER_ROLE_VALIDATOR, | ||
57 | videoQuota: USER_VIDEO_QUOTA_VALIDATOR, | ||
58 | videoQuotaDaily: USER_VIDEO_QUOTA_DAILY_VALIDATOR, | ||
59 | byPassAutoBlock: null | ||
60 | }, defaultValues) | ||
61 | } | ||
62 | |||
63 | formValidated () { | ||
64 | this.error = undefined | ||
65 | |||
66 | const userCreate: UserCreate = this.form.value | ||
67 | |||
68 | userCreate.adminFlags = this.buildAdminFlags(this.form.value) | ||
69 | |||
70 | // A select in HTML is always mapped as a string, we convert it to number | ||
71 | userCreate.videoQuota = parseInt(this.form.value['videoQuota'], 10) | ||
72 | userCreate.videoQuotaDaily = parseInt(this.form.value['videoQuotaDaily'], 10) | ||
73 | |||
74 | this.userService.addUser(userCreate) | ||
75 | .subscribe({ | ||
76 | next: () => { | ||
77 | this.notifier.success($localize`User ${userCreate.username} created.`) | ||
78 | this.router.navigate([ '/admin/users/list' ]) | ||
79 | }, | ||
80 | |||
81 | error: err => { | ||
82 | this.error = err.message | ||
83 | } | ||
84 | }) | ||
85 | } | ||
86 | |||
87 | isCreation () { | ||
88 | return true | ||
89 | } | ||
90 | |||
91 | isPasswordOptional () { | ||
92 | return this.serverConfig.email.enabled | ||
93 | } | ||
94 | |||
95 | getFormButtonTitle () { | ||
96 | return $localize`Create user` | ||
97 | } | ||
98 | } | ||
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html new file mode 100644 index 000000000..772ebf272 --- /dev/null +++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html | |||
@@ -0,0 +1,237 @@ | |||
1 | <nav aria-label="breadcrumb"> | ||
2 | <ol class="breadcrumb"> | ||
3 | <li class="breadcrumb-item"> | ||
4 | <a routerLink="/admin/users" i18n>Users</a> | ||
5 | </li> | ||
6 | |||
7 | <ng-container *ngIf="isCreation()"> | ||
8 | <li class="breadcrumb-item active" i18n>Create</li> | ||
9 | </ng-container> | ||
10 | <ng-container *ngIf="!isCreation()"> | ||
11 | <li class="breadcrumb-item active" i18n>Edit</li> | ||
12 | <li class="breadcrumb-item active" aria-current="page"> | ||
13 | <a *ngIf="user" [routerLink]="[ '/a', user?.username ]">{{ user?.username }}</a> | ||
14 | </li> | ||
15 | </ng-container> | ||
16 | </ol> | ||
17 | </nav> | ||
18 | |||
19 | <ng-template #dashboard> | ||
20 | <div *ngIf="!isCreation() && user" class="dashboard"> | ||
21 | <div> | ||
22 | <a> | ||
23 | <div class="dashboard-num">{{ user.videosCount }} ({{ user.videoQuotaUsed | bytes: 0 }})</div> | ||
24 | <div class="dashboard-label" i18n>{user.videosCount, plural, =1 {Video} other {Videos}}</div> | ||
25 | </a> | ||
26 | </div> | ||
27 | <div> | ||
28 | <a> | ||
29 | <div class="dashboard-num">{{ user.videoChannels.length || 0 }}</div> | ||
30 | <div class="dashboard-label" i18n>{user.videoChannels.length, plural, =1 {Channel} other {Channels}}</div> | ||
31 | </a> | ||
32 | </div> | ||
33 | <div> | ||
34 | <a> | ||
35 | <div class="dashboard-num">{{ subscribersCount }}</div> | ||
36 | <div class="dashboard-label" i18n>{subscribersCount, plural, =1 {Subscriber} other {Subscribers}}</div> | ||
37 | </a> | ||
38 | </div> | ||
39 | <div> | ||
40 | <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'reportee:"' + user?.account.displayName + '"' }"> | ||
41 | <div class="dashboard-num">{{ user.abusesCount }}</div> | ||
42 | <div class="dashboard-label" i18n>Incriminated in reports</div> | ||
43 | </a> | ||
44 | </div> | ||
45 | <div> | ||
46 | <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'reporter:"' + user?.account.displayName + '" state:accepted' }"> | ||
47 | <div class="dashboard-num">{{ user.abusesAcceptedCount }} / {{ user.abusesCreatedCount }}</div> | ||
48 | <div class="dashboard-label" i18n>Authored reports accepted</div> | ||
49 | </a> | ||
50 | </div> | ||
51 | <div> | ||
52 | <a> | ||
53 | <div class="dashboard-num">{{ user.videoCommentsCount }}</div> | ||
54 | <div class="dashboard-label" i18n>{user.videoCommentsCount, plural, =1 {Comment} other {Comments}}</div> | ||
55 | </a> | ||
56 | </div> | ||
57 | </div> | ||
58 | </ng-template> | ||
59 | |||
60 | <div class="form-row" *ngIf="!isInBigView()"> <!-- hidden on large screens, as it is then displayed on the right side of the form --> | ||
61 | <div class="col-12 col-xl-3"></div> | ||
62 | |||
63 | <div class="col-12 col-xl-9"> | ||
64 | <ng-template *ngTemplateOutlet="dashboard"></ng-template> | ||
65 | </div> | ||
66 | </div> | ||
67 | |||
68 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | ||
69 | |||
70 | <div class="form-row mt-4"> <!-- user grid --> | ||
71 | <div class="form-group col-12 col-lg-4 col-xl-3"> | ||
72 | <div class="anchor" id="user"></div> <!-- user anchor --> | ||
73 | <div *ngIf="isCreation()" class="account-title" i18n>NEW USER</div> | ||
74 | <div *ngIf="!isCreation() && user" class="account-title"> | ||
75 | <my-actor-avatar-edit [actor]="user.account" [editable]="false" [displaySubscribers]="false" [displayUsername]="false"></my-actor-avatar-edit> | ||
76 | </div> | ||
77 | </div> | ||
78 | |||
79 | <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }"> | ||
80 | |||
81 | <form role="form" (ngSubmit)="formValidated()" [formGroup]="form" [ngClass]="{ 'col-5': isInBigView() }"> | ||
82 | <div class="form-group" *ngIf="isCreation()"> | ||
83 | <label i18n for="username">Username</label> | ||
84 | <input | ||
85 | type="text" id="username" i18n-placeholder placeholder="john" class="form-control" | ||
86 | formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" | ||
87 | > | ||
88 | <div *ngIf="formErrors.username" class="form-error"> | ||
89 | {{ formErrors.username }} | ||
90 | </div> | ||
91 | </div> | ||
92 | |||
93 | <div class="form-group" *ngIf="isCreation()"> | ||
94 | <label i18n for="channelName">Channel name</label> | ||
95 | <input | ||
96 | type="text" id="channelName" i18n-placeholder placeholder="john_channel" class="form-control" | ||
97 | formControlName="channelName" [ngClass]="{ 'input-error': formErrors['channelName'] }" | ||
98 | > | ||
99 | <div *ngIf="formErrors.channelName" class="form-error"> | ||
100 | {{ formErrors.channelName }} | ||
101 | </div> | ||
102 | </div> | ||
103 | |||
104 | <div class="form-group"> | ||
105 | <label i18n for="email">Email</label> | ||
106 | <input | ||
107 | type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control" | ||
108 | formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }" | ||
109 | autocomplete="off" [readonly]="user && user.pluginAuth !== null" | ||
110 | > | ||
111 | <div *ngIf="formErrors.email" class="form-error"> | ||
112 | {{ formErrors.email }} | ||
113 | </div> | ||
114 | </div> | ||
115 | |||
116 | <div class="form-group" *ngIf="isCreation()"> | ||
117 | <label i18n for="password">Password</label> | ||
118 | <my-help *ngIf="isPasswordOptional()"> | ||
119 | <ng-template ptTemplate="customHtml"> | ||
120 | <ng-container i18n> | ||
121 | If you leave the password empty, an email will be sent to the user. | ||
122 | </ng-container> | ||
123 | </ng-template> | ||
124 | </my-help> | ||
125 | |||
126 | <my-input-toggle-hidden | ||
127 | formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password" | ||
128 | ></my-input-toggle-hidden> | ||
129 | |||
130 | <div *ngIf="formErrors.password" class="form-error"> | ||
131 | {{ formErrors.password }} | ||
132 | </div> | ||
133 | </div> | ||
134 | |||
135 | <div class="form-group"> | ||
136 | <label i18n for="role">Role</label> | ||
137 | <div class="peertube-select-container"> | ||
138 | <select id="role" formControlName="role" class="form-control"> | ||
139 | <option *ngFor="let role of roles" [value]="role.value"> | ||
140 | {{ role.label }} | ||
141 | </option> | ||
142 | </select> | ||
143 | </div> | ||
144 | |||
145 | <div *ngIf="formErrors.role" class="form-error"> | ||
146 | {{ formErrors.role }} | ||
147 | </div> | ||
148 | </div> | ||
149 | |||
150 | <div class="form-group"> | ||
151 | <label i18n for="videoQuota">Video quota</label> | ||
152 | |||
153 | <my-select-custom-value | ||
154 | id="videoQuota" | ||
155 | [items]="videoQuotaOptions" | ||
156 | formControlName="videoQuota" | ||
157 | i18n-inputSuffix inputSuffix="bytes" inputType="number" | ||
158 | [clearable]="false" | ||
159 | ></my-select-custom-value> | ||
160 | |||
161 | <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()"> | ||
162 | Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br /> | ||
163 | At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}. | ||
164 | </div> | ||
165 | |||
166 | <div *ngIf="formErrors.videoQuota" class="form-error"> | ||
167 | {{ formErrors.videoQuota }} | ||
168 | </div> | ||
169 | </div> | ||
170 | |||
171 | <div class="form-group"> | ||
172 | <label i18n for="videoQuotaDaily">Daily video quota</label> | ||
173 | |||
174 | <my-select-custom-value | ||
175 | id="videoQuotaDaily" | ||
176 | [items]="videoQuotaDailyOptions" | ||
177 | formControlName="videoQuotaDaily" | ||
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 }} | ||
184 | </div> | ||
185 | </div> | ||
186 | |||
187 | <div class="form-group" *ngIf="!isCreation() && getAuthPlugins().length !== 0"> | ||
188 | <label i18n for="pluginAuth">Auth plugin</label> | ||
189 | |||
190 | <div class="peertube-select-container"> | ||
191 | <select id="pluginAuth" formControlName="pluginAuth" class="form-control"> | ||
192 | <option [value]="null" i18n>None (local authentication)</option> | ||
193 | <option *ngFor="let authPlugin of getAuthPlugins()" [value]="authPlugin">{{ authPlugin }}</option> | ||
194 | </select> | ||
195 | </div> | ||
196 | </div> | ||
197 | |||
198 | <div class="form-group"> | ||
199 | <my-peertube-checkbox | ||
200 | inputName="byPassAutoBlock" formControlName="byPassAutoBlock" | ||
201 | i18n-labelText labelText="Doesn't need review before a video goes public" | ||
202 | ></my-peertube-checkbox> | ||
203 | </div> | ||
204 | |||
205 | <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> | ||
206 | </form> | ||
207 | |||
208 | <div *ngIf="isInBigView()" class="col-7"> | ||
209 | <ng-template *ngTemplateOutlet="dashboard"></ng-template> | ||
210 | </div> | ||
211 | |||
212 | </div> | ||
213 | </div> | ||
214 | |||
215 | |||
216 | <div *ngIf="!isCreation() && user && user.pluginAuth === null" class="form-row mt-4"> <!-- danger zone grid --> | ||
217 | <div class="form-group col-12 col-lg-4 col-xl-3"> | ||
218 | <div class="anchor" id="danger"></div> <!-- danger zone anchor --> | ||
219 | <div i18n class="account-title account-title-danger">DANGER ZONE</div> | ||
220 | </div> | ||
221 | |||
222 | <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }"> | ||
223 | |||
224 | <div class="danger-zone"> | ||
225 | <div class="form-group reset-password-email"> | ||
226 | <label i18n>Send a link to reset the password by email to the user</label> | ||
227 | <button (click)="resetPassword()" i18n>Ask for new password</button> | ||
228 | </div> | ||
229 | |||
230 | <div class="form-group"> | ||
231 | <label i18n>Manually set the user password</label> | ||
232 | <my-user-password [userId]="user.id"></my-user-password> | ||
233 | </div> | ||
234 | </div> | ||
235 | |||
236 | </div> | ||
237 | </div> | ||
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss new file mode 100644 index 000000000..d7932154b --- /dev/null +++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss | |||
@@ -0,0 +1,76 @@ | |||
1 | @use 'sass:math'; | ||
2 | @use '_variables' as *; | ||
3 | @use '_mixins' as *; | ||
4 | |||
5 | $form-base-input-width: 340px; | ||
6 | |||
7 | label { | ||
8 | font-weight: $font-regular; | ||
9 | font-size: 100%; | ||
10 | } | ||
11 | |||
12 | .account-title { | ||
13 | @include settings-big-title; | ||
14 | |||
15 | &.account-title-danger { | ||
16 | color: lighten($color: #c54130, $amount: 10); | ||
17 | } | ||
18 | } | ||
19 | |||
20 | input:not([type=submit]) { | ||
21 | @include peertube-input-text($form-base-input-width); | ||
22 | display: block; | ||
23 | } | ||
24 | |||
25 | my-input-toggle-hidden { | ||
26 | @include responsive-width($form-base-input-width); | ||
27 | |||
28 | display: block; | ||
29 | } | ||
30 | |||
31 | .peertube-select-container { | ||
32 | @include peertube-select-container($form-base-input-width); | ||
33 | } | ||
34 | |||
35 | my-select-custom-value { | ||
36 | @include responsive-width($form-base-input-width); | ||
37 | |||
38 | display: block; | ||
39 | } | ||
40 | |||
41 | input[type=submit], | ||
42 | button { | ||
43 | @include peertube-button; | ||
44 | @include orange-button; | ||
45 | |||
46 | margin-top: 10px; | ||
47 | } | ||
48 | |||
49 | .transcoding-information { | ||
50 | margin-top: 5px; | ||
51 | font-size: 11px; | ||
52 | } | ||
53 | |||
54 | .danger-zone { | ||
55 | .reset-password-email { | ||
56 | margin-bottom: 30px; | ||
57 | |||
58 | button { | ||
59 | @include peertube-button; | ||
60 | @include danger-button; | ||
61 | @include disable-outline; | ||
62 | |||
63 | display: block; | ||
64 | margin-top: 0; | ||
65 | } | ||
66 | } | ||
67 | } | ||
68 | |||
69 | .breadcrumb { | ||
70 | @include breadcrumb; | ||
71 | } | ||
72 | |||
73 | .dashboard { | ||
74 | @include dashboard; | ||
75 | max-width: 900px; | ||
76 | } | ||
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.ts b/client/src/app/+admin/overview/users/user-edit/user-edit.ts new file mode 100644 index 000000000..069b62a53 --- /dev/null +++ b/client/src/app/+admin/overview/users/user-edit/user-edit.ts | |||
@@ -0,0 +1,102 @@ | |||
1 | import { Directive, OnInit } from '@angular/core' | ||
2 | import { ConfigService } from '@app/+admin/config/shared/config.service' | ||
3 | import { AuthService, ScreenService, ServerService, User } from '@app/core' | ||
4 | import { FormReactive } from '@app/shared/shared-forms' | ||
5 | import { USER_ROLE_LABELS } from '@shared/core-utils/users' | ||
6 | import { HTMLServerConfig, UserAdminFlag, UserRole, VideoResolution } from '@shared/models' | ||
7 | import { SelectOptionsItem } from '../../../../../types/select-options-item.model' | ||
8 | |||
9 | @Directive() | ||
10 | // eslint-disable-next-line @angular-eslint/directive-class-suffix | ||
11 | export abstract class UserEdit extends FormReactive implements OnInit { | ||
12 | videoQuotaOptions: SelectOptionsItem[] = [] | ||
13 | videoQuotaDailyOptions: SelectOptionsItem[] = [] | ||
14 | username: string | ||
15 | user: User | ||
16 | |||
17 | roles: { value: string, label: string }[] = [] | ||
18 | |||
19 | protected serverConfig: HTMLServerConfig | ||
20 | |||
21 | protected abstract serverService: ServerService | ||
22 | protected abstract configService: ConfigService | ||
23 | protected abstract screenService: ScreenService | ||
24 | protected abstract auth: AuthService | ||
25 | abstract isCreation (): boolean | ||
26 | abstract getFormButtonTitle (): string | ||
27 | |||
28 | ngOnInit (): void { | ||
29 | this.serverConfig = this.serverService.getHTMLConfig() | ||
30 | |||
31 | this.buildRoles() | ||
32 | } | ||
33 | |||
34 | get subscribersCount () { | ||
35 | const forAccount = this.user | ||
36 | ? this.user.account.followersCount | ||
37 | : 0 | ||
38 | const forChannels = this.user | ||
39 | ? this.user.videoChannels.map(c => c.followersCount).reduce((a, b) => a + b, 0) | ||
40 | : 0 | ||
41 | return forAccount + forChannels | ||
42 | } | ||
43 | |||
44 | getAuthPlugins () { | ||
45 | return this.serverConfig.plugin.registeredIdAndPassAuths.map(p => p.npmName) | ||
46 | .concat(this.serverConfig.plugin.registeredExternalAuths.map(p => p.npmName)) | ||
47 | } | ||
48 | |||
49 | isInBigView () { | ||
50 | return this.screenService.getWindowInnerWidth() > 1600 | ||
51 | } | ||
52 | |||
53 | buildRoles () { | ||
54 | const authUser = this.auth.getUser() | ||
55 | |||
56 | if (authUser.role === UserRole.ADMINISTRATOR) { | ||
57 | this.roles = Object.keys(USER_ROLE_LABELS) | ||
58 | .map(key => ({ value: key.toString(), label: USER_ROLE_LABELS[key] })) | ||
59 | return | ||
60 | } | ||
61 | |||
62 | this.roles = [ | ||
63 | { value: UserRole.USER.toString(), label: USER_ROLE_LABELS[UserRole.USER] } | ||
64 | ] | ||
65 | } | ||
66 | |||
67 | isTranscodingInformationDisplayed () { | ||
68 | const formVideoQuota = parseInt(this.form.value['videoQuota'], 10) | ||
69 | |||
70 | return this.serverConfig.transcoding.enabledResolutions.length !== 0 && | ||
71 | formVideoQuota > 0 | ||
72 | } | ||
73 | |||
74 | computeQuotaWithTranscoding () { | ||
75 | const transcodingConfig = this.serverConfig.transcoding | ||
76 | |||
77 | const resolutions = transcodingConfig.enabledResolutions | ||
78 | const higherResolution = VideoResolution.H_4K | ||
79 | let multiplier = 0 | ||
80 | |||
81 | for (const resolution of resolutions) { | ||
82 | multiplier += resolution / higherResolution | ||
83 | } | ||
84 | |||
85 | if (transcodingConfig.hls.enabled) multiplier *= 2 | ||
86 | |||
87 | return multiplier * parseInt(this.form.value['videoQuota'], 10) | ||
88 | } | ||
89 | |||
90 | resetPassword () { | ||
91 | return | ||
92 | } | ||
93 | |||
94 | protected buildAdminFlags (formValue: any) { | ||
95 | return formValue.byPassAutoBlock ? UserAdminFlag.BYPASS_VIDEO_AUTO_BLACKLIST : UserAdminFlag.NONE | ||
96 | } | ||
97 | |||
98 | protected buildQuotaOptions () { | ||
99 | this.videoQuotaOptions = this.configService.videoQuotaOptions | ||
100 | this.videoQuotaDailyOptions = this.configService.videoQuotaDailyOptions | ||
101 | } | ||
102 | } | ||
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.html b/client/src/app/+admin/overview/users/user-edit/user-password.component.html new file mode 100644 index 000000000..1238d1839 --- /dev/null +++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.html | |||
@@ -0,0 +1,21 @@ | |||
1 | <form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> | ||
2 | <div class="form-group"> | ||
3 | |||
4 | <div class="input-group"> | ||
5 | <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control" | ||
6 | formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" | ||
7 | > | ||
8 | <div class="input-group-append"> | ||
9 | <button class="btn btn-sm btn-outline-secondary" (click)="togglePasswordVisibility()" type="button"> | ||
10 | <ng-container *ngIf="!showPassword" i18n>Show</ng-container> | ||
11 | <ng-container *ngIf="!!showPassword" i18n>Hide</ng-container> | ||
12 | </button> | ||
13 | </div> | ||
14 | </div> | ||
15 | <div *ngIf="formErrors.password" class="form-error"> | ||
16 | {{ formErrors.password }} | ||
17 | </div> | ||
18 | </div> | ||
19 | |||
20 | <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> | ||
21 | </form> | ||
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss new file mode 100644 index 000000000..acb680682 --- /dev/null +++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss | |||
@@ -0,0 +1,23 @@ | |||
1 | @use '_variables' as *; | ||
2 | @use '_mixins' as *; | ||
3 | |||
4 | input:not([type=submit]):not([type=checkbox]) { | ||
5 | @include peertube-input-text(340px); | ||
6 | |||
7 | display: block; | ||
8 | border-top-right-radius: 0; | ||
9 | border-bottom-right-radius: 0; | ||
10 | border-right: 0; | ||
11 | } | ||
12 | |||
13 | input[type=submit] { | ||
14 | @include peertube-button; | ||
15 | @include danger-button; | ||
16 | @include disable-outline; | ||
17 | |||
18 | margin-top: 10px; | ||
19 | } | ||
20 | |||
21 | .input-group-append { | ||
22 | height: 30px; | ||
23 | } | ||
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.ts b/client/src/app/+admin/overview/users/user-edit/user-password.component.ts new file mode 100644 index 000000000..42bf20de1 --- /dev/null +++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.ts | |||
@@ -0,0 +1,55 @@ | |||
1 | import { Component, Input, OnInit } from '@angular/core' | ||
2 | import { Notifier, UserService } from '@app/core' | ||
3 | import { USER_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-validators' | ||
4 | import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' | ||
5 | import { UserUpdate } from '@shared/models' | ||
6 | |||
7 | @Component({ | ||
8 | selector: 'my-user-password', | ||
9 | templateUrl: './user-password.component.html', | ||
10 | styleUrls: [ './user-password.component.scss' ] | ||
11 | }) | ||
12 | export class UserPasswordComponent extends FormReactive implements OnInit { | ||
13 | error: string | ||
14 | username: string | ||
15 | showPassword = false | ||
16 | |||
17 | @Input() userId: number | ||
18 | |||
19 | constructor ( | ||
20 | protected formValidatorService: FormValidatorService, | ||
21 | private notifier: Notifier, | ||
22 | private userService: UserService | ||
23 | ) { | ||
24 | super() | ||
25 | } | ||
26 | |||
27 | ngOnInit () { | ||
28 | this.buildForm({ | ||
29 | password: USER_PASSWORD_VALIDATOR | ||
30 | }) | ||
31 | } | ||
32 | |||
33 | formValidated () { | ||
34 | this.error = undefined | ||
35 | |||
36 | const userUpdate: UserUpdate = this.form.value | ||
37 | |||
38 | this.userService.updateUser(this.userId, userUpdate) | ||
39 | .subscribe({ | ||
40 | next: () => this.notifier.success($localize`Password changed for user ${this.username}.`), | ||
41 | |||
42 | error: err => { | ||
43 | this.error = err.message | ||
44 | } | ||
45 | }) | ||
46 | } | ||
47 | |||
48 | togglePasswordVisibility () { | ||
49 | this.showPassword = !this.showPassword | ||
50 | } | ||
51 | |||
52 | getFormButtonTitle () { | ||
53 | return $localize`Update user password` | ||
54 | } | ||
55 | } | ||
diff --git a/client/src/app/+admin/overview/users/user-edit/user-update.component.ts b/client/src/app/+admin/overview/users/user-edit/user-update.component.ts new file mode 100644 index 000000000..42599a17e --- /dev/null +++ b/client/src/app/+admin/overview/users/user-edit/user-update.component.ts | |||
@@ -0,0 +1,139 @@ | |||
1 | import { Subscription } from 'rxjs' | ||
2 | import { Component, OnDestroy, OnInit } from '@angular/core' | ||
3 | import { ActivatedRoute, Router } from '@angular/router' | ||
4 | import { ConfigService } from '@app/+admin/config/shared/config.service' | ||
5 | import { AuthService, Notifier, ScreenService, ServerService, User, UserService } from '@app/core' | ||
6 | import { | ||
7 | USER_EMAIL_VALIDATOR, | ||
8 | USER_ROLE_VALIDATOR, | ||
9 | USER_VIDEO_QUOTA_DAILY_VALIDATOR, | ||
10 | USER_VIDEO_QUOTA_VALIDATOR | ||
11 | } from '@app/shared/form-validators/user-validators' | ||
12 | import { FormValidatorService } from '@app/shared/shared-forms' | ||
13 | import { User as UserType, UserAdminFlag, UserRole, UserUpdate } from '@shared/models' | ||
14 | import { UserEdit } from './user-edit' | ||
15 | |||
16 | @Component({ | ||
17 | selector: 'my-user-update', | ||
18 | templateUrl: './user-edit.component.html', | ||
19 | styleUrls: [ './user-edit.component.scss' ] | ||
20 | }) | ||
21 | export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { | ||
22 | error: string | ||
23 | |||
24 | private paramsSub: Subscription | ||
25 | |||
26 | constructor ( | ||
27 | protected formValidatorService: FormValidatorService, | ||
28 | protected serverService: ServerService, | ||
29 | protected configService: ConfigService, | ||
30 | protected screenService: ScreenService, | ||
31 | protected auth: AuthService, | ||
32 | private route: ActivatedRoute, | ||
33 | private router: Router, | ||
34 | private notifier: Notifier, | ||
35 | private userService: UserService | ||
36 | ) { | ||
37 | super() | ||
38 | |||
39 | this.buildQuotaOptions() | ||
40 | } | ||
41 | |||
42 | ngOnInit () { | ||
43 | super.ngOnInit() | ||
44 | |||
45 | const defaultValues = { | ||
46 | role: UserRole.USER.toString(), | ||
47 | videoQuota: '-1', | ||
48 | videoQuotaDaily: '-1' | ||
49 | } | ||
50 | |||
51 | this.buildForm({ | ||
52 | email: USER_EMAIL_VALIDATOR, | ||
53 | role: USER_ROLE_VALIDATOR, | ||
54 | videoQuota: USER_VIDEO_QUOTA_VALIDATOR, | ||
55 | videoQuotaDaily: USER_VIDEO_QUOTA_DAILY_VALIDATOR, | ||
56 | byPassAutoBlock: null, | ||
57 | pluginAuth: null | ||
58 | }, defaultValues) | ||
59 | |||
60 | this.paramsSub = this.route.params.subscribe(routeParams => { | ||
61 | const userId = routeParams['id'] | ||
62 | this.userService.getUser(userId, true) | ||
63 | .subscribe({ | ||
64 | next: user => this.onUserFetched(user), | ||
65 | |||
66 | error: err => { | ||
67 | this.error = err.message | ||
68 | } | ||
69 | }) | ||
70 | }) | ||
71 | } | ||
72 | |||
73 | ngOnDestroy () { | ||
74 | this.paramsSub.unsubscribe() | ||
75 | } | ||
76 | |||
77 | formValidated () { | ||
78 | this.error = undefined | ||
79 | |||
80 | const userUpdate: UserUpdate = this.form.value | ||
81 | userUpdate.adminFlags = this.buildAdminFlags(this.form.value) | ||
82 | |||
83 | // A select in HTML is always mapped as a string, we convert it to number | ||
84 | userUpdate.videoQuota = parseInt(this.form.value['videoQuota'], 10) | ||
85 | userUpdate.videoQuotaDaily = parseInt(this.form.value['videoQuotaDaily'], 10) | ||
86 | |||
87 | if (userUpdate.pluginAuth === 'null') userUpdate.pluginAuth = null | ||
88 | |||
89 | this.userService.updateUser(this.user.id, userUpdate) | ||
90 | .subscribe({ | ||
91 | next: () => { | ||
92 | this.notifier.success($localize`User ${this.user.username} updated.`) | ||
93 | this.router.navigate([ '/admin/users/list' ]) | ||
94 | }, | ||
95 | |||
96 | error: err => { | ||
97 | this.error = err.message | ||
98 | } | ||
99 | }) | ||
100 | } | ||
101 | |||
102 | isCreation () { | ||
103 | return false | ||
104 | } | ||
105 | |||
106 | isPasswordOptional () { | ||
107 | return false | ||
108 | } | ||
109 | |||
110 | getFormButtonTitle () { | ||
111 | return $localize`Update user` | ||
112 | } | ||
113 | |||
114 | resetPassword () { | ||
115 | this.userService.askResetPassword(this.user.email) | ||
116 | .subscribe({ | ||
117 | next: () => { | ||
118 | this.notifier.success($localize`An email asking for password reset has been sent to ${this.user.username}.`) | ||
119 | }, | ||
120 | |||
121 | error: err => { | ||
122 | this.error = err.message | ||
123 | } | ||
124 | }) | ||
125 | } | ||
126 | |||
127 | private onUserFetched (userJson: UserType) { | ||
128 | this.user = new User(userJson) | ||
129 | |||
130 | this.form.patchValue({ | ||
131 | email: userJson.email, | ||
132 | role: userJson.role.toString(), | ||
133 | videoQuota: userJson.videoQuota, | ||
134 | videoQuotaDaily: userJson.videoQuotaDaily, | ||
135 | pluginAuth: userJson.pluginAuth, | ||
136 | byPassAutoBlock: userJson.adminFlags & UserAdminFlag.BYPASS_VIDEO_AUTO_BLACKLIST | ||
137 | }) | ||
138 | } | ||
139 | } | ||
diff --git a/client/src/app/+admin/overview/users/user-list/index.ts b/client/src/app/+admin/overview/users/user-list/index.ts new file mode 100644 index 000000000..1826a4abe --- /dev/null +++ b/client/src/app/+admin/overview/users/user-list/index.ts | |||
@@ -0,0 +1 @@ | |||
export * from './user-list.component' | |||
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html new file mode 100644 index 000000000..a96dbd7f8 --- /dev/null +++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html | |||
@@ -0,0 +1,168 @@ | |||
1 | <h1> | ||
2 | <my-global-icon iconName="user" aria-hidden="true"></my-global-icon> | ||
3 | <ng-container i18n>Users</ng-container> | ||
4 | </h1> | ||
5 | |||
6 | <p-table | ||
7 | [value]="users" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions" | ||
8 | [sortField]="sort.field" [sortOrder]="sort.order" dataKey="id" [resizableColumns]="true" [(selection)]="selectedUsers" | ||
9 | [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false" | ||
10 | [showCurrentPageReport]="true" i18n-currentPageReportTemplate | ||
11 | currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} users" | ||
12 | (onPage)="onPage($event)" [expandedRowKeys]="expandedRows" | ||
13 | > | ||
14 | <ng-template pTemplate="caption"> | ||
15 | <div class="caption"> | ||
16 | <div class="left-buttons"> | ||
17 | <my-action-dropdown | ||
18 | *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange" | ||
19 | [actions]="bulkUserActions" [entry]="selectedUsers" | ||
20 | > | ||
21 | </my-action-dropdown> | ||
22 | |||
23 | <a *ngIf="!isInSelectionMode()" class="add-button" routerLink="/admin/users/create"> | ||
24 | <my-global-icon iconName="user-add" aria-hidden="true"></my-global-icon> | ||
25 | <ng-container i18n>Create user</ng-container> | ||
26 | </a> | ||
27 | </div> | ||
28 | |||
29 | <div class="ml-auto"> | ||
30 | <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> | ||
31 | </div> | ||
32 | |||
33 | </div> | ||
34 | </ng-template> | ||
35 | |||
36 | <ng-template pTemplate="header"> | ||
37 | <tr> | ||
38 | <th style="width: 40px"> | ||
39 | <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox> | ||
40 | </th> | ||
41 | <th style="width: 40px"></th> | ||
42 | <th style="width: 60px;"> | ||
43 | <div class="c-hand column-toggle" ngbDropdown placement="bottom-left auto" container="body" autoClose="outside"> | ||
44 | <my-global-icon iconName="columns" ngbDropdownToggle></my-global-icon> | ||
45 | |||
46 | <div role="menu" class="dropdown-menu" ngbDropdownMenu> | ||
47 | <div class="dropdown-header" i18n>Table parameters</div> | ||
48 | <div ngbDropdownItem class="dropdown-item"> | ||
49 | <my-select-checkbox | ||
50 | name="columns" | ||
51 | [availableItems]="columns" | ||
52 | [selectableGroup]="false" [(ngModel)]="selectedColumns" | ||
53 | i18n-placeholder placeholder="Select columns" | ||
54 | > | ||
55 | </my-select-checkbox> | ||
56 | </div> | ||
57 | <div ngbDropdownItem class="dropdown-item"> | ||
58 | <my-peertube-checkbox inputName="highlightBannedUsers" [(ngModel)]="highlightBannedUsers" | ||
59 | i18n-labelText labelText="Highlight banned users"></my-peertube-checkbox> | ||
60 | </div> | ||
61 | </div> | ||
62 | </div> | ||
63 | </th> | ||
64 | <th *ngIf="isSelected('username')" pResizableColumn pSortableColumn="username">{{ getColumn('username').label }} <p-sortIcon field="username"></p-sortIcon></th> | ||
65 | <th *ngIf="isSelected('email')">{{ getColumn('email').label }}</th> | ||
66 | <th *ngIf="isSelected('quota')" style="width: 160px;" pSortableColumn="videoQuotaUsed">{{ getColumn('quota').label }} <p-sortIcon field="videoQuotaUsed"></p-sortIcon></th> | ||
67 | <th *ngIf="isSelected('quotaDaily')" style="width: 160px;">{{ getColumn('quotaDaily').label }}</th> | ||
68 | <th *ngIf="isSelected('role')" style="width: 120px;" pSortableColumn="role">{{ getColumn('role').label }} <p-sortIcon field="role"></p-sortIcon></th> | ||
69 | <th *ngIf="isSelected('pluginAuth')" style="width: 140px;" pResizableColumn >{{ getColumn('pluginAuth').label }}</th> | ||
70 | <th *ngIf="isSelected('createdAt')" style="width: 150px;" pSortableColumn="createdAt">{{ getColumn('createdAt').label }} <p-sortIcon field="createdAt"></p-sortIcon></th> | ||
71 | <th *ngIf="isSelected('lastLoginDate')" style="width: 150px;" pSortableColumn="lastLoginDate">{{ getColumn('lastLoginDate').label }} <p-sortIcon field="lastLoginDate"></p-sortIcon></th> | ||
72 | </tr> | ||
73 | </ng-template> | ||
74 | |||
75 | <ng-template pTemplate="body" let-expanded="expanded" let-user> | ||
76 | |||
77 | <tr [pSelectableRow]="user" [ngClass]="{ banned: highlightBannedUsers && user.blocked }"> | ||
78 | <td class="checkbox-cell"> | ||
79 | <p-tableCheckbox [value]="user" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox> | ||
80 | </td> | ||
81 | |||
82 | <td class="expand-cell" [ngClass]="{ 'empty-cell': !user.blockedReason }"> | ||
83 | <span *ngIf="user.blockedReason" class="expander" [pRowToggler]="user"> | ||
84 | <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i> | ||
85 | </span> | ||
86 | </td> | ||
87 | |||
88 | <td class="action-cell"> | ||
89 | <my-user-moderation-dropdown *ngIf="!isInSelectionMode()" [user]="user" container="body" | ||
90 | (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()"> | ||
91 | </my-user-moderation-dropdown> | ||
92 | </td> | ||
93 | |||
94 | <td *ngIf="isSelected('username')"> | ||
95 | <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/a/' + user.username ]"> | ||
96 | <div class="chip two-lines"> | ||
97 | <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar> | ||
98 | <div> | ||
99 | <span class="user-table-primary-text">{{ user.account.displayName }}</span> | ||
100 | <span class="text-muted">{{ user.username }}</span> | ||
101 | </div> | ||
102 | </div> | ||
103 | </a> | ||
104 | </td> | ||
105 | |||
106 | <td *ngIf="isSelected('email')" [title]="user.email"> | ||
107 | <ng-container *ngIf="!requiresEmailVerification || user.blocked; else emailWithVerificationStatus"> | ||
108 | <a class="table-email" [href]="'mailto:' + user.email">{{ user.email }}</a> | ||
109 | </ng-container> | ||
110 | </td> | ||
111 | |||
112 | <ng-template #emailWithVerificationStatus> | ||
113 | <td *ngIf="user.emailVerified === false; else emailVerifiedNotFalse" i18n-title title="User's email must be verified to login"> | ||
114 | <em>? {{ user.email }}</em> | ||
115 | </td> | ||
116 | <ng-template #emailVerifiedNotFalse> | ||
117 | <td i18n-title title="User's email is verified / User can login without email verification"> | ||
118 | ✓ {{ user.email }} | ||
119 | </td> | ||
120 | </ng-template> | ||
121 | </ng-template> | ||
122 | |||
123 | <td *ngIf="isSelected('quota')"> | ||
124 | <div class="progress" i18n-title title="Total video quota"> | ||
125 | <div class="progress-bar" role="progressbar" [style]="{ width: getUserVideoQuotaPercentage(user) + '%' }" | ||
126 | [attr.aria-valuenow]="user.rawVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.rawVideoQuota"> | ||
127 | </div> | ||
128 | <span>{{ user.videoQuotaUsed }}</span> | ||
129 | <span>{{ user.videoQuota }}</span> | ||
130 | </div> | ||
131 | </td> | ||
132 | |||
133 | <td *ngIf="isSelected('quotaDaily')"> | ||
134 | <div class="progress" i18n-title title="Total daily video quota"> | ||
135 | <div class="progress-bar secondary" role="progressbar" [style]="{ width: getUserVideoQuotaDailyPercentage(user) + '%' }" | ||
136 | [attr.aria-valuenow]="user.rawVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.rawVideoQuotaDaily"> | ||
137 | </div> | ||
138 | <span>{{ user.videoQuotaUsedDaily }}</span> | ||
139 | <span>{{ user.videoQuotaDaily }}</span> | ||
140 | </div> | ||
141 | </td> | ||
142 | |||
143 | <td *ngIf="isSelected('role')"> | ||
144 | <span *ngIf="user.blocked" class="badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span> | ||
145 | <span *ngIf="!user.blocked" class="badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span> | ||
146 | </td> | ||
147 | |||
148 | <td *ngIf="isSelected('pluginAuth')"> | ||
149 | <ng-container *ngIf="user.pluginAuth">{{ user.pluginAuth }}</ng-container> | ||
150 | </td> | ||
151 | |||
152 | <td *ngIf="isSelected('createdAt')" [title]="user.createdAt">{{ user.createdAt | date: 'short' }}</td> | ||
153 | |||
154 | <td *ngIf="isSelected('lastLoginDate')" [title]="user.lastLoginDate">{{ user.lastLoginDate | date: 'short' }}</td> | ||
155 | </tr> | ||
156 | </ng-template> | ||
157 | |||
158 | <ng-template pTemplate="rowexpansion" let-user> | ||
159 | <tr class="user-blocked-reason"> | ||
160 | <td colspan="7"> | ||
161 | <span i18n class="ban-reason-label">Ban reason:</span> | ||
162 | {{ user.blockedReason }} | ||
163 | </td> | ||
164 | </tr> | ||
165 | </ng-template> | ||
166 | </p-table> | ||
167 | |||
168 | <my-user-ban-modal #userBanModal (userBanned)="onUserChanged()"></my-user-ban-modal> | ||
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss new file mode 100644 index 000000000..e425306b5 --- /dev/null +++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss | |||
@@ -0,0 +1,65 @@ | |||
1 | @use '_variables' as *; | ||
2 | @use '_mixins' as *; | ||
3 | |||
4 | .add-button { | ||
5 | @include create-button; | ||
6 | } | ||
7 | |||
8 | tr.banned > td { | ||
9 | background-color: lighten($color: $red, $amount: 40) !important; | ||
10 | } | ||
11 | |||
12 | .table-email { | ||
13 | @include disable-default-a-behaviour; | ||
14 | |||
15 | color: pvar(--mainForegroundColor); | ||
16 | } | ||
17 | |||
18 | .banned-info { | ||
19 | font-style: italic; | ||
20 | } | ||
21 | |||
22 | .ban-reason-label { | ||
23 | font-weight: $font-semibold; | ||
24 | } | ||
25 | |||
26 | .user-table-primary-text .glyphicon { | ||
27 | @include margin-left(0.1rem); | ||
28 | |||
29 | font-size: 80%; | ||
30 | color: #808080; | ||
31 | } | ||
32 | |||
33 | p-tableCheckbox { | ||
34 | position: relative; | ||
35 | top: -2.5px; | ||
36 | } | ||
37 | |||
38 | my-global-icon { | ||
39 | width: 18px; | ||
40 | } | ||
41 | |||
42 | .chip { | ||
43 | @include chip; | ||
44 | } | ||
45 | |||
46 | .badge { | ||
47 | @include table-badge; | ||
48 | } | ||
49 | |||
50 | .progress { | ||
51 | @include progressbar($small: true); | ||
52 | |||
53 | width: auto; | ||
54 | max-width: 100%; | ||
55 | } | ||
56 | |||
57 | @media screen and (max-width: $primeng-breakpoint) { | ||
58 | .progress { | ||
59 | width: 100%; | ||
60 | } | ||
61 | |||
62 | .empty-cell { | ||
63 | padding: 0; | ||
64 | } | ||
65 | } | ||
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.ts b/client/src/app/+admin/overview/users/user-list/user-list.component.ts new file mode 100644 index 000000000..548e6e80f --- /dev/null +++ b/client/src/app/+admin/overview/users/user-list/user-list.component.ts | |||
@@ -0,0 +1,246 @@ | |||
1 | import { SortMeta } from 'primeng/api' | ||
2 | import { Component, OnInit, ViewChild } from '@angular/core' | ||
3 | import { ActivatedRoute, Router } from '@angular/router' | ||
4 | import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, ServerService, UserService } from '@app/core' | ||
5 | import { AdvancedInputFilter } from '@app/shared/shared-forms' | ||
6 | import { DropdownAction } from '@app/shared/shared-main' | ||
7 | import { UserBanModalComponent } from '@app/shared/shared-moderation' | ||
8 | import { User, UserRole } from '@shared/models' | ||
9 | |||
10 | type UserForList = User & { | ||
11 | rawVideoQuota: number | ||
12 | rawVideoQuotaUsed: number | ||
13 | rawVideoQuotaDaily: number | ||
14 | rawVideoQuotaUsedDaily: number | ||
15 | } | ||
16 | |||
17 | @Component({ | ||
18 | selector: 'my-user-list', | ||
19 | templateUrl: './user-list.component.html', | ||
20 | styleUrls: [ './user-list.component.scss' ] | ||
21 | }) | ||
22 | export class UserListComponent extends RestTable implements OnInit { | ||
23 | @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent | ||
24 | |||
25 | users: User[] = [] | ||
26 | |||
27 | totalRecords = 0 | ||
28 | sort: SortMeta = { field: 'createdAt', order: 1 } | ||
29 | pagination: RestPagination = { count: this.rowsPerPage, start: 0 } | ||
30 | |||
31 | highlightBannedUsers = false | ||
32 | |||
33 | selectedUsers: User[] = [] | ||
34 | bulkUserActions: DropdownAction<User[]>[][] = [] | ||
35 | columns: { id: string, label: string }[] | ||
36 | |||
37 | inputFilters: AdvancedInputFilter[] = [ | ||
38 | { | ||
39 | title: $localize`Advanced filters`, | ||
40 | children: [ | ||
41 | { | ||
42 | queryParams: { search: 'banned:true' }, | ||
43 | label: $localize`Banned users` | ||
44 | } | ||
45 | ] | ||
46 | } | ||
47 | ] | ||
48 | |||
49 | requiresEmailVerification = false | ||
50 | |||
51 | private _selectedColumns: string[] | ||
52 | |||
53 | constructor ( | ||
54 | protected route: ActivatedRoute, | ||
55 | protected router: Router, | ||
56 | private notifier: Notifier, | ||
57 | private confirmService: ConfirmService, | ||
58 | private serverService: ServerService, | ||
59 | private auth: AuthService, | ||
60 | private userService: UserService | ||
61 | ) { | ||
62 | super() | ||
63 | } | ||
64 | |||
65 | get authUser () { | ||
66 | return this.auth.getUser() | ||
67 | } | ||
68 | |||
69 | get selectedColumns () { | ||
70 | return this._selectedColumns | ||
71 | } | ||
72 | |||
73 | set selectedColumns (val: string[]) { | ||
74 | this._selectedColumns = val | ||
75 | } | ||
76 | |||
77 | ngOnInit () { | ||
78 | this.serverService.getConfig() | ||
79 | .subscribe(config => this.requiresEmailVerification = config.signup.requiresEmailVerification) | ||
80 | |||
81 | this.initialize() | ||
82 | |||
83 | this.bulkUserActions = [ | ||
84 | [ | ||
85 | { | ||
86 | label: $localize`Delete`, | ||
87 | description: $localize`Videos will be deleted, comments will be tombstoned.`, | ||
88 | handler: users => this.removeUsers(users), | ||
89 | isDisplayed: users => users.every(u => this.authUser.canManage(u)) | ||
90 | }, | ||
91 | { | ||
92 | label: $localize`Ban`, | ||
93 | description: $localize`User won't be able to login anymore, but videos and comments will be kept as is.`, | ||
94 | handler: users => this.openBanUserModal(users), | ||
95 | isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === false) | ||
96 | }, | ||
97 | { | ||
98 | label: $localize`Unban`, | ||
99 | handler: users => this.unbanUsers(users), | ||
100 | isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === true) | ||
101 | } | ||
102 | ], | ||
103 | [ | ||
104 | { | ||
105 | label: $localize`Set Email as Verified`, | ||
106 | handler: users => this.setEmailsAsVerified(users), | ||
107 | isDisplayed: users => { | ||
108 | return this.requiresEmailVerification && | ||
109 | users.every(u => this.authUser.canManage(u) && !u.blocked && u.emailVerified === false) | ||
110 | } | ||
111 | } | ||
112 | ] | ||
113 | ] | ||
114 | |||
115 | this.columns = [ | ||
116 | { id: 'username', label: $localize`Username` }, | ||
117 | { id: 'email', label: $localize`Email` }, | ||
118 | { id: 'quota', label: $localize`Video quota` }, | ||
119 | { id: 'role', label: $localize`Role` }, | ||
120 | { id: 'createdAt', label: $localize`Created` } | ||
121 | ] | ||
122 | |||
123 | this.selectedColumns = this.columns.map(c => c.id) | ||
124 | |||
125 | this.columns.push({ id: 'quotaDaily', label: $localize`Daily quota` }) | ||
126 | this.columns.push({ id: 'pluginAuth', label: $localize`Auth plugin` }) | ||
127 | this.columns.push({ id: 'lastLoginDate', label: $localize`Last login` }) | ||
128 | } | ||
129 | |||
130 | getIdentifier () { | ||
131 | return 'UserListComponent' | ||
132 | } | ||
133 | |||
134 | getRoleClass (role: UserRole) { | ||
135 | switch (role) { | ||
136 | case UserRole.ADMINISTRATOR: | ||
137 | return 'badge-purple' | ||
138 | case UserRole.MODERATOR: | ||
139 | return 'badge-blue' | ||
140 | default: | ||
141 | return 'badge-yellow' | ||
142 | } | ||
143 | } | ||
144 | |||
145 | isSelected (id: string) { | ||
146 | return this.selectedColumns.find(c => c === id) | ||
147 | } | ||
148 | |||
149 | getColumn (id: string) { | ||
150 | return this.columns.find(c => c.id === id) | ||
151 | } | ||
152 | |||
153 | getUserVideoQuotaPercentage (user: UserForList) { | ||
154 | return user.rawVideoQuotaUsed * 100 / user.rawVideoQuota | ||
155 | } | ||
156 | |||
157 | getUserVideoQuotaDailyPercentage (user: UserForList) { | ||
158 | return user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily | ||
159 | } | ||
160 | |||
161 | openBanUserModal (users: User[]) { | ||
162 | for (const user of users) { | ||
163 | if (user.username === 'root') { | ||
164 | this.notifier.error($localize`You cannot ban root.`) | ||
165 | return | ||
166 | } | ||
167 | } | ||
168 | |||
169 | this.userBanModal.openModal(users) | ||
170 | } | ||
171 | |||
172 | onUserChanged () { | ||
173 | this.reloadData() | ||
174 | } | ||
175 | |||
176 | async unbanUsers (users: User[]) { | ||
177 | const res = await this.confirmService.confirm($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`) | ||
178 | if (res === false) return | ||
179 | |||
180 | this.userService.unbanUsers(users) | ||
181 | .subscribe({ | ||
182 | next: () => { | ||
183 | this.notifier.success($localize`${users.length} users unbanned.`) | ||
184 | this.reloadData() | ||
185 | }, | ||
186 | |||
187 | error: err => this.notifier.error(err.message) | ||
188 | }) | ||
189 | } | ||
190 | |||
191 | async removeUsers (users: User[]) { | ||
192 | for (const user of users) { | ||
193 | if (user.username === 'root') { | ||
194 | this.notifier.error($localize`You cannot delete root.`) | ||
195 | return | ||
196 | } | ||
197 | } | ||
198 | |||
199 | const message = $localize`If you remove these users, you will not be able to create others with the same username!` | ||
200 | const res = await this.confirmService.confirm(message, $localize`Delete`) | ||
201 | if (res === false) return | ||
202 | |||
203 | this.userService.removeUser(users) | ||
204 | .subscribe({ | ||
205 | next: () => { | ||
206 | this.notifier.success($localize`${users.length} users deleted.`) | ||
207 | this.reloadData() | ||
208 | }, | ||
209 | |||
210 | error: err => this.notifier.error(err.message) | ||
211 | }) | ||
212 | } | ||
213 | |||
214 | setEmailsAsVerified (users: User[]) { | ||
215 | this.userService.updateUsers(users, { emailVerified: true }) | ||
216 | .subscribe({ | ||
217 | next: () => { | ||
218 | this.notifier.success($localize`${users.length} users email set as verified.`) | ||
219 | this.reloadData() | ||
220 | }, | ||
221 | |||
222 | error: err => this.notifier.error(err.message) | ||
223 | }) | ||
224 | } | ||
225 | |||
226 | isInSelectionMode () { | ||
227 | return this.selectedUsers.length !== 0 | ||
228 | } | ||
229 | |||
230 | protected reloadData () { | ||
231 | this.selectedUsers = [] | ||
232 | |||
233 | this.userService.getUsers({ | ||
234 | pagination: this.pagination, | ||
235 | sort: this.sort, | ||
236 | search: this.search | ||
237 | }).subscribe({ | ||
238 | next: resultList => { | ||
239 | this.users = resultList.data | ||
240 | this.totalRecords = resultList.total | ||
241 | }, | ||
242 | |||
243 | error: err => this.notifier.error(err.message) | ||
244 | }) | ||
245 | } | ||
246 | } | ||
diff --git a/client/src/app/+admin/overview/users/users.routes.ts b/client/src/app/+admin/overview/users/users.routes.ts new file mode 100644 index 000000000..8b63f5bc7 --- /dev/null +++ b/client/src/app/+admin/overview/users/users.routes.ts | |||
@@ -0,0 +1,49 @@ | |||
1 | import { Routes } from '@angular/router' | ||
2 | import { UserRightGuard } from '@app/core' | ||
3 | import { UserRight } from '@shared/models' | ||
4 | import { UserCreateComponent, UserUpdateComponent } from './user-edit' | ||
5 | import { UserListComponent } from './user-list' | ||
6 | |||
7 | export const UsersRoutes: Routes = [ | ||
8 | { | ||
9 | path: 'users', | ||
10 | canActivate: [ UserRightGuard ], | ||
11 | data: { | ||
12 | userRight: UserRight.MANAGE_USERS | ||
13 | }, | ||
14 | children: [ | ||
15 | { | ||
16 | path: '', | ||
17 | redirectTo: 'list', | ||
18 | pathMatch: 'full' | ||
19 | }, | ||
20 | { | ||
21 | path: 'list', | ||
22 | component: UserListComponent, | ||
23 | data: { | ||
24 | meta: { | ||
25 | title: $localize`Users list` | ||
26 | } | ||
27 | } | ||
28 | }, | ||
29 | { | ||
30 | path: 'create', | ||
31 | component: UserCreateComponent, | ||
32 | data: { | ||
33 | meta: { | ||
34 | title: $localize`Create a user` | ||
35 | } | ||
36 | } | ||
37 | }, | ||
38 | { | ||
39 | path: 'update/:id', | ||
40 | component: UserUpdateComponent, | ||
41 | data: { | ||
42 | meta: { | ||
43 | title: $localize`Update a user` | ||
44 | } | ||
45 | } | ||
46 | } | ||
47 | ] | ||
48 | } | ||
49 | ] | ||