bitwarden-desktop/src/app/vault/password-generator.component.html

<div
  class="modal fade"
  role="dialog"
  aria-modal="true"
  attr.aria-label="{{ 'generatePassword' | i18n }}"
>
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <app-callout type="info" *ngIf="enforcedPolicyOptions?.inEffect()">
          {{ "passwordGeneratorPolicyInEffect" | i18n }}
        </app-callout>
        <div class="password-block">
          <div class="password-wrapper" [innerHTML]="password | colorPassword" appSelectCopy></div>
        </div>
        <div class="box">
          <div class="box-content condensed">
            <a class="box-content-row" href="#" appStopClick appBlurClick (click)="regenerate()">
              <i class="fa fa-fw fa-refresh" aria-hidden="true"></i>
              {{ "regeneratePassword" | i18n }}
            </a>
            <a class="box-content-row" href="#" appStopClick appBlurClick (click)="copy()">
              <i class="fa fa-fw fa-clone" aria-hidden="true"></i> {{ "copyPassword" | i18n }}
            </a>
          </div>
        </div>
        <div class="box">
          <div class="box-header">
            <button
              type="button"
              (click)="toggleOptions()"
              appA11yTitle="{{ 'toggleVisibility' | i18n }}"
            >
              <i class="fa fa-plus-square-o" aria-hidden="true" [hidden]="showOptions"></i>
              <i class="fa fa-minus-square-o" aria-hidden="true" [hidden]="!showOptions"></i>
              {{ "options" | i18n }}
            </button>
          </div>
          <div class="box-content condensed" [hidden]="!showOptions">
            <div class="box-content-row box-content-row-radio">
              <label class="sr-only radio-header">{{ "type" | i18n }}</label>
              <div
                class="radio-group text-default"
                appBoxRow
                name="PassTypeOptions"
                *ngFor="let o of passTypeOptions"
              >
                <input
                  type="radio"
                  class="radio"
                  [(ngModel)]="options.type"
                  name="Type_{{ o.value }}"
                  id="type_{{ o.value }}"
                  [value]="o.value"
                  (change)="saveOptions()"
                  [checked]="options.type === o.value"
                />
                <label class="unstyled" for="type_{{ o.value }}">
                  {{ o.name }}
                </label>
              </div>
            </div>
          </div>
        </div>
        <div class="box" [hidden]="!showOptions" *ngIf="options.type === 'passphrase'">
          <div class="box-content condensed">
            <div class="box-content-row box-content-row-input" appBoxRow>
              <label for="num-words">{{ "numWords" | i18n }}</label>
              <input
                id="num-words"
                type="number"
                min="3"
                max="20"
                (blur)="saveOptions()"
                [(ngModel)]="options.numWords"
              />
            </div>
            <div class="box-content-row box-content-row-input" appBoxRow>
              <label for="word-separator">{{ "wordSeparator" | i18n }}</label>
              <input
                id="word-separator"
                type="text"
                maxlength="1"
                (input)="saveOptions()"
                [(ngModel)]="options.wordSeparator"
              />
            </div>
            <div class="box-content-row box-content-row-checkbox" appBoxRow>
              <label for="capitalize">{{ "capitalize" | i18n }}</label>
              <input
                id="capitalize"
                type="checkbox"
                (change)="saveOptions()"
                [(ngModel)]="options.capitalize"
                [disabled]="enforcedPolicyOptions?.capitalize"
              />
            </div>
            <div class="box-content-row box-content-row-checkbox" appBoxRow>
              <label for="include-number">{{ "includeNumber" | i18n }}</label>
              <input
                id="include-number"
                type="checkbox"
                (change)="saveOptions()"
                [(ngModel)]="options.includeNumber"
                [disabled]="enforcedPolicyOptions?.includeNumber"
              />
            </div>
          </div>
        </div>
        <ng-container *ngIf="options.type === 'password'">
          <div class="box" [hidden]="!showOptions">
            <div class="box-content condensed">
              <div class="box-content-row box-content-row-slider" appBoxRow>
                <label for="length">{{ "length" | i18n }}</label>
                <input
                  id="length"
                  type="number"
                  min="5"
                  max="128"
                  [(ngModel)]="options.length"
                  (blur)="saveOptions()"
                />
                <input
                  id="lengthRange"
                  type="range"
                  min="5"
                  max="128"
                  step="1"
                  [(ngModel)]="options.length"
                  (change)="sliderChanged()"
                  (input)="sliderInput()"
                />
              </div>
              <div class="box-content-row box-content-row-checkbox" appBoxRow>
                <label for="uppercase">A-Z</label>
                <input
                  id="uppercase"
                  type="checkbox"
                  (change)="saveOptions()"
                  [disabled]="enforcedPolicyOptions?.useUppercase"
                  [(ngModel)]="options.uppercase"
                />
              </div>
              <div class="box-content-row box-content-row-checkbox" appBoxRow>
                <label for="lowercase">a-z</label>
                <input
                  id="lowercase"
                  type="checkbox"
                  (change)="saveOptions()"
                  [disabled]="enforcedPolicyOptions?.useLowercase"
                  [(ngModel)]="options.lowercase"
                />
              </div>
              <div class="box-content-row box-content-row-checkbox" appBoxRow>
                <label for="numbers">0-9</label>
                <input
                  id="numbers"
                  type="checkbox"
                  (change)="saveOptions()"
                  [disabled]="enforcedPolicyOptions?.useNumbers"
                  [(ngModel)]="options.number"
                />
              </div>
              <div class="box-content-row box-content-row-checkbox" appBoxRow>
                <label for="special">!@#$%^&*</label>
                <input
                  id="special"
                  type="checkbox"
                  (change)="saveOptions()"
                  [disabled]="enforcedPolicyOptions?.useSpecial"
                  [(ngModel)]="options.special"
                />
              </div>
            </div>
          </div>
          <div class="box" [hidden]="!showOptions">
            <div class="box-content condensed">
              <div class="box-content-row box-content-row-input" appBoxRow>
                <label for="min-number">{{ "minNumbers" | i18n }}</label>
                <input
                  id="min-number"
                  type="number"
                  min="0"
                  max="9"
                  (blur)="saveOptions()"
                  [(ngModel)]="options.minNumber"
                />
              </div>
              <div class="box-content-row box-content-row-input" appBoxRow>
                <label for="min-special">{{ "minSpecial" | i18n }}</label>
                <input
                  id="min-special"
                  type="number"
                  min="0"
                  max="9"
                  (blur)="saveOptions()"
                  [(ngModel)]="options.minSpecial"
                />
              </div>
              <div class="box-content-row box-content-row-checkbox" appBoxRow>
                <label for="ambiguous">{{ "ambiguous" | i18n }}</label>
                <input
                  id="ambiguous"
                  type="checkbox"
                  (change)="saveOptions()"
                  [(ngModel)]="avoidAmbiguous"
                />
              </div>
            </div>
          </div>
        </ng-container>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="primary"
          appBlurClick
          *ngIf="showSelect"
          (click)="select()"
          appA11yTitle="{{ 'select' | i18n }}"
        >
          <i class="fa fa-lg fa-fw fa-check" aria-hidden="true"></i>
        </button>
        <button type="button" data-dismiss="modal">
          {{ (showSelect ? "cancel" : "close") | i18n }}
        </button>
      </div>
    </div>
  </div>
</div>