From ce84e8e42845b0aed782c599280262399287f82d Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Mon, 29 Jan 2018 16:13:37 -0500 Subject: [PATCH] password generator --- src/app/services/services.module.ts | 1 + src/app/vault/add-edit.component.html | 8 +- .../vault/password-generator.component.html | 76 +++++++++++++++++-- src/app/vault/password-generator.component.ts | 75 +++++++++++++++--- src/app/vault/vault.component.ts | 6 +- src/locales/en/messages.json | 22 ++++++ src/scss/base.scss | 1 + src/scss/box.scss | 53 +++++++++---- src/scss/misc.scss | 19 +++++ src/scss/modal.scss | 47 +++++++++--- src/scss/vault.scss | 22 +++++- 11 files changed, 276 insertions(+), 54 deletions(-) diff --git a/src/app/services/services.module.ts b/src/app/services/services.module.ts index 3a60bb46aa1..defea6760e7 100644 --- 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, diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html index 2e28076e1d1..648a2b919c4 100644 --- a/src/app/vault/add-edit.component.html +++ b/src/app/vault/add-edit.component.html @@ -237,7 +237,9 @@ - +
+ +
diff --git a/src/app/vault/password-generator.component.html b/src/app/vault/password-generator.component.html index 2450c4b7996..7f15cda9ad6 100644 --- a/src/app/vault/password-generator.component.html +++ b/src/app/vault/password-generator.component.html @@ -1,15 +1,77 @@
-
+
-
- Password Generator - -
- Some content +
{{password}}
+
+
+ + {{'regeneratePassword' | i18n}} + + + {{'copyPassword' | i18n}} + +
+
+
+
+ Options +
+
+
+ + {{options.length}} + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
- + +
diff --git a/src/app/vault/password-generator.component.ts b/src/app/vault/password-generator.component.ts index 7c6a6c6c695..7aff47ee78f 100644 --- 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(); + @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); } } diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts index d519c4e3c77..07256ae5780 100644 --- 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, this.passwordGeneratorModal); - childComponent.in = 'hello'; - childComponent.out.subscribe((i: string) => { - console.log(i); - //modal.close(); - }); + childComponent.showSelect = true; } private clearFilters() { diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index e7df3b25be1..8461ee5fc3e 100644 --- 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" } } diff --git a/src/scss/base.scss b/src/scss/base.scss index 2d86b6e6dd9..88b55e7730d 100644 --- 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; } diff --git a/src/scss/box.scss b/src/scss/box.scss index bb03e058fda..92bfbbe1f69 100644 --- 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 { diff --git a/src/scss/misc.scss b/src/scss/misc.scss index 7e738db2840..2d81a682b4a 100644 --- 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; + } +} diff --git a/src/scss/modal.scss b/src/scss/modal.scss index dc66997c00e..fe418945ee4 100644 --- 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; + } +} diff --git a/src/scss/vault.scss b/src/scss/vault.scss index 86baab633ce..dffd51286c5 100644 --- 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; + } } }