File
Description
Password Change Component
Display form to update user password
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
mev-password-change |
| styleUrls |
./password-change.component.scss |
| templateUrl |
./password-change.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Accessors
|
|
|
Methods
|
changePassword
|
changePassword()
|
|
|
Method for the form submission
|
|
isFormValid
|
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 { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ROUTE_ANIMATIONS_ELEMENTS } from '@app/core/core.module';
import { RepeatPasswordValidator } from '@app/shared/validators/validators';
import { UserService } from '@app/core/user/user.service';
/**
* Password Change Component
*
* Display form to update user password
*/
@Component({
selector: 'mev-password-change',
templateUrl: './password-change.component.html',
styleUrls: ['./password-change.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PasswordChangeComponent implements OnInit {
routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
changePasswordForm: FormGroup;
errorMessage: string;
successMessage: string;
loading = false;
submitted = false;
isFormValid = true;
constructor(private userService: UserService, private fb: FormBuilder) {}
ngOnInit(): void {
this.changePasswordForm = this.fb.group(
{
current_password: ['', [Validators.required]],
password: [
'',
[
Validators.required,
Validators.minLength(8),
Validators.pattern(
'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-_]).{8,}$'
)
]
],
confirm_password: ['', [Validators.required]]
},
{ validator: RepeatPasswordValidator }
);
}
/**
* Convenience getter for easy access to form fields
*/
get f() {
return this.changePasswordForm.controls;
}
/**
* Method for the form submission
*/
changePassword() {
this.submitted = true;
if (this.changePasswordForm.valid) {
this.loading = true;
this.submitted = false;
this.userService.changePassword(this.changePasswordForm.value).subscribe(
data => {
this.changePasswordForm.reset();
this.isFormValid = true;
this.errorMessage = null;
this.successMessage = 'Your password has been successfully updated.';
this.loading = false;
},
err => {
this.successMessage = null;
this.errorMessage = 'Server Side Error';
this.loading = false;
}
);
} else {
this.isFormValid = false;
}
}
}
<div class="container" rtl>
<form [formGroup]="changePasswordForm" (ngSubmit)="changePassword()">
<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>Change password</h2>
</span>
<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="Old password" formControlName="current_password"
[ngClass]="{ 'is-invalid': submitted && f.current_password.errors }" />
<div *ngIf="submitted && f.current_password.errors">
<mat-error *ngIf="f.current_password.errors.required">
Password is required
</mat-error>
</div>
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col" [ngClass]="routeAnimationsElements">
<input matInput type="password" placeholder="New 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">
New password must be at least 8 characters
</mat-error>
<mat-error *ngIf="f.password.errors.pattern">
New 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>
</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