frontend-inversiones/src/app/components/profile/profile.component.html

<h2 class="floating-title">{{ title }}</h2>

<div class="main-content">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-12">
        <div class="align-container">
          <div class="card">
            <div class="card-header">
              <div class="row align-items-center">
                <div class="col-8">
                  <h3 class="mb-0">Editar perfil</h3>
                </div>
              </div>
            </div>
            <div class="card-body">
              <form
                class="form-auth-small ng-untouched ng-pristine ng-valid"
                [formGroup]="userForm"
              >
                <h6 class="heading-small text-muted mb-4">
                  Información de usuario
                </h6>
                <div class="pl-lg-4">
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="hint-wrapper">
                        <small class="hint">
                          <i class="fas fa-exclamation-circle"></i>
                          La contraseña debe contener letras mayusculas,
                          minusculas, al menos un número y un símbolo.
                        </small>
                      </div>

                      <div class="form-group">
                        <label for="old_password">Contraseña vieja</label>
                        <input
                          type="password"
                          class="form-control"
                          formControlName="old_password"
                          [ngClass]="{
                            'is-invalid': submitted && f.old_password.errors
                          }"
                        />
                        <div
                          *ngIf="submitted && f.old_password.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.old_password.errors.required">
                            Campo requerido
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="new_password">Nueva contraseña</label>
                        <input
                          type="password"
                          class="form-control"
                          formControlName="new_password"
                          [ngClass]="{
                            'is-invalid': submitted && f.new_password.errors
                          }"
                        />
                        <div
                          *ngIf="submitted && f.new_password.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.new_password.errors.required">
                            Campo requerido
                          </div>
                          <div *ngIf="f.new_password.errors.minlength">
                            La contraseña debe contener al menos 8 caracteres
                          </div>
                          <div
                            *ngIf="f.new_password.hasError('passwordStrength')"
                            style="white-space: pre;"
                          >
                            {{ f.new_password.errors["passwordStrength"] }}
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="confirm_new_password"
                          >Nueva confirmar contraseña</label
                        >
                        <input
                          type="password"
                          class="form-control"
                          formControlName="confirm_new_password"
                          [ngClass]="{
                            'is-invalid':
                              submitted && f.confirm_new_password.errors
                          }"
                        />
                        <div
                          *ngIf="submitted && f.confirm_new_password.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.confirm_new_password.errors.required">
                            Campo requerido
                          </div>
                          <div *ngIf="f.confirm_new_password.errors.mustMatch">
                            Las contraseñas deben coincidir
                          </div>
                        </div>
                      </div>

                      <br />
                      <button class="btn btn-primary" (click)="editUser()">
                        Actualizar contraseña
                      </button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>