aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+reset-password
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+reset-password')
-rw-r--r--client/src/app/+reset-password/reset-password-routing.module.ts23
-rw-r--r--client/src/app/+reset-password/reset-password.component.html31
-rw-r--r--client/src/app/+reset-password/reset-password.component.scss12
-rw-r--r--client/src/app/+reset-password/reset-password.component.ts61
-rw-r--r--client/src/app/+reset-password/reset-password.module.ts26
5 files changed, 153 insertions, 0 deletions
diff --git a/client/src/app/+reset-password/reset-password-routing.module.ts b/client/src/app/+reset-password/reset-password-routing.module.ts
new file mode 100644
index 000000000..31bc08709
--- /dev/null
+++ b/client/src/app/+reset-password/reset-password-routing.module.ts
@@ -0,0 +1,23 @@
1import { NgModule } from '@angular/core'
2import { RouterModule, Routes } from '@angular/router'
3import { MetaGuard } from '@ngx-meta/core'
4import { ResetPasswordComponent } from './reset-password.component'
5
6const resetPasswordRoutes: Routes = [
7 {
8 path: '',
9 component: ResetPasswordComponent,
10 canActivate: [ MetaGuard ],
11 data: {
12 meta: {
13 title: 'Reset password'
14 }
15 }
16 }
17]
18
19@NgModule({
20 imports: [ RouterModule.forChild(resetPasswordRoutes) ],
21 exports: [ RouterModule ]
22})
23export class ResetPasswordRoutingModule {}
diff --git a/client/src/app/+reset-password/reset-password.component.html b/client/src/app/+reset-password/reset-password.component.html
new file mode 100644
index 000000000..af30af4a0
--- /dev/null
+++ b/client/src/app/+reset-password/reset-password.component.html
@@ -0,0 +1,31 @@
1<div class="margin-content">
2 <div i18n class="title-page title-page-single">
3 Reset my password
4 </div>
5
6 <form role="form" (ngSubmit)="resetPassword()" [formGroup]="form">
7 <div class="form-group">
8 <label i18n for="password">Password</label>
9 <input
10 type="password" name="password" id="password" i18n-placeholder placeholder="Password" required autocomplete="new-password"
11 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
12 >
13 <div *ngIf="formErrors.password" class="form-error">
14 {{ formErrors.password }}
15 </div>
16 </div>
17
18 <div class="form-group">
19 <label i18n for="password-confirm">Confirm password</label>
20 <input
21 type="password" name="password-confirm" id="password-confirm" i18n-placeholder placeholder="Confirmed password" required autocomplete="new-password"
22 formControlName="password-confirm" [ngClass]="{ 'input-error': formErrors['password-confirm'] }"
23 >
24 <div *ngIf="formErrors['password-confirm']" class="form-error">
25 {{ formErrors['password-confirm'] }}
26 </div>
27 </div>
28
29 <input type="submit" i18n-value value="Reset my password" [disabled]="!form.valid || !isConfirmedPasswordValid()">
30 </form>
31</div>
diff --git a/client/src/app/+reset-password/reset-password.component.scss b/client/src/app/+reset-password/reset-password.component.scss
new file mode 100644
index 000000000..efec6b706
--- /dev/null
+++ b/client/src/app/+reset-password/reset-password.component.scss
@@ -0,0 +1,12 @@
1@import '_variables';
2@import '_mixins';
3
4input:not([type=submit]) {
5 @include peertube-input-text(340px);
6 display: block;
7}
8
9input[type=submit] {
10 @include peertube-button;
11 @include orange-button;
12}
diff --git a/client/src/app/+reset-password/reset-password.component.ts b/client/src/app/+reset-password/reset-password.component.ts
new file mode 100644
index 000000000..8d50e9839
--- /dev/null
+++ b/client/src/app/+reset-password/reset-password.component.ts
@@ -0,0 +1,61 @@
1import { Component, OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router'
3import { Notifier, UserService } from '@app/core'
4import { FormReactive, FormValidatorService, ResetPasswordValidatorsService, UserValidatorsService } from '@app/shared/shared-forms'
5import { I18n } from '@ngx-translate/i18n-polyfill'
6
7@Component({
8 selector: 'my-login',
9 templateUrl: './reset-password.component.html',
10 styleUrls: [ './reset-password.component.scss' ]
11})
12
13export class ResetPasswordComponent extends FormReactive implements OnInit {
14 private userId: number
15 private verificationString: string
16
17 constructor (
18 protected formValidatorService: FormValidatorService,
19 private resetPasswordValidatorsService: ResetPasswordValidatorsService,
20 private userValidatorsService: UserValidatorsService,
21 private userService: UserService,
22 private notifier: Notifier,
23 private router: Router,
24 private route: ActivatedRoute,
25 private i18n: I18n
26 ) {
27 super()
28 }
29
30 ngOnInit () {
31 this.buildForm({
32 password: this.userValidatorsService.USER_PASSWORD,
33 'password-confirm': this.resetPasswordValidatorsService.RESET_PASSWORD_CONFIRM
34 })
35
36 this.userId = this.route.snapshot.queryParams['userId']
37 this.verificationString = this.route.snapshot.queryParams['verificationString']
38
39 if (!this.userId || !this.verificationString) {
40 this.notifier.error(this.i18n('Unable to find user id or verification string.'))
41 this.router.navigate([ '/' ])
42 }
43 }
44
45 resetPassword () {
46 this.userService.resetPassword(this.userId, this.verificationString, this.form.value.password)
47 .subscribe(
48 () => {
49 this.notifier.success(this.i18n('Your password has been successfully reset!'))
50 this.router.navigate([ '/login' ])
51 },
52
53 err => this.notifier.error(err.message)
54 )
55 }
56
57 isConfirmedPasswordValid () {
58 const values = this.form.value
59 return values.password === values['password-confirm']
60 }
61}
diff --git a/client/src/app/+reset-password/reset-password.module.ts b/client/src/app/+reset-password/reset-password.module.ts
new file mode 100644
index 000000000..c77f1c4b0
--- /dev/null
+++ b/client/src/app/+reset-password/reset-password.module.ts
@@ -0,0 +1,26 @@
1import { NgModule } from '@angular/core'
2import { SharedFormModule } from '@app/shared/shared-forms'
3import { SharedMainModule } from '@app/shared/shared-main'
4import { ResetPasswordRoutingModule } from './reset-password-routing.module'
5import { ResetPasswordComponent } from './reset-password.component'
6
7@NgModule({
8 imports: [
9 ResetPasswordRoutingModule,
10
11 SharedMainModule,
12 SharedFormModule
13 ],
14
15 declarations: [
16 ResetPasswordComponent
17 ],
18
19 exports: [
20 ResetPasswordComponent
21 ],
22
23 providers: [
24 ]
25})
26export class ResetPasswordModule { }