From 88c730981aaaa9d6bfaf947ff67cd798589fe0c6 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Wed, 31 Jan 2018 21:33:55 -0500 Subject: [PATCH] add input for length --- .../vault/password-generator.component.html | 10 +++-- src/app/vault/password-generator.component.ts | 37 +++++++++++-------- src/scss/box.scss | 8 +++- 3 files changed, 34 insertions(+), 21 deletions(-) diff --git a/src/app/vault/password-generator.component.html b/src/app/vault/password-generator.component.html index c65ec5449d..a1b86409b4 100644 --- a/src/app/vault/password-generator.component.html +++ b/src/app/vault/password-generator.component.html @@ -23,11 +23,13 @@ {{'options' | i18n}} -
+
- {{options.length}} - + +
@@ -51,7 +53,7 @@
-
+
diff --git a/src/app/vault/password-generator.component.ts b/src/app/vault/password-generator.component.ts index d79bf25889..caef99cf94 100644 --- a/src/app/vault/password-generator.component.ts +++ b/src/app/vault/password-generator.component.ts @@ -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; + } + } } diff --git a/src/scss/box.scss b/src/scss/box.scss index 44876e4764..beff84011e 100644 --- a/src/scss/box.scss +++ b/src/scss/box.scss @@ -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; } }