From 76314386aeafdd6849b7b70c517779d6b2013473 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Fri, 27 Mar 2020 15:19:03 +0100 Subject: Add overview of a user's actions in user-edit (#2558) --- .../edit-custom-config.component.html | 4 +- .../edit-custom-config.component.scss | 5 + .../users/user-edit/user-create.component.ts | 2 + .../users/user-edit/user-edit.component.html | 268 ++++++++++++++------- .../users/user-edit/user-edit.component.scss | 35 ++- client/src/app/+admin/users/user-edit/user-edit.ts | 19 +- .../users/user-edit/user-password.component.ts | 2 - .../users/user-edit/user-update.component.ts | 33 +-- client/src/app/+my-account/my-account.module.ts | 2 - .../shared/actor-avatar-info.component.html | 13 +- client/src/app/shared/shared.module.ts | 7 +- client/src/app/shared/users/user.model.ts | 10 + client/src/app/shared/users/user.service.ts | 5 +- .../video/modals/video-report.component.html | 3 +- client/src/sass/include/_mixins.scss | 82 +++++++ 15 files changed, 358 insertions(+), 132 deletions(-) (limited to 'client/src') 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 b3b4f7728..9991e1f63 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 @@ -579,7 +579,7 @@ i18n-labelText labelText="Allow additional extensions" > - Allow your users to upload .mkv, .mov, .avi and .flv videos. + Allows users to upload .mkv, .mov, .avi and .flv videos. @@ -590,7 +590,7 @@ i18n-labelText labelText="Allow audio files upload" > - Allow your users to upload audio files that will be merged with the preview file on upload. + Allows users to upload audio files that will be merged with the preview file on upload. diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss index 8b1cdcbba..d8bc30d55 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss @@ -50,6 +50,7 @@ input[type=submit] { textarea { @include peertube-textarea(500px, 150px); + max-width: 100%; display: block; &.small { @@ -72,6 +73,10 @@ my-markdown-textarea ::ng-deep { @media screen and (max-width: 1400px) { flex-direction: column !important; } + + textarea { + max-width: 100%; + } } } 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 1769c0de0..a394418cb 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 @@ -8,6 +8,7 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service' import { ConfigService } from '@app/+admin/config/shared/config.service' import { UserService } from '@app/shared' +import { ScreenService } from '@app/shared/misc/screen.service' @Component({ selector: 'my-user-create', @@ -21,6 +22,7 @@ export class UserCreateComponent extends UserEdit implements OnInit { protected serverService: ServerService, protected formValidatorService: FormValidatorService, protected configService: ConfigService, + protected screenService: ScreenService, protected auth: AuthService, private userValidatorsService: UserValidatorsService, private route: ActivatedRoute, 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 dbb0e36b9..6c42fde57 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 @@ -1,112 +1,204 @@ -
Create user
-
Edit user {{ username }}
+ -
-
- - -
- {{ formErrors.username }} + +
+ -
- -
- - -
- {{ formErrors.email }} + -
- -
- - - - - If you leave the password empty, an email will be sent to the user. - - - - -
- {{ formErrors.password }} + + + +
+ -
- -
- -
+
+
-
- {{ formErrors.role }} -
+
+
+
-
- -
- -
+
{{ error }}
-
- Transcoding is enabled on server. The video quota only take in account original video.
- At most, this user could use ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}. +
+
+
+ +
-
- -
- +
+ + +
+ + +
+ {{ formErrors.username }} +
+
+ +
+ + +
+ {{ formErrors.email }} +
+
+ +
+ + + + + If you leave the password empty, an email will be sent to the user. + + + + +
+ {{ formErrors.password }} +
+
+ +
+ +
+ +
+ +
+ {{ formErrors.role }} +
+
+ +
+ +
+ +
+ +
+ Transcoding is enabled. The video quota only takes into account original video size.
+ At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}. +
+
+ +
+ +
+ +
+
+ +
+ +
+ + + + +
+
+
+
+ -
- +
+
+
+
- - +
-
- +
+
+ + +
-
- - -
+
+ + +
+
-
- -
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 c1cc4ca45..d4c1b600e 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,8 +1,13 @@ @import '_variables'; @import '_mixins'; -.form-sub-title { - margin-bottom: 30px; +label { + font-weight: $font-regular; + font-size: 100%; +} + +.account-title { + @include settings-big-title; } input:not([type=submit]) { @@ -26,18 +31,9 @@ input[type=submit], button { font-size: 11px; } -.account-title { - @include in-content-small-title; - - margin-top: 55px; - margin-bottom: 30px; -} - .danger-zone { .reset-password-email { margin-bottom: 30px; - padding-bottom: 30px; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); button { display: block; @@ -45,3 +41,20 @@ input[type=submit], button { } } } + +.breadcrumb { + @include breadcrumb; +} + +.dashboard { + @include dashboard; + max-width: 900px; +} + +my-actor-avatar-info ::ng-deep { + .actor-img-edit-container, + .actor-info-followers, + .actor-info-username { + display: none; + } +} 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 47b57d2ec..a23cd9033 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,14 @@ import { ServerConfig, USER_ROLE_LABELS, UserRole, VideoResolution } from '../.. import { ConfigService } from '@app/+admin/config/shared/config.service' import { UserAdminFlag } from '@shared/models/users/user-flag.model' import { OnInit } from '@angular/core' +import { User } from '@app/shared/users/user.model' +import { ScreenService } from '@app/shared/misc/screen.service' export abstract class UserEdit extends FormReactive implements OnInit { videoQuotaOptions: { value: string, label: string }[] = [] videoQuotaDailyOptions: { value: string, label: string }[] = [] username: string - userId: number + user: User roles: { value: string, label: string }[] = [] @@ -17,6 +19,7 @@ export abstract class UserEdit extends FormReactive implements OnInit { protected abstract serverService: ServerService protected abstract configService: ConfigService + protected abstract screenService: ScreenService protected abstract auth: AuthService abstract isCreation (): boolean abstract getFormButtonTitle (): string @@ -29,6 +32,20 @@ export abstract class UserEdit extends FormReactive implements OnInit { this.buildRoles() } + get subscribersCount () { + const forAccount = this.user + ? this.user.account.followersCount + : 0 + const forChannels = this.user + ? this.user.videoChannels.map(c => c.followersCount).reduce((a, b) => a + b, 0) + : 0 + return forAccount + forChannels + } + + isInBigView () { + return this.screenService.getWindowInnerWidth() > 1600 + } + buildRoles () { const authUser = this.auth.getUser() diff --git a/client/src/app/+admin/users/user-edit/user-password.component.ts b/client/src/app/+admin/users/user-edit/user-password.component.ts index 5b3040440..ecad000f7 100644 --- a/client/src/app/+admin/users/user-edit/user-password.component.ts +++ b/client/src/app/+admin/users/user-edit/user-password.component.ts @@ -23,8 +23,6 @@ export class UserPasswordComponent extends FormReactive implements OnInit { constructor ( protected formValidatorService: FormValidatorService, private userValidatorsService: UserValidatorsService, - private route: ActivatedRoute, - private router: Router, private notifier: Notifier, private userService: UserService, private i18n: I18n diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts index 1ab2e9dbf..fbe3d6950 100644 --- a/client/src/app/+admin/users/user-edit/user-update.component.ts +++ b/client/src/app/+admin/users/user-edit/user-update.component.ts @@ -4,13 +4,15 @@ import { Subscription } from 'rxjs' import { AuthService, Notifier } from '@app/core' import { ServerService } from '../../../core' import { UserEdit } from './user-edit' -import { User, UserUpdate } from '../../../../../../shared' +import { User as UserType, UserUpdate, UserRole } from '../../../../../../shared' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service' import { ConfigService } from '@app/+admin/config/shared/config.service' import { UserService } from '@app/shared' import { UserAdminFlag } from '@shared/models/users/user-flag.model' +import { User } from '@app/shared/users/user.model' +import { ScreenService } from '@app/shared/misc/screen.service' @Component({ selector: 'my-user-update', @@ -19,9 +21,6 @@ import { UserAdminFlag } from '@shared/models/users/user-flag.model' }) export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { error: string - userId: number - userEmail: string - username: string private paramsSub: Subscription @@ -29,6 +28,7 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { protected formValidatorService: FormValidatorService, protected serverService: ServerService, protected configService: ConfigService, + protected screenService: ScreenService, protected auth: AuthService, private userValidatorsService: UserValidatorsService, private route: ActivatedRoute, @@ -45,7 +45,12 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { ngOnInit () { super.ngOnInit() - const defaultValues = { videoQuota: '-1', videoQuotaDaily: '-1' } + const defaultValues = { + role: UserRole.USER.toString(), + videoQuota: '-1', + videoQuotaDaily: '-1' + } + this.buildForm({ email: this.userValidatorsService.USER_EMAIL, role: this.userValidatorsService.USER_ROLE, @@ -56,7 +61,7 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { this.paramsSub = this.route.params.subscribe(routeParams => { const userId = routeParams['id'] - this.userService.getUser(userId).subscribe( + this.userService.getUser(userId, true).subscribe( user => this.onUserFetched(user), err => this.error = err.message @@ -78,9 +83,9 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { userUpdate.videoQuota = parseInt(this.form.value['videoQuota'], 10) userUpdate.videoQuotaDaily = parseInt(this.form.value['videoQuotaDaily'], 10) - this.userService.updateUser(this.userId, userUpdate).subscribe( + this.userService.updateUser(this.user.id, userUpdate).subscribe( () => { - this.notifier.success(this.i18n('User {{username}} updated.', { username: this.username })) + this.notifier.success(this.i18n('User {{user.username}} updated.', { username: this.user.username })) this.router.navigate([ '/admin/users/list' ]) }, @@ -101,10 +106,10 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { } resetPassword () { - this.userService.askResetPassword(this.userEmail).subscribe( + this.userService.askResetPassword(this.user.email).subscribe( () => { this.notifier.success( - this.i18n('An email asking for password reset has been sent to {{username}}.', { username: this.username }) + this.i18n('An email asking for password reset has been sent to {{username}}.', { username: this.user.username }) ) }, @@ -112,14 +117,12 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { ) } - private onUserFetched (userJson: User) { - this.userId = userJson.id - this.username = userJson.username - this.userEmail = userJson.email + private onUserFetched (userJson: UserType) { + this.user = new User(userJson) this.form.patchValue({ email: userJson.email, - role: userJson.role, + role: userJson.role.toString(), videoQuota: userJson.videoQuota, videoQuotaDaily: userJson.videoQuotaDaily, byPassAutoBlacklist: userJson.adminFlags & UserAdminFlag.BY_PASS_VIDEO_AUTO_BLACKLIST diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts index db8ffac16..f8c04cb4d 100644 --- a/client/src/app/+my-account/my-account.module.ts +++ b/client/src/app/+my-account/my-account.module.ts @@ -15,7 +15,6 @@ import { MyAccountProfileComponent } from '@app/+my-account/my-account-settings/ import { MyAccountVideoChannelsComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channels.component' import { MyAccountVideoChannelCreateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-create.component' import { MyAccountVideoChannelUpdateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-update.component' -import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-info.component' import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component' import { MyAccountDangerZoneComponent } from '@app/+my-account/my-account-settings/my-account-danger-zone' import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component' @@ -63,7 +62,6 @@ import { MyAccountChangeEmailComponent } from '@app/+my-account/my-account-setti MyAccountVideoChannelsComponent, MyAccountVideoChannelCreateComponent, MyAccountVideoChannelUpdateComponent, - ActorAvatarInfoComponent, MyAccountVideoImportsComponent, MyAccountDangerZoneComponent, MyAccountSubscriptionsComponent, diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.html b/client/src/app/+my-account/shared/actor-avatar-info.component.html index 2050950be..82f5123de 100644 --- a/client/src/app/+my-account/shared/actor-avatar-info.component.html +++ b/client/src/app/+my-account/shared/actor-avatar-info.component.html @@ -1,14 +1,17 @@
- Avatar +
+ Avatar -
-
- - +
+
+ + +
+
{{ actor.displayName }}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 75aa30dab..b89f0a8d1 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -106,6 +106,7 @@ import { InputSwitchModule } from 'primeng/inputswitch' import { MyAccountVideoSettingsComponent } from '@app/+my-account/my-account-settings/my-account-video-settings' import { MyAccountInterfaceSettingsComponent } from '@app/+my-account/my-account-settings/my-account-interface' +import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-info.component' @NgModule({ imports: [ @@ -189,7 +190,8 @@ import { MyAccountInterfaceSettingsComponent } from '@app/+my-account/my-account PreviewUploadComponent, MyAccountVideoSettingsComponent, - MyAccountInterfaceSettingsComponent + MyAccountInterfaceSettingsComponent, + ActorAvatarInfoComponent ], exports: [ @@ -270,7 +272,8 @@ import { MyAccountInterfaceSettingsComponent } from '@app/+my-account/my-account VideoDurationPipe, MyAccountVideoSettingsComponent, - MyAccountInterfaceSettingsComponent + MyAccountInterfaceSettingsComponent, + ActorAvatarInfoComponent ], providers: [ diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts index a37cae749..76c57d2fb 100644 --- a/client/src/app/shared/users/user.model.ts +++ b/client/src/app/shared/users/user.model.ts @@ -51,6 +51,11 @@ export class User implements UserServerModel { videoQuotaDaily: number videoQuotaUsed?: number videoQuotaUsedDaily?: number + videosCount?: number + videoAbusesCount?: number + videoAbusesAcceptedCount?: number + videoAbusesCreatedCount?: number + videoCommentsCount?: number theme: string @@ -79,6 +84,11 @@ export class User implements UserServerModel { this.videoQuotaDaily = hash.videoQuotaDaily this.videoQuotaUsed = hash.videoQuotaUsed this.videoQuotaUsedDaily = hash.videoQuotaUsedDaily + this.videosCount = hash.videosCount + this.videoAbusesCount = hash.videoAbusesCount + this.videoAbusesAcceptedCount = hash.videoAbusesAcceptedCount + this.videoAbusesCreatedCount = hash.videoAbusesCreatedCount + this.videoCommentsCount = hash.videoCommentsCount this.nsfwPolicy = hash.nsfwPolicy this.webTorrentEnabled = hash.webTorrentEnabled diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts index a79343646..5442a8453 100644 --- a/client/src/app/shared/users/user.service.ts +++ b/client/src/app/shared/users/user.service.ts @@ -234,8 +234,9 @@ export class UserService { return this.userCache[userId] } - getUser (userId: number) { - return this.authHttp.get(UserService.BASE_USERS_URL + userId) + getUser (userId: number, withStats = false) { + const params = new HttpParams().append('withStats', withStats + '') + return this.authHttp.get(UserService.BASE_USERS_URL + userId, { params }) .pipe(catchError(err => this.restExtractor.handleError(err))) } diff --git a/client/src/app/shared/video/modals/video-report.component.html b/client/src/app/shared/video/modals/video-report.component.html index b9434da26..cc1d361b3 100644 --- a/client/src/app/shared/video/modals/video-report.component.html +++ b/client/src/app/shared/video/modals/video-report.component.html @@ -7,8 +7,7 @@
- Your report will be sent to moderators of {{ currentHost }}. - It will be forwarded to origin instance {{ originHost }} too. + Your report will be sent to moderators of {{ currentHost }} and will be forwarded to the video origin ({{ originHost }}) too.
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index e8dfb79bc..f96a43b34 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -621,3 +621,85 @@ } } } + +@mixin breadcrumb { + display: flex; + flex-wrap: wrap; + padding: 0.75rem 1rem; + margin-bottom: 1rem; + list-style: none; + background-color: var(--submenuColor); + border-radius: 0.25rem; + + .breadcrumb-item { + display: flex; + + a { + color: var(--mainColor); + } + + & + .breadcrumb-item { + padding-left: 0.5rem; + &::before { + display: inline-block; + padding-right: 0.5rem; + color: #6c757d; + content: "/"; + } + } + + &.active { + color: #6c757d; + } + } +} + +@mixin dashboard { + display: flex; + flex-wrap: wrap; + margin: 0 -5px; + + & > div { + box-sizing: border-box; + flex: 0 0 percentage(1/3); + padding: 0 5px; + margin-bottom: 10px; + + & > a { + text-decoration: none; + color: inherit; + display: block; + font-size: 18px; + + &:active, + &:focus, + &:hover { + opacity: .8; + } + } + + & > a, + & > div { + padding: 20px; + background: var(--submenuColor); + border-radius: 4px; + box-sizing: border-box; + height: 100%; + } + } + + .dashboard-num, .dashboard-text { + text-align: center; + font-size: 130%; + line-height: 21px; + color: var(--mainForegroundColor); + line-height: 30px; + margin-bottom: 20px; + } + + .dashboard-label { + font-size: 90%; + color: var(--inputPlaceholderColor); + text-align: center; + } +} -- cgit v1.2.3