Rename account module to my-account

11 files changed, 362 insertions, 0 deletions

diff --git a/client/src/app/my-account/my-account-settings/my-account-change-password/index.ts b/client/src/app/my-account/my-account-settings/my-account-change-password/index.ts
new file mode 100644
index 000000000..644047c5f
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-change-password/index.ts
@@ -0,0 +1 @@
+export * from './my-account-change-password.component'
diff --git a/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
new file mode 100644
index 000000000..b0e3cada4
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -0,0 +1,20 @@
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
+
+  <label for="new-password">Change password</label>
+  <input
+    type="password" id="new-password" placeholder="New password"
+    formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }"
+  >
+  <div *ngIf="formErrors['new-password']" class="form-error">
+    {{ formErrors['new-password'] }}
+  </div>
+
+  <input
+    type="password" id="new-confirmed-password" placeholder="Confirm new password"
+    formControlName="new-confirmed-password"
+  >
+
+  <input type="submit" value="Change password" [disabled]="!form.valid">
+</form>
diff --git a/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
new file mode 100644
index 000000000..f8279ffd3
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@@ -0,0 +1,19 @@
+@import '_variables';
+@import '_mixins';
+
+input[type=password] {
+  @include peertube-input-text(340px);
+  display: block;
+
+  &#new-confirmed-password {
+    margin-top: 15px;
+  }
+}
+
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+
+  margin-top: 15px;
+}
+
diff --git a/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
new file mode 100644
index 000000000..80af668f9
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
@@ -0,0 +1,62 @@
+import { Component, OnInit } from '@angular/core'
+import { FormBuilder, FormGroup } from '@angular/forms'
+import { NotificationsService } from 'angular2-notifications'
+import { FormReactive, USER_PASSWORD, UserService } from '../../../shared'
+
+@Component({
+  selector: 'my-account-change-password',
+  templateUrl: './my-account-change-password.component.html',
+  styleUrls: [ './my-account-change-password.component.scss' ]
+})
+export class MyAccountChangePasswordComponent extends FormReactive implements OnInit {
+  error: string = null
+
+  form: FormGroup
+  formErrors = {
+    'new-password': '',
+    'new-confirmed-password': ''
+  }
+  validationMessages = {
+    'new-password': USER_PASSWORD.MESSAGES,
+    'new-confirmed-password': USER_PASSWORD.MESSAGES
+  }
+
+  constructor (
+    private formBuilder: FormBuilder,
+    private notificationsService: NotificationsService,
+    private userService: UserService
+  ) {
+    super()
+  }
+
+  buildForm () {
+    this.form = this.formBuilder.group({
+      'new-password': [ '', USER_PASSWORD.VALIDATORS ],
+      'new-confirmed-password': [ '', USER_PASSWORD.VALIDATORS ]
+    })
+
+    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
+  }
+
+  ngOnInit () {
+    this.buildForm()
+  }
+
+  changePassword () {
+    const newPassword = this.form.value['new-password']
+    const newConfirmedPassword = this.form.value['new-confirmed-password']
+
+    this.error = null
+
+    if (newPassword !== newConfirmedPassword) {
+      this.error = 'The new password and the confirmed password do not correspond.'
+      return
+    }
+
+    this.userService.changePassword(newPassword).subscribe(
+      () => this.notificationsService.success('Success', 'Password updated.'),
+
+      err => this.error = err.message
+    )
+  }
+}
diff --git a/client/src/app/my-account/my-account-settings/my-account-details/index.ts b/client/src/app/my-account/my-account-settings/my-account-details/index.ts
new file mode 100644
index 000000000..b7f58e329
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-details/index.ts
@@ -0,0 +1 @@
+export * from './my-account-details.component'
diff --git a/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.html b/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.html
new file mode 100644
index 000000000..0e8598e9e
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.html
@@ -0,0 +1,25 @@
+<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
+  <div class="form-group">
+    <label for="nsfwPolicy">Default policy on videos containing sensitive content</label>
+    <my-help helpType="custom" customHtml="With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video."></my-help>
+
+    <div class="peertube-select-container">
+      <select id="nsfwPolicy" formControlName="nsfwPolicy">
+        <option value="do_not_list">Do not list</option>
+        <option value="blur">Blur thumbnails</option>
+        <option value="display">Display</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <input
+      type="checkbox" id="autoPlayVideo"
+      formControlName="autoPlayVideo"
+    >
+    <label for="autoPlayVideo"></label>
+    <label for="autoPlayVideo">Automatically plays video</label>
+  </div>
+
+  <input type="submit" value="Save" [disabled]="!form.valid">
+</form>
diff --git a/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.scss b/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.scss
new file mode 100644
index 000000000..ed59e4689
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.scss
@@ -0,0 +1,20 @@
+@import '_variables';
+@import '_mixins';
+
+input[type=checkbox] {
+  @include peertube-checkbox(1px);
+}
+
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+
+  display: block;
+  margin-top: 15px;
+}
+
+.peertube-select-container {
+  @include peertube-select-container(340px);
+
+  margin-bottom: 30px;
+}
\ No newline at end of file
diff --git a/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.ts b/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.ts
new file mode 100644
index 000000000..4c1456541
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.ts
@@ -0,0 +1,60 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { FormBuilder, FormGroup } from '@angular/forms'
+import { NotificationsService } from 'angular2-notifications'
+import { UserUpdateMe } from '../../../../../../shared'
+import { AuthService } from '../../../core'
+import { FormReactive, User, UserService } from '../../../shared'
+
+@Component({
+  selector: 'my-account-details',
+  templateUrl: './my-account-details.component.html',
+  styleUrls: [ './my-account-details.component.scss' ]
+})
+export class MyAccountDetailsComponent extends FormReactive implements OnInit {
+  @Input() user: User = null
+
+  form: FormGroup
+  formErrors = {}
+  validationMessages = {}
+
+  constructor (
+    private authService: AuthService,
+    private formBuilder: FormBuilder,
+    private notificationsService: NotificationsService,
+    private userService: UserService
+  ) {
+    super()
+  }
+
+  buildForm () {
+    this.form = this.formBuilder.group({
+      nsfwPolicy: [ this.user.nsfwPolicy ],
+      autoPlayVideo: [ this.user.autoPlayVideo ]
+    })
+
+    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
+  }
+
+  ngOnInit () {
+    this.buildForm()
+  }
+
+  updateDetails () {
+    const nsfwPolicy = this.form.value['nsfwPolicy']
+    const autoPlayVideo = this.form.value['autoPlayVideo']
+    const details: UserUpdateMe = {
+      nsfwPolicy,
+      autoPlayVideo
+    }
+
+    this.userService.updateMyDetails(details).subscribe(
+      () => {
+        this.notificationsService.success('Success', 'Information updated.')
+
+        this.authService.refreshUserInformation()
+      },
+
+      err => this.notificationsService.error('Error', err.message)
+    )
+  }
+}
diff --git a/client/src/app/my-account/my-account-settings/my-account-settings.component.html b/client/src/app/my-account/my-account-settings/my-account-settings.component.html
new file mode 100644
index 000000000..7ae27dc75
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-settings.component.html
@@ -0,0 +1,24 @@
+<div class="user">
+  <img [src]="getAvatarUrl()" alt="Avatar" />
+
+  <div class="user-info">
+    <div class="user-info-username">{{ user.username }}</div>
+    <div class="user-info-followers">{{ user.account?.followersCount }} subscribers</div>
+  </div>
+</div>
+
+<div class="button-file">
+  <span>Change your avatar</span>
+  <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="changeAvatar()" />
+</div>
+<div class="file-max-size">(extensions: {{ avatarExtensions }}, max size: {{ maxAvatarSize | bytes }})</div>
+
+<div class="user-quota">
+  <span class="user-quota-label">Video quota:</span> {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }}
+</div>
+
+<div class="account-title">Account settings</div>
+<my-account-change-password></my-account-change-password>
+
+<div class="account-title">Video settings</div>
+<my-account-details [user]="user"></my-account-details>
diff --git a/client/src/app/my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/my-account/my-account-settings/my-account-settings.component.scss
new file mode 100644
index 000000000..1cc00ca49
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-settings.component.scss
@@ -0,0 +1,56 @@
+@import '_variables';
+@import '_mixins';
+
+.user {
+  display: flex;
+
+  img {
+    @include avatar(50px);
+
+    margin-right: 15px;
+  }
+
+  .user-info {
+    .user-info-username {
+      font-size: 20px;
+      font-weight: $font-bold;
+    }
+
+    .user-info-followers {
+      font-size: 15px;
+    }
+  }
+}
+
+.button-file {
+  @include peertube-button-file(160px);
+
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.file-max-size {
+  display: inline-block;
+  font-size: 13px;
+
+  position: relative;
+  top: -10px;
+}
+
+.user-quota {
+  font-size: 15px;
+  margin-top: 20px;
+
+  .user-quota-label {
+    font-weight: $font-semibold;
+  }
+}
+
+.account-title {
+  text-transform: uppercase;
+  color: $orange-color;
+  font-weight: $font-bold;
+  font-size: 13px;
+  margin-top: 55px;
+  margin-bottom: 30px;
+}
diff --git a/client/src/app/my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/my-account/my-account-settings/my-account-settings.component.ts
new file mode 100644
index 000000000..91420cc6f
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-settings.component.ts
@@ -0,0 +1,74 @@
+import { Component, OnInit, ViewChild } from '@angular/core'
+import { NotificationsService } from 'angular2-notifications'
+import { BytesPipe } from 'ngx-pipes'
+import { AuthService } from '../../core'
+import { ServerService } from '../../core/server'
+import { User } from '../../shared'
+import { UserService } from '../../shared/users'
+
+@Component({
+  selector: 'my-account-settings',
+  templateUrl: './my-account-settings.component.html',
+  styleUrls: [ './my-account-settings.component.scss' ]
+})
+export class MyAccountSettingsComponent implements OnInit {
+  @ViewChild('avatarfileInput') avatarfileInput
+
+  user: User = null
+  userVideoQuota = '0'
+  userVideoQuotaUsed = 0
+
+  constructor (
+    private userService: UserService,
+    private authService: AuthService,
+    private serverService: ServerService,
+    private notificationsService: NotificationsService
+  ) {}
+
+  ngOnInit () {
+    this.user = this.authService.getUser()
+
+    this.authService.userInformationLoaded.subscribe(
+      () => {
+        if (this.user.videoQuota !== -1) {
+          this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString()
+        } else {
+          this.userVideoQuota = 'Unlimited'
+        }
+      }
+    )
+
+    this.userService.getMyVideoQuotaUsed()
+      .subscribe(data => this.userVideoQuotaUsed = data.videoQuotaUsed)
+  }
+
+  getAvatarUrl () {
+    return this.user.getAvatarUrl()
+  }
+
+  changeAvatar () {
+    const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
+
+    const formData = new FormData()
+    formData.append('avatarfile', avatarfile)
+
+    this.userService.changeAvatar(formData)
+      .subscribe(
+        data => {
+          this.notificationsService.success('Success', 'Avatar changed.')
+
+          this.user.account.avatar = data.avatar
+        },
+
+        err => this.notificationsService.error('Error', err.message)
+      )
+  }
+
+  get maxAvatarSize () {
+    return this.serverService.getConfig().avatar.file.size.max
+  }
+
+  get avatarExtensions () {
+    return this.serverService.getConfig().avatar.file.extensions.join(',')
+  }
+}