bitwarden-estensione-browser/apps/desktop/src/auth/two-factor.component.html

<div class="page-top-padding">
  <form
    #form
    (ngSubmit)="submit()"
    [appApiAction]="formPromise"
    class="container"
    autocomplete="off"
    id="two-factor-page"
    attr.aria-hidden="{{ showingModal }}"
  >
    <div id="content" class="content tw-mt-5">
      <img class="logo-image" alt="Bitwarden" />
      <p class="lead text-center mb-4">{{ title }}</p>
      <!-- Providers -->
      <div class="box last">
        <!-- Authenticator / Email TOTP -->
        <ng-container
          *ngIf="
            selectedProviderType === providerType.Email ||
            selectedProviderType === providerType.Authenticator
          "
        >
          <p *ngIf="selectedProviderType === providerType.Authenticator">
            {{ "enterVerificationCodeApp" | i18n }}
          </p>
          <p *ngIf="selectedProviderType === providerType.Email">
            {{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }}
          </p>
          <div class="box-content">
            <div class="box-content-row" appBoxRow>
              <label for="code">{{ "verificationCode" | i18n }}</label>
              <input
                id="code"
                type="text"
                name="Code"
                [(ngModel)]="token"
                required
                appAutofocus
                appInputVerbatim
              />
            </div>
          </div>
          <small class="form-text" *ngIf="selectedProviderType === providerType.Email">
            <a
              href="#"
              appStopClick
              (click)="sendEmail(true)"
              [appApiAction]="emailPromise"
              *ngIf="selectedProviderType === providerType.Email"
            >
              {{ "sendVerificationCodeEmailAgain" | i18n }}
            </a>
          </small>
        </ng-container>

        <!-- Yubikey -->
        <ng-container *ngIf="selectedProviderType === providerType.Yubikey">
          <p>{{ "insertYubiKey" | i18n }}</p>
          <picture>
            <source srcset="images/yubikey.avif" type="image/avif" />
            <source srcset="images/yubikey.webp" type="image/webp" />
            <img src="images/yubikey.jpg" class="rounded img-fluid mb-3" alt="" />
          </picture>
          <div class="box last">
            <div class="box-content">
              <div class="box-content-row" appBoxRow>
                <label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>
                <input
                  id="code"
                  type="password"
                  name="Code"
                  [(ngModel)]="token"
                  required
                  appAutofocus
                  appInputVerbatim
                />
              </div>
            </div>
          </div>
        </ng-container>

        <!-- WebAuthn -->
        <ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
          <div class="tw-flex tw-justify-center">
            <div id="web-authn-frame">
              <iframe id="webauthn_iframe" sandbox="allow-scripts allow-same-origin"></iframe>
            </div>
          </div>
        </ng-container>

        <!-- Duo -->
        <ng-container *ngIf="isDuoProvider">
          <ng-container *ngIf="duoFrameless">
            <div>
              <span *ngIf="selectedProviderType === providerType.OrganizationDuo" class="tw-mb-0">
                {{ "duoRequiredByOrgForAccount" | i18n }}
              </span>
              {{ "launchDuoAndFollowStepsToFinishLoggingIn" | i18n }}
            </div>
          </ng-container>
          <ng-container id="duo-frame" *ngIf="!duoFrameless">
            <iframe
              id="duo_iframe"
              sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"
            ></iframe>
          </ng-container>
        </ng-container>
      </div>

      <div class="box last" *ngIf="selectedProviderType == null">
        <div class="box-content">
          <div class="box-content-row">
            <p>{{ "noTwoStepProviders" | i18n }}</p>
            <p>{{ "noTwoStepProviders2" | i18n }}</p>
          </div>
        </div>
      </div>

      <div class="box last" [hidden]="!showCaptcha()">
        <div class="box-content">
          <div class="box-content-row">
            <iframe
              id="hcaptcha_iframe"
              height="80"
              sandbox="allow-scripts allow-same-origin"
            ></iframe>
            <button class="btn block" type="button" routerLink="/accessibility-cookie">
              <i class="bwi bwi-universal-access" aria-hidden="true"></i>
              {{ "loadAccessibilityCookie" | i18n }}
            </button>
          </div>
        </div>
      </div>

      <!-- Remember me -->
      <div class="checkbox tw-mb-2">
        <label for="remember" class="flex align-items-center flex-fill">
          <input
            id="remember"
            type="checkbox"
            name="Remember"
            class="tw-mr-2"
            [(ngModel)]="remember"
          />
          {{ "rememberMe" | i18n }}
        </label>
      </div>

      <!-- Submit Buttons -->
      <div class="buttons with-rows">
        <div
          class="buttons-row"
          *ngIf="duoFrameless && selectedProviderType != null && isDuoProvider"
        >
          <button
            (click)="launchDuoFrameless()"
            type="button"
            class="btn primary block"
            [disabled]="form.loading"
          >
            <b> {{ "launchDuo" | i18n }} </b>
          </button>
        </div>
        <div class="buttons-row" *ngIf="selectedProviderType != null && !isDuoProvider">
          <button type="submit" class="btn primary block" [disabled]="form.loading">
            <span [hidden]="form.loading"
              ><i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}</span
            >
            <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
          </button>
        </div>
        <div class="buttons-row">
          <button type="button" routerLink="/login" class="btn block">
            {{ "cancel" | i18n }}
          </button>
        </div>
      </div>
      <div class="sub-options">
        <button type="button" class="text text-primary" appStopClick (click)="anotherMethod()">
          <b>{{ "useAnotherTwoStepMethod" | i18n }}</b>
        </button>
      </div>
    </div>
  </form>
</div>
<ng-template #twoFactorOptions></ng-template>