I need to implement a password reset form for user authentication purposes. Below is the HTML code:
<form class="grid-wrapper" #f="ngForm" *ngIf="stepOne">
<div class="form-group first-row">
<label for="name">Username</label>
<input id="name" type="text" name="name" class="form-control" required [(ngModel)]="user.name">
</div>
<div class="form-group second-row">
<label for="email">Email</label>
<input id="email" type="text"
name="email"
class="form-control"
email required
[(ngModel)]="user.email"
[ngClass]="{ 'is-invalid': nameEmailMismatch || notFound }">
<div class="invalid-feedback-custom">
<div *ngIf="nameEmailMismatch">Provided email doesn't belong to current user</div>
<div *ngIf="notFound">User not found</div>
</div>
</div>
<div class="btn-row third-row">
<button class="btn btn-primary" [disabled]="f.invalid || loading" (click)="submit()">Reset</button>
</div>
</form>
<div *ngIf="stepTwo">
<div>
<h2>Password reset link has been sent to your email</h2>
</div>
</div>
<div class="complete" *ngIf="stepFour">
<p>
Your password has been reset
</p>
<a class="btn btn-primary" routerLink="/login">Login</a>
</div>
For the component part, here is an example:
@Component({
........
})
export class ResetPasswordNewComponent implements OnInit {
user: UserReset = new UserReset(null, null, null, null, null, null);
stepOne = true;
stepTwo = false;
loading = false;
nameEmailMismatch = false;
notFound = false;
constructor(private resetService: PasswordResetService,
private route: ActivatedRoute) {
}
ngOnInit() {
}
submit() {
this.loading = true;
this.nameEmailMismatch = false;
this.notFound = false;
this.resetService.requestReset(this.user).subscribe(user => {
this.stepOne = false;
this.stepTwo = true;
this.loading = false;
},
error => this.handleError(error));
}
handleError(error) {
console.log(error);
this.loading = false;
switch (error.error) {
case 'NAME_AND_EMAIL_MISMATCH':
this.nameEmailMismatch = true;
break;
}
switch (error.status) {
case 404:
this.notFound = true;
break;
}
}
}
If you are looking for another solution to display messages after form submission when user or password is not found, consider using label elements that can be toggled based on certain conditions, rather than relying solely on setting variables to true and false.