From c30745f342480b59fb0856a059c8c2fbffbcfc6a Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Fri, 1 Dec 2017 17:38:26 +0100
Subject: Add account settings new design
---
.../account-change-password.component.html | 24 --------
.../account-change-password.component.ts | 65 ---------------------
.../app/account/account-change-password/index.ts | 1 -
.../account-details/account-details.component.html | 16 -----
.../account-details/account-details.component.ts | 68 ----------------------
client/src/app/account/account-details/index.ts | 1 -
client/src/app/account/account-routing.module.ts | 28 +++++++--
.../account-change-password.component.html | 18 ++++++
.../account-change-password.component.scss | 9 +++
.../account-change-password.component.ts | 62 ++++++++++++++++++++
.../account-change-password/index.ts | 1 +
.../account-details/account-details.component.html | 14 +++++
.../account-details/account-details.component.scss | 11 ++++
.../account-details/account-details.component.ts | 61 +++++++++++++++++++
.../account-settings/account-details/index.ts | 1 +
.../account-settings.component.html | 9 +++
.../account-settings.component.scss | 13 +++++
.../account-settings/account-settings.component.ts | 18 ++++++
client/src/app/account/account.component.html | 26 ++-------
client/src/app/account/account.component.scss | 3 -
client/src/app/account/account.component.ts | 24 +-------
client/src/app/account/account.module.ts | 9 +--
22 files changed, 252 insertions(+), 230 deletions(-)
delete mode 100644 client/src/app/account/account-change-password/account-change-password.component.html
delete mode 100644 client/src/app/account/account-change-password/account-change-password.component.ts
delete mode 100644 client/src/app/account/account-change-password/index.ts
delete mode 100644 client/src/app/account/account-details/account-details.component.html
delete mode 100644 client/src/app/account/account-details/account-details.component.ts
delete mode 100644 client/src/app/account/account-details/index.ts
create mode 100644 client/src/app/account/account-settings/account-change-password/account-change-password.component.html
create mode 100644 client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
create mode 100644 client/src/app/account/account-settings/account-change-password/account-change-password.component.ts
create mode 100644 client/src/app/account/account-settings/account-change-password/index.ts
create mode 100644 client/src/app/account/account-settings/account-details/account-details.component.html
create mode 100644 client/src/app/account/account-settings/account-details/account-details.component.scss
create mode 100644 client/src/app/account/account-settings/account-details/account-details.component.ts
create mode 100644 client/src/app/account/account-settings/account-details/index.ts
create mode 100644 client/src/app/account/account-settings/account-settings.component.html
create mode 100644 client/src/app/account/account-settings/account-settings.component.scss
create mode 100644 client/src/app/account/account-settings/account-settings.component.ts
(limited to 'client/src/app/account')
diff --git a/client/src/app/account/account-change-password/account-change-password.component.html b/client/src/app/account/account-change-password/account-change-password.component.html
deleted file mode 100644
index 92d9f900a..000000000
--- a/client/src/app/account/account-change-password/account-change-password.component.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-
-<form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
- <div class="form-group">
- <label for="new-password">New password</label>
- <input
- type="password" class="form-control" id="new-password"
- formControlName="new-password"
- >
- <div *ngIf="formErrors['new-password']" class="alert alert-danger">
- {{ formErrors['new-password'] }}
- </div>
- </div>
-
- <div class="form-group">
- <label for="name">Confirm new password</label>
- <input
- type="password" class="form-control" id="new-confirmed-password"
- formControlName="new-confirmed-password"
- >
- </div>
-
- <input type="submit" value="Change password" class="btn btn-default" [disabled]="!form.valid">
-</form>
diff --git a/client/src/app/account/account-change-password/account-change-password.component.ts b/client/src/app/account/account-change-password/account-change-password.component.ts
deleted file mode 100644
index 69edec54b..000000000
--- a/client/src/app/account/account-change-password/account-change-password.component.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Component, OnInit } from '@angular/core'
-import { FormBuilder, FormGroup } from '@angular/forms'
-import { Router } from '@angular/router'
-
-import { NotificationsService } from 'angular2-notifications'
-
-import { FormReactive, UserService, USER_PASSWORD } from '../../shared'
-
-@Component({
- selector: 'my-account-change-password',
- templateUrl: './account-change-password.component.html'
-})
-
-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-change-password/index.ts b/client/src/app/account/account-change-password/index.ts
deleted file mode 100644
index 44c330b66..000000000
--- a/client/src/app/account/account-change-password/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './account-change-password.component'
diff --git a/client/src/app/account/account-details/account-details.component.html b/client/src/app/account/account-details/account-details.component.html
deleted file mode 100644
index 8f4f176af..000000000
--- a/client/src/app/account/account-details/account-details.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-
-<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
- <div class="form-group">
- <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>
- </div>
-
- <input type="submit" value="Update" class="btn btn-default" [disabled]="!form.valid">
-</form>
diff --git a/client/src/app/account/account-details/account-details.component.ts b/client/src/app/account/account-details/account-details.component.ts
deleted file mode 100644
index d7a6e6871..000000000
--- a/client/src/app/account/account-details/account-details.component.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core'
-import { FormBuilder, FormGroup } from '@angular/forms'
-import { Router } from '@angular/router'
-
-import { NotificationsService } from 'angular2-notifications'
-
-import { AuthService } from '../../core'
-import {
- FormReactive,
- User,
- UserService,
- USER_PASSWORD
-} from '../../shared'
-import { UserUpdateMe } from '../../../../../shared'
-
-@Component({
- selector: 'my-account-details',
- templateUrl: './account-details.component.html'
-})
-
-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-details/index.ts b/client/src/app/account/account-details/index.ts
deleted file mode 100644
index 4829f608a..000000000
--- a/client/src/app/account/account-details/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './account-details.component'
diff --git a/client/src/app/account/account-routing.module.ts b/client/src/app/account/account-routing.module.ts
index 74d9aa03e..2e9de1cfb 100644
--- a/client/src/app/account/account-routing.module.ts
+++ b/client/src/app/account/account-routing.module.ts
@@ -5,17 +5,33 @@ import { MetaGuard } from '@ngx-meta/core'
import { LoginGuard } from '../core'
import { AccountComponent } from './account.component'
+import { AccountSettingsComponent } from './account-settings/account-settings.component'
const accountRoutes: Routes = [
{
path: 'account',
component: AccountComponent,
- canActivate: [ MetaGuard, LoginGuard ],
- data: {
- meta: {
- title: 'My account'
- }
- }
+ canActivateChild: [ MetaGuard, LoginGuard ],
+ children: [
+ {
+ path: 'settings',
+ component: AccountSettingsComponent,
+ data: {
+ meta: {
+ title: 'Account settings'
+ }
+ }
+ },
+ // {
+ // path: 'videos',
+ // component: AccountVideosComponent,
+ // data: {
+ // meta: {
+ // title: 'Account videos'
+ // }
+ // }
+ // }
+ ]
}
]
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()
+ }
+}
diff --git a/client/src/app/account/account.component.html b/client/src/app/account/account.component.html
index 177e54999..d82a4ca4d 100644
--- a/client/src/app/account/account.component.html
+++ b/client/src/app/account/account.component.html
@@ -1,25 +1,11 @@
<div class="row">
- <div class="content-padding">
- <h3>Account</h3>
+ <div class="sub-menu">
+ <a routerLink="/account/settings" routerLinkActive="active" class="title-page">My account</a>
- <div class="col-md-6 col-sm-12">
- <div class="panel panel-default">
- <div class="panel-heading">Change password</div>
-
- <div class="panel-body">
- <my-account-change-password></my-account-change-password>
- </div>
- </div>
- </div>
-
- <div class="col-md-6 col-sm-12">
- <div class="panel panel-default">
- <div class="panel-heading">Update my informations</div>
+ <a routerLink="/account/videos" routerLinkActive="active" class="title-page">My videos</a>
+ </div>
- <div class="panel-body">
- <my-account-details [user]="user"></my-account-details>
- </div>
- </div>
- </div>
+ <div class="margin-content">
+ <router-outlet></router-outlet>
</div>
</div>
diff --git a/client/src/app/account/account.component.scss b/client/src/app/account/account.component.scss
index 61b80d0a7..e69de29bb 100644
--- a/client/src/app/account/account.component.scss
+++ b/client/src/app/account/account.component.scss
@@ -1,3 +0,0 @@
-.panel {
- margin-top: 40px;
-}
diff --git a/client/src/app/account/account.component.ts b/client/src/app/account/account.component.ts
index 929934f67..3d3677ab0 100644
--- a/client/src/app/account/account.component.ts
+++ b/client/src/app/account/account.component.ts
@@ -1,28 +1,8 @@
-import { Component, OnInit } from '@angular/core'
-import { FormBuilder, FormGroup } from '@angular/forms'
-import { Router } from '@angular/router'
-
-import { NotificationsService } from 'angular2-notifications'
-
-import { AuthService } from '../core'
-import {
- FormReactive,
- User,
- UserService,
- USER_PASSWORD
-} from '../shared'
+import { Component } from '@angular/core'
@Component({
selector: 'my-account',
templateUrl: './account.component.html',
styleUrls: [ './account.component.scss' ]
})
-export class AccountComponent implements OnInit {
- user: User = null
-
- constructor (private authService: AuthService) {}
-
- ngOnInit () {
- this.user = this.authService.getUser()
- }
-}
+export class AccountComponent {}
diff --git a/client/src/app/account/account.module.ts b/client/src/app/account/account.module.ts
index 380e9d235..ff444ddeb 100644
--- a/client/src/app/account/account.module.ts
+++ b/client/src/app/account/account.module.ts
@@ -1,11 +1,11 @@
import { NgModule } from '@angular/core'
-
+import { SharedModule } from '../shared'
import { AccountRoutingModule } from './account-routing.module'
+import { AccountChangePasswordComponent } from './account-settings/account-change-password/account-change-password.component'
+import { AccountDetailsComponent } from './account-settings/account-details/account-details.component'
+import { AccountSettingsComponent } from './account-settings/account-settings.component'
import { AccountComponent } from './account.component'
-import { AccountChangePasswordComponent } from './account-change-password'
-import { AccountDetailsComponent } from './account-details'
import { AccountService } from './account.service'
-import { SharedModule } from '../shared'
@NgModule({
imports: [
@@ -15,6 +15,7 @@ import { SharedModule } from '../shared'
declarations: [
AccountComponent,
+ AccountSettingsComponent,
AccountChangePasswordComponent,
AccountDetailsComponent
],
--
cgit v1.2.3