feat: add self service password component (#670)

Fixes: #669

src/app/self-service/users/user.service.ts

@@ -54,4 +54,17 @@ export class UserService {
     return this.http.disableApiPrefix().get('/assets/mock/user.mock.json');
   }
 
+  /**
+   * Change User Password.
+   * @param userId User Id of users
+   * @param password New Password of the user
+   * @returns {Observable<any>}
+   *
+   * TODO: update endpoint once API available
+   */
+  changePassword(userId: string, passwordObj: any) {
+
+    return this.http.put(`/self/user/${userId}`, passwordObj);
+  }
+
 }

src/app/self-service/users/users.component.html

@@ -77,7 +77,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view/1600']"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view',row.id]"></tr>
       <!-- TODO: Update route once API is setup. -->
 
     </table>

src/app/self-service/users/view-user/view-user.component.html

@@ -4,7 +4,7 @@
     <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
     Edit
   </button>
-  <button mat-raised-button color="primary" (click)="openDialog()">
+  <button mat-raised-button color="primary" (click)="changeUserPassword()">
     <fa-icon icon="cog"></fa-icon>&nbsp;&nbsp;
     Change Password
   </button>

src/app/self-service/users/view-user/view-user.component.ts

@@ -1,6 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ChangePasswordDialogComponent } from 'app/shared/change-password-dialog/change-password-dialog.component';
+import { MatDialog } from '@angular/material';
+
+/** Custom Services. */
+import { UserService } from '../user.service';
 
 /**
  * View self service user component.
@@ -20,8 +25,15 @@ export class ViewUserComponent implements OnInit {
   /**
    * Retrieves the user data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
+   * @param {UserService} userService Users Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private userService: UserService,
+              private router: Router,
+              private dialog: MatDialog) {
     this.route.data.subscribe((data: { user: any }) => {
       this.user = data.user;
     });
@@ -30,8 +42,24 @@ export class ViewUserComponent implements OnInit {
   ngOnInit() {
   }
 
-  openDialog() {
-    // TODO: Open change password dialog.
+  /**
+   * Open Dialog to Change Password
+   */
+  changeUserPassword() {
+    const changeUserPasswordDialogRef = this.dialog.open(ChangePasswordDialogComponent, {
+      width: '400px',
+      height: '300px'
+    });
+    changeUserPasswordDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.password && response.repeatPassword) {
+        const password = response.password;
+        const repeatPassword = response.repeatPassword;
+        const data =  {password: password, repeatPassword: repeatPassword };
+        this.userService.changePassword(this.user.id, data).subscribe(() => {
+          this.router.navigate(['/..']);
+        });
+      }
+    });
   }
 
 }

src/app/shared/change-password-dialog/change-password-dialog.component.html

@@ -18,15 +18,11 @@
         <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')">
+        <mat-error *ngIf="changePasswordForm.controls.password.hasError('pattern') && !(changePasswordForm.controls.password.hasError('minlength') || changePasswordForm.controls.password.hasError('maxlength'))">
           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">