@dropi/ui-components 1.0.0

package/src/components-source/otp-send-code/mock-otp-services.ts

@@ -0,0 +1,214 @@
+// src/app/mocks/mock-otp-services.ts
+import { Injectable } from '@angular/core';
+import { action } from '@storybook/addon-actions';
+import { Observable, of, throwError, BehaviorSubject } from 'rxjs';
+import { delay } from 'rxjs/operators';
+
+// --- MockSettingsService ---
+@Injectable()
+export class MockSettingsService {
+  public dropi_loginResult = {
+    objects: {
+      id: 'mock-user-id-123',
+    },
+  };
+
+  constructor() {
+    action('MockSettingsService')('constructor called');
+    action('MockSettingsService.dropi_loginResult')(this.dropi_loginResult);
+  }
+
+  getBrand(): { id: string; name?: string } {
+    const brand = { id: 'mock-brand-id-789', name: 'Mock Brand' };
+    action('MockSettingsService.getBrand')(brand);
+    return brand;
+  }
+}
+
+// --- MockApiService ---
+@Injectable()
+export class MockApiService {
+  constructor() {
+    action('MockApiService')('constructor called');
+  }
+
+  handleResult(result: any, defaultMessage?: string): void {
+    action('MockApiService.handleResult')(result, defaultMessage);
+    console.warn('[MockApiService.handleResult]', { result, defaultMessage });
+  }
+}
+
+// --- MockSegurityCodeService ---
+export interface CreateCodePayload {
+  module: string;
+  userId: string;
+  engine: string;
+}
+
+export interface VerifyCodePayload {
+  code: string;
+  module: string;
+  userId: string;
+  white_brand_id: string;
+}
+
+export interface SegurityCodeResponse {
+  isSuccess: boolean;
+  message?: string;
+  data?: any;
+  error?: any;
+}
+
+@Injectable()
+export class MockSegurityCodeService {
+  constructor() {
+    action('MockSegurityCodeService')('constructor called');
+  }
+
+  createCode(payload: CreateCodePayload): Observable<SegurityCodeResponse> {
+    action('MockSegurityCodeService.createCode')(payload);
+    return of<SegurityCodeResponse>({
+      isSuccess: true,
+      message: `Mock: Código creado y enviado para ${payload.module} via ${payload.engine}.`,
+    }).pipe(delay(500));
+  }
+
+  verifyCode(payload: VerifyCodePayload): Observable<SegurityCodeResponse> {
+    action('MockSegurityCodeService.verifyCode')(payload);
+
+    if (payload.code === '000000') {
+      return of<SegurityCodeResponse>({
+        isSuccess: false,
+        message: 'Mock: El código ingresado es incorrecto.',
+      }).pipe(delay(500));
+    }
+    if (payload.code === '999999') {
+      action('MockSegurityCodeService.verifyCode -> MAX_ATTEMPTS_ERROR')(payload);
+      return throwError(() => ({
+        error: {
+          message: 'Error validating otp code: Máximo de intentos',
+        },
+      })).pipe(delay(500));
+    }
+    return of<SegurityCodeResponse>({
+      isSuccess: true,
+      message: 'Mock: Código verificado exitosamente.',
+    }).pipe(delay(500));
+  }
+}
+
+// --- MockTwoFactorAuthService ---
+export interface TwoFactorResponse {
+  isSuccess: boolean;
+  message?: string;
+  objects?: {
+    notify_actived?: boolean;
+    [key: string]: any;
+  };
+}
+
+@Injectable()
+export class MockTwoFactorAuthService {
+  constructor() {
+    action('MockTwoFactorAuthService')('constructor called');
+  }
+
+  recovery2FA(params: any): Observable<TwoFactorResponse> {
+    action('MockTwoFactorAuthService.recovery2FA')(params);
+    if (params.channel === 'error_case_message_timer') {
+      return throwError(() => ({
+        error: {
+          error: 'Bloqueado temporalmente por recuperación|600',
+          message: 'Error general de la API de recuperación',
+        },
+      })).pipe(delay(500));
+    }
+    return of<TwoFactorResponse>({
+      isSuccess: true,
+      message: 'Mock: Recuperación de 2FA iniciada.',
+    }).pipe(delay(500));
+  }
+
+  validateRecovery2FA(params: any): Observable<TwoFactorResponse> {
+    action('MockTwoFactorAuthService.validateRecovery2FA')(params);
+    if (params.code === '000000') {
+      return throwError(() => ({
+        error: {
+          error: 'Código invalido|30',
+          message: 'El código de recuperación es incorrecto.',
+        },
+      })).pipe(delay(500));
+    }
+    if (params.code === '111111') {
+      return throwError(() => ({
+        error: {
+          error: 'Bloqueado temporalmente|60',
+          message: 'Cuenta bloqueada para recuperación.',
+        },
+      })).pipe(delay(500));
+    }
+    return of<TwoFactorResponse>({
+      isSuccess: true,
+      message: 'Mock: Recuperación de 2FA validada.',
+    }).pipe(delay(500));
+  }
+
+  verifyAuth2FA(params: any): Observable<TwoFactorResponse> {
+    action('MockTwoFactorAuthService.verifyAuth2FA')(params);
+    if (params.code === '123456') {
+      return of<TwoFactorResponse>({
+        isSuccess: true,
+        message: 'Mock: Autenticación 2FA verificada.',
+        objects: { notify_actived: true },
+      }).pipe(delay(500));
+    }
+    if (params.code === '654321') {
+      // Otro código correcto pero que NO activa notify_actived
+      return of<TwoFactorResponse>({
+        isSuccess: true,
+        message: 'Mock: Autenticación 2FA verificada (sin notify).',
+        objects: { notify_actived: false },
+      }).pipe(delay(500));
+    }
+    return of<TwoFactorResponse>({
+      isSuccess: false,
+      message: 'Mock: Código 2FA incorrecto para verifyAuth2FA.',
+      objects: { notify_actived: false },
+    }).pipe(delay(500));
+  }
+
+  verify2FA(otpValue: string): Observable<TwoFactorResponse> {
+    action('MockTwoFactorAuthService.verify2FA')(otpValue);
+    if (otpValue === '123123') {
+      // Usado en la primera versión de mocks, mantengamos uno
+      return of<TwoFactorResponse>({
+        isSuccess: true,
+        message: 'Mock: Verificación 2FA genérica exitosa.',
+      }).pipe(delay(500));
+    }
+    return of<TwoFactorResponse>({
+      isSuccess: false,
+      message: 'Mock: Código 2FA genérico incorrecto.',
+    }).pipe(delay(500));
+  }
+}
+
+// --- MockLoginService ---
+@Injectable()
+export class MockLoginService {
+  private _notifyActived2fa: boolean = false;
+
+  get notifyActived2fa(): boolean {
+    action('MockLoginService.notifyActived2fa GET')(this._notifyActived2fa);
+    return this._notifyActived2fa;
+  }
+
+  set notifyActived2fa(value: boolean) {
+    action('MockLoginService.notifyActived2fa SET')(value);
+    this._notifyActived2fa = value;
+  }
+
+  constructor() {
+    action('MockLoginService')('constructor called');
+  }
+}

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

@@ -0,0 +1,151 @@
+<div class="mb-4 custom-alert" *ngIf="typeBadge == 1">
+  <app-alert
+    [message]="'prueba'"
+    [type]="'default'"
+    [state]="paramsAlert.state"
+    [dismissable]="true"
+    [showButton]="false"
+    [buttonText]="'Cerrar'"
+    [showAlert]="paramsAlert.show"
+  ></app-alert>
+</div>
+
+<div class="mb-4" *ngIf="typeBadge == 2">
+  <dropi-alert-legacy
+    [visible]="paramsAlert.show"
+    [type]="paramsAlert.state"
+    [message]="paramsAlert.message"
+    [autoClose]="true"
+  ></dropi-alert-legacy>
+</div>
+
+<div
+  class="body-modal"
+  *ngIf="
+    (engine === 'email' || engine === 'sms') &&
+    showLabelSendContact &&
+    typeLabelContact == 1 &&
+    paramsAlert.show &&
+    paramsAlert.state == 'success'
+  "
+>
+  <div class="options">
+    <h6>
+      {{ (engine === 'email' ? 'Email Validation' : 'SMS Validation') | translate }}
+    </h6>
+    <div class="text-top">
+      <p>
+        {{
+          (engine === 'email'
+            ? 'Enter the code that was sent to your email'
+            : 'Enter the code that was sent to your phone number'
+          ) | translate
+        }}
+        {{ labelContact }}
+      </p>
+    </div>
+  </div>
+</div>
+
+<div *ngIf="engine === '2fa'">
+  <h5>
+    {{ 'Two factor authentication' | translate }}
+  </h5>
+
+  <label class="Body-M-Regular"
+    >Ingresa los seis dígitos que genera tu app de autenticación de dos<br />
+    factores para continuar.</label
+  >
+</div>
+
+<div
+  *ngIf="
+    showLabelSendContact &&
+    typeLabelContact == 2 &&
+    paramsAlert.show &&
+    paramsAlert.state == 'success'
+  "
+  class="mt-4 mb-4 text-left"
+>
+  <label
+    >{{
+      'we sent you a code' | translate: { typeContact: typeContact, labelContact: labelContact }
+    }}
+  </label>
+  <label>{{ 'write it here to continue' | translate }}</label>
+</div>
+
+<div class="Body-S-Regular text-center">{{ 'enter the code' | translate }}</div>
+
+<div class="container-otp mt-2" [ngClass]="{ error: failedValidation }">
+  <input
+    class="otp-input"
+    #inputEl
+    *ngFor="let input of inputs.controls; let i = index"
+    (focus)="handleFocus($event)"
+    (blur)="onTouched?.()"
+    (keypress)="handleKeyPress($event, i)"
+    (input)="handleInput($event, i)"
+    (keydown)="handleKeyDown($event, i)"
+    (paste)="handlePaste($event, i)"
+    [formControl]="$any(input)"
+    [attr.autocomplete]="i === 0 ? 'one-time-code' : null"
+    type="text"
+    inputmode="numeric"
+    [ngClass]="{ success: input.value && isNumeric(input.value) }"
+  />
+</div>
+
+<div class="container-failed" *ngIf="failedValidation">
+  <app-icon name="Cross-circle" width="18px" height="19px" color="Error-Error-500"></app-icon>
+  <span class="Body-S-Regular error pt-1">
+    <span>{{ errorMessageValidation }}</span>
+    <span *ngIf="this.validationTotalSeconds !== 0" class="timer">
+      {{ calculateMinutes('validationTotalSeconds') }} :
+      {{ calculateSeconds('validationTotalSeconds') | number: '2.0' }}</span
+    >
+  </span>
+</div>
+
+<div class="container-failed" *ngIf="loadingValidation">
+  <app-icon name="Info" width="18px" height="19px"></app-icon>
+  <span class="Body-S-Regular pt-1">
+    <span>{{ 'validating code' | translate }} </span>
+  </span>
+</div>
+
+<div class="container-failed" *ngIf="sendingCode">
+  <app-icon name="Info" width="18px" height="19px"></app-icon>
+  <span class="Body-S-Regular pt-1">
+    <span>Enviando código...</span>
+  </span>
+</div>
+
+<div *ngIf="applySendCode && !errorSendOTP && !isMaximumAttempts">
+  <div class="crono">
+    <p>
+      <!-- Podrás solicitar otro código en: <span class="timer"> {{ timeLeft }}</span> {{ typeTimeLeft }} -->
+      {{ 'you will be able to request another code in' | translate }}
+      <span class="timer">
+        {{ calculateMinutes('sendTotalSeconds') }} :
+        {{ calculateSeconds('sendTotalSeconds') | number: '2.0' }}</span
+      >
+    </p>
+    <!-- <p *ngIf="timeLeft === 0"> -->
+    <p *ngIf="sendTotalSeconds === 0">
+      {{ "didn't you receive the code?" | translate }}
+      <!-- <span class="resend c-link" (click)="restartTimer()">Volver a enviar</span> -->
+      <span class="resend c-link" (click)="sendCode()">{{ 'resend' | translate }} </span>
+    </p>
+  </div>
+</div>
+
+<!-- <div class="contaienr-alert">
+  <app-alert-modal
+    class="alert-son"
+    [visible]="isVisibleAlert"
+    [params]="paramsDialog"
+    [loading]="false"
+    (primaryButtonEvent)="closeModalError()"
+  ></app-alert-modal>
+</div> -->

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

@@ -0,0 +1,156 @@
+.container-failed {
+  display: flex;
+  width: 100%;
+  justify-content: left;
+  gap: 8px;
+  padding-left: 3.5em;
+  margin-top: 0.5em;
+}
+
+.container-otp {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  gap: 16px;
+
+  input {
+    background: #ffffff;
+    border-radius: var(--Size-2, 8px);
+    border: 1px solid var(--Gray-gray-200, #d3d7de);
+    display: flex;
+    width: 50px;
+    height: 54px;
+    padding: 12px 0px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    color: #495057;
+    font-size: 22px;
+    text-align: center;
+    &.success {
+      border: 1px solid var(--Success-success-500, #0abb87) !important;
+    }
+  }
+
+  .input-focused {
+    border: 2px solid orange;
+  }
+
+  &.error input {
+    border: 1px solid var(--Danger-danger-500, #ff5b5b) !important;
+  }
+}
+p {
+  color: var(--Gray-gray-700, #7b8190);
+  text-align: center;
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+}
+
+.crono {
+  margin: 50px 0;
+  p {
+    margin: 0;
+    padding: 2px;
+    span.timer {
+      color: #f49a3d;
+      font-weight: 600;
+    }
+    span.resend {
+      cursor: pointer;
+    }
+  }
+}
+
+.a {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  align-self: stretch;
+}
+
+.b {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+}
+
+.error {
+  color: var(--Gray-600, #f46a6b);
+}
+
+.error-code {
+  color: var(--Error-Error-500);
+}
+
+.otp-parent-container {
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: auto;
+}
+
+:host ::ng-deep .p-dialog-content {
+  padding: 0 !important; // o lo que necesites
+}
+
+.resend.c-link {
+  color: var(--Info-Info-500);
+  cursor: pointer;
+}
+
+.options {
+  ::ng-deep .description {
+    margin-top: 10px;
+    .item-table {
+      padding-right: 0;
+      padding-left: var(--Size-6);
+    }
+  }
+}
+
+.body-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 20px;
+  h6 {
+    color: var(--Gray-gray-900, #495057);
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+  }
+
+  .text-top {
+    margin-bottom: 12px;
+
+    p {
+      color: var(--Gray-gray-900, #495057);
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      line-height: 20px;
+      margin: 0;
+      padding: 0 0 4px 0;
+      text-align: left;
+    }
+    .bold {
+      font-weight: 700;
+    }
+  }
+  .alias {
+    .p-inputtext {
+      width: 100%;
+    }
+  }
+}