bitwarden-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>
    <div class="center">
        <span class="title">{{'passGen' | i18n}}</span>
    </div>
    <div class="right">
        <button type="button" appBlurClick (click)="select()" *ngIf="showSelect">{{'select' | i18n}}</button>
    </div>
</header>
<content>
    <div class="password-block">
        <div class="password-wrapper" [innerHTML]="password | colorPassword" appSelectCopy></div>
    </div>
    <div class="box list">
        <div class="box-content single-line">
            <a class="box-content-row text-primary" href="#" appStopClick appBlurClick
                (click)="regenerate()">{{'regeneratePassword' | i18n}}</a>
            <a class="box-content-row text-primary" href="#" appStopClick appBlurClick
                (click)="copy()">{{'copyPassword' | i18n}}</a>
        </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">
        <div class="box-header">
            {{'options' | i18n}}
        </div>
        <div class="box-content">
            <div class="box-content-row" appBoxRow>
                <label for="type" class="sr-only">{{'type' | i18n}}</label>
                <select id="type" [(ngModel)]="options.type" (change)="saveOptions()">
                    <option value="password">{{'password' | i18n}}</option>
                    <option value="passphrase">{{'passphrase' | i18n}}</option>
                </select>
            </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" (input)="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">
            </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">
            </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)="lengthChanged()" (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()" [(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()" [(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()" [(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()" [(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" (input)="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" (input)="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>