From 050d4158ed6df35b0faa6900a6c3987e1384a947 Mon Sep 17 00:00:00 2001
From: grossmj <grossmj@gns3.net>
Date: Tue, 18 Feb 2025 11:44:06 +1000
Subject: [PATCH] Add possibility for a user to change his/her password. Ref
 https://github.com/GNS3/gns3-gui/issues/3698

---
 .../edit-user-dialog/edit-user-dialog.component.ts     |  2 +-
 .../change-user-password.component.html                |  2 +-
 .../change-user-password.component.ts                  |  8 +++-----
 .../user-detail/user-detail.component.ts               |  2 +-
 .../users/logged-user/logged-user.component.html       | 10 ++++++----
 .../users/logged-user/logged-user.component.ts         | 10 +++++++++-
 src/app/services/user.service.ts                       |  6 +++++-
 7 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.ts b/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.ts
index 92b8cbf4..389dfe5a 100644
--- a/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.ts
+++ b/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.ts
@@ -67,7 +67,7 @@ export class EditUserDialogComponent implements OnInit {
 
     updatedUser.user_id = this.data.user.user_id;
     console.log(updatedUser)
-    this.userService.update(this.data.controller, updatedUser)
+    this.userService.update(this.data.controller, updatedUser, false)
       .subscribe((user: User) => {
           console.log("Done ", user)
           this.toasterService.success(`User ${user.username} updated`);
diff --git a/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.html b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.html
index f61f5fa5..557c001c 100644
--- a/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.html
+++ b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.html
@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Change password for user :  </h1>
+<h1 mat-dialog-title>Change password for {{ user.username }}</h1>
 <div>
   <form [formGroup]="editPasswordForm" class="input-field">
     <mat-form-field class="input-field">
diff --git a/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.ts b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.ts
index 4d3f7ff4..4c342c98 100644
--- a/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.ts
+++ b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.ts
@@ -18,7 +18,7 @@ export class ChangeUserPasswordComponent implements OnInit {
   user: User;
 
   constructor(private dialogRef: MatDialogRef<ChangeUserPasswordComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: { user: User, controller: Controller },
+              @Inject(MAT_DIALOG_DATA) public data: { user: User, controller: Controller, self_update: boolean },
               private userService: UserService,
               private toasterService: ToasterService) { }
 
@@ -52,16 +52,14 @@ export class ChangeUserPasswordComponent implements OnInit {
     updatedUser['password'] = this.editPasswordForm.get('password').value;
     updatedUser['user_id'] = this.user.user_id;
 
-    console.log(updatedUser);
-
-    this.userService.update(this.data.controller, updatedUser)
+    this.userService.update(this.data.controller, updatedUser, this.data.self_update)
       .subscribe((user: User) => {
           this.toasterService.success(`User ${user.username} password updated`);
           this.editPasswordForm.reset();
           this.dialogRef.close(true);
         },
         (error) => {
-          this.toasterService.error('Cannot update password for user : ' + error);
+          this.toasterService.error('Cannot update password for user: ' + error);
         })
   }
 }
diff --git a/src/app/components/user-management/user-detail/user-detail.component.ts b/src/app/components/user-management/user-detail/user-detail.component.ts
index ee0200e0..9f6586ec 100644
--- a/src/app/components/user-management/user-detail/user-detail.component.ts
+++ b/src/app/components/user-management/user-detail/user-detail.component.ts
@@ -96,7 +96,7 @@ export class UserDetailComponent implements OnInit {
     const updatedUser = this.getUpdatedValues();
     updatedUser['user_id'] = this.user.user_id;
 
-    this.userService.update(this.controller, updatedUser)
+    this.userService.update(this.controller, updatedUser, false)
       .subscribe((user: User) => {
           this.toasterService.success(`User ${user.username} updated`);
         },
diff --git a/src/app/components/users/logged-user/logged-user.component.html b/src/app/components/users/logged-user/logged-user.component.html
index 14d9619c..21e693fc 100644
--- a/src/app/components/users/logged-user/logged-user.component.html
+++ b/src/app/components/users/logged-user/logged-user.component.html
@@ -7,11 +7,13 @@
     <div class="default-content">
         <mat-card *ngIf="user">
             <mat-list>
-                <mat-list-item> Username: {{user.username}} </mat-list-item>
-                <mat-list-item> Full name: {{user.full_name}} </mat-list-item>
-                <mat-list-item> Email: {{user.email}} </mat-list-item>
+                <mat-list-item> Username: {{ user.username }} </mat-list-item>
+                <mat-list-item> Full name: {{ user.full_name }} </mat-list-item>
+                <mat-list-item> Email: {{ user.email }} </mat-list-item>
             </mat-list>
-
+            <div class="buttons-bar">
+              <button mat-raised-button color="primary" class="full_width" (click)="changePassword()">Change password</button><br />
+            </div>
             <div class="buttons-bar">
                 <button mat-raised-button color="primary" class="full_width" (click)="copyToken()">Click to copy access token</button><br />
             </div>
diff --git a/src/app/components/users/logged-user/logged-user.component.ts b/src/app/components/users/logged-user/logged-user.component.ts
index ef8fad70..1678f874 100644
--- a/src/app/components/users/logged-user/logged-user.component.ts
+++ b/src/app/components/users/logged-user/logged-user.component.ts
@@ -5,6 +5,8 @@ import { UserService } from '../../../services/user.service';
 import { ToasterService } from '../../../services/toaster.service';
 import { User } from '../../../models/users/user';
 import { Controller } from '../../../models/controller';
+import { ChangeUserPasswordComponent } from "@components/user-management/user-detail/change-user-password/change-user-password.component";
+import { MatDialog } from "@angular/material/dialog";
 
 @Component({
   selector: 'app-logged-user',
@@ -19,7 +21,8 @@ export class LoggedUserComponent implements OnInit {
         private route: ActivatedRoute,
         private controllerService: ControllerService,
         private userService: UserService,
-        private toasterService: ToasterService
+        private toasterService: ToasterService,
+        public dialog: MatDialog
     ) {}
 
     ngOnInit() {
@@ -32,6 +35,11 @@ export class LoggedUserComponent implements OnInit {
         });
     }
 
+    changePassword() {
+        this.dialog.open<ChangeUserPasswordComponent>(ChangeUserPasswordComponent,
+          {width: '400px', height: '300px', data: {user: this.user, controller: this.controller, self_update: true}});
+    }
+
     copyToken() {
         const selBox = document.createElement('textarea');
         selBox.style.position = 'fixed';
diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts
index 9ffa9110..b4e5f7c5 100644
--- a/src/app/services/user.service.ts
+++ b/src/app/services/user.service.ts
@@ -5,6 +5,7 @@ import { Controller } from '../models/controller';
 import { HttpController } from './http-controller.service';
 import { User } from '../models/users/user';
 import { Group } from "@models/groups/group";
+import {Image} from "@models/images";
 
 @Injectable()
 export class UserService {
@@ -32,7 +33,10 @@ export class UserService {
     return this.httpController.delete(controller, `/access/users/${user_id}`);
   }
 
-  update(controller: Controller, user: any): Observable<User> {
+  update(controller: Controller, user: any, self_update: boolean): Observable<User> {
+    if (self_update) {
+      return this.httpController.put<User>(controller, `/access/users/me`, user);
+    }
     return this.httpController.put<User>(controller, `/access/users/${user.user_id}`, user);
   }