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

<div class="modal fade" tabindex="-1" 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="policyInEffect">
                    {{'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-clipboard" 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" 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" [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" (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" [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>