From 3ab62ff9213669bca8602080e38c1617bfa1d245 Mon Sep 17 00:00:00 2001
From: Lukas Kimpel <lukas.kimpel@mni.thm.de>
Date: Thu, 8 Mar 2018 13:34:19 +0100
Subject: [PATCH] Implement password reset logic Use angular-flex for form
Implement FormControl and Matcher
---
.../password-reset.component.html | 9 ++--
.../password-reset.component.ts | 42 ++++++++++++++++++-
2 files changed, 46 insertions(+), 5 deletions(-)
diff --git a/src/app/password-reset/password-reset.component.html b/src/app/password-reset/password-reset.component.html
index 2ef5a650a..6d87689fb 100644
--- a/src/app/password-reset/password-reset.component.html
+++ b/src/app/password-reset/password-reset.component.html
@@ -1,7 +1,10 @@
-<form>
+<form (ngSubmit)="resetPassword(email.value)" fxLayout="column" fxLayoutAlign="space-around"
+ fxLayoutGap="10px">
<mat-form-field class="input-block">
- <input matInput placeholder="E-Mail" />
+ <input matInput #email placeholder="E-Mail" [formControl]="usernameFormControl" [errorStateMatcher]="matcher"
+ name="email"/>
+ <mat-error *ngIf="usernameFormControl.hasError('required')">Email address is <strong>required</strong>.</mat-error>
</mat-form-field>
- <button mat-raised-button color="primary">Submit</button>
+ <button mat-raised-button color="primary" (click)="resetPassword(email.value)">Reset password</button>
</form>
diff --git a/src/app/password-reset/password-reset.component.ts b/src/app/password-reset/password-reset.component.ts
index 47a41730f..3766b7603 100644
--- a/src/app/password-reset/password-reset.component.ts
+++ b/src/app/password-reset/password-reset.component.ts
@@ -1,4 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { ErrorStateMatcher, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { AuthenticationService } from '../authentication.service';
+import { NotificationService } from '../notification.service';
+import { RegisterComponent } from '../register/register.component';
+
+export class PasswordResetErrorStateMatcher implements ErrorStateMatcher {
+ isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+ const isSubmitted = form && form.submitted;
+ return (control && control.invalid && (control.dirty || control.touched || isSubmitted));
+ }
+}
@Component({
selector: 'app-password-reset',
@@ -7,9 +19,35 @@ import { Component, OnInit } from '@angular/core';
})
export class PasswordResetComponent implements OnInit {
- constructor() { }
+
+ usernameFormControl = new FormControl('', [Validators.required, Validators.email]);
+
+ matcher = new PasswordResetErrorStateMatcher();
+
+ constructor(public authenticationService: AuthenticationService,
+ public notificationService: NotificationService,
+ public dialogRef: MatDialogRef<RegisterComponent>,
+ @Inject(MAT_DIALOG_DATA) public data: any) {
+ }
ngOnInit() {
}
+ resetPassword(username: string): void {
+ username = username.trim();
+
+ if (username) {
+ this.authenticationService.resetPassword(username).subscribe(result => {
+ if (result) {
+ this.notificationService.show('Password was reset. Please check your mail!');
+ this.dialogRef.close();
+ } else {
+ this.notificationService.show('Could not reset your password. Is your email address correct?');
+ }
+ });
+ } else {
+ this.notificationService.show('Email address can not be empty.');
+ }
+ }
+
}
--
GitLab