1
0
mirror of https://github.com/bitwarden/desktop.git synced 2024-11-24 11:55:50 +01:00

add input for length

This commit is contained in:
Kyle Spearrin 2018-01-31 21:33:55 -05:00
parent 06106e1775
commit 88c730981a
3 changed files with 34 additions and 21 deletions

View File

@ -23,11 +23,13 @@
{{'options' | i18n}}
</button>
</div>
<div class="box-content condensed" *ngIf="showOptions">
<div class="box-content condensed" [hidden]="!showOptions">
<div class="box-content-row box-content-row-slider" appBoxRow>
<label for="length">{{'length' | i18n}}</label>
<span>{{options.length}}</span>
<input id="length" type="range" min="5" max="128" step="1" [(ngModel)]="options.length">
<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">
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="uppercase">A-Z</label>
@ -51,7 +53,7 @@
</div>
</div>
</div>
<div class="box" *ngIf="showOptions">
<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>

View File

@ -35,7 +35,7 @@ export class PasswordGeneratorComponent implements OnInit {
this.analytics.eventTrack.next({ action: 'Generated Password' });
await this.passwordGenerationService.addHistory(this.password);
const slider = document.querySelector('#length');
const slider = document.querySelector('#lengthRange');
if (slider) {
// Save password once the slider stop moving.
slider.addEventListener('change', async (e) => {
@ -47,26 +47,14 @@ export class PasswordGeneratorComponent implements OnInit {
// Regenerate while slider moving
slider.addEventListener('input', (e) => {
e.preventDefault();
this.normalizeOptions();
this.password = this.passwordGenerationService.generatePassword(this.options);
});
}
}
async saveOptions(regenerate: boolean = true) {
if (!this.options.uppercase && !this.options.lowercase && !this.options.number && !this.options.special) {
this.options.lowercase = true;
const lowercase = document.querySelector('#lowercase') as HTMLInputElement;
if (lowercase) {
lowercase.checked = true;
}
}
if (!this.options.minNumber) {
this.options.minNumber = 0;
}
if (!this.options.minSpecial) {
this.options.minSpecial = 0;
}
this.normalizeOptions();
await this.passwordGenerationService.saveOptions(this.options);
if (regenerate) {
@ -94,4 +82,23 @@ export class PasswordGeneratorComponent implements OnInit {
toggleOptions() {
this.showOptions = !this.showOptions;
}
private normalizeOptions() {
if (!this.options.uppercase && !this.options.lowercase && !this.options.number && !this.options.special) {
this.options.lowercase = true;
const lowercase = document.querySelector('#lowercase') as HTMLInputElement;
if (lowercase) {
lowercase.checked = true;
}
}
if (!this.options.minNumber) {
this.options.minNumber = 0;
}
if (!this.options.minSpecial) {
this.options.minSpecial = 0;
}
if (this.options.length > 128) {
this.options.length = 128;
}
}
}

View File

@ -136,11 +136,15 @@
}
&.box-content-row-slider {
input {
input[type="range"] {
height: 10px;
}
label, span {
input[type="number"] {
width: 45px;
}
label {
white-space: nowrap;
}
}