feat: add user change password component (#660)

Fixes: #657
2020-05-16 13:01:27 +05:30
parent 0c2af151f3
commit eb56bdc0ad
8 changed files with 172 additions and 2 deletions
@@ -0,0 +1,50 @@
+<h1 mat-dialog-title>Change Password</h1>
+
+<div mat-dialog-content>
+
+  <form [formGroup]="changePasswordForm">
+
+    <div fxLayout="column">
+
+      <mat-form-field>
+        <mat-label>Password</mat-label>
+        <input matInput formControlName="password" type="password">
+        <mat-error *ngIf="changePasswordForm.controls.password.hasError('required')">
+          Password <strong>is required</strong>
+        </mat-error>
+        <mat-error *ngIf="changePasswordForm.controls.password.hasError('minlength')">
+          Password should be at least <strong>8 characters long</strong>
+        </mat-error>
+        <mat-error *ngIf="changePasswordForm.controls.password.hasError('maxlength')">
+          Password should not be more than <strong>50 characters long</strong>
+        </mat-error>
+        <mat-error *ngIf="changePasswordForm.controls.password.hasError('pattern')">
+          Password should include a <strong>numeral</strong> and at <strong>least one uppercase</strong> ,<strong>lowercase and special character</strong>
+        </mat-error>
+      </mat-form-field>
+
+    </div>
+
+    <div fxLayout="column">
+
+      <mat-form-field>
+        <mat-label>Repeat Password</mat-label>
+        <input matInput formControlName="repeatPassword" type="password">
+        <mat-error *ngIf="changePasswordForm.controls.repeatPassword.hasError('required')">
+          Password <strong>required</strong>
+        </mat-error>
+        <mat-error *ngIf="changePasswordForm.controls.repeatPassword.hasError('notequal')">
+          Password <strong>does not match</strong>
+        </mat-error>
+      </mat-form-field>
+
+    </div>
+
+  </form>
+
+</div>
+
+<mat-dialog-actions align="center">
+  <button mat-raised-button mat-dialog-close>Cancel</button>
+  <button mat-raised-button color="warn" [disabled]="!changePasswordForm.valid" [mat-dialog-close]="{password:changePasswordForm.get('password').value,repeatPassword:changePasswordForm.get('repeatPassword').value}">Confirm</button>
+</mat-dialog-actions>