diff options
Diffstat (limited to 'client/src/app/account')
21 files changed, 407 insertions, 114 deletions
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 @@ | |||
1 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | ||
2 | |||
3 | <form role="form" (ngSubmit)="changePassword()" [formGroup]="form"> | ||
4 | <div class="form-group"> | ||
5 | <label for="new-password">New password</label> | ||
6 | <input | ||
7 | type="password" class="form-control" id="new-password" | ||
8 | formControlName="new-password" | ||
9 | > | ||
10 | <div *ngIf="formErrors['new-password']" class="alert alert-danger"> | ||
11 | {{ formErrors['new-password'] }} | ||
12 | </div> | ||
13 | </div> | ||
14 | |||
15 | <div class="form-group"> | ||
16 | <label for="name">Confirm new password</label> | ||
17 | <input | ||
18 | type="password" class="form-control" id="new-confirmed-password" | ||
19 | formControlName="new-confirmed-password" | ||
20 | > | ||
21 | </div> | ||
22 | |||
23 | <input type="submit" value="Change password" class="btn btn-default" [disabled]="!form.valid"> | ||
24 | </form> | ||
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 @@ | |||
1 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | ||
2 | |||
3 | <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form"> | ||
4 | <div class="form-group"> | ||
5 | <input | ||
6 | type="checkbox" id="displayNSFW" | ||
7 | formControlName="displayNSFW" | ||
8 | > | ||
9 | <label for="displayNSFW">Display videos that contain mature or explicit content</label> | ||
10 | <div *ngIf="formErrors['displayNSFW']" class="alert alert-danger"> | ||
11 | {{ formErrors['displayNSFW'] }} | ||
12 | </div> | ||
13 | </div> | ||
14 | |||
15 | <input type="submit" value="Update" class="btn btn-default" [disabled]="!form.valid"> | ||
16 | </form> | ||
diff --git a/client/src/app/account/account-routing.module.ts b/client/src/app/account/account-routing.module.ts index 74d9aa03e..070b9b5c5 100644 --- a/client/src/app/account/account-routing.module.ts +++ b/client/src/app/account/account-routing.module.ts | |||
@@ -5,17 +5,34 @@ import { MetaGuard } from '@ngx-meta/core' | |||
5 | 5 | ||
6 | import { LoginGuard } from '../core' | 6 | import { LoginGuard } from '../core' |
7 | import { AccountComponent } from './account.component' | 7 | import { AccountComponent } from './account.component' |
8 | import { AccountSettingsComponent } from './account-settings/account-settings.component' | ||
9 | import { AccountVideosComponent } from './account-videos/account-videos.component' | ||
8 | 10 | ||
9 | const accountRoutes: Routes = [ | 11 | const accountRoutes: Routes = [ |
10 | { | 12 | { |
11 | path: 'account', | 13 | path: 'account', |
12 | component: AccountComponent, | 14 | component: AccountComponent, |
13 | canActivate: [ MetaGuard, LoginGuard ], | 15 | canActivateChild: [ MetaGuard, LoginGuard ], |
14 | data: { | 16 | children: [ |
15 | meta: { | 17 | { |
16 | title: 'My account' | 18 | path: 'settings', |
19 | component: AccountSettingsComponent, | ||
20 | data: { | ||
21 | meta: { | ||
22 | title: 'Account settings' | ||
23 | } | ||
24 | } | ||
25 | }, | ||
26 | { | ||
27 | path: 'videos', | ||
28 | component: AccountVideosComponent, | ||
29 | data: { | ||
30 | meta: { | ||
31 | title: 'Account videos' | ||
32 | } | ||
33 | } | ||
17 | } | 34 | } |
18 | } | 35 | ] |
19 | } | 36 | } |
20 | ] | 37 | ] |
21 | 38 | ||
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..b0e3cada4 --- /dev/null +++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.html | |||
@@ -0,0 +1,20 @@ | |||
1 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | ||
2 | |||
3 | <form role="form" (ngSubmit)="changePassword()" [formGroup]="form"> | ||
4 | |||
5 | <label for="new-password">Change password</label> | ||
6 | <input | ||
7 | type="password" id="new-password" placeholder="New password" | ||
8 | formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }" | ||
9 | > | ||
10 | <div *ngIf="formErrors['new-password']" class="form-error"> | ||
11 | {{ formErrors['new-password'] }} | ||
12 | </div> | ||
13 | |||
14 | <input | ||
15 | type="password" id="new-confirmed-password" placeholder="Confirm new password" | ||
16 | formControlName="new-confirmed-password" | ||
17 | > | ||
18 | |||
19 | <input type="submit" value="Change password" [disabled]="!form.valid"> | ||
20 | </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..7a4fdb34d --- /dev/null +++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss | |||
@@ -0,0 +1,16 @@ | |||
1 | input[type=password] { | ||
2 | @include peertube-input-text(340px); | ||
3 | display: block; | ||
4 | |||
5 | &#new-confirmed-password { | ||
6 | margin-top: 15px; | ||
7 | } | ||
8 | } | ||
9 | |||
10 | input[type=submit] { | ||
11 | @include peertube-button; | ||
12 | @include orange-button; | ||
13 | |||
14 | margin-top: 15px; | ||
15 | } | ||
16 | |||
diff --git a/client/src/app/account/account-change-password/account-change-password.component.ts b/client/src/app/account/account-settings/account-change-password/account-change-password.component.ts index 69edec54b..8979e1734 100644 --- a/client/src/app/account/account-change-password/account-change-password.component.ts +++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.ts | |||
@@ -1,16 +1,13 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | 1 | import { Component, OnInit } from '@angular/core' |
2 | import { FormBuilder, FormGroup } from '@angular/forms' | 2 | import { FormBuilder, FormGroup } from '@angular/forms' |
3 | import { Router } from '@angular/router' | ||
4 | |||
5 | import { NotificationsService } from 'angular2-notifications' | 3 | import { NotificationsService } from 'angular2-notifications' |
6 | 4 | import { FormReactive, USER_PASSWORD, UserService } from '../../../shared' | |
7 | import { FormReactive, UserService, USER_PASSWORD } from '../../shared' | ||
8 | 5 | ||
9 | @Component({ | 6 | @Component({ |
10 | selector: 'my-account-change-password', | 7 | selector: 'my-account-change-password', |
11 | templateUrl: './account-change-password.component.html' | 8 | templateUrl: './account-change-password.component.html', |
9 | styleUrls: [ './account-change-password.component.scss' ] | ||
12 | }) | 10 | }) |
13 | |||
14 | export class AccountChangePasswordComponent extends FormReactive implements OnInit { | 11 | export class AccountChangePasswordComponent extends FormReactive implements OnInit { |
15 | error: string = null | 12 | error: string = null |
16 | 13 | ||
diff --git a/client/src/app/account/account-change-password/index.ts b/client/src/app/account/account-settings/account-change-password/index.ts index 44c330b66..44c330b66 100644 --- a/client/src/app/account/account-change-password/index.ts +++ b/client/src/app/account/account-settings/account-change-password/index.ts | |||
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..bc18b39b4 --- /dev/null +++ b/client/src/app/account/account-settings/account-details/account-details.component.html | |||
@@ -0,0 +1,14 @@ | |||
1 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | ||
2 | |||
3 | <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form"> | ||
4 | <input | ||
5 | type="checkbox" id="displayNSFW" | ||
6 | formControlName="displayNSFW" | ||
7 | > | ||
8 | <label for="displayNSFW">Display videos that contain mature or explicit content</label> | ||
9 | <div *ngIf="formErrors['displayNSFW']" class="alert alert-danger"> | ||
10 | {{ formErrors['displayNSFW'] }} | ||
11 | </div> | ||
12 | |||
13 | <input type="submit" value="Save" [disabled]="!form.valid"> | ||
14 | </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..5c369f968 --- /dev/null +++ b/client/src/app/account/account-settings/account-details/account-details.component.scss | |||
@@ -0,0 +1,13 @@ | |||
1 | label { | ||
2 | font-size: 15px; | ||
3 | font-weight: $font-regular; | ||
4 | margin-left: 5px; | ||
5 | } | ||
6 | |||
7 | input[type=submit] { | ||
8 | @include peertube-button; | ||
9 | @include orange-button; | ||
10 | |||
11 | display: block; | ||
12 | margin-top: 15px; | ||
13 | } | ||
diff --git a/client/src/app/account/account-details/account-details.component.ts b/client/src/app/account/account-settings/account-details/account-details.component.ts index d7a6e6871..d835c53e5 100644 --- a/client/src/app/account/account-details/account-details.component.ts +++ b/client/src/app/account/account-settings/account-details/account-details.component.ts | |||
@@ -1,21 +1,14 @@ | |||
1 | import { Component, OnInit, Input } from '@angular/core' | 1 | import { Component, Input, OnInit } from '@angular/core' |
2 | import { FormBuilder, FormGroup } from '@angular/forms' | 2 | import { FormBuilder, FormGroup } from '@angular/forms' |
3 | import { Router } from '@angular/router' | ||
4 | |||
5 | import { NotificationsService } from 'angular2-notifications' | 3 | import { NotificationsService } from 'angular2-notifications' |
6 | 4 | import { UserUpdateMe } from '../../../../../../shared' | |
7 | import { AuthService } from '../../core' | 5 | import { AuthService } from '../../../core' |
8 | import { | 6 | import { FormReactive, User, UserService } from '../../../shared' |
9 | FormReactive, | ||
10 | User, | ||
11 | UserService, | ||
12 | USER_PASSWORD | ||
13 | } from '../../shared' | ||
14 | import { UserUpdateMe } from '../../../../../shared' | ||
15 | 7 | ||
16 | @Component({ | 8 | @Component({ |
17 | selector: 'my-account-details', | 9 | selector: 'my-account-details', |
18 | templateUrl: './account-details.component.html' | 10 | templateUrl: './account-details.component.html', |
11 | styleUrls: [ './account-details.component.scss' ] | ||
19 | }) | 12 | }) |
20 | 13 | ||
21 | export class AccountDetailsComponent extends FormReactive implements OnInit { | 14 | export class AccountDetailsComponent extends FormReactive implements OnInit { |
diff --git a/client/src/app/account/account-details/index.ts b/client/src/app/account/account-settings/account-details/index.ts index 4829f608a..4829f608a 100644 --- a/client/src/app/account/account-details/index.ts +++ b/client/src/app/account/account-settings/account-details/index.ts | |||
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..c0a74cc47 --- /dev/null +++ b/client/src/app/account/account-settings/account-settings.component.html | |||
@@ -0,0 +1,15 @@ | |||
1 | <div class="user"> | ||
2 | <img [src]="getAvatarPath()" alt="Avatar" /> | ||
3 | |||
4 | <div class="user-info"> | ||
5 | <div class="user-info-username">{{ user.username }}</div> | ||
6 | <div class="user-info-followers">{{ user.account?.followersCount }} subscribers</div> | ||
7 | </div> | ||
8 | </div> | ||
9 | |||
10 | |||
11 | <div class="account-title">Account settings</div> | ||
12 | <my-account-change-password></my-account-change-password> | ||
13 | |||
14 | <div class="account-title">Filtering</div> | ||
15 | <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..f514809b0 --- /dev/null +++ b/client/src/app/account/account-settings/account-settings.component.scss | |||
@@ -0,0 +1,28 @@ | |||
1 | .user { | ||
2 | display: flex; | ||
3 | |||
4 | img { | ||
5 | @include avatar(50px); | ||
6 | margin-right: 15px; | ||
7 | } | ||
8 | |||
9 | .user-info { | ||
10 | .user-info-username { | ||
11 | font-size: 20px; | ||
12 | font-weight: $font-bold; | ||
13 | } | ||
14 | |||
15 | .user-info-followers { | ||
16 | font-size: 15px; | ||
17 | } | ||
18 | } | ||
19 | } | ||
20 | |||
21 | .account-title { | ||
22 | text-transform: uppercase; | ||
23 | color: $orange-color; | ||
24 | font-weight: $font-bold; | ||
25 | font-size: 13px; | ||
26 | margin-top: 55px; | ||
27 | margin-bottom: 30px; | ||
28 | } | ||
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..cba251000 --- /dev/null +++ b/client/src/app/account/account-settings/account-settings.component.ts | |||
@@ -0,0 +1,22 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | ||
2 | import { User } from '../../shared' | ||
3 | import { AuthService } from '../../core' | ||
4 | |||
5 | @Component({ | ||
6 | selector: 'my-account-settings', | ||
7 | templateUrl: './account-settings.component.html', | ||
8 | styleUrls: [ './account-settings.component.scss' ] | ||
9 | }) | ||
10 | export class AccountSettingsComponent implements OnInit { | ||
11 | user: User = null | ||
12 | |||
13 | constructor (private authService: AuthService) {} | ||
14 | |||
15 | ngOnInit () { | ||
16 | this.user = this.authService.getUser() | ||
17 | } | ||
18 | |||
19 | getAvatarPath () { | ||
20 | return this.user.getAvatarPath() | ||
21 | } | ||
22 | } | ||
diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html new file mode 100644 index 000000000..f69c0487d --- /dev/null +++ b/client/src/app/account/account-videos/account-videos.component.html | |||
@@ -0,0 +1,39 @@ | |||
1 | <div | ||
2 | class="videos" | ||
3 | infiniteScroll | ||
4 | [infiniteScrollDistance]="0.5" | ||
5 | [infiniteScrollUpDistance]="1.5" | ||
6 | (scrolled)="onNearOfBottom()" | ||
7 | (scrolledUp)="onNearOfTop()" | ||
8 | > | ||
9 | <div class="video" *ngFor="let video of videos; let i = index"> | ||
10 | <input type="checkbox" [(ngModel)]="checkedVideos[video.id]" /> | ||
11 | |||
12 | <my-video-thumbnail [video]="video"></my-video-thumbnail> | ||
13 | |||
14 | <div class="video-info"> | ||
15 | <div class="video-info-name">{{ video.name }}</div> | ||
16 | <span class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span> | ||
17 | </div> | ||
18 | |||
19 | <!-- Display only once --> | ||
20 | <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0"> | ||
21 | <div class="action-selection-mode-child"> | ||
22 | <span class="action-button action-button-cancel-selection" (click)="abortSelectionMode()"> | ||
23 | Cancel | ||
24 | </span> | ||
25 | |||
26 | <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()"> | ||
27 | <span class="icon icon-delete-white"></span> | ||
28 | Delete | ||
29 | </span> | ||
30 | </div> | ||
31 | </div> | ||
32 | |||
33 | <div class="video-buttons" *ngIf="isInSelectionMode() === false"> | ||
34 | <my-delete-button (click)="deleteVideo(video)"></my-delete-button> | ||
35 | |||
36 | <my-edit-button [routerLink]="[ '/videos', 'edit', video.uuid ]"></my-edit-button> | ||
37 | </div> | ||
38 | </div> | ||
39 | </div> | ||
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss new file mode 100644 index 000000000..5459014a6 --- /dev/null +++ b/client/src/app/account/account-videos/account-videos.component.scss | |||
@@ -0,0 +1,96 @@ | |||
1 | .action-selection-mode { | ||
2 | width: 174px; | ||
3 | display: flex; | ||
4 | justify-content: flex-end; | ||
5 | |||
6 | .action-selection-mode-child { | ||
7 | position: fixed; | ||
8 | |||
9 | .action-button { | ||
10 | display: inline-block; | ||
11 | } | ||
12 | |||
13 | .action-button-cancel-selection { | ||
14 | @include peertube-button; | ||
15 | @include grey-button; | ||
16 | |||
17 | margin-right: 10px; | ||
18 | } | ||
19 | |||
20 | .action-button-delete-selection { | ||
21 | @include peertube-button; | ||
22 | @include orange-button; | ||
23 | } | ||
24 | |||
25 | .icon.icon-delete-white { | ||
26 | @include icon(21px); | ||
27 | |||
28 | position: relative; | ||
29 | top: -2px; | ||
30 | background-image: url('../../../assets/images/global/delete-white.svg'); | ||
31 | } | ||
32 | } | ||
33 | } | ||
34 | |||
35 | /deep/ .action-button { | ||
36 | &.action-button-delete { | ||
37 | margin-right: 10px; | ||
38 | } | ||
39 | } | ||
40 | |||
41 | .video { | ||
42 | display: flex; | ||
43 | height: 130px; | ||
44 | padding-bottom: 20px; | ||
45 | |||
46 | input[type=checkbox] { | ||
47 | margin-right: 20px; | ||
48 | outline: 0; | ||
49 | } | ||
50 | |||
51 | &:first-child { | ||
52 | margin-top: 47px; | ||
53 | } | ||
54 | |||
55 | &:not(:last-child) { | ||
56 | margin-bottom: 20px; | ||
57 | border-bottom: 1px solid #C6C6C6; | ||
58 | } | ||
59 | |||
60 | my-video-thumbnail { | ||
61 | margin-right: 10px; | ||
62 | } | ||
63 | |||
64 | .video-info { | ||
65 | flex-grow: 1; | ||
66 | |||
67 | .video-info-name { | ||
68 | font-size: 16px; | ||
69 | font-weight: $font-semibold; | ||
70 | } | ||
71 | |||
72 | .video-info-date-views { | ||
73 | font-size: 13px; | ||
74 | } | ||
75 | } | ||
76 | } | ||
77 | |||
78 | @media screen and (max-width: 800px) { | ||
79 | .video { | ||
80 | flex-direction: column; | ||
81 | height: auto; | ||
82 | text-align: center; | ||
83 | |||
84 | input[type=checkbox] { | ||
85 | display: none; | ||
86 | } | ||
87 | |||
88 | my-video-thumbnail { | ||
89 | margin-right: 0; | ||
90 | } | ||
91 | |||
92 | .video-buttons { | ||
93 | margin-top: 10px; | ||
94 | } | ||
95 | } | ||
96 | } | ||
diff --git a/client/src/app/account/account-videos/account-videos.component.ts b/client/src/app/account/account-videos/account-videos.component.ts new file mode 100644 index 000000000..5f12cfce0 --- /dev/null +++ b/client/src/app/account/account-videos/account-videos.component.ts | |||
@@ -0,0 +1,97 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | ||
2 | import { ActivatedRoute, Router } from '@angular/router' | ||
3 | import { NotificationsService } from 'angular2-notifications' | ||
4 | import 'rxjs/add/observable/from' | ||
5 | import 'rxjs/add/operator/concatAll' | ||
6 | import { Observable } from 'rxjs/Observable' | ||
7 | import { ConfirmService } from '../../core/confirm' | ||
8 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' | ||
9 | import { Video } from '../../shared/video/video.model' | ||
10 | import { VideoService } from '../../shared/video/video.service' | ||
11 | |||
12 | @Component({ | ||
13 | selector: 'my-account-videos', | ||
14 | templateUrl: './account-videos.component.html', | ||
15 | styleUrls: [ './account-videos.component.scss' ] | ||
16 | }) | ||
17 | export class AccountVideosComponent extends AbstractVideoList implements OnInit { | ||
18 | titlePage = 'My videos' | ||
19 | currentRoute = '/account/videos' | ||
20 | checkedVideos: { [ id: number ]: boolean } = {} | ||
21 | |||
22 | constructor (protected router: Router, | ||
23 | protected route: ActivatedRoute, | ||
24 | protected notificationsService: NotificationsService, | ||
25 | protected confirmService: ConfirmService, | ||
26 | private videoService: VideoService) { | ||
27 | super() | ||
28 | } | ||
29 | |||
30 | ngOnInit () { | ||
31 | super.ngOnInit() | ||
32 | } | ||
33 | |||
34 | abortSelectionMode () { | ||
35 | this.checkedVideos = {} | ||
36 | } | ||
37 | |||
38 | isInSelectionMode () { | ||
39 | return Object.keys(this.checkedVideos).some(k => this.checkedVideos[k] === true) | ||
40 | } | ||
41 | |||
42 | getVideosObservable () { | ||
43 | return this.videoService.getMyVideos(this.pagination, this.sort) | ||
44 | } | ||
45 | |||
46 | deleteSelectedVideos () { | ||
47 | const toDeleteVideosIds = Object.keys(this.checkedVideos) | ||
48 | .filter(k => this.checkedVideos[k] === true) | ||
49 | .map(k => parseInt(k, 10)) | ||
50 | |||
51 | this.confirmService.confirm(`Do you really want to delete ${toDeleteVideosIds.length} videos?`, 'Delete').subscribe( | ||
52 | res => { | ||
53 | if (res === false) return | ||
54 | |||
55 | const observables: Observable<any>[] = [] | ||
56 | for (const videoId of toDeleteVideosIds) { | ||
57 | const o = this.videoService | ||
58 | .removeVideo(videoId) | ||
59 | .do(() => this.spliceVideosById(videoId)) | ||
60 | |||
61 | observables.push(o) | ||
62 | } | ||
63 | |||
64 | Observable.from(observables) | ||
65 | .concatAll() | ||
66 | .subscribe( | ||
67 | res => this.notificationsService.success('Success', `${toDeleteVideosIds.length} videos deleted.`), | ||
68 | |||
69 | err => this.notificationsService.error('Error', err.text) | ||
70 | ) | ||
71 | } | ||
72 | ) | ||
73 | } | ||
74 | |||
75 | deleteVideo (video: Video) { | ||
76 | this.confirmService.confirm(`Do you really want to delete ${video.name}?`, 'Delete').subscribe( | ||
77 | res => { | ||
78 | if (res === false) return | ||
79 | |||
80 | this.videoService.removeVideo(video.id) | ||
81 | .subscribe( | ||
82 | status => { | ||
83 | this.notificationsService.success('Success', `Video ${video.name} deleted.`) | ||
84 | this.spliceVideosById(video.id) | ||
85 | }, | ||
86 | |||
87 | error => this.notificationsService.error('Error', error.text) | ||
88 | ) | ||
89 | } | ||
90 | ) | ||
91 | } | ||
92 | |||
93 | private spliceVideosById (id: number) { | ||
94 | const index = this.videos.findIndex(v => v.id === id) | ||
95 | this.videos.splice(index, 1) | ||
96 | } | ||
97 | } | ||
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 @@ | |||
1 | <div class="row"> | 1 | <div class="row"> |
2 | <div class="content-padding"> | 2 | <div class="sub-menu"> |
3 | <h3>Account</h3> | 3 | <a routerLink="/account/settings" routerLinkActive="active" class="title-page">My account</a> |
4 | 4 | ||
5 | <div class="col-md-6 col-sm-12"> | 5 | <a routerLink="/account/videos" routerLinkActive="active" class="title-page">My videos</a> |
6 | <div class="panel panel-default"> | 6 | </div> |
7 | <div class="panel-heading">Change password</div> | ||
8 | |||
9 | <div class="panel-body"> | ||
10 | <my-account-change-password></my-account-change-password> | ||
11 | </div> | ||
12 | </div> | ||
13 | </div> | ||
14 | |||
15 | <div class="col-md-6 col-sm-12"> | ||
16 | <div class="panel panel-default"> | ||
17 | <div class="panel-heading">Update my informations</div> | ||
18 | 7 | ||
19 | <div class="panel-body"> | 8 | <div class="margin-content"> |
20 | <my-account-details [user]="user"></my-account-details> | 9 | <router-outlet></router-outlet> |
21 | </div> | ||
22 | </div> | ||
23 | </div> | ||
24 | </div> | 10 | </div> |
25 | </div> | 11 | </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 @@ | |||
1 | .panel { | ||
2 | margin-top: 40px; | ||
3 | } | ||
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 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | 1 | import { Component } from '@angular/core' |
2 | import { FormBuilder, FormGroup } from '@angular/forms' | ||
3 | import { Router } from '@angular/router' | ||
4 | |||
5 | import { NotificationsService } from 'angular2-notifications' | ||
6 | |||
7 | import { AuthService } from '../core' | ||
8 | import { | ||
9 | FormReactive, | ||
10 | User, | ||
11 | UserService, | ||
12 | USER_PASSWORD | ||
13 | } from '../shared' | ||
14 | 2 | ||
15 | @Component({ | 3 | @Component({ |
16 | selector: 'my-account', | 4 | selector: 'my-account', |
17 | templateUrl: './account.component.html', | 5 | templateUrl: './account.component.html', |
18 | styleUrls: [ './account.component.scss' ] | 6 | styleUrls: [ './account.component.scss' ] |
19 | }) | 7 | }) |
20 | export class AccountComponent implements OnInit { | 8 | export class AccountComponent {} |
21 | user: User = null | ||
22 | |||
23 | constructor (private authService: AuthService) {} | ||
24 | |||
25 | ngOnInit () { | ||
26 | this.user = this.authService.getUser() | ||
27 | } | ||
28 | } | ||
diff --git a/client/src/app/account/account.module.ts b/client/src/app/account/account.module.ts index 380e9d235..020199e23 100644 --- a/client/src/app/account/account.module.ts +++ b/client/src/app/account/account.module.ts | |||
@@ -1,11 +1,12 @@ | |||
1 | import { NgModule } from '@angular/core' | 1 | import { NgModule } from '@angular/core' |
2 | 2 | import { SharedModule } from '../shared' | |
3 | import { AccountRoutingModule } from './account-routing.module' | 3 | import { AccountRoutingModule } from './account-routing.module' |
4 | import { AccountChangePasswordComponent } from './account-settings/account-change-password/account-change-password.component' | ||
5 | import { AccountDetailsComponent } from './account-settings/account-details/account-details.component' | ||
6 | import { AccountSettingsComponent } from './account-settings/account-settings.component' | ||
4 | import { AccountComponent } from './account.component' | 7 | import { AccountComponent } from './account.component' |
5 | import { AccountChangePasswordComponent } from './account-change-password' | ||
6 | import { AccountDetailsComponent } from './account-details' | ||
7 | import { AccountService } from './account.service' | 8 | import { AccountService } from './account.service' |
8 | import { SharedModule } from '../shared' | 9 | import { AccountVideosComponent } from './account-videos/account-videos.component' |
9 | 10 | ||
10 | @NgModule({ | 11 | @NgModule({ |
11 | imports: [ | 12 | imports: [ |
@@ -15,8 +16,10 @@ import { SharedModule } from '../shared' | |||
15 | 16 | ||
16 | declarations: [ | 17 | declarations: [ |
17 | AccountComponent, | 18 | AccountComponent, |
19 | AccountSettingsComponent, | ||
18 | AccountChangePasswordComponent, | 20 | AccountChangePasswordComponent, |
19 | AccountDetailsComponent | 21 | AccountDetailsComponent, |
22 | AccountVideosComponent | ||
20 | ], | 23 | ], |
21 | 24 | ||
22 | exports: [ | 25 | exports: [ |