Skip to content
Snippets Groups Projects
Verified Commit 3ab62ff9 authored by Lukas Maximilian Kimpel's avatar Lukas Maximilian Kimpel
Browse files

Implement password reset logic

Use angular-flex for form
Implement FormControl and Matcher
parent 0cd8aba9
No related merge requests found
<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>
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.');
}
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment