diff options
author | Chocobozzz <me@florianbigard.com> | 2018-04-23 16:16:05 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-04-23 16:16:05 +0200 |
commit | 4bb6886d28cc5333bbe1523674bf5db141af456f (patch) | |
tree | 86276bfa11afdd4357ac45df2ead26a41f181069 /client/src/app/my-account/my-account-settings/my-account-change-password | |
parent | 3186046d17cc09a3426d5ea67835f4c936cb18a3 (diff) | |
download | PeerTube-4bb6886d28cc5333bbe1523674bf5db141af456f.tar.gz PeerTube-4bb6886d28cc5333bbe1523674bf5db141af456f.tar.zst PeerTube-4bb6886d28cc5333bbe1523674bf5db141af456f.zip |
Rename account module to my-account
Diffstat (limited to 'client/src/app/my-account/my-account-settings/my-account-change-password')
4 files changed, 102 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 @@ | |||
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/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 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | input[type=password] { | ||
5 | @include peertube-input-text(340px); | ||
6 | display: block; | ||
7 | |||
8 | &#new-confirmed-password { | ||
9 | margin-top: 15px; | ||
10 | } | ||
11 | } | ||
12 | |||
13 | input[type=submit] { | ||
14 | @include peertube-button; | ||
15 | @include orange-button; | ||
16 | |||
17 | margin-top: 15px; | ||
18 | } | ||
19 | |||
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 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | ||
2 | import { FormBuilder, FormGroup } from '@angular/forms' | ||
3 | import { NotificationsService } from 'angular2-notifications' | ||
4 | import { FormReactive, USER_PASSWORD, UserService } from '../../../shared' | ||
5 | |||
6 | @Component({ | ||
7 | selector: 'my-account-change-password', | ||
8 | templateUrl: './my-account-change-password.component.html', | ||
9 | styleUrls: [ './my-account-change-password.component.scss' ] | ||
10 | }) | ||
11 | export class MyAccountChangePasswordComponent extends FormReactive implements OnInit { | ||
12 | error: string = null | ||
13 | |||
14 | form: FormGroup | ||
15 | formErrors = { | ||
16 | 'new-password': '', | ||
17 | 'new-confirmed-password': '' | ||
18 | } | ||
19 | validationMessages = { | ||
20 | 'new-password': USER_PASSWORD.MESSAGES, | ||
21 | 'new-confirmed-password': USER_PASSWORD.MESSAGES | ||
22 | } | ||
23 | |||
24 | constructor ( | ||
25 | private formBuilder: FormBuilder, | ||
26 | private notificationsService: NotificationsService, | ||
27 | private userService: UserService | ||
28 | ) { | ||
29 | super() | ||
30 | } | ||
31 | |||
32 | buildForm () { | ||
33 | this.form = this.formBuilder.group({ | ||
34 | 'new-password': [ '', USER_PASSWORD.VALIDATORS ], | ||
35 | 'new-confirmed-password': [ '', USER_PASSWORD.VALIDATORS ] | ||
36 | }) | ||
37 | |||
38 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | ||
39 | } | ||
40 | |||
41 | ngOnInit () { | ||
42 | this.buildForm() | ||
43 | } | ||
44 | |||
45 | changePassword () { | ||
46 | const newPassword = this.form.value['new-password'] | ||
47 | const newConfirmedPassword = this.form.value['new-confirmed-password'] | ||
48 | |||
49 | this.error = null | ||
50 | |||
51 | if (newPassword !== newConfirmedPassword) { | ||
52 | this.error = 'The new password and the confirmed password do not correspond.' | ||
53 | return | ||
54 | } | ||
55 | |||
56 | this.userService.changePassword(newPassword).subscribe( | ||
57 | () => this.notificationsService.success('Success', 'Password updated.'), | ||
58 | |||
59 | err => this.error = err.message | ||
60 | ) | ||
61 | } | ||
62 | } | ||