browser/libs/tools/generator/components/src/password-settings.component.html

<bit-section [disableMargin]="disableMargin">
  <bit-section-header *ngIf="showHeader">
    <h2 bitTypography="h6">{{ "options" | i18n }}</h2>
  </bit-section-header>
  <form [formGroup]="settings" class="tw-container">
    <div class="tw-mb-4">
      <bit-card>
        <bit-form-field disableMargin>
          <bit-label>{{ "length" | i18n }}</bit-label>
          <input bitInput formControlName="length" type="number" (change)="save('length')" />
          <bit-hint>{{ lengthBoundariesHint$ | async }}</bit-hint>
        </bit-form-field>
      </bit-card>
    </div>
    <div>
      <bit-card>
        <div class="tw-mb-4">{{ "include" | i18n }}</div>
        <div class="tw-flex tw-flex-wrap tw-gap-x-8">
          <bit-form-control
            attr.aria-description="{{ 'uppercaseDescription' | i18n }}"
            title="{{ 'uppercaseDescription' | i18n }}"
          >
            <input
              bitCheckbox
              type="checkbox"
              formControlName="uppercase"
              (change)="save('uppercase')"
            />
            <bit-label>{{ "uppercaseLabel" | i18n }}</bit-label>
          </bit-form-control>
          <bit-form-control
            attr.aria-description="{{ 'lowercaseDescription' | i18n }}"
            title="{{ 'lowercaseDescription' | i18n }}"
          >
            <input
              bitCheckbox
              type="checkbox"
              formControlName="lowercase"
              (change)="save('lowercase')"
            />
            <bit-label>{{ "lowercaseLabel" | i18n }}</bit-label>
          </bit-form-control>
          <bit-form-control
            attr.aria-description="{{ 'numbersDescription' | i18n }}"
            title="{{ 'numbersDescription' | i18n }}"
          >
            <input bitCheckbox type="checkbox" formControlName="number" (change)="save('number')" />
            <bit-label>{{ "numbersLabel" | i18n }}</bit-label>
          </bit-form-control>
          <bit-form-control
            attr.aria-description="{{ 'specialCharactersDescription' | i18n }}"
            title="{{ 'specialCharactersDescription' | i18n }}"
          >
            <input
              bitCheckbox
              type="checkbox"
              formControlName="special"
              (change)="save('special')"
            />
            <!-- hard-coded the special characters string because `$` indicates an i18n interpolation,
                and is handled inconsistently across browsers. Angular template syntax is used to
                ensure special characters are entity-encoded.
              -->
            <bit-label>{{ "!@#$%^&*" }}</bit-label>
          </bit-form-control>
        </div>
        <div class="tw-flex">
          <bit-form-field class="tw-w-full tw-basis-1/2 tw-mr-4">
            <bit-label>{{ "minNumbers" | i18n }}</bit-label>
            <input
              bitInput
              type="number"
              formControlName="minNumber"
              (change)="save('minNumbers')"
            />
          </bit-form-field>
          <bit-form-field class="tw-w-full tw-basis-1/2">
            <bit-label>{{ "minSpecial" | i18n }}</bit-label>
            <input
              bitInput
              type="number"
              formControlName="minSpecial"
              (change)="save('minSpecial')"
            />
          </bit-form-field>
        </div>
        <bit-form-control [disableMargin]="!policyInEffect">
          <input
            bitCheckbox
            type="checkbox"
            formControlName="avoidAmbiguous"
            (change)="save('avoidAmbiguous')"
          />
          <bit-label>{{ "avoidAmbiguous" | i18n }}</bit-label>
        </bit-form-control>
        <p *ngIf="policyInEffect" bitTypography="helper">{{ "generatorPolicyInEffect" | i18n }}</p>
      </bit-card>
    </div>
  </form>
</bit-section>