browser/libs/auth/src/angular/login/login.component.html

<!-- Web Template -->

<!--
    TODO-rr-bw: Clarify this comment if necessary.

    Why not use <form *ngIf="clientType === ClientType.Web"> to display this section?
    Because this file contains 3 separate templates for Web, Browser, and Desktop. For Web,
    we want access to the masterPasswordInput reference in the class file.
    - If we used *ngIf, we would not be able to access the reference initially.
    - Using a hidden form allows us to access the reference, because it ensures that the element
      reference does exist (it's just potentially hidden instead of non-existent).
  -->
<form
  [ngClass]="{ 'tw-hidden': clientType !== ClientType.Web }"
  [bitSubmit]="submit.bind(null, false)"
  [formGroup]="formGroup"
>
  <!-------------------------
    UI STATE 1: Email Entry
  -------------------------->
  <ng-container *ngIf="!validatedEmail">
    <!-- Email Address input -->
    <div class="tw-mb-3">
      <bit-form-field>
        <bit-label>{{ "emailAddress" | i18n }}</bit-label>
        <input type="email" bitInput formControlName="email" appAutofocus />
      </bit-form-field>
    </div>

    <!-- Remember Email input -->
    <div class="tw-mb-3 tw-flex tw-items-start">
      <bit-form-control class="tw-mb-0">
        <input type="checkbox" bitCheckbox formControlName="rememberEmail" />
        <bit-label>{{ "rememberEmail" | i18n }}</bit-label>
      </bit-form-control>
    </div>

    <!-- Continue button -->
    <div class="tw-mb-3">
      <button
        bitButton
        type="submit"
        buttonType="primary"
        class="tw-w-full"
        (click)="validateEmail()"
      >
        <span> {{ "continue" | i18n }} </span>
      </button>
    </div>

    <!-- Link to Login with Passkey page -->
    <div class="tw-mb-3 tw-flex tw-flex-col tw-items-center tw-justify-center">
      <p class="tw-mb-3">{{ "or" | i18n }}</p>
      <a
        bitLink
        block
        linkType="primary"
        routerLink="/login-with-passkey"
        (mousedown)="$event.preventDefault()"
      >
        <span><i class="bwi bwi-passkey"></i> {{ "loginWithPasskey" | i18n }}</span>
      </a>
    </div>

    <hr />

    <!-- Link to Create Account page -->
    <p class="tw-m-0 tw-text-sm">
      {{ "newAroundHere" | i18n }}
      <!-- Two notes:  
           (1) We check the value and validity of email so we don't send an invalid email to autofill 
           on load of register for both enter and mouse based navigation
           (2) We use mousedown to trigger navigation so that the onBlur form validation does not fire 
           and move the create account link down the page on click which causes the user to miss actually 
           clicking on the link. Mousedown fires before onBlur. 
      -->
      <a
        [routerLink]="registerRoute$ | async"
        [queryParams]="emailFormControl.valid ? { email: emailFormControl.value } : {}"
        (mousedown)="goToRegister()"
        >{{ "createAccount" | i18n }}</a
      >
    </p>
  </ng-container>

  <!-----------------------------------
    UI STATE 2: Master Password Entry
  ------------------------------------>
  <!--
    Why not use <ng-container *ngIf="validatedEmail"> to display this section?
    Because we want access to the masterPasswordInput reference in the class file.
    - Using a hidden div allows us to access the reference without rendering the div initially.
    - Using *ngIf would not allow us to access the reference without rendering the ng-container initially.
  -->
  <div [ngClass]="{ 'tw-hidden': !validatedEmail }">
    <div class="tw-mb-6 tw-h-28">
      <!-- Master Password input -->
      <bit-form-field class="!tw-mb-1">
        <bit-label>{{ "masterPass" | i18n }}</bit-label>
        <input type="password" bitInput #masterPasswordInput formControlName="masterPassword" />
        <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
      </bit-form-field>

      <!-- Link to Password Hint page -->
      <a
        class="tw-mt-2"
        routerLink="/hint"
        (mousedown)="goToHint()"
        (click)="saveEmailSettings()"
        >{{ "getMasterPasswordHint" | i18n }}</a
      >
    </div>

    <!-- Captcha iframe -->
    <div [hidden]="!showCaptcha()">
      <iframe id="hcaptcha_iframe" height="80" sandbox="allow-scripts allow-same-origin"></iframe>
    </div>

    <!-- Button to Login with Master Password -->
    <div class="tw-mb-3 tw-flex tw-space-x-4">
      <button bitButton buttonType="primary" bitFormButton type="submit" [block]="true">
        <span> {{ "loginWithMasterPassword" | i18n }} </span>
      </button>
    </div>

    <div class="tw-mb-3" *ngIf="showLoginWithDevice && showPasswordless">
      <button
        bitButton
        type="button"
        [block]="true"
        buttonType="secondary"
        (click)="startAuthRequestLogin()"
      >
        <span> <i class="bwi bwi-mobile"></i> {{ "loginWithDevice" | i18n }} </span>
      </button>
    </div>

    <div class="tw-mb-3">
      <a
        routerLink="/sso"
        [queryParams]="{ email: formGroup.value.email }"
        (click)="saveEmailSettings()"
        bitButton
        buttonType="secondary"
        class="tw-w-full"
      >
        <i class="bwi bwi-provider tw-mr-2"></i>
        {{ "enterpriseSingleSignOn" | i18n }}
      </a>
    </div>

    <hr />

    <div class="tw-m-0 tw-text-sm">
      <p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
      <a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
    </div>
  </div>
</form>

<!-- Browser Template -->
<form *ngIf="clientType === ClientType.Browser" [bitSubmit]="submit" [formGroup]="formGroup">
  <main tabindex="-1"></main>
</form>