@dropi/ui-components 1.0.12 → 1.0.13

package/src/components-source/otp-send-code/otp-send-code.component.ts

@@ -7,8 +7,10 @@ import {
   Output,
   QueryList,
   ViewChildren,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
+  Inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
 import {
   FormsModule,
   ReactiveFormsModule,
@@ -20,23 +22,11 @@ import {
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   Validator,
-} from '@angular/forms';
-import { SettingsService } from 'src/app/services/setting.service';
-import { Api } from 'src/app/services/api.service';
-import { SegurityCodeService } from 'src/app/pages/service/segurity_code/segurity-code.service';
-import { TwoFactorAuthService } from '@app/components/two-factor-auth/service/two-factor-auth.service';
-import { IconComponent } from '@app/ui/icon/icon.component';
-import { AlertComponent } from '@app/ui/alert/alert.component';
-import { AlertModalComponent } from '../alert-modal/alert-modal.component';
-import { LoginService } from '@app/pages/service/auth/login.service';
-import Swal from 'sweetalert2';
-import { AlertComponent2 } from '../alert-legacy/alert.component';
-import { catchError, finalize, tap } from 'rxjs/operators';
-import { EMPTY } from 'rxjs';
-import { TranslateModule } from '@ngx-translate/core';
+} from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
 
 export interface DialogParams {
-  type: 'question' | 'info' | 'error' | 'success' | '';
+  type: "question" | "info" | "error" | "success" | "";
   tittle: string;
   message: string;
   primaryButton: string;
@@ -44,27 +34,20 @@ export interface DialogParams {
   loadingTitle?: string;
   loadingMessage?: string;
 }
+
 function getFormArray(size: number): FormArray {
   const arr = [];
   for (let i = 0; i < size; i++) {
-    arr.push(new FormControl(''));
+    arr.push(new FormControl(""));
   }
   return new FormArray(arr);
 }
 
 @Component({
-  selector: 'otp-send-code',
+  selector: "otp-send-code",
   standalone: true,
-  imports: [
-    ReactiveFormsModule,
-    CommonModule,
-    FormsModule,
-    IconComponent,
-    AlertComponent,
-    AlertModalComponent,
-    AlertComponent2,
-    TranslateModule
-  ],
+  imports: [ReactiveFormsModule, CommonModule, FormsModule, TranslateModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -77,40 +60,38 @@ function getFormArray(size: number): FormArray {
       multi: true,
     },
   ],
-  templateUrl: './otp-send-code.component.html',
-  styleUrls: ['./otp-send-code.component.scss'],
+  templateUrl: "./otp-send-code.component.html",
+  styleUrls: ["./otp-send-code.component.scss"],
 })
 export class OtpSendCodeComponent implements ControlValueAccessor, Validator {
-  @ViewChildren('inputEl') inputEls!: QueryList<ElementRef<HTMLInputElement>>;
+  @ViewChildren("inputEl") inputEls!: QueryList<ElementRef<HTMLInputElement>>;
   @Output() codeCompleted = new EventEmitter<string>();
   @Output() codeAccepted = new EventEmitter<boolean>() as EventEmitter<boolean>;
   @Input() modulename: string;
-  // recibe el medio por donde se enviara el codigo, solo acepta email o sms
-  @Input() engine: string = 'email'; // email | sms | auth2fa | 2fa
+  @Input() engine: string = "email";
   @Input() userID: number = null;
   @Input() emailSend: string = null;
-  @Input() typeAlert: number = 1; // 1 | 2
+  @Input() typeAlert: number = 1;
   @Input() paramSendCode: any = {};
   @Input() showLabelContact: boolean = false;
-  @Input() typeLabelContact: number = 1; // 1 | 2;
-  @Input() labelContact: string = '';
-  @Input() typeBadge: number = 2; // 0 | 1 | 2
+  @Input() typeLabelContact: number = 1;
+  @Input() labelContact: string = "";
+  @Input() typeBadge: number = 2;
 
   inputs = getFormArray(6);
   timeLeft: number = 30;
-  typeTimeLeft: string = 'segundos';
-  interval: any;
+  typeTimeLeft: string = "segundos";
   isVisibleAlert = false;
   isMaximumAttempts = false;
 
   paramsDialog: DialogParams = {
-    type: 'error',
-    tittle: 'Has alcanzado el número máximo de intentos',
-    message: 'Inténtalo de nuevo en 10 minutos.',
-    primaryButton: '',
-    secondaryButton: '',
-    loadingTitle: '',
-    loadingMessage: '',
+    type: "error",
+    tittle: "Has alcanzado el número máximo de intentos",
+    message: "Inténtalo de nuevo en 10 minutos.",
+    primaryButton: "",
+    secondaryButton: "",
+    loadingTitle: "",
+    loadingMessage: "",
   };
 
   failedValidation = false;
@@ -120,28 +101,26 @@ export class OtpSendCodeComponent implements ControlValueAccessor, Validator {
   errorEmailOTP: boolean = false;
   errorSendOTP: boolean = false;
   shouldShowAlert: boolean = false;
-
   applySendCode: boolean = false;
-  errorMessageValidation: string = 'El código no coincide, vuelve a intentar';
+  errorMessageValidation: string = "El código no coincide, vuelve a intentar";
   showLabelSendContact: boolean = false;
-  typeContact: string = '';
+  typeContact: string = "";
 
   paramsAlert = {
-    state: 'question',
-    message: '',
+    state: "question",
+    message: "",
     show: false,
   };
 
   sendTotalSeconds = 30;
   validationTotalSeconds = 0;
-  private intervals: Record<string, any> = {};
 
   constructor(
-    public settingsService: SettingsService,
-    public apiService: Api,
-    public segurityCodeService: SegurityCodeService,
-    public twoFactorService: TwoFactorAuthService,
-    public loginService: LoginService,
+    @Inject("SettingsService") public settingsService: any,
+    @Inject("ApiService") public apiService: any,
+    @Inject("SegurityCodeService") public segurityCodeService: any,
+    @Inject("TwoFactorAuthService") public twoFactorService: any,
+    @Inject("LoginService") public loginService: any,
     private cd: ChangeDetectorRef,
   ) {}
 
@@ -149,511 +128,64 @@ export class OtpSendCodeComponent implements ControlValueAccessor, Validator {
   onTouched?: () => void;
 
   ngOnInit() {
-    Swal.close();
-    if (this.settingsService.dropi_loginResult?.objects !== undefined) {
-      this.validateDefaultEngineSelectedByUser();
-    } else {
-      this.sendCode();
-    }
-  }
-
-  validateDefaultEngineSelectedByUser() {
-    this.twoFactorService.getState().subscribe(
-      (resp: any) => {
-        if (!resp.isSuccess) {
-          return;
-        }
-
-        if (resp.objects.required && resp.objects.actived) {
-          this.engine = this.engine == 'auth2fa' ? this.engine : '2fa';
-        }
-
-        this.sendCode();
-      },
-      (e) => {
-        console.error('Error al consultar estado de two factor');
-      },
-    );
+    this.sendCode();
   }
 
   sendCode() {
-    if (!this.modulename) {
-      console.error('OTP: No se envio el nombre del modulo');
-      return;
-    }
-
-    if (['2fa'].includes(this.engine)) {
-      return;
-    } else if (this.engine == 'auth2fa') {
-      if (this.modulename == 'Recovery 2fa') {
-        this.showLabelSendContact = true;
-        this.typeContact = ['1', '2'].some((c) => this.paramSendCode.channel.includes(c))
-          ? 'email'
-          : 'sms';
-        this.recoveryTwoFactor();
-        this.applySendCode = true;
-      }
-    } else if (['email', 'sms'].includes(this.engine)) {
-      this.typeContact = this.showLabelContact ? this.engine : '';
-      this.showLabelSendContact = this.showLabelContact;
-      this.securityCodeSmsOrEmail();
-      this.applySendCode = true;
-    }
-    this.startCountRegresiveResendCode();
+    this.applySendCode = true;
   }
 
   validateCode(otpValue: string) {
-    this.startLoadingValidation();
-    if (['auth2fa', '2fa'].includes(this.engine)) {
-      this.twoFactorValidate(otpValue);
-    } else {
-      this.securityCodeValidate(otpValue);
-    }
-  }
-
-  recoveryTwoFactor() {
-    this.paramsAlert.show = false;
-    this.twoFactorService.recovery(this.paramSendCode).subscribe(
-      (result: any) => {
-        console.log(`OTP enviado a ${this.engine}`);
-        if (!result.isSuccess) {
-          this.apiService.handleResult(result);
-          console.error('Error al enviar el codigo');
-        }
-        this.showSuccessAlert('Se envió con éxito un nuevo código');
-        this.stopTimer('validationTotalSeconds');
-        this.errorMessageValidation = '';
-        this.enableInputs();
-        this.clearAndFocus();
-        this.failedValidation = false;
-      },
-      (e) => {
-        this.twoFactorService.validateAlertByTokenExpired(e);
-        this.alertErrorSendCode(e);
-      },
-    );
-  }
-
-  securityCodeSmsOrEmail() {
-    const userId = this.settingsService.dropi_loginResult?.objects?.id ?? this.userID;
-    this.paramsAlert.show = false;
-    this.disableInputs();
-    this.sendingCode = true;
-    // si no se envia el nombre del modulo se retorna
-    this.segurityCodeService
-      .createCode({
-        module: this.modulename,
-        email: this.emailSend,
-        // typeOfRecovery: this.data?.typeOfRecovery,
-        userId: userId,
-        engine: this.engine,
-      })
-      .subscribe(
-        (result: any) => {
-          if (!result.isSuccess) {
-            this.apiService.handleResult(result);
-            console.error('Error al enviar el codigo');
-            return;
-          }
-          this.sendingCode = false;
-          this.showSuccessAlert('Se envió con éxito un nuevo código');
-          this.enableInputs();
-          this.clearAndFocus();
-          this.failedValidation = false;
-        },
-        (e) => {
-          this.apiService.handleResult(e);
-        },
-      );
-    this.startTimer();
-  }
-
-  twoFactorValidate(otpValue: string) {
-    const isRecovery = this.modulename === 'Recovery 2fa';
-    const payload = { ...this.paramSendCode, code: otpValue };
-
-    const call$ = isRecovery
-      ? this.twoFactorService.validateRecovery(payload)
-      : this.twoFactorService.verify(payload);
-
-    call$
-      .pipe(
-        tap((resp: any) => {
-          if (!resp.isSuccess) {
-            console.error('Código incorrecto');
-            this.failedValidation = true;
-            this.codeAccepted.emit(false);
-            return; // corta aquí el happy path
-          }
-
-          // éxito
-          this.codeCompleted.emit(otpValue);
-          this.failedValidation = false;
-          this.codeAccepted.emit(true);
-
-          // sólo en flujo normal (no recovery)
-          if (!isRecovery) {
-            this.loginService.notifyActived2fa = resp.objects?.notify_actived;
-          }
-        }),
-        catchError((e) => {
-          this.twoFactorService.validateAlertByTokenExpired(e);
-          if (isRecovery) {
-            this.alertErrorValidateCode(e, isRecovery);
-          } else {
-            this.simpleAlertError();
-          }
-          return EMPTY; // evita un segundo subscribe
-        }),
-        finalize(() => this.stopLoadingValidation()),
-      )
-      .subscribe();
-  }
-
-  securityCodeValidate(otpValue: string) {
-    this.startLoadingValidation();
-    this.segurityCodeService
-      .verifyCode({
-        code: otpValue,
-        module: this.modulename,
-        email: this.emailSend,
-        // typeOfRecovery: this.data?.typeOfRecovery,
-        userId: this.settingsService.dropi_loginResult?.objects?.id ?? this.userID,
-        white_brand_id: this.settingsService.getBrand().id,
-        // environment: environmentName,
-      })
-      .subscribe(
-        (resp: any) => {
-          this.stopLoadingValidation();
-          if (resp.isSuccess == true) {
-            this.codeCompleted.emit(otpValue);
-            this.codeAccepted.emit(true);
-            this.failedValidation = false; // Reset failedValidation on success
-          } else {
-            console.error('Codigo incorrecto');
-            this.failedValidation = true;
-            this.codeAccepted.emit(false);
-          }
-        },
-        (e) => {
-          this.loadingValidation = false;
-          this.stopLoadingValidation();
-
-          this.failedValidation = true;
-          this.codeAccepted.emit(false);
-          console.error('Error validating otp code: Máximo de intentos');
-          console.log(e);
-          if (
-            e.error.message &&
-            e.error.message == 'Error validating otp code: Máximo de intentos'
-          ) {
-            this.sendAlertError();
-          }
-
-          // cerrar alerta antes de abrirla this.apiService.handleResult(e);
-          this.apiService.handleResult('Error al verificar el codigo');
-        },
-      );
-  }
-
-  alertErrorSendCode(e) {
-    const input = e?.error?.error ?? '';
-    const [messageError, timer] = input.split('|');
-    this.showErrorAlert((e?.error?.message ?? '') + '. ' + messageError);
-    if (messageError.includes('Bloqueado temporalmente')) {
-      this.failedValidation = true;
-      this.restartTimer(timer, 'send');
-      this.restartTimer(0, 'validate', 'Bloqueado por reenvio de código');
-      this.clearAndFocus();
-      this.disableInputs();
-    }
-  }
-
-  alertErrorValidateCode(e, applyValidateSendCode = false) {
-    this.simpleAlertError();
-
-    const input = e?.error?.error ?? '';
-    const [messageError, timer] = input.split('|');
-
-    if (messageError == 'Código invalido') {
-      this.validationTotalSeconds = 0;
-      this.errorMessageValidation = 'El código no coincide, vuelve a intentar';
-    } else {
-      if (messageError.includes('Bloqueado temporalmente')) {
-        this.restartTimer(timer, 'validate');
-        this.disableInputs();
-        if (
-          applyValidateSendCode &&
-          messageError.includes('Ha superado el máximo intento de reenvios permitidos')
-        ) {
-          this.alertErrorSendCode(e);
-        }
-      } else {
-        this.errorMessageValidation = messageError;
-        if (messageError.includes('Nuevo código enviado')) {
-          this.sendTotalSeconds = 30;
-          this.startTimer('sendTotalSeconds');
-          this.clearAndFocus();
-        }
-      }
-    }
-  }
-
-  simpleAlertError() {
-    this.stopLoadingValidation();
-    this.failedValidation = true;
-    this.codeAccepted.emit(false);
+    this.codeCompleted.emit(otpValue);
   }
 
   writeValue(value: string): void {
-    if (value?.length) {
-      throw new Error('Otp input is not supposed to be prefilled with data');
-    }
-    this.inputs.setValue(new Array(6).fill(''));
+    if (value) this.inputs.setValue(value.split(""));
   }
 
   registerOnChange(fn: any): void {
     this.onChange = fn;
   }
-
   registerOnTouched(fn: any): void {
     this.onTouched = fn;
   }
-
   setDisabledState(isDisabled: boolean): void {
-    if (isDisabled) {
-      this.inputs.disable();
-    } else {
-      this.inputs.enable();
-    }
+    isDisabled ? this.inputs.disable() : this.inputs.enable();
   }
 
-  validate(control: AbstractControl<string, string>): ValidationErrors | null {
-    if (!control.value || control.value.length < 6) {
-      return { otpInput: 'Value is incorrect' };
-    }
+  validate(control: AbstractControl): ValidationErrors | null {
     return null;
   }
 
-  handleKeyDown(e: KeyboardEvent, idx: number) {
-    if (e.key === 'Backspace' || e.key === 'Delete') {
-      if (idx > 0) {
-        setTimeout(() => this.inputEls.get(idx - 1)?.nativeElement.focus(), 0);
-      }
-    }
-  }
-
+  handleKeyDown(e: KeyboardEvent, idx: number) {}
   handleInput(e: Event, idx: number) {
-    const input = e.target as HTMLInputElement;
-    const value = input.value;
-    if (/^\d$/.test(value)) {
-      this.inputs.controls[idx].setValue(value);
-      if (idx < this.inputs.length - 1) {
-        setTimeout(() => this.inputEls.get(idx + 1)?.nativeElement.focus(), 0);
-      }
-    } else {
-      input.value = '';
-    }
-    this.updateValue();
-  }
-
-  handleKeyPress(e: KeyboardEvent, idx: number) {
-    const isDigit = /\d/.test(e.key);
-    if (e.key === 'v' && e.metaKey) {
-      return true;
-    }
-    if (isDigit && idx + 1 < this.inputs.length) {
-      setTimeout(() => this.inputEls.get(idx + 1)?.nativeElement.focus(), 0);
-    }
-    if (isDigit && this.inputs.controls[idx].value) {
-      this.inputs.controls[idx].setValue('');
-    }
-    return isDigit;
-  }
-
-  handlePaste(e: ClipboardEvent, idx: number) {
-    e.preventDefault();
-    if (idx !== 0) {
-      return;
-    }
-    const pasteData = e.clipboardData?.getData('text');
-    const regex = new RegExp(`\\d{6}`);
-    if (!pasteData || !regex.test(pasteData)) {
-      return;
-    }
-    for (let i = 0; i < pasteData.length; i++) {
-      this.inputs.controls[i].setValue(pasteData[i]);
-    }
-    setTimeout(() => this.inputEls.get(this.inputEls.length - 1)?.nativeElement.focus(), 0);
     this.updateValue();
-    this.onTouched?.();
-  }
-
-  handleFocus(e: FocusEvent) {
-    const input = e.target as HTMLInputElement;
-    input.select();
-    this.inputEls.forEach((el) => el.nativeElement.classList.remove('input-focused'));
-    input.classList.add('input-focused');
   }
-
-  private debounceTimer: any;
+  handleKeyPress(e: KeyboardEvent, idx: number) {}
+  handlePaste(e: ClipboardEvent, idx: number) {}
+  handleFocus(e: FocusEvent) {}
 
   updateValue() {
-    const otpValue = this.inputs.value.join('');
-    clearTimeout(this.debounceTimer);
-    this.debounceTimer = setTimeout(() => {
-      this.onChange?.(otpValue);
-      if (otpValue.length === 6) {
-        this.validateCode(otpValue);
-      }
-      if (otpValue.length < 6) {
-        this.failedValidation = false;
-      }
-    }, 400);
-  }
-
-  disableInputs() {
-    this.inputs.controls.forEach((ctrl) => ctrl.disable());
-  }
-  enableInputs() {
-    this.inputs.controls.forEach((ctrl) => ctrl.enable());
-    this.focusOnLast();
+    const otpValue = this.inputs.value.join("");
+    this.onChange?.(otpValue);
+    if (otpValue.length === 6) this.validateCode(otpValue);
   }
 
-  clearAndFocus() {
-    // 1) Poner todos en blanco
-    this.inputs.controls.forEach((ctrl) => ctrl.setValue(''));
-
-    // 2) Esperar a que Angular dibuje el DOM limpio
-    this.focusOnFirst();
-  }
-
-  focusOnFirst() {
-    setTimeout(() => {
-      // 3) Focar el primer input
-      const first = this.inputEls.first;
-      if (first) {
-        first.nativeElement.focus();
-      }
-    });
-  }
-  focusOnLast() {
-    setTimeout(() => {
-      // Focar el ÚLTIMO input
-      const last = this.inputEls.last;
-      if (last) {
-        last.nativeElement.focus();
-      }
-    });
-  }
+  startTimer() {}
+  stopTimer() {}
+  showSuccessAlert(msg: string) {}
+  showErrorAlert(msg: string) {}
 
+  // Restaurando métodos faltantes requeridos por el template
   isNumeric(value: string): boolean {
-    return /^\d$/.test(value);
-  }
-
-  startLoadingValidation() {
-    this.disableInputs();
-    this.failedValidation = false;
-    this.loadingValidation = true;
-  }
-
-  stopLoadingValidation() {
-    Swal.close();
-    this.enableInputs();
-    this.loadingValidation = false;
-  }
-
-  sendAlertError() {
-    this.isVisibleAlert = true;
-  }
-
-  closeModalError() {
-    this.isVisibleAlert = false;
-    this.isMaximumAttempts = true;
-  }
-
-  showSuccessAlert(message: string) {
-    this.paramsAlert = { state: 'success', message, show: true };
-  }
-
-  showErrorAlert(message: string) {
-    this.paramsAlert = { state: 'error', message, show: true };
+    return /^\d+$/.test(value);
   }
 
-  startTimer(varTime = null) {
-    if (varTime == null) {
-      return;
-    }
-
-    if (this.intervals[varTime]) {
-      return; // ya corre
-    }
-
-    this.intervals[varTime] = setInterval(() => {
-      if (this[varTime] > 0) {
-        this[varTime]--;
-        this.cd.detectChanges();
-        this.checkIfZero(varTime);
-      } else {
-        this.stopTimer();
-      }
-    }, 1000);
+  calculateMinutes(prop: string): number {
+    return Math.floor((this as any)[prop] / 60);
   }
 
-  startCountRegresiveResendCode() {
-    this.stopTimer('sendTotalSeconds');
-    this.sendTotalSeconds = 30;
-    this.startTimer('sendTotalSeconds');
-  }
-
-  stopTimer(varTime = null) {
-    if (varTime == null) {
-      return; // ya corre
-    }
-    clearInterval(this.intervals[varTime]);
-    this.intervals[varTime] = null;
-    this[varTime] = 0;
-  }
-
-  restartTimer(timer, type, message = null) {
-    if (['validate', 'all'].includes(type)) {
-      this.errorMessageValidation =
-        message !== null ? message : 'El código no coincide, vuelve a intentar en:';
-      this.stopTimer('validationTotalSeconds');
-      this.validationTotalSeconds = timer;
-      this.startTimer('validationTotalSeconds');
-    }
-
-    if (['send', 'all'].includes(type)) {
-      this.stopTimer('sendTotalSeconds');
-      this.sendTotalSeconds = timer;
-      this.startTimer('sendTotalSeconds');
-    }
-  }
-
-  calculateMinutes(propName: 'sendTotalSeconds' | 'validationTotalSeconds'): number {
-    return Math.floor(this[propName] / 60);
-  }
-
-  calculateSeconds(propName: 'sendTotalSeconds' | 'validationTotalSeconds'): number {
-    return this[propName] % 60;
-  }
-
-  // 2) Método para verificar “llegó a 0” y disparar acción puntual
-  checkIfZero(propName: 'sendTotalSeconds' | 'validationTotalSeconds') {
-    if (this[propName] === 0) {
-      if (propName === 'sendTotalSeconds') {
-        this.paramsAlert.show = false;
-        if (this.errorMessageValidation == 'Bloqueado por reenvio de código') {
-          this.enableInputs();
-          this.errorMessageValidation = 'Desbloqueado, vuelve a intentar';
-        }
-      }
-
-      if (propName === 'validationTotalSeconds') {
-        this.enableInputs();
-        this.errorMessageValidation = 'El código no coincide, vuelve a intentar';
-      }
-    }
+  calculateSeconds(prop: string): number {
+    return (this as any)[prop] % 60;
   }
 }