browser/src/app/vault/password-generator.component.html

<div class="modal fade">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                <div class="password-block">{{password}}</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"></i> {{'regeneratePassword' | i18n}}
                        </a>
                        <a class="box-content-row" href="#" appStopClick appBlurClick
                           (click)="copy()">
                            <i class="fa fa-fw fa-clipboard"></i> {{'copyPassword' | i18n}}
                        </a>
                    </div>
                </div>
                <div class="box">
                    <div class="box-header">
                        <button type="button" (click)="toggleOptions()">
                            <i class="fa fa-plus-square-o" [hidden]="showOptions"></i>
                            <i class="fa fa-minus-square-o" [hidden]="!showOptions"></i>
                            {{'options' | i18n}}
                        </button>
                    </div>
                    <div class="box-content condensed" [hidden]="!showOptions">
                        <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()"
                                   [(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" [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" (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">{{'ambiguous' | i18n}}</label>
                            <input id="ambiguous" type="checkbox" (change)="saveOptions()"
                                   [(ngModel)]="avoidAmbiguous">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="primary" appBlurClick *ngIf="showSelect" (click)="select()"
                        title="{{'select' | i18n}}">
                    <i class="fa fa-lg fa-fw fa-check"></i>
                </button>
                <button type="button" data-dismiss="modal">{{(showSelect ? 'cancel' : 'close') | i18n}}</button>
            </div>
        </div>
    </div>
</div>