File
Description
Request Password Reset Component
Display form with email to allow user to reset password
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.Default |
| selector |
mev-request-password-reset |
| styleUrls |
./request-password-reset.component.scss |
| templateUrl |
./request-password-reset.component.html |
Methods
|
RequestResetUser
|
RequestResetUser(form)
|
|
|
|
|
|
forbiddenEmails
|
Type : any
|
|
|
|
IsValidForm
|
Default value : true
|
|
|
|
loading
|
Default value : false
|
|
|
|
routeAnimationsElements
|
Default value : ROUTE_ANIMATIONS_ELEMENTS
|
|
|
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { FormGroup, Validators, FormControl } from '@angular/forms';
import { AuthenticationService } from '@app/core/authentication/authentication.service';
import { ROUTE_ANIMATIONS_ELEMENTS } from '@core/core.module';
/**
* Request Password Reset Component
*
* Display form with email to allow user to reset password
*/
@Component({
selector: 'mev-request-password-reset',
templateUrl: './request-password-reset.component.html',
styleUrls: ['./request-password-reset.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class RequestPasswordResetComponent implements OnInit {
routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
RequestResetForm: FormGroup;
forbiddenEmails: any;
errorMessage: string;
successMessage: string;
IsValidForm = true;
loading = false;
constructor(private authService: AuthenticationService) {}
ngOnInit(): void {
this.RequestResetForm = new FormGroup({
email: new FormControl(
null,
[Validators.required, Validators.email],
this.forbiddenEmails
)
});
}
RequestResetUser(form) {
if (form.valid) {
this.IsValidForm = true;
this.loading = true;
this.authService
.requestPasswordReset(this.RequestResetForm.value)
.subscribe(
data => {
this.RequestResetForm.reset();
this.errorMessage = null;
this.successMessage =
'We have sent you a password reset link to your e-mail. Please check your inbox.';
this.loading = false;
setTimeout(() => {
this.loading = false;
}, 2000);
},
err => {
this.successMessage = null;
this.errorMessage = 'Server Side Error';
this.loading = false;
}
);
} else {
this.IsValidForm = false;
}
}
}
<div class="container" rtl>
<div class="row justify-content-center">
<div class="col-md-8 form-group">
<mat-card>
<span class="d-flex justify-content-between align-items-baseline">
<h2>Forgot Password</h2>
</span>
<div class="row">
<div class="msg msg--info">
If you forgot your password, we can send you a link to create a new password and get back into your account.<br>
Enter your email and click the Reset Password button to request a password reset.<br>
Check the email address connected to your account for a password reset email.<br>
From the email, click Reset password and enter a new password twice.
</div>
<div class="msg msg--error" *ngIf="errorMessage">
<span>{{ errorMessage }}</span>
</div>
<div class="msg msg--success" *ngIf="successMessage">
<span>{{ successMessage }}</span>
</div>
<form action="" [formGroup]="RequestResetForm" (ngSubmit)="RequestResetUser(RequestResetForm)">
<!--div class="form-group">
<input _ngcontent-c0="" class="form-control form-control-lg" placeholder="email"
type="text" id="email" formControlName="email" />
<span *ngIf="!RequestResetForm.get('email').valid && !IsvalidForm"
class="help-block">Please enter a valid email!</span>
</div-->
<div class="row">
<mat-form-field class="col" [ngClass]="routeAnimationsElements">
<input matInput placeholder="E-mail"
formControlName="email" type="email" />
<mat-error *ngIf="!RequestResetForm.get('email').valid && !IsValidForm">
Please enter a valid email!
</mat-error>
</mat-form-field>
</div>
<!--div class="form-group">
<div>
<button type="submit" class=" btn btn-primary">Reset
Password</button>
</div>
</div-->
<div class="row buttons d-flex justify-content-center pad">
<button type="submit" mat-raised-button color="accent" [disabled]="loading"
[ngClass]="routeAnimationsElements">
<span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
Reset Password
</button>
</div>
</form>
</div>
</mat-card>
</div>
</div>
</div>
<!--div class="container-fluid form">
<div class="row form-row ">
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
<div class="card my-5">
<div class="card-body">
<h5 class="card-title text-center">Forgot Password</h5>
<div>
<div id="errorMsg" *ngIf="errorMessage">
<span>{{errorMessage}}</span>
</div>
<div id="successMsg" *ngIf="successMessage">
<span>{{successMessage}}</span>
</div>
<form action="" [formGroup]="RequestResetForm" (ngSubmit)="RequestResetUser(RequestResetForm)">
<div class="form-group">
<input _ngcontent-c0="" class="form-control form-control-lg" placeholder="email"
type="text" id="email" formControlName="email" />
<span *ngIf="!RequestResetForm.get('email').valid && !IsvalidForm"
class="help-block">Please enter a valid email!</span>
</div>
<div class="form-group">
<div>
<button type="submit" class=" btn btn-primary">Reset
Password</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div-->
mat-card {
margin-top: 50px;
margin-bottom: 20px;
}
.mat-form-field {
padding: 0 30px;
}
form {
width: 100%;
}
.buttons {
margin: 20px 0;
}
button {
margin-right: 5px;
margin-left: 5px;
}
.msg {
padding: 10px 10px 20px;
color: #666;
font-size: 14px;
text-align: justify;
}
.msg--error {
color: red;
}
.msg--success {
color: green;
}
Legend
Html element with directive