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

<form [formGroup]="formGroup" [bitSubmit]="submit">
  <auth-password-callout
    *ngIf="masterPasswordPolicyOptions"
    [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>
      <bit-label>{{ "newMasterPass" | i18n }}</bit-label>
      <input
        id="input-password-form_new-password"
        bitInput
        type="password"
        formControlName="newPassword"
      />
      <button
        type="button"
        bitIconButton
        bitSuffix
        bitPasswordInputToggle
        [(toggled)]="showPassword"
      ></button>
      <bit-hint>
        <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>{{ "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>

  <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 : 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>

  <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
        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 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>