129 lines
6.9 KiB
HTML
129 lines
6.9 KiB
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>
|