password generator

2024-11-23 11:56:00 +01:00 · 2018-01-29 16:13:37 -05:00 · 2018-01-29 16:13:37 -05:00 · ce84e8e428
commit ce84e8e428
parent 5914240838
11 changed files with 276 additions and 54 deletions
--- a/src/app/services/services.module.ts
+++ b/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,
--- a/src/app/vault/add-edit.component.html
+++ b/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>
--- a/src/app/vault/password-generator.component.html
+++ b/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>
--- a/src/app/vault/password-generator.component.ts
+++ b/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);
    }
 }
--- a/src/app/vault/vault.component.ts
+++ b/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() {
--- a/src/locales/en/messages.json
+++ b/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"
  }
 }
--- a/src/scss/base.scss
+++ b/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;
 }
--- a/src/scss/box.scss
+++ b/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 {
-                    width: calc(100% - 40px);
+                > span {
+                    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 {
--- a/src/scss/misc.scss
+++ b/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;
+    }
+}
--- a/src/scss/modal.scss
+++ b/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) {
-        margin-left: .25rem;
+    button {
+        margin-right: 10px;
+
+        &:last-child {
+            margin-right: 0;
+        }
    }

-    > :not(:last-child) {
-        margin-right: .25rem;
+    .right {
+        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;
+    }
+}
--- a/src/scss/vault.scss
+++ b/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;
+        }
    }
 }