cbsnexora/src/app/login/two-factor-authentication/two-factor-authentication.component.html

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<div class="tfa-card">
  <div class="tfa-icon">
    <fa-icon icon="shield-alt"></fa-icon>
  </div>

  <h2 class="tfa-title">{{ 'labels.text.Two Factor Authentication' | translate }}</h2>
  <p class="tfa-sub">
    @if (!otpRequested) {
      Choose how you want to receive your one-time passcode.
    } @else {
      Enter the 6-digit code we sent you to continue.
    }
  </p>

  <!-- Step 1 — Pick a delivery method -->
  @if (!otpRequested) {
    <form class="tfa-form" [formGroup]="twoFactorAuthenticationDeliveryMethodForm" (ngSubmit)="requestOTP()">
      <div class="tfa-methods" formGroupName="">
        <mat-radio-group class="tfa-methods__group" formControlName="twoFactorAuthenticationDeliveryMethod">
          @for (method of twoFactorAuthenticationDeliveryMethods; track method.name) {
            <div
              class="tfa-method"
              role="radio"
              tabindex="0"
              [attr.aria-checked]="
                twoFactorAuthenticationDeliveryMethodForm.value.twoFactorAuthenticationDeliveryMethod === method
              "
              [class.is-selected]="
                twoFactorAuthenticationDeliveryMethodForm.value.twoFactorAuthenticationDeliveryMethod === method
              "
              (click)="selectDeliveryMethod(method)"
              (keydown.enter)="selectDeliveryMethod(method)"
              (keydown.space)="selectDeliveryMethod(method); $event.preventDefault()"
            >
              <mat-radio-button
                [value]="method"
                class="tfa-method__radio"
                (click)="$event.stopPropagation()"
              ></mat-radio-button>
              <div class="tfa-method__icon">
                <fa-icon
                  [icon]="
                    (method.name | lowercase) === 'sms' || (method.name | lowercase) === 'mobile'
                      ? 'mobile-alt'
                      : 'envelope'
                  "
                ></fa-icon>
              </div>
              <div class="tfa-method__body">
                <span class="tfa-method__name">{{ method.name | titlecase }}</span>
                <span class="tfa-method__target">{{ maskTarget(method) }}</span>
              </div>
            </div>
          }
        </mat-radio-group>
      </div>

      <button
        type="submit"
        class="tfa-btn tfa-btn--primary"
        [disabled]="!twoFactorAuthenticationDeliveryMethodForm.valid || loading"
      >
        @if (loading) {
          <mat-spinner diameter="20"></mat-spinner>
          <span>Sending…</span>
        } @else {
          <fa-icon icon="paper-plane"></fa-icon>
          <span>{{ 'labels.buttons.Request OTP' | translate }}</span>
        }
      </button>
    </form>
  }

  <!-- Step 2 — Enter the code -->
  @if (otpRequested) {
    <div class="tfa-context">
      <fa-icon
        [icon]="
          (selectedTwoFactorAuthenticationDeliveryMethod.name | lowercase) === 'sms' ||
          (selectedTwoFactorAuthenticationDeliveryMethod.name | lowercase) === 'mobile'
            ? 'mobile-alt'
            : 'envelope'
        "
      ></fa-icon>
      <div>
        <span class="tfa-context__label">Code sent to</span>
        <strong class="tfa-context__target">{{ maskTarget(selectedTwoFactorAuthenticationDeliveryMethod) }}</strong>
      </div>
      <span class="tfa-context__validity">
        <fa-icon icon="clock"></fa-icon>
        {{ tokenValidityTime / 60 }} {{ 'labels.inputs.mins' | translate }}
      </span>
    </div>

    <form class="tfa-form" [formGroup]="twoFactorAuthenticationForm" (ngSubmit)="validateOTP()">
      <div class="tfa-otp">
        <input
          type="text"
          inputmode="numeric"
          autocomplete="one-time-code"
          maxlength="6"
          class="tfa-otp__input"
          formControlName="otp"
          placeholder="• • • • • •"
          (keypress)="$event.charCode >= 48 && $event.charCode <= 57 ? true : $event.preventDefault()"
        />
      </div>

      @if (
        twoFactorAuthenticationForm.controls.otp.hasError('required') &&
        twoFactorAuthenticationForm.controls.otp.touched
      ) {
        <div class="tfa-error">
          <fa-icon icon="exclamation-circle"></fa-icon>
          {{ 'labels.inputs.OTP' | translate }} {{ 'labels.commons.is' | translate }}
          <strong>{{ 'labels.commons.required' | translate }}</strong>
        </div>
      }

      <button type="submit" class="tfa-btn tfa-btn--primary" [disabled]="!twoFactorAuthenticationForm.valid || loading">
        @if (loading) {
          <mat-spinner diameter="20"></mat-spinner>
          <span>Verifying…</span>
        } @else {
          <fa-icon icon="check-circle"></fa-icon>
          <span>{{ 'labels.buttons.Validate OTP' | translate }}</span>
        }
      </button>

      <button
        type="button"
        class="tfa-btn tfa-btn--ghost"
        (click)="resendOTP()"
        [disabled]="loading || resendOTPLoading"
      >
        @if (resendOTPLoading) {
          <mat-spinner diameter="18"></mat-spinner>
          <span>Resending…</span>
        } @else {
          <fa-icon icon="redo"></fa-icon>
          <span>{{ 'labels.buttons.Resend OTP' | translate }}</span>
        }
      </button>
    </form>
  }
</div>