@dropi/ui-components 1.0.0

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

@@ -0,0 +1,659 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+  ViewChildren,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  FormArray,
+  FormControl,
+  AbstractControl,
+  ValidationErrors,
+  ControlValueAccessor,
+  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';
+
+export interface DialogParams {
+  type: 'question' | 'info' | 'error' | 'success' | '';
+  tittle: string;
+  message: string;
+  primaryButton: string;
+  secondaryButton?: string;
+  loadingTitle?: string;
+  loadingMessage?: string;
+}
+function getFormArray(size: number): FormArray {
+  const arr = [];
+  for (let i = 0; i < size; i++) {
+    arr.push(new FormControl(''));
+  }
+  return new FormArray(arr);
+}
+
+@Component({
+  selector: 'otp-send-code',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    CommonModule,
+    FormsModule,
+    IconComponent,
+    AlertComponent,
+    AlertModalComponent,
+    AlertComponent2,
+    TranslateModule
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: OtpSendCodeComponent,
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: OtpSendCodeComponent,
+      multi: true,
+    },
+  ],
+  templateUrl: './otp-send-code.component.html',
+  styleUrls: ['./otp-send-code.component.scss'],
+})
+export class OtpSendCodeComponent implements ControlValueAccessor, Validator {
+  @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() userID: number = null;
+  @Input() emailSend: string = null;
+  @Input() typeAlert: number = 1; // 1 | 2
+  @Input() paramSendCode: any = {};
+  @Input() showLabelContact: boolean = false;
+  @Input() typeLabelContact: number = 1; // 1 | 2;
+  @Input() labelContact: string = '';
+  @Input() typeBadge: number = 2; // 0 | 1 | 2
+
+  inputs = getFormArray(6);
+  timeLeft: number = 30;
+  typeTimeLeft: string = 'segundos';
+  interval: any;
+  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: '',
+  };
+
+  failedValidation = false;
+  loadingValidation = false;
+  sendingCode = false;
+  emailOTP: string = null;
+  errorEmailOTP: boolean = false;
+  errorSendOTP: boolean = false;
+  shouldShowAlert: boolean = false;
+
+  applySendCode: boolean = false;
+  errorMessageValidation: string = 'El código no coincide, vuelve a intentar';
+  showLabelSendContact: boolean = false;
+  typeContact: string = '';
+
+  paramsAlert = {
+    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,
+    private cd: ChangeDetectorRef,
+  ) {}
+
+  onChange?: (value: string) => void;
+  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');
+      },
+    );
+  }
+
+  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();
+  }
+
+  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);
+  }
+
+  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(''));
+  }
+
+  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();
+    }
+  }
+
+  validate(control: AbstractControl<string, string>): ValidationErrors | null {
+    if (!control.value || control.value.length < 6) {
+      return { otpInput: 'Value is incorrect' };
+    }
+    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);
+      }
+    }
+  }
+
+  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;
+
+  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();
+  }
+
+  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();
+      }
+    });
+  }
+
+  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 };
+  }
+
+  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);
+  }
+
+  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';
+      }
+    }
+  }
+}