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">{{password}}</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 row-sub-icon"></i>
            </a>
        </div>
    </div>
    <div class="box">
        <div class="box-header">
            {{'options' | i18n}}
        </div>
        <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"
                       (input)="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>
</content>