browser/apps/web/src/app/accounts/login/login.component.html

<form
  #form
  (ngSubmit)="submit()"
  [appApiAction]="formPromise"
  class="tw-container tw-mx-auto"
  [formGroup]="formGroup"
>
  <div
    class="tw-mx-auto tw-mt-5 tw-flex tw-max-w-lg tw-flex-col tw-items-center tw-justify-center tw-p-8"
  >
    <div>
      <img class="logo logo-themed" alt="Bitwarden" />
      <p class="tw-mx-4 tw-mt-3 tw-mb-4 tw-text-center tw-text-xl">
        {{ "loginOrCreateNewAccount" | i18n }}
      </p>
      <div
        class="tw-mt-3 tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-6"
      >
        <ng-container *ngIf="!validatedEmail; else loginPage">
          <div class="tw-mb-3">
            <bit-form-field>
              <bit-label>{{ "emailAddress" | i18n }}</bit-label>
              <input
                id="login_input_email"
                bitInput
                type="email"
                formControlName="email"
                (keyup.enter)="validateEmail()"
              />
            </bit-form-field>
          </div>

          <div class="tw-mb-3 tw-flex tw-items-start">
            <div class="tw-flex tw-h-6 tw-items-center">
              <input
                id="login_input_remember-email"
                class="tw-w-4 tw-rounded tw-border"
                bitInput
                type="checkbox"
                formControlName="rememberEmail"
              />
            </div>
            <bit-label class="ml-2">
              {{ "rememberEmail" | i18n }}
            </bit-label>
          </div>

          <div class="tw-mb-3">
            <button
              bitButton
              type="button"
              buttonType="primary"
              class="tw-w-full"
              [disabled]="form.loading"
              (click)="validateEmail()"
            >
              <span> {{ "continue" | i18n }} </span>
            </button>
          </div>

          <hr />

          <p class="tw-m-0 tw-text-sm">
            {{ "newAroundHere" | i18n }}
            <a routerLink="/register">{{ "createAccount" | i18n }}</a>
          </p>
        </ng-container>
      </div>
    </div>
  </div>
</form>

<ng-template [formGroup]="formGroup" #loginPage>
  <div class="tw-mb-3">
    <bit-form-field>
      <bit-label>{{ "masterPass" | i18n }}</bit-label>
      <input
        id="login_input_master-password"
        bitInput
        type="{{ showPassword ? 'text' : 'password' }}"
        formControlName="masterPassword"
      />
      <button type="button" bitSuffix bitButton (click)="togglePassword()">
        <i
          aria-hidden="true"
          class="bwi bwi-lg bwi-eye"
          [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
        ></i>
      </button>
      <bit-hint>
        <a routerLink="/hint" (click)="setFormValues()">{{ "getMasterPasswordHint" | i18n }}</a>
      </bit-hint>
    </bit-form-field>
  </div>

  <div [hidden]="!showCaptcha()">
    <iframe id="hcaptcha_iframe" height="80"></iframe>
  </div>

  <div class="tw-mb-3 tw-flex tw-space-x-4">
    <button bitButton buttonType="primary" type="submit" [block]="true" [loading]="form.loading">
      <span> {{ "loginWithMasterPassword" | i18n }} </span>
    </button>
  </div>

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

  <div class="tw-mb-3">
    <a
      routerLink="/sso"
      (click)="setFormValues()"
      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>
</ng-template>