bitwarden-estensione-browser/src/popup/generator/password-generator.component.html

<header>
  <div class="left">
    <app-pop-out [show]="!showSelect"></app-pop-out>
    <button type="button" appBlurClick (click)="close()" *ngIf="showSelect">
      {{ "cancel" | i18n }}
    </button>
  </div>
  <h1 class="center">
    <span class="title">{{ "passGen" | i18n }}</span>
  </h1>
  <div class="right">
    <button type="button" appBlurClick (click)="select()" *ngIf="showSelect">
      {{ "select" | i18n }}
    </button>
  </div>
</header>
<content>
  <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 list">
    <div class="box-content single-line">
      <button
        type="button"
        class="box-content-row text-primary"
        appStopClick
        appBlurClick
        (click)="regenerate()"
      >
        {{ "regeneratePassword" | i18n }}
      </button>
      <button
        type="button"
        class="box-content-row text-primary"
        appStopClick
        appBlurClick
        (click)="copy()"
      >
        {{ "copyPassword" | i18n }}
      </button>
    </div>
  </div>
  <div class="box list">
    <div class="box-content single-line">
      <a class="box-content-row box-content-row-flex" routerLink="/generator-history">
        <div class="row-main">{{ "passwordHistory" | i18n }}</div>
        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
      </a>
    </div>
  </div>
  <div class="box">
    <h2 class="box-header">
      {{ "options" | i18n }}
    </h2>
    <div class="box-content">
      <div class="box-content-row">
        <label class="sr-only radio-header">{{ "type" | i18n }}</label>
        <div class="radio-group text-default" appBoxRow *ngFor="let o of passTypeOptions">
          <input
            type="radio"
            [(ngModel)]="options.type"
            name="Type_{{ o.value }}"
            id="type_{{ o.value }}"
            [value]="o.value"
            (change)="saveOptions()"
            [checked]="options.type === o.value"
          />
          <label for="type_{{ o.value }}">
            {{ o.name }}
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="box" *ngIf="options.type === 'passphrase'">
    <div class="box-content">
      <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"
          (change)="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">
      <div class="box-content">
        <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"
            (change)="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()"
            attr.aria-label="{{ 'uppercase' | i18n }}"
            [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()"
            attr.aria-label="{{ 'lowercase' | i18n }}"
            [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()"
            attr.aria-label="{{ 'numbers' | i18n }}"
            [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()"
            attr.aria-label="{{ 'specialCharacters' | i18n }}"
            [disabled]="enforcedPolicyOptions.useSpecial"
            [(ngModel)]="options.special"
          />
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box-content">
        <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"
            (change)="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"
            (change)="saveOptions()"
            [(ngModel)]="options.minSpecial"
          />
        </div>
        <div class="box-content-row box-content-row-checkbox" appBoxRow>
          <label for="ambiguous">{{ "avoidAmbChar" | i18n }}</label>
          <input
            id="ambiguous"
            type="checkbox"
            (change)="saveOptions()"
            [(ngModel)]="avoidAmbiguous"
          />
        </div>
      </div>
    </div>
  </ng-container>
</content>