Add account settings new design

11 files changed, 217 insertions, 0 deletions

diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.html b/client/src/app/account/account-settings/account-change-password/account-change-password.component.html
new file mode 100644
index 000000000..bfb55218f
--- /dev/null
+++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.html
@@ -0,0 +1,18 @@
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
+  <input
+    type="password" class="form-control" id="new-password" placeholder="Old password"
+    formControlName="new-password"
+  >
+  <div *ngIf="formErrors['new-password']" class="alert alert-danger">
+    {{ formErrors['new-password'] }}
+  </div>
+
+  <input
+    type="password" id="new-confirmed-password" placeholder="New password"
+    formControlName="new-confirmed-password"
+  >
+
+  <input type="submit" value="Change password" [disabled]="!form.valid">
+</form>
diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
new file mode 100644
index 000000000..593355b70
--- /dev/null
+++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
@@ -0,0 +1,9 @@
+input[type=password] {
+  @include peertube-input-text(340px);
+  display: block;
+  margin-bottom: 10px;
+}
+
+input[type=submit] {
+  @include peertube-button;
+}
diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.ts b/client/src/app/account/account-settings/account-change-password/account-change-password.component.ts
new file mode 100644
index 000000000..8979e1734
--- /dev/null
+++ b/client/src/app/account/account-settings/account-change-password/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: './account-change-password.component.html',
+  styleUrls: [ './account-change-password.component.scss' ]
+})
+export class AccountChangePasswordComponent 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/account/account-settings/account-change-password/index.ts b/client/src/app/account/account-settings/account-change-password/index.ts
new file mode 100644
index 000000000..44c330b66
--- /dev/null
+++ b/client/src/app/account/account-settings/account-change-password/index.ts
@@ -0,0 +1 @@
+export * from './account-change-password.component'
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.html b/client/src/app/account/account-settings/account-details/account-details.component.html
new file mode 100644
index 000000000..c3cf6b629
--- /dev/null
+++ b/client/src/app/account/account-settings/account-details/account-details.component.html
@@ -0,0 +1,14 @@
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
+  <input
+    type="checkbox" id="displayNSFW"
+    formControlName="displayNSFW"
+  >
+  <label for="displayNSFW">Display videos that contain mature or explicit content</label>
+  <div *ngIf="formErrors['displayNSFW']" class="alert alert-danger">
+    {{ formErrors['displayNSFW'] }}
+  </div>
+
+  <input type="submit" value="Update" [disabled]="!form.valid">
+</form>
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.scss b/client/src/app/account/account-settings/account-details/account-details.component.scss
new file mode 100644
index 000000000..b1810d4f9
--- /dev/null
+++ b/client/src/app/account/account-settings/account-details/account-details.component.scss
@@ -0,0 +1,11 @@
+label {
+  font-size: 15px;
+  font-weight: $font-regular;
+  margin-left: 5px;
+}
+
+input[type=submit] {
+  @include peertube-button;
+
+  display: block;
+}
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.ts b/client/src/app/account/account-settings/account-details/account-details.component.ts
new file mode 100644
index 000000000..d835c53e5
--- /dev/null
+++ b/client/src/app/account/account-settings/account-details/account-details.component.ts
@@ -0,0 +1,61 @@
+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: './account-details.component.html',
+  styleUrls: [ './account-details.component.scss' ]
+})
+
+export class AccountDetailsComponent extends FormReactive implements OnInit {
+  @Input() user: User = null
+
+  error: string = 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({
+      displayNSFW: [ this.user.displayNSFW ]
+    })
+
+    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
+  }
+
+  ngOnInit () {
+    this.buildForm()
+  }
+
+  updateDetails () {
+    const displayNSFW = this.form.value['displayNSFW']
+    const details: UserUpdateMe = {
+      displayNSFW
+    }
+
+    this.error = null
+    this.userService.updateMyDetails(details).subscribe(
+      () => {
+        this.notificationsService.success('Success', 'Information updated.')
+
+        this.authService.refreshUserInformation()
+      },
+
+      err => this.error = err.message
+    )
+  }
+}
diff --git a/client/src/app/account/account-settings/account-details/index.ts b/client/src/app/account/account-settings/account-details/index.ts
new file mode 100644
index 000000000..4829f608a
--- /dev/null
+++ b/client/src/app/account/account-settings/account-details/index.ts
@@ -0,0 +1 @@
+export * from './account-details.component'
diff --git a/client/src/app/account/account-settings/account-settings.component.html b/client/src/app/account/account-settings/account-settings.component.html
new file mode 100644
index 000000000..2509eb5aa
--- /dev/null
+++ b/client/src/app/account/account-settings/account-settings.component.html
@@ -0,0 +1,9 @@
+<div class="user-info">
+  {{ user.username }}
+</div>
+
+<div class="account-title">Account settings</div>
+<my-account-change-password></my-account-change-password>
+
+<div class="account-title">Filtering</div>
+<my-account-details [user]="user"></my-account-details>
diff --git a/client/src/app/account/account-settings/account-settings.component.scss b/client/src/app/account/account-settings/account-settings.component.scss
new file mode 100644
index 000000000..a0822631d
--- /dev/null
+++ b/client/src/app/account/account-settings/account-settings.component.scss
@@ -0,0 +1,13 @@
+.user-info {
+  font-size: 20px;
+  font-weight: $font-bold;
+}
+
+.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/account/account-settings/account-settings.component.ts b/client/src/app/account/account-settings/account-settings.component.ts
new file mode 100644
index 000000000..c3b670e02
--- /dev/null
+++ b/client/src/app/account/account-settings/account-settings.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core'
+import { User } from '../../shared'
+import { AuthService } from '../../core'
+
+@Component({
+  selector: 'my-account-settings',
+  templateUrl: './account-settings.component.html',
+  styleUrls: [ './account-settings.component.scss' ]
+})
+export class AccountSettingsComponent implements OnInit {
+  user: User = null
+
+  constructor (private authService: AuthService) {}
+
+  ngOnInit () {
+    this.user = this.authService.getUser()
+  }
+}