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 (dscChallengeActive) {
      Plug in your DSC token and follow the prompts in the helper.
    } @else if (!otpRequested) {
      Choose how you want to verify your identity.
    } @else {
      Enter the 6-digit code we sent you to continue.
    }
  </p>

  <!-- Step 1 — Pick a delivery method -->
  @if (!otpRequested && !dscChallengeActive) {
    <form
      class="tfa-form"
      [formGroup]="twoFactorAuthenticationDeliveryMethodForm"
      (ngSubmit)="continueWithSelectedFactor()"
    >
      <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]="iconFor(method)"></fa-icon>
              </div>
              <div class="tfa-method__body">
                <span class="tfa-method__name">{{ method.name | titlecase }}</span>
                <span class="tfa-method__target">
                  @if (method.kind === 'DSC') {
                    {{ method.target }}
                  } @else {
                    {{ 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>Continue</span>
        }
      </button>
    </form>
  }

  <!-- DSC challenge sub-screen — replaces the OTP input when DSC was picked. -->
  @if (dscChallengeActive) {
    <div class="tfa-context tfa-context--dsc">
      <fa-icon icon="file-signature"></fa-icon>
      <div>
        <span class="tfa-context__label">Signing as</span>
        <strong class="tfa-context__target">{{ selectedTwoFactorAuthenticationDeliveryMethod?.target }}</strong>
      </div>
      @if (dscCountdownLabel) {
        <span class="tfa-context__validity">
          <fa-icon icon="clock"></fa-icon>
          {{ dscCountdownLabel }} remaining
        </span>
      }
    </div>

    <div class="tfa-dsc-hint">
      <fa-icon icon="info-circle"></fa-icon>
      <span>
        A verification helper has been downloaded. If your browser didn't open it, click
        <strong>Re-download helper</strong>. Need OpenWebStart?
        <a href="https://openwebstart.com/" target="_blank" rel="noopener">Install it</a>.
      </span>
    </div>

    @if (dscDetecting) {
      <div class="tfa-dsc-spinner">
        <mat-spinner diameter="36"></mat-spinner>
        <span>Waiting for DSC verification…</span>
      </div>
    }

    @if (dscFailed) {
      <div class="tfa-error">
        <fa-icon icon="exclamation-circle"></fa-icon>
        {{ dscErrorMessage }}
      </div>
    }

    <button type="button" class="tfa-btn tfa-btn--ghost" (click)="reDownloadDscHelper()" [disabled]="loading">
      <fa-icon icon="sync-alt"></fa-icon>
      <span>Re-download helper</span>
    </button>

    <button type="button" class="tfa-btn tfa-btn--ghost" (click)="useAnotherMethod()" [disabled]="loading">
      <fa-icon icon="arrow-left"></fa-icon>
      <span>Use another method</span>
    </button>
  }

  <!-- Step 2 — Enter the code -->
  @if (otpRequested && !dscChallengeActive) {
    <div class="tfa-context">
      <fa-icon [icon]="iconFor(selectedTwoFactorAuthenticationDeliveryMethod)"></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>