Change user password integration

ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.css

@@ -0,0 +1,15 @@
+.user-form .form-field {
+    display: block;
+    margin-bottom: 10px; 
+  }
+  
+  .checkbox-group label {
+    display: block;
+    margin-bottom: 8px;
+  }
+  
+  .error-message {
+    color: red;
+    margin-top: 10px;
+  }
+  

ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.html

@@ -0,0 +1,23 @@
+<h1 mat-dialog-title>Editar Usuario</h1>
+<div mat-dialog-content>
+  <form [formGroup]="userForm" class="user-form">
+    <mat-form-field class="form-field">
+      <mat-label>Nombre de usuario</mat-label>
+      <input matInput formControlName="username">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Contraseña</mat-label>
+      <input matInput formControlName="password" type="password">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Repite la contraseña</mat-label>
+      <input matInput formControlName="confirmPassword" type="password">
+    </mat-form-field>
+    <div *ngIf="passwordMismatch" class="error-message">Las contraseñas no coinciden</div>
+    <div *ngIf="updateError" class="error-message">Ha habido un error, inténtelo de nuevo</div>
+  </form>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Cancelar</button>
+  <button mat-button (click)="onSubmit()">Editar</button>
+</div>

ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChangePasswordModalComponent } from './change-password-modal.component';
+
+describe('ChangePasswordModalComponent', () => {
+  let component: ChangePasswordModalComponent;
+  let fixture: ComponentFixture<ChangePasswordModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ChangePasswordModalComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ChangePasswordModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.ts

@@ -0,0 +1,71 @@
+import { Component, EventEmitter, Inject, Output } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { EditUserModalComponent } from '../edit-user-modal/edit-user-modal.component';
+import { UserService } from '../users.service';
+
+@Component({
+  selector: 'app-change-password-modal',
+  templateUrl: './change-password-modal.component.html',
+  styleUrls: ['./change-password-modal.component.css']
+})
+export class ChangePasswordModalComponent {
+  @Output() userEdited = new EventEmitter<void>();
+  userForm: FormGroup;
+  passwordMismatch: boolean = false;
+  updateError: boolean = false;
+
+  constructor(
+    public dialogRef: MatDialogRef<EditUserModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private fb: FormBuilder,
+    private userService: UserService
+  ) {
+    this.userForm = this.fb.group({
+      username: [this.data.user, Validators.required],
+      password: ['', Validators.required],
+      confirmPassword: ['', Validators.required]
+    }, { validators: this.passwordMatchValidator });
+  }
+
+  ngOnInit(): void {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  onSubmit(): void {
+    if (this.userForm.valid) {
+      this.passwordMismatch = false;
+      this.updateError = false;
+
+      const userPayload = {
+        username: this.userForm.value.username,
+        allowedOrganizationalUnits: this.data.user.allowedOrganizationalUnits,
+        password: this.userForm.value.password,
+        enabled: true,
+        userGroups: this.data.user.userGroups
+      };
+
+      this.userService.updateUser(this.data.uuid, userPayload).subscribe(
+        response => {
+          console.log('User updated successfully:', response);
+          this.userEdited.emit();
+          this.dialogRef.close(this.userForm.value);
+        },
+        error => {
+          console.error('Error updating user:', error);
+          this.updateError = true;
+        }
+      );
+    } else {
+      console.error('Form is invalid');
+      this.passwordMismatch = this.userForm.hasError('mismatch');
+      this.updateError = true;
+    }
+  }
+
+  private passwordMatchValidator(form: FormGroup): { [key: string]: boolean } | null {
+    return form.get('password')?.value === form.get('confirmPassword')?.value ? null : { mismatch: true };
+  }
+}