clients/libs/auth/src/angular/input-password/input-password.component.html

<form [formGroup]="formGroup" [bitSubmit]="submit">
  <auth-password-callout
    *ngIf="masterPasswordPolicyOptions"
    [message]="
      flow === InputPasswordFlow.ChangePasswordDelegation
        ? 'changePasswordDelegationMasterPasswordPolicyInEffect'
        : 'masterPasswordPolicyInEffect'
    "
    [policy]="masterPasswordPolicyOptions"
  ></auth-password-callout>

  <bit-form-field
    *ngIf="
      flow === InputPasswordFlow.ChangePassword ||
      flow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation
    "
  >
    <bit-label>{{ "currentMasterPass" | i18n }}</bit-label>
    <input
      id="input-password-form_current-password"
      bitInput
      type="password"
      formControlName="currentPassword"
    />
    <button
      type="button"
      bitIconButton
      bitSuffix
      bitPasswordInputToggle
      [(toggled)]="showPassword"
    ></button>
  </bit-form-field>

  <div class="tw-mb-6">
    <bit-form-field [disableMargin]="true">
      <bit-label>{{
        flow === InputPasswordFlow.SetInitialPasswordAccountRegistration ||
        flow === InputPasswordFlow.SetInitialPasswordAuthedUser
          ? ("masterPassword" | i18n)
          : ("newMasterPass" | i18n)
      }}</bit-label>
      <input
        id="input-password-form_new-password"
        bitInput
        type="password"
        formControlName="newPassword"
      />
      <button
        *ngIf="flow === InputPasswordFlow.ChangePasswordDelegation"
        type="button"
        bitIconButton="bwi-generate"
        bitSuffix
        [label]="'generatePassword' | i18n"
        (click)="generatePassword()"
      ></button>
      <button
        *ngIf="flow === InputPasswordFlow.ChangePasswordDelegation"
        type="button"
        bitSuffix
        bitIconButton="bwi-clone"
        label="{{ 'copyPassword' | i18n }}"
        (click)="copy()"
      ></button>
      <button
        type="button"
        bitIconButton
        bitSuffix
        bitPasswordInputToggle
        [(toggled)]="showPassword"
      ></button>
      <bit-hint *ngIf="flow !== InputPasswordFlow.ChangePasswordDelegation">
        <span class="tw-font-bold">{{ "important" | i18n }} </span>
        {{ "masterPassImportant" | i18n }}
        {{ minPasswordLengthMsg }}.
      </bit-hint>
    </bit-form-field>

    <tools-password-strength
      [showText]="true"
      [email]="email"
      [password]="formGroup.controls.newPassword.value"
      (passwordStrengthScore)="getPasswordStrengthScore($event)"
    ></tools-password-strength>
  </div>

  <bit-form-field>
    <bit-label>{{
      flow === InputPasswordFlow.SetInitialPasswordAccountRegistration ||
      flow === InputPasswordFlow.SetInitialPasswordAuthedUser
        ? ("confirmMasterPassword" | i18n)
        : ("confirmNewMasterPass" | i18n)
    }}</bit-label>
    <input
      id="input-password-form_new-password-confirm"
      bitInput
      type="password"
      formControlName="newPasswordConfirm"
    />
    <button
      type="button"
      bitIconButton
      bitSuffix
      bitPasswordInputToggle
      [(toggled)]="showPassword"
    ></button>
  </bit-form-field>

  <ng-container *ngIf="flow !== InputPasswordFlow.ChangePasswordDelegation">
    <bit-form-field>
      <bit-label>{{ "masterPassHintLabel" | i18n }}</bit-label>
      <input
        id="input-password-form_new-password-hint"
        bitInput
        formControlName="newPasswordHint"
      />
      <bit-hint>
        {{
          "masterPassHintText"
            | i18n: formGroup.value.newPasswordHint.length.toString() : maxHintLength.toString()
        }}
      </bit-hint>
    </bit-form-field>

    <bit-form-control>
      <input
        id="input-password-form_check-for-breaches"
        type="checkbox"
        bitCheckbox
        formControlName="checkForBreaches"
      />
      <bit-label>{{ "checkForBreaches" | i18n }}</bit-label>
    </bit-form-control>
  </ng-container>

  <bit-form-control *ngIf="flow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation">
    <input
      id="input-password-form_rotate-user-key"
      type="checkbox"
      bitCheckbox
      formControlName="rotateUserKey"
      (change)="rotateUserKeyClicked()"
    />
    <bit-label>
      {{ "rotateAccountEncKey" | i18n }}
      <a
        bitLink
        href="https://bitwarden.com/help/account-encryption-key/#rotate-your-encryption-key"
        target="_blank"
        rel="noreferrer"
        appA11yTitle="{{ 'impactOfRotatingYourEncryptionKey' | i18n }}"
      >
        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
      </a>
    </bit-label>
  </bit-form-control>

  <div
    *ngIf="flow !== InputPasswordFlow.ChangePasswordDelegation"
    class="tw-flex tw-gap-2"
    [ngClass]="inlineButtons ? 'tw-flex-row' : 'tw-flex-col'"
  >
    <button type="submit" bitButton bitFormButton buttonType="primary" [loading]="loading">
      {{ primaryButtonTextStr || ("setMasterPassword" | i18n) }}
    </button>

    <button
      *ngIf="secondaryButtonText"
      type="button"
      bitButton
      bitFormButton
      buttonType="secondary"
      [loading]="loading"
      (click)="onSecondaryButtonClick.emit()"
    >
      {{ secondaryButtonTextStr }}
    </button>
  </div>

  <bit-error-summary *ngIf="showErrorSummary" [formGroup]="formGroup"></bit-error-summary>
</form>