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:
parent
06106e1775
commit
88c730981a
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user