WEB-233: Improve the OIDC integration with 2FA (#2602)

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

@@ -0,0 +1,42 @@
+<h1 mat-dialog-title>{{ 'labels.heading.Change Password' | translate }}</h1>
+
+<div mat-dialog-content>
+  <form [formGroup]="changePasswordForm" class="layout-column" (ngSubmit)="onSubmit()">
+    <!-- Contraseña actual -->
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>{{ 'labels.inputs.Password Current' | translate }}</mat-label>
+      <input matInput type="password" formControlName="currentPassword" required />
+      <mat-error *ngIf="changePasswordForm.get('currentPassword')?.hasError('required')">
+        {{ 'inputs.currentPasswordRequired' | translate }}
+      </mat-error>
+    </mat-form-field>
+
+    <!-- Nueva contraseña -->
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>{{ 'labels.inputs.Password New' | translate }}</mat-label>
+      <input matInput type="password" formControlName="password" required />
+      <mat-error *ngIf="changePasswordForm.get('password')?.errors">
+        {{ 'labels.commons.Password validation' | translate: { minchar: minPasswordLength } }}
+      </mat-error>
+    </mat-form-field>
+
+    <!-- Confirmar contraseña -->
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
+      <input matInput type="password" formControlName="repeatPassword" required />
+      <mat-error *ngIf="changePasswordForm.get('repeatPassword')?.hasError('notequal')">
+        {{ 'inputs.passwordsDoNotMatch' | translate }}
+      </mat-error>
+    </mat-form-field>
+
+    <!-- Botones de acción dentro del formulario -->
+    <mat-dialog-actions align="center">
+      <button mat-raised-button color="warn" type="button" (click)="dialogRef.close()">
+        {{ 'labels.buttons.Cancel' | translate }}
+      </button>
+      <button mat-raised-button color="primary" type="submit" [disabled]="!changePasswordForm.valid">
+        {{ 'labels.buttons.Confirm' | translate }}
+      </button>
+    </mat-dialog-actions>
+  </form>
+</div>

src/app/zitadel/shared/change-password-dialog/change-password-dialog.component.scss

@@ -0,0 +1,8 @@
+.error {
+  color: red;
+}
+
+mat-dialog-content {
+  min-width: 240px;
+  width: 240px;
+}

src/app/zitadel/shared/change-password-dialog/change-password-dialog.component.spec.ts

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

src/app/zitadel/shared/change-password-dialog/change-password-dialog.component.ts

@@ -0,0 +1,111 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogActions } from '@angular/material/dialog';
+import { UntypedFormBuilder, Validators, AbstractControl, ValidationErrors, FormGroup } from '@angular/forms';
+import { confirmPasswordValidator } from 'app/login/reset-password/confirm-password.validator';
+import { HttpClient } from '@angular/common/http';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { environment } from '../../../../environments/environment';
+
+/**
+ * Change Password Dialog component.
+ */
+@Component({
+  selector: 'mifosx-change-password-dialog',
+  templateUrl: './change-password-dialog.component.html',
+  styleUrls: ['./change-password-dialog.component.scss'],
+  standalone: true,
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogActions
+  ]
+})
+export class ChangePasswordDialogComponent implements OnInit {
+  minPasswordLength: number = environment.minPasswordLength || 12;
+  changePasswordForm: FormGroup;
+
+  constructor(
+    public dialogRef: MatDialogRef<ChangePasswordDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private formBuilder: UntypedFormBuilder,
+    private http: HttpClient
+  ) {}
+
+  private api = environment.OIDC.oidcApiUrl;
+
+  ngOnInit(): void {
+    this.createChangePasswordForm();
+    this.setupPasswordMatchValidation();
+  }
+
+  createChangePasswordForm(): void {
+    this.changePasswordForm = this.formBuilder.group(
+      {
+        currentPassword: [
+          '',
+          Validators.required
+        ],
+        password: [
+          '',
+          [
+            Validators.required,
+            Validators.minLength(this.minPasswordLength),
+            Validators.maxLength(50),
+            Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).+$/)]
+        ],
+        repeatPassword: [
+          '',
+          Validators.required
+        ]
+      },
+      { validators: confirmPasswordValidator }
+    );
+  }
+
+  setupPasswordMatchValidation(): void {
+    this.changePasswordForm.get('password')?.valueChanges.subscribe(() => {
+      this.changePasswordForm.get('repeatPassword')?.updateValueAndValidity();
+    });
+
+    this.changePasswordForm.get('repeatPassword')?.setValidators([
+      Validators.required,
+      this.matchOtherControl('password')]);
+  }
+
+  matchOtherControl(controlNameToMatch: string) {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const parent = control?.parent;
+      if (!parent) return null;
+
+      const matchingControl = parent.get(controlNameToMatch);
+      if (!matchingControl) return null;
+
+      return control.value === matchingControl.value ? null : { notequal: true };
+    };
+  }
+
+  onSubmit(): void {
+    if (this.changePasswordForm.invalid) return;
+
+    const requestBody = {
+      userId: this.data.id,
+      currentPassword: this.changePasswordForm.value.currentPassword,
+      newPassword: {
+        password: this.changePasswordForm.value.password,
+        changeRequired: false
+      }
+    };
+
+    console.log('JSON a enviar:', requestBody);
+
+    this.http.put(this.api + 'authentication/user/password', requestBody).subscribe({
+      next: (res) => {
+        //console.log('Contraseña actualizada', res);
+        this.dialogRef.close(true);
+      },
+      error: (err) => {
+        console.log(err);
+        alert(err + 'No es posible actualizar contraseña');
+      }
+    });
+  }
+}

src/app/zitadel/shared/shared.module.ts

@@ -0,0 +1,34 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+// Angular Material Modules
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { ChangePasswordDialogComponent } from './change-password-dialog/change-password-dialog.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatTooltipModule,
+    ChangePasswordDialogComponent
+  ],
+  exports: [
+    ChangePasswordDialogComponent
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class SharedModule {}