Put admin users in overview tab

9 files changed, 754 insertions, 0 deletions

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 @@
+export * from './user-create.component'
+export * from './user-update.component'
+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 @@
+import { Component, OnInit } from '@angular/core'
+import { Router } from '@angular/router'
+import { ConfigService } from '@app/+admin/config/shared/config.service'
+import { AuthService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
+import {
+  USER_CHANNEL_NAME_VALIDATOR,
+  USER_EMAIL_VALIDATOR,
+  USER_PASSWORD_OPTIONAL_VALIDATOR,
+  USER_PASSWORD_VALIDATOR,
+  USER_ROLE_VALIDATOR,
+  USER_USERNAME_VALIDATOR,
+  USER_VIDEO_QUOTA_DAILY_VALIDATOR,
+  USER_VIDEO_QUOTA_VALIDATOR
+} from '@app/shared/form-validators/user-validators'
+import { FormValidatorService } from '@app/shared/shared-forms'
+import { UserCreate, UserRole } from '@shared/models'
+import { UserEdit } from './user-edit'
+
+@Component({
+  selector: 'my-user-create',
+  templateUrl: './user-edit.component.html',
+  styleUrls: [ './user-edit.component.scss' ]
+})
+export class UserCreateComponent extends UserEdit implements OnInit {
+  error: string
+
+  constructor (
+    protected serverService: ServerService,
+    protected formValidatorService: FormValidatorService,
+    protected configService: ConfigService,
+    protected screenService: ScreenService,
+    protected auth: AuthService,
+    private router: Router,
+    private notifier: Notifier,
+    private userService: UserService
+  ) {
+    super()
+
+    this.buildQuotaOptions()
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+
+    const defaultValues = {
+      role: UserRole.USER.toString(),
+      videoQuota: -1,
+      videoQuotaDaily: -1
+    }
+
+    this.buildForm({
+      username: USER_USERNAME_VALIDATOR,
+      channelName: USER_CHANNEL_NAME_VALIDATOR,
+      email: USER_EMAIL_VALIDATOR,
+      password: this.isPasswordOptional() ? USER_PASSWORD_OPTIONAL_VALIDATOR : USER_PASSWORD_VALIDATOR,
+      role: USER_ROLE_VALIDATOR,
+      videoQuota: USER_VIDEO_QUOTA_VALIDATOR,
+      videoQuotaDaily: USER_VIDEO_QUOTA_DAILY_VALIDATOR,
+      byPassAutoBlock: null
+    }, defaultValues)
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const userCreate: UserCreate = this.form.value
+
+    userCreate.adminFlags = this.buildAdminFlags(this.form.value)
+
+    // A select in HTML is always mapped as a string, we convert it to number
+    userCreate.videoQuota = parseInt(this.form.value['videoQuota'], 10)
+    userCreate.videoQuotaDaily = parseInt(this.form.value['videoQuotaDaily'], 10)
+
+    this.userService.addUser(userCreate)
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`User ${userCreate.username} created.`)
+          this.router.navigate([ '/admin/users/list' ])
+        },
+
+        error: err => {
+          this.error = err.message
+        }
+      })
+  }
+
+  isCreation () {
+    return true
+  }
+
+  isPasswordOptional () {
+    return this.serverConfig.email.enabled
+  }
+
+  getFormButtonTitle () {
+    return $localize`Create user`
+  }
+}
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 @@
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item">
+      <a routerLink="/admin/users" i18n>Users</a>
+    </li>
+
+    <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]="[ '/a', user?.username ]">{{ user?.username }}</a>
+      </li>
+    </ng-container>
+  </ol>
+</nav>
+
+<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>
+      <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>
+      <a>
+        <div class="dashboard-num">{{ subscribersCount }}</div>
+        <div class="dashboard-label" i18n>{subscribersCount, plural, =1 {Subscriber} other {Subscribers}}</div>
+      </a>
+    </div>
+    <div>
+      <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' + user?.account.displayName + '&quot;' }">
+        <div class="dashboard-num">{{ user.abusesCount }}</div>
+        <div class="dashboard-label" i18n>Incriminated in reports</div>
+      </a>
+    </div>
+    <div>
+      <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'reporter:&quot;' + user?.account.displayName + '&quot; state:accepted' }">
+        <div class="dashboard-num">{{ user.abusesAcceptedCount }} / {{ user.abusesCreatedCount }}</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-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 class="col-12 col-xl-9">
+    <ng-template *ngTemplateOutlet="dashboard"></ng-template>
+  </div>
+</div>
+
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<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-edit [actor]="user.account" [editable]="false" [displaySubscribers]="false" [displayUsername]="false"></my-actor-avatar-edit>
+    </div>
+  </div>
+
+  <div class="form-group 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" class="form-control"
+          formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
+        >
+        <div *ngIf="formErrors.username" class="form-error">
+          {{ formErrors.username }}
+        </div>
+      </div>
+
+      <div class="form-group" *ngIf="isCreation()">
+        <label i18n for="channelName">Channel name</label>
+        <input
+          type="text" id="channelName" i18n-placeholder placeholder="john_channel" class="form-control"
+          formControlName="channelName" [ngClass]="{ 'input-error': formErrors['channelName'] }"
+        >
+        <div *ngIf="formErrors.channelName" class="form-error">
+          {{ formErrors.channelName }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label i18n for="email">Email</label>
+        <input
+          type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control"
+          formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
+          autocomplete="off" [readonly]="user && user.pluginAuth !== null"
+        >
+        <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>
+
+        <my-input-toggle-hidden
+          formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
+        ></my-input-toggle-hidden>
+
+        <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" class="form-control">
+              <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>
+
+        <my-select-custom-value
+          id="videoQuota"
+          [items]="videoQuotaOptions"
+          formControlName="videoQuota"
+          i18n-inputSuffix inputSuffix="bytes" inputType="number"
+          [clearable]="false"
+        ></my-select-custom-value>
+
+        <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
+          Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
+          At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
+        </div>
+
+        <div *ngIf="formErrors.videoQuota" class="form-error">
+          {{ formErrors.videoQuota }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label i18n for="videoQuotaDaily">Daily video quota</label>
+
+        <my-select-custom-value
+          id="videoQuotaDaily"
+          [items]="videoQuotaDailyOptions"
+          formControlName="videoQuotaDaily"
+          i18n-inputSuffix inputSuffix="bytes" inputType="number"
+          [clearable]="false"
+        ></my-select-custom-value>
+
+        <div *ngIf="formErrors.videoQuotaDaily" class="form-error">
+          {{ formErrors.videoQuotaDaily }}
+        </div>
+      </div>
+
+      <div class="form-group" *ngIf="!isCreation() && getAuthPlugins().length !== 0">
+        <label i18n for="pluginAuth">Auth plugin</label>
+
+        <div class="peertube-select-container">
+          <select id="pluginAuth" formControlName="pluginAuth" class="form-control">
+            <option [value]="null" i18n>None (local authentication)</option>
+            <option *ngFor="let authPlugin of getAuthPlugins()" [value]="authPlugin">{{ authPlugin }}</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <my-peertube-checkbox
+          inputName="byPassAutoBlock" formControlName="byPassAutoBlock"
+          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 *ngIf="!isCreation() && user && user.pluginAuth === null" 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 account-title-danger">DANGER ZONE</div>
+  </div>
+
+  <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
+
+    <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">
+        <label i18n>Manually set the user password</label>
+        <my-user-password [userId]="user.id"></my-user-password>
+      </div>
+    </div>
+
+  </div>
+</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 @@
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
+
+$form-base-input-width: 340px;
+
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
+.account-title {
+  @include settings-big-title;
+
+  &.account-title-danger {
+    color: lighten($color: #c54130, $amount: 10);
+  }
+}
+
+input:not([type=submit]) {
+  @include peertube-input-text($form-base-input-width);
+  display: block;
+}
+
+my-input-toggle-hidden {
+  @include responsive-width($form-base-input-width);
+
+  display: block;
+}
+
+.peertube-select-container {
+  @include peertube-select-container($form-base-input-width);
+}
+
+my-select-custom-value {
+  @include responsive-width($form-base-input-width);
+
+  display: block;
+}
+
+input[type=submit],
+button {
+  @include peertube-button;
+  @include orange-button;
+
+  margin-top: 10px;
+}
+
+.transcoding-information {
+  margin-top: 5px;
+  font-size: 11px;
+}
+
+.danger-zone {
+  .reset-password-email {
+    margin-bottom: 30px;
+
+    button {
+      @include peertube-button;
+      @include danger-button;
+      @include disable-outline;
+
+      display: block;
+      margin-top: 0;
+    }
+  }
+}
+
+.breadcrumb {
+  @include breadcrumb;
+}
+
+.dashboard {
+  @include dashboard;
+  max-width: 900px;
+}
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 @@
+import { Directive, OnInit } from '@angular/core'
+import { ConfigService } from '@app/+admin/config/shared/config.service'
+import { AuthService, ScreenService, ServerService, User } from '@app/core'
+import { FormReactive } from '@app/shared/shared-forms'
+import { USER_ROLE_LABELS } from '@shared/core-utils/users'
+import { HTMLServerConfig, UserAdminFlag, UserRole, VideoResolution } from '@shared/models'
+import { SelectOptionsItem } from '../../../../../types/select-options-item.model'
+
+@Directive()
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export abstract class UserEdit extends FormReactive implements OnInit {
+  videoQuotaOptions: SelectOptionsItem[] = []
+  videoQuotaDailyOptions: SelectOptionsItem[] = []
+  username: string
+  user: User
+
+  roles: { value: string, label: string }[] = []
+
+  protected serverConfig: HTMLServerConfig
+
+  protected abstract serverService: ServerService
+  protected abstract configService: ConfigService
+  protected abstract screenService: ScreenService
+  protected abstract auth: AuthService
+  abstract isCreation (): boolean
+  abstract getFormButtonTitle (): string
+
+  ngOnInit (): void {
+    this.serverConfig = this.serverService.getHTMLConfig()
+
+    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
+  }
+
+  getAuthPlugins () {
+    return this.serverConfig.plugin.registeredIdAndPassAuths.map(p => p.npmName)
+      .concat(this.serverConfig.plugin.registeredExternalAuths.map(p => p.npmName))
+  }
+
+  isInBigView () {
+    return this.screenService.getWindowInnerWidth() > 1600
+  }
+
+  buildRoles () {
+    const authUser = this.auth.getUser()
+
+    if (authUser.role === UserRole.ADMINISTRATOR) {
+      this.roles = Object.keys(USER_ROLE_LABELS)
+            .map(key => ({ value: key.toString(), label: USER_ROLE_LABELS[key] }))
+      return
+    }
+
+    this.roles = [
+      { value: UserRole.USER.toString(), label: USER_ROLE_LABELS[UserRole.USER] }
+    ]
+  }
+
+  isTranscodingInformationDisplayed () {
+    const formVideoQuota = parseInt(this.form.value['videoQuota'], 10)
+
+    return this.serverConfig.transcoding.enabledResolutions.length !== 0 &&
+           formVideoQuota > 0
+  }
+
+  computeQuotaWithTranscoding () {
+    const transcodingConfig = this.serverConfig.transcoding
+
+    const resolutions = transcodingConfig.enabledResolutions
+    const higherResolution = VideoResolution.H_4K
+    let multiplier = 0
+
+    for (const resolution of resolutions) {
+      multiplier += resolution / higherResolution
+    }
+
+    if (transcodingConfig.hls.enabled) multiplier *= 2
+
+    return multiplier * parseInt(this.form.value['videoQuota'], 10)
+  }
+
+  resetPassword () {
+    return
+  }
+
+  protected buildAdminFlags (formValue: any) {
+    return formValue.byPassAutoBlock ? UserAdminFlag.BYPASS_VIDEO_AUTO_BLACKLIST : UserAdminFlag.NONE
+  }
+
+  protected buildQuotaOptions () {
+    this.videoQuotaOptions = this.configService.videoQuotaOptions
+    this.videoQuotaDailyOptions = this.configService.videoQuotaDailyOptions
+  }
+}
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 @@
+<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+  <div class="form-group">
+
+    <div class="input-group">
+      <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
+        formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+      >
+      <div class="input-group-append">
+        <button class="btn btn-sm btn-outline-secondary" (click)="togglePasswordVisibility()" type="button">
+          <ng-container *ngIf="!showPassword" i18n>Show</ng-container>
+          <ng-container *ngIf="!!showPassword" i18n>Hide</ng-container>
+        </button>
+      </div>
+    </div>
+    <div *ngIf="formErrors.password" class="form-error">
+      {{ formErrors.password }}
+    </div>
+  </div>
+
+  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+</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 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+input:not([type=submit]):not([type=checkbox]) {
+  @include peertube-input-text(340px);
+
+  display: block;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 0;
+}
+
+input[type=submit] {
+  @include peertube-button;
+  @include danger-button;
+  @include disable-outline;
+
+  margin-top: 10px;
+}
+
+.input-group-append {
+  height: 30px;
+}
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 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { Notifier, UserService } from '@app/core'
+import { USER_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { UserUpdate } from '@shared/models'
+
+@Component({
+  selector: 'my-user-password',
+  templateUrl: './user-password.component.html',
+  styleUrls: [ './user-password.component.scss' ]
+})
+export class UserPasswordComponent extends FormReactive implements OnInit {
+  error: string
+  username: string
+  showPassword = false
+
+  @Input() userId: number
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private notifier: Notifier,
+    private userService: UserService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      password: USER_PASSWORD_VALIDATOR
+    })
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const userUpdate: UserUpdate = this.form.value
+
+    this.userService.updateUser(this.userId, userUpdate)
+      .subscribe({
+        next: () => this.notifier.success($localize`Password changed for user ${this.username}.`),
+
+        error: err => {
+          this.error = err.message
+        }
+      })
+  }
+
+  togglePasswordVisibility () {
+    this.showPassword = !this.showPassword
+  }
+
+  getFormButtonTitle () {
+    return $localize`Update user password`
+  }
+}
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 @@
+import { Subscription } from 'rxjs'
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { ConfigService } from '@app/+admin/config/shared/config.service'
+import { AuthService, Notifier, ScreenService, ServerService, User, UserService } from '@app/core'
+import {
+  USER_EMAIL_VALIDATOR,
+  USER_ROLE_VALIDATOR,
+  USER_VIDEO_QUOTA_DAILY_VALIDATOR,
+  USER_VIDEO_QUOTA_VALIDATOR
+} from '@app/shared/form-validators/user-validators'
+import { FormValidatorService } from '@app/shared/shared-forms'
+import { User as UserType, UserAdminFlag, UserRole, UserUpdate } from '@shared/models'
+import { UserEdit } from './user-edit'
+
+@Component({
+  selector: 'my-user-update',
+  templateUrl: './user-edit.component.html',
+  styleUrls: [ './user-edit.component.scss' ]
+})
+export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
+  error: string
+
+  private paramsSub: Subscription
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    protected serverService: ServerService,
+    protected configService: ConfigService,
+    protected screenService: ScreenService,
+    protected auth: AuthService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private notifier: Notifier,
+    private userService: UserService
+  ) {
+    super()
+
+    this.buildQuotaOptions()
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+
+    const defaultValues = {
+      role: UserRole.USER.toString(),
+      videoQuota: '-1',
+      videoQuotaDaily: '-1'
+    }
+
+    this.buildForm({
+      email: USER_EMAIL_VALIDATOR,
+      role: USER_ROLE_VALIDATOR,
+      videoQuota: USER_VIDEO_QUOTA_VALIDATOR,
+      videoQuotaDaily: USER_VIDEO_QUOTA_DAILY_VALIDATOR,
+      byPassAutoBlock: null,
+      pluginAuth: null
+    }, defaultValues)
+
+    this.paramsSub = this.route.params.subscribe(routeParams => {
+      const userId = routeParams['id']
+      this.userService.getUser(userId, true)
+        .subscribe({
+          next: user => this.onUserFetched(user),
+
+          error: err => {
+            this.error = err.message
+          }
+        })
+    })
+  }
+
+  ngOnDestroy () {
+    this.paramsSub.unsubscribe()
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const userUpdate: UserUpdate = this.form.value
+    userUpdate.adminFlags = this.buildAdminFlags(this.form.value)
+
+    // A select in HTML is always mapped as a string, we convert it to number
+    userUpdate.videoQuota = parseInt(this.form.value['videoQuota'], 10)
+    userUpdate.videoQuotaDaily = parseInt(this.form.value['videoQuotaDaily'], 10)
+
+    if (userUpdate.pluginAuth === 'null') userUpdate.pluginAuth = null
+
+    this.userService.updateUser(this.user.id, userUpdate)
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`User ${this.user.username} updated.`)
+          this.router.navigate([ '/admin/users/list' ])
+        },
+
+        error: err => {
+          this.error = err.message
+        }
+      })
+  }
+
+  isCreation () {
+    return false
+  }
+
+  isPasswordOptional () {
+    return false
+  }
+
+  getFormButtonTitle () {
+    return $localize`Update user`
+  }
+
+  resetPassword () {
+    this.userService.askResetPassword(this.user.email)
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`An email asking for password reset has been sent to ${this.user.username}.`)
+        },
+
+        error: err => {
+          this.error = err.message
+        }
+      })
+  }
+
+  private onUserFetched (userJson: UserType) {
+    this.user = new User(userJson)
+
+    this.form.patchValue({
+      email: userJson.email,
+      role: userJson.role.toString(),
+      videoQuota: userJson.videoQuota,
+      videoQuotaDaily: userJson.videoQuotaDaily,
+      pluginAuth: userJson.pluginAuth,
+      byPassAutoBlock: userJson.adminFlags & UserAdminFlag.BYPASS_VIDEO_AUTO_BLACKLIST
+    })
+  }
+}