otp-component-wu/otp/otp.component.ts

How to build libraries with Angular (2, 4, 5...)

import { Component, OnInit, Input } from "@angular/core";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { OtpServicesService } from "../services/otp-services.service";
import { EventsJqueryFunction } from "./events-jquery";
import "rxjs/add/operator/finally";

@Component({
  selector: "app-otp",
  templateUrl: "./otp.component.html",
  styleUrls: ["./otp.component.scss"],
})
export class OtpComponent implements OnInit {
  @Input() param;
  @Input() returnProccess: Function;
  private buttonNoRedirect: boolean;
  public formOtp: FormGroup;
  public validateForm: boolean;
  public sendCode: boolean;
  public codeGenerated: boolean;
  public codeExpirated: boolean;
  public validateVigencia: boolean;
  public otpAttempts: number;
  public otpMaxAttempts: number = Number(
    '[Element key="intentosMaximos" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]'
  );
  public labelButtonSendCode: string = "Continúa";
  public labelButtonCancelCode: string = "Atrás";
  public labelOtpExpirated: string =
    "Tu código anterior expiró. Por favor solicítalo nuevamente; recuerda que la vigencia de cada código es de 5 minutos.";
  public messageInformate: string = `Digita el número de confirmación enviado a tu número de celular y/o direccción de correo electronico, da clic en el botón ${this.labelButtonSendCode}.`;
  public title: string = "";
  public message: string = "";
  public description: string = "";

  constructor(
    private fb: FormBuilder,
    private service: OtpServicesService,
    private eventsJQ: EventsJqueryFunction
  ) {}

  validatorsForm() {
    this.formOtp = this.fb.group({
      code: ["", Validators.required],
    });
  }

  ngOnInit() {
    this.sendCode = false;
    this.codeGenerated = false;
    this.codeExpirated = false;
    this.validateVigencia = true;
    this.buttonNoRedirect = true;
    this.otpAttempts = 0;
    this.validatorsForm();
    this.service.setUrl(this.param["url"]);
    this.service.setUrlValidar(this.param["urlValidate"]);
    this.service.sessionID = this.param["sessionID"];
    this.service.setValidateToken(this.param["token"] == null);
    this.service.setToken(this.param["token"]);
    this.setCode();
  }

  reload() {
    this.eventsJQ.closeModal();
    if (this.buttonNoRedirect || this.otpAttempts >= this.otpMaxAttempts) {
      window.location.assign(this.param["urlBotonCancelar"]);
    }
  }

  goBackButton() {
   this.returnProccess();
  }

  setCode() {
    this.eventsJQ.openLoader();
    this.service
      .generateOtpPublic(
        this.param["numeroDocumento"],
        this.param["tipoDocumento"]
      )
      .finally(() => {
        this.title = this.title
          .replace(/'/g, "'")
          .replace(/&lt;/g, "<")
          .replace(/&gt;/g, ">")
          .replace(/&iexcl;/g, "¡")
          .replace(/&excl;/g, "!");
        this.message = this.message
          .replace(/&#39;/g, "'")
          .replace(/&lt;/g, "<")
          .replace(/&gt;/g, ">")
          .replace(/&iexcl;/g, "¡")
          .replace(/&excl;/g, "!");
      })
      .subscribe(
        (response) => {
          let result = JSON.parse(
            this.service.getConvert(
              response["datos"],
              this.param["token"],
              false
            )
          );
          this.buttonNoRedirect = true;

          if (result != undefined && result["codigoRespuesta"] == "200") {
            this.codeExpirated = false;
            this.sendCode = true;
            this.codeGenerated = true;
            this.eventsJQ.closeLoader();

            if (result["codigoOtpVigente"]) {
              this.title = this.param["nombreUsuario"] + ",";
              this.message =
                '[Element key="MensajeOTPVigente" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
              let descriptionOtpVigente1: string =
                '[Element key="DescripcionOTPVigente1" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
              let descriptionOtpVigente2: string =
                '[Element key="DescripcionOTPVigente2" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
              this.description =
                descriptionOtpVigente1 + "<br>" + descriptionOtpVigente2;
              this.validateVigencia = false;
              this.buttonNoRedirect = false;
              this.codeExpirated = false;
              this.eventsJQ.openModal();
            } else if (result["usuarioBloqueado"]) {
              this.title = this.param["nombreUsuario"] + ",";
              this.message =
                '[Element key="MensajeOTPbloqueado" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
              this.description =
                '[Element key="DescripcionOTPbloqueado" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
              this.buttonNoRedirect = true;
              this.eventsJQ.openModal();
            }
          } else if (
            result["usuarioBloqueado"] &&
            result["usuarioBloqueado"] != null
          ) {
            this.title = this.param["nombreUsuario"] + ",";
            this.message =
              '[Element key="MensajeOTPbloqueado" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
            this.description =
              '[Element key="DescripcionOTPbloqueado" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
            this.buttonNoRedirect = true;
            this.eventsJQ.openModal();
          } else {
            this.title = this.param["nombreUsuario"] + ",";
            this.message =
              '[Element key="MensajeOTPError" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
            this.description =
              '[Element key="DescripcionOTPError" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
            this.eventsJQ.openModal();
          }
        },
        (error) => {
          this.title = this.param["nombreUsuario"] + ",";
          this.message =
            '[Element key="MensajeOTPError" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
          this.description =
            '[Element key="DescripcionOTPError" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
          this.eventsJQ.openModal();
        }
      );
  }

  onSubmit() {
    this.validateForm = !this.formOtp.valid;
    if (this.formOtp.valid) {
      this.eventsJQ.openLoader();
      this.service
        .validateOtpPublic(this.formOtp.value["code"])
        .finally(() => {
          this.title = this.title
            .replace(/&#39;/g, "'")
            .replace(/&lt;/g, "<")
            .replace(/&gt;/g, ">");
          this.message = this.message
            .replace(/&#39;/g, "'")
            .replace(/&lt;/g, "<")
            .replace(/&gt;/g, ">");
        })
        .subscribe(
          (response) => {
            let result = JSON.parse(
              this.service.getConvert(
                response["datos"],
                this.param["token"],
                false
              )
            );
            this.eventsJQ.closeLoader();
            this.buttonNoRedirect = true;

            if (result != undefined && result["codigoRespuesta"] == "200") {
              if (!result["validacionExitosa"]) {
                if (result["codigoExpirado"]) {
                  this.title = this.param["nombreUsuario"] + ",";
                  this.message =
                    '[Element key="MensajeOTPExpirado" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
                  this.description =
                    '[Element key="DescripcionOTPExpirado" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
                  this.buttonNoRedirect = false;
                  this.codeGenerated = false;
                  this.codeExpirated = true;
                  this.eventsJQ.openModal();
                } else if (result["clienteBloqueado"]) {
                  this.title = this.param["nombreUsuario"] + ",";
                  this.message =
                    '[Element key="MensajeOTPbloqueado" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
                  this.description =
                    '[Element key="DescripcionOTPbloqueado" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
                  this.eventsJQ.openModal();
                } else {
                  this.otpAttempts = this.otpAttempts + 1;
                  this.title = this.param["nombreUsuario"] + ",";
                  this.message =
                    '[Element key="MensajeOTPFallido" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
                  this.description =
                    '[Element key="DescripcionOTPFallido" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
                  this.buttonNoRedirect = false;
                  this.eventsJQ.openModal();
                }
              } else {
                this.service.setToken(result["token"]);
                this.service.setResponse(true);
              }
            } else {
              this.title = this.param["nombreUsuario"] + ",";
              this.message =
                '[Element key="MensajeOTPError" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
              this.description =
                '[Element key="DescripcionOTPError" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
              this.eventsJQ.openModal();
            }
          },
          (error) => {
            this.title = this.param["nombreUsuario"] + ",";
            this.message =
              '[Element key="MensajeOTPError" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
            this.description =
              '[Element key="DescripcionOTPError" type="content" context="selected" name="/Contenido/asTransversales/contMensajesOTP"]';
            this.eventsJQ.openModal();
          }
        );
    }
    this.formOtp.get("code").patchValue("");
  }
}