soma-frontend/src/app/components/confirm-account/confirm-account.component.html

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

        <div class="card" *ngIf="!customer">
          <div class="header">
            <h1 class="lead">Confirmación de cuenta</h1>
          </div>
          <div class="body" *ngIf="validToken">
            <form [formGroup]="activateForm" (ngSubmit)="activateAccount()">
              <div class="form-group">
                <label for="email">Correo electrónico</label>
                <input
                  type="text"
                  class="form-control"
                  formControlName="email"
                  required
                  email
                  readonly
                />
              </div>

              <div class="form-group">
                <label for="name">Nombre</label>
                <input
                  type="text"
                  class="form-control"
                  formControlName="first_name"
                  [ngClass]="{ 'is-invalid': submitted && f.first_name.errors }"
                />
                <div
                  *ngIf="submitted && f.first_name.errors"
                  class="invalid-feedback"
                >
                  <div *ngIf="f.first_name.errors.required">
                    Campo requerido
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label for="name">Apellido</label>
                <input
                  type="text"
                  class="form-control"
                  formControlName="last_name"
                  [ngClass]="{ 'is-invalid': submitted && f.last_name.errors }"
                />
                <div
                  *ngIf="submitted && f.last_name.errors"
                  class="invalid-feedback"
                >
                  <div *ngIf="f.last_name.errors.required">Campo requerido</div>
                </div>
              </div>

              <div class="form-group">
                <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 />

              <div class="div-center">
                <button class="btn btn-primary" type="submit">
                  Confirmar cuenta
                </button>
              </div>
            </form>
          </div>

          <div class="body" *ngIf="invalidToken">
            <div class="tokenError">
              <h3>
                {{ errorMessage }}
              </h3>

              <div *ngIf="userActivated">
                <a class="btn btn-primary" [routerLink]="['/login']">
                  Ir a inicio de sesion
                </a>
              </div>
            </div>
          </div>

          <div class="body" *ngIf="successActivation">
            <div class="tokenSuccess">
              <h3>
                {{ activateMessage }}
              </h3>

              <a class="btn btn-primary" [routerLink]="['/login']">
                Ir a inicio de sesion
              </a>
            </div>
          </div>
        </div>

        <div class="card" *ngIf="customer">
          <div class="header">
            <h1 class="lead">Confirmación de cuenta</h1>
          </div>
          <div class="body" *ngIf="invalidToken">
            <div class="tokenError">
              <h3>
                {{ errorMessage }}
              </h3>

              <div *ngIf="userActivated">
                <a class="btn btn-primary" [routerLink]="['/login']">
                  Ir a inicio de sesion
                </a>
              </div>
            </div>
          </div>

          <div class="body" *ngIf="successActivation">
            <div class="tokenSuccess">
              <h3>
                {{ activateMessage }}
              </h3>

              <a class="btn btn-primary" [routerLink]="['/login']">
                Ir a inicio de sesion
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>