feat: add user change password component (#660)

Fixes: #657

src/app/users/users.service.ts

@@ -48,6 +48,16 @@ export class UsersService {
     return this.http.get(`/users/${userId}`);
   }
 
+  /**
+   * Change User Password
+   * @param userId User Id of users
+   * @param password New Password of the user
+   * @returns {Observable<any>}
+   */
+  changePassword(userId: string, passwordObj: any) {
+    return this.http.put(`/users/${userId}`, passwordObj);
+  }
+
   /**
    * @param {string} userId user ID of user.
    * @returns {Observable<any>}

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

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

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

@@ -8,6 +8,7 @@ import { UsersService } from '../users.service';
 
 /** Custom Components */
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { ChangePasswordDialogComponent } from 'app/shared/change-password-dialog/change-password-dialog.component';
 
 /**
  * View user component.
@@ -58,4 +59,25 @@ export class ViewUserComponent implements OnInit {
     });
   }
 
+  /**
+   * Change Password of the Users.
+   */
+  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 firstname = this.userData.firstname;
+        const data = {password: password, repeatPassword: repeatPassword, firstname: firstname};
+        this.usersService.changePassword(this.userData.id, data).subscribe(() => {
+          this.router.navigate(['/users']);
+        });
+      }
+    });
+  }
+
 }