add input for length

src/app/vault/password-generator.component.html

@@ -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>

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;
+        }
+    }
 }

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;
                 }
             }