password generator

src/app/services/services.module.ts

@@ -117,6 +117,7 @@ function initFactory(i18n: I18nService): Function {
         { provide: UtilsServiceAbstraction, useValue: utilsService },
         { provide: CryptoServiceAbstraction, useValue: cryptoService },
         { provide: PlatformUtilsServiceAbstraction, useValue: platformUtilsService },
+        { provide: PasswordGenerationServiceAbstraction, useValue: passwordGenerationService },
         {
             provide: APP_INITIALIZER,
             useFactory: initFactory,

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">
+    <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 { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
-
+import { UtilsService } from 'jslib/abstractions/utils.service';
-import { CollectionService } from 'jslib/abstractions/collection.service';
 
 @Component({
     selector: 'password-generator',
     template: template,
 })
 export class PasswordGeneratorComponent implements OnInit {
-    @Input() in: string;
+    @Input() showSelect: boolean = false;
-    @Output() out = new EventEmitter<string>();
 
-    constructor() {
+    options: any = {};
-        // ctor
+    password: string = '-';
-    }
+
+    constructor(private passwordGenerationService: PasswordGenerationService, private analytics: Angulartics2,
+        private utilsService: UtilsService) { }
 
     async ngOnInit() {
-        console.log(this.in);
+        this.options = await this.passwordGenerationService.getOptions();
-        setTimeout(() => { this.out.emit('world'); }, 2000);
+        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.showSelect = true;
-        childComponent.out.subscribe((i: string) => {
-            console.log(i);
-            //modal.close();
-        });
     }
 
     private clearFilters() {

src/locales/en/messages.json

@@ -311,5 +311,27 @@
   },
   "deleteFolder": {
     "message": "Delete Folder"
+  },
+  "regeneratePassword": {
+    "message": "Regenerate Password"
+  },
+  "copyPassword": {
+    "message": "Copy Password"
+  },
+  "length": {
+    "message": "Length"
+  },
+  "close": {
+    "message": "Close"
+  },
+  "minNumbers": {
+    "message": "Minimum Numbers"
+  },
+  "minSpecial": {
+    "message": "Minimum Special",
+    "description": "Minimum Special Characters"
+  },
+  "ambiguous": {
+    "message": "Avoid Ambiguous Characters"
   }
 }

src/scss/base.scss

@@ -22,6 +22,7 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
     font-family: $font-family-sans-serif;
+    color: $text-color;
     margin: 0;
     padding: 0;
 }

src/scss/box.scss

@@ -1,18 +1,7 @@
 @import "variables.scss";
 
 .box {
-    min-width: 400px;
-    max-width: 550px;
     width: 100%;
-    margin: 30px auto 0 auto;
-
-    &:first-child {
-        margin-top: 10px;
-    }
-
-    &:last-child {
-        margin-bottom: 30px;
-    }
 
     .box-header {
         margin: 0 10px 5px 10px;
@@ -99,17 +88,48 @@
             }
 
             &.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
+                display: flex;
+                align-items: center;
+
                 label, .row-label {
                     font-size: $font-size-base;
                     color: $text-color;
                     display: inline;
                     width: initial;
                     margin-bottom: 0;
-                    float: left;
                 }
 
-                input.row-label {
+                > span {
-                    width: calc(100% - 40px);
+                    color: $text-muted;
+                }
+
+                > input {
+                    margin: 0 0 0 auto;
+                    padding: 0;
+                }
+
+                > * {
+                    margin-right: 15px;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+
+            &.box-content-row-input {
+                label {
+                    white-space: nowrap;
+                }
+
+                input {
+                    text-align: right;
+                }
+            }
+
+            &.box-content-row-slider {
+                input {
+                    height: 10px;
                 }
             }
 
@@ -183,6 +203,11 @@
                 margin-top: 2px;
             }
         }
+
+        &.condensed .box-content-row, .box-content-row.condensed {
+            padding-top: 5px;
+            padding-bottom: 5px;
+        }
     }
 
     .box-footer {

src/scss/misc.scss

@@ -1,5 +1,13 @@
 @import "variables.scss";
 
+.text-primary {
+    color: $brand-primary !important;
+}
+
+.text-muted {
+    color: $text-muted !important;
+}
+
 .monospaced {
     font-family: $font-family-monospace;
 }
@@ -69,3 +77,14 @@
         }
     }
 }
+
+.password-block {
+    font-size: $font-size-large;
+    word-break: break-all;
+    font-family: $font-family-monospace;
+    text-align: center;
+
+    .modal-body & {
+        margin-top: 10px;
+    }
+}

src/scss/modal.scss

@@ -13,14 +13,14 @@ $zindex-modal-backdrop: 1040 !default;
 $zindex-modal: 1050 !default;
 
 // Padding applied to the modal body
-$modal-inner-padding: 1rem !default;
+$modal-inner-padding: 10px !default;
 
 $modal-dialog-margin: .5rem !default;
 $modal-dialog-margin-y-sm-up: 1.75rem !default;
 
 $modal-title-line-height: $line-height-base !default;
 
-$modal-content-bg: $white !default;
+$modal-content-bg: $background-color-alt !default;
 $modal-content-border-color: rgba($black, .2) !default;
 $modal-content-border-width: 1px !default;
 $modal-content-box-shadow-xs: none;
@@ -32,7 +32,7 @@ $modal-header-border-color: $border-color-dark !default;
 $modal-footer-border-color: $modal-header-border-color !default;
 $modal-header-border-width: $modal-content-border-width !default;
 $modal-footer-border-width: $modal-header-border-width !default;
-$modal-header-padding: 1rem !default;
+$modal-header-padding: 12px !default;
 
 $modal-lg: 800px !default;
 $modal-md: 500px !default;
@@ -194,15 +194,25 @@ $close-text-shadow: 0 1px 0 $white !default;
     display: flex;
     align-items: flex-start; // so the close btn always stays on the upper right corner
     justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
-    padding: $modal-header-padding;
+    padding: $modal-header-padding $modal-inner-padding;
     border-bottom: $modal-header-border-width solid $modal-header-border-color;
     //@include border-top-radius($border-radius-lg);
-    border-radius: $border-radius-lg;
 
     .close {
-        padding: $modal-header-padding;
+        padding: $modal-header-padding $modal-inner-padding;
         // auto on the left force icon to the right even when there is no .modal-title
-        margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
+        margin: (-$modal-header-padding) (-$modal-inner-padding) (-$modal-header-padding) auto;
+    }
+
+    h5 {
+        font-size: $font-size-base;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+
+        .fa {
+            margin-right: 5px;
+        }
     }
 }
 
@@ -230,12 +240,17 @@ $close-text-shadow: 0 1px 0 $white !default;
     padding: $modal-inner-padding;
     border-top: $modal-footer-border-width solid $modal-footer-border-color;
     // Easily place margin between footer elements
-    > :not(:first-child) {
+    button {
-        margin-left: .25rem;
+        margin-right: 10px;
+
+        &:last-child {
+            margin-right: 0;
+        }
     }
 
-    > :not(:last-child) {
+    .right {
-        margin-right: .25rem;
+        margin-left: auto;
+        display: flex;
     }
 }
 
@@ -311,3 +326,13 @@ button.close {
     -webkit-appearance: none;
 }
 // stylelint-enable
+
+// box
+
+.modal-content .box {
+    margin-top: 20px;
+
+    &:first-child {
+        margin-top: 0;
+    }
+}

src/scss/vault.scss

@@ -112,6 +112,19 @@
         .inner-content {
             min-width: 400px;
         }
+
+        .box {
+            max-width: 550px;
+            margin: 30px auto 0 auto;
+
+            &:first-child {
+                margin-top: 10px;
+            }
+
+            &:last-child {
+                margin-bottom: 30px;
+            }
+        }
     }
 
     #groupings, #items, #details {
@@ -262,13 +275,14 @@
         button {
             margin-right: 10px;
 
-            &.right {
-                margin-left: auto;
-            }
-
             &:last-child {
                 margin-right: 0;
             }
         }
+
+        .right {
+            margin-left: auto;
+            display: flex;
+        }
     }
 }