password generator

src/app/vault/add-edit.component.html

@@ -237,7 +237,9 @@
     <button appBlurClick (click)="cancel()" title="{{'cancel' | i18n}}">
         {{'cancel' | i18n}}
     </button>
-    <button appBlurClick (click)="delete()" class="danger right" title="{{'delete' | i18n}}" *ngIf="editMode">
-        <i class="fa fa-trash-o fa-lg"></i>
-    </button>
+    <div class="right">
+        <button appBlurClick (click)="delete()" class="danger" title="{{'delete' | i18n}}" *ngIf="editMode">
+            <i class="fa fa-trash-o fa-lg"></i>
+        </button>
+    </div>
 </div>

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

@@ -1,15 +1,77 @@
 <div class="modal fade">
-    <div class="modal-dialog">
+    <div class="modal-dialog modal-sm">
         <div class="modal-content">
-            <div class="modal-header">
-                Password Generator
-                <button type="button" class="close" data-dismiss="modal">&times;</button>
-            </div>
             <div class="modal-body">
-                Some content
+                <div class="password-block">{{password}}</div>
+                <div class="box">
+                    <div class="box-content condensed">
+                        <a class="box-content-row text-primary" href="#" appStopClick appBlurClick
+                           (click)="regenerate(true)">
+                            <i class="fa fa-fw fa-refresh"></i> {{'regeneratePassword' | i18n}}
+                        </a>
+                        <a class="box-content-row text-primary" href="#" appStopClick appBlurClick
+                           (click)="copy()">
+                            <i class="fa fa-fw fa-clipboard"></i> {{'copyPassword' | i18n}}
+                        </a>
+                    </div>
+                </div>
+                <div class="box">
+                    <div class="box-header">
+                        Options
+                    </div>
+                    <div class="box-content condensed">
+                        <div class="box-content-row box-content-row-slider">
+                            <label for="length">{{'length' | i18n}}</label>
+                            <span>{{options.length}}</span>
+                            <input id="length" type="range" min="5" max="128" step="1" [(ngModel)]="options.length">
+                        </div>
+                        <div class="box-content-row box-content-row-checkbox">
+                            <label for="uppercase">A-Z</label>
+                            <input id="uppercase" type="checkbox" (change)="saveOptions()"
+                                   [(ngModel)]="options.uppercase">
+                        </div>
+                        <div class="box-content-row box-content-row-checkbox">
+                            <label for="lowercase">a-z</label>
+                            <input id="lowercase" type="checkbox" (change)="saveOptions()"
+                                   [(ngModel)]="options.lowercase">
+                        </div>
+                        <div class="box-content-row box-content-row-checkbox">
+                            <label for="numbers">0-9</label>
+                            <input id="numbers" type="checkbox" (change)="saveOptions()"
+                                   [(ngModel)]="options.number">
+                        </div>
+                        <div class="box-content-row box-content-row-checkbox">
+                            <label for="special">!@#$%^&*</label>
+                            <input id="special" type="checkbox" (change)="saveOptions()"
+                                   [(ngModel)]="options.special">
+                        </div>
+                    </div>
+                </div>
+                <div class="box">
+                    <div class="box-content condensed">
+                        <div class="box-content-row box-content-row-input">
+                            <label for="min-number">{{'minNumbers' | i18n}}</label>
+                            <input id="min-number" type="number" min="0" max="5" (change)="saveOptions()"
+                                   [(ngModel)]="options.minNumber">
+                        </div>
+                        <div class="box-content-row box-content-row-input">
+                            <label for="min-special">{{'minSpecial' | i18n}}</label>
+                            <input id="min-special" type="number" min="0" max="5" (change)="saveOptions()"
+                                   [(ngModel)]="options.minSpecial">
+                        </div>
+                        <div class="box-content-row box-content-row-checkbox">
+                            <label for="ambiguous">{{'ambiguous' | i18n}}</label>
+                            <input id="ambiguous" type="checkbox" (change)="saveOptions()"
+                                   [(ngModel)]="options.ambiguous">
+                        </div>
+                    </div>
+                </div>
             </div>
             <div class="modal-footer">
-                <button type="button" data-dismiss="modal">Close</button>
+                <button type="button" class="primary" appBlurClick *ngIf="showSelect">
+                    <i class="fa fa-lg fa-check"></i> {{'select' | i18n}}
+                </button>
+                <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
             </div>
         </div>
     </div>

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

@@ -1,5 +1,8 @@
 import * as template from './password-generator.component.html';
 
+import { Angulartics2 } from 'angulartics2';
+import { ToasterService } from 'angular2-toaster';
+
 import {
     Component,
     EventEmitter,
@@ -8,24 +11,76 @@ import {
     Output,
 } from '@angular/core';
 
-import { CipherType } from 'jslib/enums/cipherType';
-
-import { CollectionService } from 'jslib/abstractions/collection.service';
+import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
+import { UtilsService } from 'jslib/abstractions/utils.service';
 
 @Component({
     selector: 'password-generator',
     template: template,
 })
 export class PasswordGeneratorComponent implements OnInit {
-    @Input() in: string;
-    @Output() out = new EventEmitter<string>();
+    @Input() showSelect: boolean = false;
 
-    constructor() {
-        // ctor
-    }
+    options: any = {};
+    password: string = '-';
+
+    constructor(private passwordGenerationService: PasswordGenerationService, private analytics: Angulartics2,
+        private utilsService: UtilsService) { }
 
     async ngOnInit() {
-        console.log(this.in);
-        setTimeout(() => { this.out.emit('world'); }, 2000);
+        this.options = await this.passwordGenerationService.getOptions();
+        this.password = this.passwordGenerationService.generatePassword(this.options);
+        this.analytics.eventTrack.next({ action: 'Generated Password' });
+        await this.passwordGenerationService.addHistory(this.password);
+
+        const slider = document.querySelector('#length');
+        if (slider) {
+            // Save password once the slider stop moving.
+            slider.addEventListener('change', async (e) => {
+                e.preventDefault();
+                this.saveOptions(false);
+                await this.passwordGenerationService.addHistory(this.password);
+                this.analytics.eventTrack.next({ action: 'Regenerated Password' });
+            });
+            // Regenerate while slider moving
+            slider.addEventListener('input', (e) => {
+                e.preventDefault();
+                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;
+        }
+
+        await this.passwordGenerationService.saveOptions(this.options);
+
+        if (regenerate) {
+            this.password = this.passwordGenerationService.generatePassword(this.options);
+            await this.passwordGenerationService.addHistory(this.password);
+            this.analytics.eventTrack.next({ action: 'Regenerated Password' });
+        }
+    }
+
+    regenerate() {
+        this.password = this.passwordGenerationService.generatePassword(this.options);
+        this.analytics.eventTrack.next({ action: 'Regenerated Password' });
+    }
+
+    copy() {
+        this.analytics.eventTrack.next({ action: 'Copied Generated Password' });
+        this.utilsService.copyToClipboard(this.password, window.document);
     }
 }

src/app/vault/vault.component.ts

@@ -176,11 +176,7 @@ export class VaultComponent implements OnInit {
         let modal = componentRef.instance as ModalComponent;
         let childComponent = modal.show<PasswordGeneratorComponent>(PasswordGeneratorComponent,
             this.passwordGeneratorModal);
-        childComponent.in = 'hello';
-        childComponent.out.subscribe((i: string) => {
-            console.log(i);
-            //modal.close();
-        });
+        childComponent.showSelect = true;
     }
 
     private clearFilters() {