update

src/app/pages/password-reset/password-reset.component.html

@@ -0,0 +1,43 @@
+<form [formGroup]="form" (ngSubmit)="passwordReset()" *ngIf="!success">
+    <mat-card>
+        <mat-card-content>
+            <h2>{{'password.reset' | i18n}}</h2>
+            <mat-error *ngIf="tokenInvalid">
+                {{'password.reset.tokenInvalid' | i18n}}
+            </mat-error>
+            <mat-form-field>
+                <input matInput type="password" placeholder="{{'password' | i18n}}" formControlName="password"
+                    [(ngModel)]="model.password">
+                <mat-error *ngFor="let error of form.get('password').errors | keyvalue">
+                    {{error.key}}
+                </mat-error>
+            </mat-form-field>
+            <mat-form-field>
+                <input matInput type="password" length="6" placeholder="{{'password.confirm' | i18n}}"
+                    formControlName="password2" [(ngModel)]="model.password2">
+                <mat-error>
+                    {{'password.not-match' | i18n}}
+                </mat-error>
+            </mat-form-field>
+        </mat-card-content>
+        <mat-card-actions>
+            <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
+                {{'password.reset' | i18n}}
+            </button>
+
+            <mat-progress-bar *ngIf="working" mode="indeterminate"></mat-progress-bar>
+        </mat-card-actions>
+    </mat-card>
+</form>
+
+<mat-card *ngIf="success">
+    <mat-card-content>
+        <h2>{{'password.reset.success.title' | i18n}}</h2>
+        <p>{{'password.reset.success.text' | i18n}}</p>
+    </mat-card-content>
+    <mat-card-actions>
+        <a routerLink="/login" mat-raised-button color="primary">
+            {{'password.reset.login' | i18n}}
+        </a>
+    </mat-card-actions>
+</mat-card>

src/app/pages/password-reset/password-reset.component.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}

src/app/pages/password-reset/password-reset.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasswordResetComponent } from './password-reset.component';
+
+describe('PasswordResetComponent', () => {
+  let component: PasswordResetComponent;
+  let fixture: ComponentFixture<PasswordResetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PasswordResetComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PasswordResetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/password-reset/password-reset.component.ts

@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+import { AuthService } from '../../services/auth.service';
+import { MatchingValidator } from '../../utils/matching.validator';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-password-reset',
+  templateUrl: './password-reset.component.html',
+  styleUrls: ['./password-reset.component.scss']
+})
+export class PasswordResetComponent implements OnInit {
+
+  form: FormGroup;
+  model: any = {};
+  public working: boolean;
+  public success: boolean;
+  public tokenInvalid: boolean = false;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private authService: AuthService,
+    private router: Router,
+    private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.form = this.formBuilder.group({
+      password: ['', Validators.required],
+      password2: ['', Validators.required]
+    }, {
+      validator: MatchingValidator('password', 'password2')
+    });
+
+    this.route.queryParams.subscribe(params => {
+      if (params.token) {
+        this.model.token = params.token;
+      }
+    });
+
+  }
+
+  passwordReset() {
+    this.working = true;
+    this.authService.passwordReset(this.model).subscribe(response => {
+      this.success = true;
+    }, (error) => {
+      this.working = false;
+      if (error.status == 409) {
+        let errors = {};
+        for (let code of error.error) {
+          errors[code.field] = errors[code.field] || {};
+          errors[code.field][code.code] = true;
+        }
+
+        for (let code in errors) {
+          this.form.get(code).setErrors(errors[code]);
+        }
+      } else {
+        this.tokenInvalid = true;
+      }
+    })
+  }
+
+}