Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-18 02:41:15 +02:00
Code Issues Projects Releases Wiki Activity

add input for length

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/vault/password-generator.component.html
View File

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

37
src/app/vault/password-generator.component.ts
View File

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

8
src/scss/box.scss
View File

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