Add overview of a user's actions in user-edit (#2558)

8 files changed, 249 insertions, 119 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 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"
                       >
                         <ng-container ngProjectAs="description">
-                          <span i18n>Allow your users to upload .mkv, .mov, .avi and .flv videos.</span>
+                          <span i18n>Allows users to upload .mkv, .mov, .avi and .flv videos.</span>
                         </ng-container>
                       </my-peertube-checkbox>
                     </div>
@@ -590,7 +590,7 @@
                         i18n-labelText labelText="Allow audio files upload"
                       >
                         <ng-container ngProjectAs="description">
-                          <span i18n>Allow your users to upload audio files that will be merged with the preview file on upload.</span>
+                          <span i18n>Allows users to upload audio files that will be merged with the preview file on upload.</span>
                         </ng-container>
                       </my-peertube-checkbox>
                     </div>
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 @@
-<div i18n class="form-sub-title" *ngIf="isCreation() === true">Create user</div>
-<div i18n class="form-sub-title" *ngIf="isCreation() === false">Edit user {{ username }}</div>
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item">
+      <a routerLink="/admin/users" i18n>Users</a>
+    </li>
 
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+    <ng-container *ngIf="isCreation()">
+      <li class="breadcrumb-item active" i18n>Create</li>
+    </ng-container>
+    <ng-container *ngIf="!isCreation()">
+      <li class="breadcrumb-item active" i18n>Edit</li>
+      <li class="breadcrumb-item active" aria-current="page">
+        <a *ngIf="user" [routerLink]="[ '/accounts', user?.username ]">{{ user?.username }}</a>
+      </li>
+    </ng-container>
+  </ol>
+</nav>
 
-<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
-  <div class="form-group" *ngIf="isCreation()">
-    <label i18n for="username">Username</label>
-    <input
-      type="text" id="username" i18n-placeholder placeholder="john"
-      formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
-    >
-    <div *ngIf="formErrors.username" class="form-error">
-      {{ formErrors.username }}
+<ng-template #dashboard>
+  <div *ngIf="!isCreation() && user" class="dashboard">
+    <div>
+      <a>
+        <div class="dashboard-num">{{ user.videosCount }} ({{ user.videoQuotaUsed | bytes: 0 }})</div>
+        <div class="dashboard-label" i18n>{user.videosCount, plural, =1 {Video} other {Videos}}</div>
+      </a>
     </div>
-  </div>
-
-  <div class="form-group">
-    <label i18n for="email">Email</label>
-    <input
-      type="text" id="email" i18n-placeholder placeholder="mail@example.com"
-      formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
-      autocomplete="off"
-    >
-    <div *ngIf="formErrors.email" class="form-error">
-      {{ formErrors.email }}
+    <div>
+      <a>
+        <div class="dashboard-num">{{ user.videoChannels.length || 0 }}</div>
+        <div class="dashboard-label" i18n>{user.videoChannels.length, plural, =1 {Channel} other {Channels}}</div>
+      </a>
     </div>
-  </div>
-
-  <div class="form-group" *ngIf="isCreation()">
-    <label i18n for="password">Password</label>
-    <my-help *ngIf="isPasswordOptional()">
-      <ng-template ptTemplate="customHtml">
-        <ng-container i18n>
-          If you leave the password empty, an email will be sent to the user.
-        </ng-container>
-      </ng-template>
-    </my-help>
-    <input
-      type="password" id="password" autocomplete="new-password"
-      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
-    >
-    <div *ngIf="formErrors.password" class="form-error">
-      {{ formErrors.password }}
+    <div>
+      <a>
+        <div class="dashboard-num">{{ subscribersCount }}</div>
+        <div class="dashboard-label" i18n>{subscribersCount, plural, =1 {Subscriber} other {Subscribers}}</div>
+      </a>
+    </div>
+    <div>
+      <a>
+        <div class="dashboard-num">{{ user.videoAbusesCount }}</div>
+        <div class="dashboard-label" i18n>Incriminated in reports</div>
+      </a>
+    </div>
+    <div>
+      <a>
+        <div class="dashboard-num">{{ user.videoAbusesAcceptedCount }} / {{ user.videoAbusesCreatedCount }}</div>
+        <div class="dashboard-label" i18n>Authored reports accepted</div>
+      </a>
+    </div>
+    <div>
+      <a>
+        <div class="dashboard-num">{{ user.videoCommentsCount }}</div>
+        <div class="dashboard-label" i18n>{user.videoCommentsCount, plural, =1 {Comment} other {Comments}}</div>
+      </a>
     </div>
   </div>
+</ng-template>
 
-  <div class="form-group">
-    <label i18n for="role">Role</label>
-    <div class="peertube-select-container">
-      <select id="role" formControlName="role">
-        <option *ngFor="let role of roles" [value]="role.value">
-          {{ role.label }}
-        </option>
-      </select>
-    </div>
+<div class="form-row" *ngIf="!isInBigView()"> <!-- hidden on large screens, as it is then displayed on the right side of the form -->
+  <div class="col-12 col-xl-3"></div>
 
-    <div *ngIf="formErrors.role" class="form-error">
-      {{ formErrors.role }}
-    </div>
+  <div class="form-group-right col-12 col-xl-9">
+    <ng-template *ngTemplateOutlet="dashboard"></ng-template>
   </div>
+</div>
 
-  <div class="form-group">
-    <label i18n for="videoQuota">Video quota</label>
-    <div class="peertube-select-container">
-      <select id="videoQuota" formControlName="videoQuota">
-        <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
-          {{ videoQuotaOption.label }}
-        </option>
-      </select>
-    </div>
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-    <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
-      Transcoding is enabled on server. The video quota only take in account <strong>original</strong> video. <br />
-      At most, this user could use ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
+<div class="form-row mt-4"> <!-- user grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="anchor" id="user"></div> <!-- user anchor -->
+    <div *ngIf="isCreation()" class="account-title" i18n>NEW USER</div>
+    <div *ngIf="!isCreation() && user" class="account-title">
+      <my-actor-avatar-info [actor]="user.account"></my-actor-avatar-info>
     </div>
   </div>
 
-  <div class="form-group">
-    <label i18n for="videoQuotaDaily">Daily video quota</label>
-    <div class="peertube-select-container">
-      <select id="videoQuotaDaily" formControlName="videoQuotaDaily">
-        <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
-          {{ videoQuotaDailyOption.label }}
-        </option>
-      </select>
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
+
+    <form role="form" (ngSubmit)="formValidated()" [formGroup]="form" [ngClass]="{ 'col-5': isInBigView() }">
+      <div class="form-group" *ngIf="isCreation()">
+        <label i18n for="username">Username</label>
+        <input
+          type="text" id="username" i18n-placeholder placeholder="john"
+          formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
+        >
+        <div *ngIf="formErrors.username" class="form-error">
+          {{ formErrors.username }}
+        </div>
+      </div>
+  
+      <div class="form-group">
+        <label i18n for="email">Email</label>
+        <input
+          type="text" id="email" i18n-placeholder placeholder="mail@example.com"
+          formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
+          autocomplete="off"
+        >
+        <div *ngIf="formErrors.email" class="form-error">
+          {{ formErrors.email }}
+        </div>
+      </div>
+  
+      <div class="form-group" *ngIf="isCreation()">
+        <label i18n for="password">Password</label>
+        <my-help *ngIf="isPasswordOptional()">
+          <ng-template ptTemplate="customHtml">
+            <ng-container i18n>
+              If you leave the password empty, an email will be sent to the user.
+            </ng-container>
+          </ng-template>
+        </my-help>
+        <input
+          type="password" id="password" autocomplete="new-password"
+          formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+        >
+        <div *ngIf="formErrors.password" class="form-error">
+          {{ formErrors.password }}
+        </div>
+      </div>
+  
+      <div class="form-group">
+        <label i18n for="role">Role</label>
+        <div class="peertube-select-container">
+            <select id="role" formControlName="role">
+              <option *ngFor="let role of roles" [value]="role.value">
+               {{ role.label }}
+              </option>
+            </select>
+        </div>
+  
+        <div *ngIf="formErrors.role" class="form-error">
+          {{ formErrors.role }}
+        </div>
+      </div>
+  
+      <div class="form-group">
+        <label i18n for="videoQuota">Video quota</label>
+        <div class="peertube-select-container">
+          <select id="videoQuota" formControlName="videoQuota">
+            <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
+              {{ videoQuotaOption.label }}
+            </option>
+          </select>
+        </div>
+  
+        <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>
+  
+      <div class="form-group">
+        <label i18n for="videoQuotaDaily">Daily video quota</label>
+        <div class="peertube-select-container">
+          <select id="videoQuotaDaily" formControlName="videoQuotaDaily">
+            <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
+              {{ videoQuotaDailyOption.label }}
+            </option>
+          </select>
+        </div>
+      </div>
+  
+      <div class="form-group">
+        <my-peertube-checkbox
+          inputName="byPassAutoBlacklist" formControlName="byPassAutoBlacklist"
+          i18n-labelText labelText="Doesn't need review before a video goes public"
+        ></my-peertube-checkbox>
+      </div>
+  
+      <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+    </form>
+
+    <div *ngIf="isInBigView()" class="col-7">
+      <ng-template *ngTemplateOutlet="dashboard"></ng-template>
     </div>
+
   </div>
+</div>
+
 
-  <div class="form-group">
-    <my-peertube-checkbox
-      inputName="byPassAutoBlacklist" formControlName="byPassAutoBlacklist"
-      i18n-labelText labelText="Bypass video auto blacklist"
-    ></my-peertube-checkbox>
+<div *ngIf="!isCreation() && user" class="form-row mt-4"> <!-- danger zone grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="anchor" id="danger"></div> <!-- danger zone anchor -->
+    <div i18n class="account-title">DANGER ZONE</div>
   </div>
 
-  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
-</form>
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
 
-<div *ngIf="!isCreation()" class="danger-zone">
-  <div class="account-title" i18n>Danger Zone</div>
+    <div class="danger-zone">
+      <div class="form-group reset-password-email">
+        <label i18n>Send a link to reset the password by email to the user</label>
+        <button (click)="resetPassword()" i18n>Ask for new password</button>
+      </div>
 
-  <div class="form-group reset-password-email">
-    <label i18n>Send a link to reset the password by email to the user</label>
-    <button (click)="resetPassword()" i18n>Ask for new password</button>
-  </div>
+      <div class="form-group">
+        <label i18n>Manually set the user password</label>
+        <my-user-password [userId]="user.id"></my-user-password>
+      </div>
+    </div>
 
-  <div class="form-group">
-    <label i18n>Manually set the user password</label>
-    <my-user-password [userId]="userId"></my-user-password>
   </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 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