File
Description
Response Password Reset Component
Display the result of password reset operation. It is shown after the user clicks email link for reset password
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
mev-response-password-reset |
| styleUrls |
./response-password-reset.component.scss |
| templateUrl |
./response-password-reset.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Accessors
|
|
|
Methods
|
ResetPassword
|
ResetPassword()
|
|
|
|
|
|
VerifyToken
|
VerifyToken()
|
|
|
|
|
|
IsResetFormValid
|
Default value : true
|
|
|
|
loading
|
Default value : false
|
|
|
|
routeAnimationsElements
|
Default value : ROUTE_ANIMATIONS_ELEMENTS
|
|
|
|
submitted
|
Default value : false
|
|
|
Accessors
|
f
|
getf()
|
|
|
Convenience getter for easy access to form fields
|
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { AuthenticationService } from '@app/core/authentication/authentication.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { ROUTE_ANIMATIONS_ELEMENTS } from '@app/core/core.module';
import { RepeatPasswordValidator } from '@app/shared/validators/validators';
/**
* Response Password Reset Component
*
* Display the result of password reset operation. It is shown after the user clicks email link for reset password
*/
@Component({
selector: 'mev-response-password-reset',
templateUrl: './response-password-reset.component.html',
styleUrls: ['./response-password-reset.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ResponsePasswordResetComponent implements OnInit {
routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
responseResetForm: FormGroup;
errorMessage: string;
successMessage: string;
loading = false;
submitted = false;
resetToken: null;
uid: null;
CurrentState: any;
IsResetFormValid = true;
constructor(
private authService: AuthenticationService,
private router: Router,
private route: ActivatedRoute,
private fb: FormBuilder
) {
this.CurrentState = 'Wait';
this.route.params.subscribe(params => {
this.resetToken = params.token;
this.uid = params.uid;
this.VerifyToken();
});
}
ngOnInit(): void {
this.Init();
}
VerifyToken() {
this.CurrentState = 'Verified';
this.authService
.ValidPasswordToken({ token: this.resetToken, uid: this.uid })
.subscribe(
data => {
this.CurrentState = 'Verified';
},
err => {
this.CurrentState = 'NotVerified';
}
);
}
Init() {
this.responseResetForm = this.fb.group(
{
token: [this.resetToken],
uid: [this.uid],
password: [
'',
[
Validators.required,
Validators.minLength(8),
Validators.pattern(
'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-_]).{8,}$'
)
]
],
confirm_password: ['', [Validators.required]]
},
{ validator: RepeatPasswordValidator }
);
}
ResetPassword() {
this.submitted = true;
if (this.responseResetForm.valid) {
// this.IsResetFormValid = true;
this.loading = true;
this.authService
.confirmPasswordReset(this.responseResetForm.value)
.subscribe(
data => {
this.responseResetForm.reset();
this.IsResetFormValid = true;
this.errorMessage = null;
this.successMessage =
'Your password has been successfully updated. Redirecting to Sign-in page...';
setTimeout(() => {
this.successMessage = null;
this.router.navigate(['login']);
}, 5000);
},
err => {
this.successMessage = null;
this.errorMessage = 'Server Side Error';
this.loading = false;
}
);
} else {
this.IsResetFormValid = false;
}
}
/**
* Convenience getter for easy access to form fields
*/
get f() {
return this.responseResetForm.controls;
}
}
<div class="container" rtl>
<form [formGroup]="responseResetForm" (ngSubmit)="ResetPassword()">
<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>Set New Password</h2>
</span>
<span *ngIf="CurrentState=='Wait'">
Please Wait...
</span>
<span *ngIf="CurrentState=='NotVerified'">
Invalid URL
</span>
<div *ngIf="CurrentState=='Verified'">
<div class="row">
<div class="msg msg--error" *ngIf="errorMessage">
<span>{{ errorMessage }}</span>
</div>
<div class="msg msg--success" *ngIf="successMessage">
<span>{{ successMessage }}</span>
</div>
</div>
<div class="row">
<mat-form-field class="col" [ngClass]="routeAnimationsElements">
<input matInput type="password" placeholder="Password" formControlName="password"
[ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors">
<mat-error *ngIf="f.password.errors.required">
Password is required
</mat-error>
<mat-error *ngIf="f.password.errors.minlength">
Password must be at least 8 characters
</mat-error>
<mat-error *ngIf="f.password.errors.pattern">
Password must have at least one uppercase letter, one lowercase letter, one
number
and one special character.
</mat-error>
</div>
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col" [ngClass]="routeAnimationsElements">
<input matInput type="password" placeholder="Confirm password"
formControlName="confirm_password"
[ngClass]="{ 'is-invalid': submitted && f.confirm_password.errors }" />
<div *ngIf="submitted && f.confirm_password.errors">
<mat-error *ngIf="f.confirm_password.errors.required">
Please confirm your password
</mat-error>
<mat-error *ngIf="f.confirm_password.errors.notMatched">
Confirm Password does not match with password.
</mat-error>
</div>
</mat-form-field>
</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>
Update password
</button>
</div>
</div>
</mat-card>
</div>
</div>
</form>
</div>
mat-card {
margin-top: 50px;
margin-bottom: 20px;
}
.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