soma-frontend/src/app/components/new-password/new-password.component.html

<div id="wrapper">
  <div class="vertical-align-wrap">
    <div class="vertical-align-middle auth-main">
      <div class="auth-box">
        <div class="top">
          <a href="/">
            <img alt="Inverlec" src="./assets/img/inverlec_logo.png" />
          </a>
        </div>

        <div class="card">
          <div *ngIf="!newPass" class="header">
            <h1 class="lead">{{ errorMessage }}</h1>

            <div *ngIf="sendOtherToken">
              <div class="tokenExpired">
                <a class="btn btn-primary" (click)="getNewToken()">
                  Enviar nuevo correo para recuperar contraseña
                </a>
              </div>
            </div>
          </div>

          <div class="header" *ngIf="newPass">
            <h1 class="lead">Nueva contraseña</h1>
          </div>
          <div class="body" *ngIf="newPass">
            <form [formGroup]="activateForm" (ngSubmit)="newPassword()">
              <div class="form-group">
                <br />
                <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>

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

              <div class="form-group">
                <label for="confirm_password">Confirmar contraseña</label>
                <input
                  type="password"
                  class="form-control"
                  formControlName="confirm_password"
                  [ngClass]="{
                    'is-invalid': submitted && f.confirm_password.errors
                  }"
                />
                <div
                  *ngIf="submitted && f.confirm_password.errors"
                  class="invalid-feedback"
                >
                  <div *ngIf="f.confirm_password.errors.required">
                    Campo requerido
                  </div>
                  <div *ngIf="f.confirm_password.errors.mustMatch">
                    Las contraseñas deben coincidir
                  </div>
                </div>
              </div>

              <br />

              <br />

              <div class="div-center">
                <button class="btn btn-primary" type="submit">
                  Enviar instrucciones
                </button>
              </div>
            </form>
          </div>

          <div></div>
        </div>
      </div>
    </div>
  </div>
</div>