From 059df9c45dc03d59d45601a6595efe518e01ab95 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Thu, 7 Jun 2018 17:12:11 -0400 Subject: [PATCH] various vault functionality --- jslib | 2 +- locales/en/messages.json | 64 +++++++ src/app/vault/add-edit.component.html | 166 +++++++++++++------ src/app/vault/add-edit.component.ts | 25 +++ src/app/vault/ciphers.component.html | 42 +++-- src/app/vault/ciphers.component.ts | 10 ++ src/app/vault/folder-add-edit.component.html | 15 +- src/app/vault/groupings.component.html | 28 ++-- src/app/vault/vault.component.html | 49 +++++- src/scss/styles.scss | 163 ++++++++++++++++-- src/services/webPlatformUtils.service.ts | 115 +++++-------- 11 files changed, 501 insertions(+), 178 deletions(-) diff --git a/jslib b/jslib index c59bca05bb3..8211e19db02 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit c59bca05bb37395dbbc05340f795f1ad6fd906c5 +Subproject commit 8211e19db02a350606a970b828dbb16bc83788bb diff --git a/locales/en/messages.json b/locales/en/messages.json index fd2a909f228..82a1f2cdcf1 100644 --- a/locales/en/messages.json +++ b/locales/en/messages.json @@ -224,6 +224,9 @@ "favorite": { "message": "Favorite" }, + "unfavorite": { + "message": "Unfavorite" + }, "edit": { "message": "Edit" }, @@ -321,5 +324,66 @@ }, "other": { "message": "Other" + }, + "share": { + "message": "Share" + }, + "valueCopied": { + "message": "$VALUE$ copied", + "description": "Value has been copied to the clipboard.", + "placeholders": { + "value": { + "content": "$1", + "example": "Password" + } + } + }, + "copyValue": { + "message": "Copy Value", + "description": "Copy value to clipboard" + }, + "copyPassword": { + "message": "Copy Password", + "description": "Copy password to clipboard" + }, + "copyUsername": { + "message": "Copy Username", + "description": "Copy username to clipboard" + }, + "copyNumber": { + "message": "Copy Number", + "description": "Copy credit card number" + }, + "copySecurityCode": { + "message": "Copy Security Code", + "description": "Copy credit card security code (CVV)" + }, + "copyUri": { + "message": "Copy URI", + "description": "Copy URI to clipboard" + }, + "myVault": { + "message": "My Vault" + }, + "shareSelected": { + "message": "Share Selected" + }, + "deleteSelected": { + "message": "Delete Selected" + }, + "moveSelected": { + "message": "Move Selected" + }, + "selectAll": { + "message": "Select All" + }, + "unselectAll": { + "message": "Unselect All" + }, + "value": { + "message": "Value" + }, + "launch": { + "message": "Launch" } } diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html index fe3ed981bbd..85c54e76703 100644 --- a/src/app/vault/add-edit.component.html +++ b/src/app/vault/add-edit.component.html @@ -1,7 +1,12 @@
-
{{title}}
+
+

{{title}}

+ +
@@ -24,28 +29,45 @@
-
+
- +
+ +
+ +
+
- +
+ +
+ + + + + + + +
+
- - -
@@ -59,11 +81,22 @@
-
+
- +
+ +
+ + +
+
-
+
@@ -72,18 +105,19 @@
-
- -
+ + {{'newUri' | i18n}} + + -
+
@@ -99,7 +133,15 @@
- +
+ +
+ +
+
@@ -115,13 +157,20 @@
- +
+ +
+ +
+
-
- + -
+
@@ -214,66 +263,79 @@
-
- +
- -
- - -
-

{{'customFields' | i18n}}

+

{{'customFields' | i18n}}

-
+
-
+
- +
+ +
+ +
+
- +
-
- -
- - + + {{'newCustomField' | i18n}} + +
+
+ + +
- - -
- + diff --git a/src/app/vault/add-edit.component.ts b/src/app/vault/add-edit.component.ts index 6da6dc06709..60ef944ef02 100644 --- a/src/app/vault/add-edit.component.ts +++ b/src/app/vault/add-edit.component.ts @@ -14,6 +14,7 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; import { StateService } from 'jslib/abstractions/state.service'; import { AddEditComponent as BaseAddEditComponent } from 'jslib/angular/components/add-edit.component'; +import { LoginUriView } from 'jslib/models/view/loginUriView'; @Component({ selector: 'app-vault-add-edit', @@ -31,4 +32,28 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit { async ngOnInit() { await super.load(); } + + toggleFavorite() { + this.cipher.favorite = !this.cipher.favorite; + } + + launch(uri: LoginUriView) { + if (!uri.canLaunch) { + return; + } + + this.analytics.eventTrack.next({ action: 'Launched Login URI' }); + this.platformUtilsService.launchUri(uri.uri); + } + + copy(value: string, typeI18nKey: string, aType: string) { + if (value == null) { + return; + } + + this.analytics.eventTrack.next({ action: 'Copied ' + aType }); + this.platformUtilsService.copyToClipboard(value, { doc: window.document }); + this.toasterService.popAsync('info', null, + this.i18nService.t('valueCopied', this.i18nService.t(typeI18nKey))); + } } diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html index 5e63d4e79d4..806c7f82c23 100644 --- a/src/app/vault/ciphers.component.html +++ b/src/app/vault/ciphers.component.html @@ -1,18 +1,19 @@ - +
- - - diff --git a/src/app/vault/ciphers.component.ts b/src/app/vault/ciphers.component.ts index 83bf1eef903..fa6c3efd837 100644 --- a/src/app/vault/ciphers.component.ts +++ b/src/app/vault/ciphers.component.ts @@ -4,12 +4,22 @@ import { CipherService } from 'jslib/abstractions/cipher.service'; import { CiphersComponent as BaseCiphersComponent } from 'jslib/angular/components/ciphers.component'; +import { CipherType } from 'jslib/enums/cipherType'; + +import { CipherView } from 'jslib/models/view/cipherView'; + @Component({ selector: 'app-vault-ciphers', templateUrl: 'ciphers.component.html', }) export class CiphersComponent extends BaseCiphersComponent { + cipherType = CipherType; + constructor(cipherService: CipherService) { super(cipherService); } + + checkCipher(c: CipherView) { + (c as any).checked = !(c as any).checked; + } } diff --git a/src/app/vault/folder-add-edit.component.html b/src/app/vault/folder-add-edit.component.html index 3f2565d9b3c..9f9f7402f8d 100644 --- a/src/app/vault/folder-add-edit.component.html +++ b/src/app/vault/folder-add-edit.component.html @@ -2,21 +2,24 @@
- {{title}} +

{{title}}

+
- - -
- +
+ diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html index ad59da5c42f..84adf2c9fcb 100644 --- a/src/app/vault/groupings.component.html +++ b/src/app/vault/groupings.component.html @@ -1,4 +1,4 @@ -
+
Filters
@@ -40,31 +40,31 @@ -

+

+ +

-

+

{{'folders' | i18n}} - +

-
    -
  • +

    {{'collections' | i18n}}

    -
    diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html index 69a1bf56437..2f9b2a5183f 100644 --- a/src/app/vault/vault.component.html +++ b/src/app/vault/vault.component.html @@ -36,10 +36,43 @@
- -

My Vault

+
+

{{'myVault' | i18n}}

+
+
+ +
+ + + {{'moveSelected' | i18n}} + + + + {{'shareSelected' | i18n}} + + + + {{'deleteSelected' | i18n}} + +
+ + + {{'selectAll' | i18n}} + + + + {{'unselectAll' | i18n}} + +
+
+ +
+
@@ -49,6 +82,14 @@ Some callout
+
+
+ Organizations +
+
+ Your organizations. +
+
diff --git a/src/scss/styles.scss b/src/scss/styles.scss index a5f958c76b9..5b0d06c22f5 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -1,10 +1,13 @@ -$theme-colors: ( - "primary": #3c8dbc, - "primary-accent": #286090, - "danger": #dd4b39, - "success": #00a65a, - "info": #555555, - "warning": #bf7e16 +$primary: #3c8dbc; +$primary-accent: #286090; +$secondary: #ced4da; +$success: #00a65a; +$info: #555555; +$warning: #bf7e16; +$danger: #dd4b39; + +$theme-colors: ( + "primary-accent": $primary-accent ); $body-bg: #ffffff; @@ -13,7 +16,7 @@ $body-color: #333333; $font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica, Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'; -$h1-font-size: 2rem; +$h1-font-size: 1.7rem; $h2-font-size: 1.3rem; $h3-font-size: 1rem; $h4-font-size: 1rem; @@ -29,8 +32,11 @@ $list-group-active-color: $body-color; $list-group-active-bg: #ffffff; $list-group-active-border-color: rgba(#000000, .125); -$dropdown-link-hover-color: #ffffff; -$dropdown-link-hover-bg: #3c8dbc; +$dropdown-link-color: $body-color; +$dropdown-link-hover-bg: rgba(#000000, .06); +$dropdown-link-active-color: $dropdown-link-color; +$dropdown-link-active-bg: rgba(#000000, .1); +$dropdown-item-padding-x: 1rem; $navbar-brand-font-size: 35px; $navbar-brand-height: 35px; @@ -38,6 +44,12 @@ $navbar-brand-padding-y: 0; $navbar-dark-color: rgba(#ffffff, .7); $navbar-dark-hover-color: rgba(#ffffff, .9); +$input-bg: #fafafa; +$input-focus-bg: #ffffff; +$input-disabled-bg: #e0e0e0; + +$table-hover-bg: rgba(#000000, .03); + @import "../../node_modules/bootstrap/scss/bootstrap"; html { @@ -48,6 +60,16 @@ body { min-width: 1010px; } +.page-header { + border-bottom: 1px solid $border-color; + padding-bottom: 0.6rem; + margin-bottom: 0.5rem; + + h1, h2, h3, h4 { + margin: 0; + } +} + .navbar { padding-left: 0; padding-right: 0; @@ -81,10 +103,51 @@ body { padding-left: calc(#{$list-group-item-padding-x} - 3px); } +.card-header, .modal-header { + font-weight: bold; + text-transform: uppercase; + + small { + font-weight: normal; + text-transform: none; + } +} + +.modal-body { + h3 { + font-weight: normal; + text-transform: uppercase; + color: $text-muted; + } +} + +.modal-footer { + justify-content: initial; + background-color: $input-bg; +} + +form label { + font-weight: bold; +} + +.btn[class*="btn-outline-"]:not(:hover) { + background-color: #ffffff; +} + +.btn-outline-secondary { + color: $text-muted; + + &:hover { + color: $body-color; + } +} + +app-vault-icon .fa { + color: $text-muted; +} + app-vault { .table { - line-height: 1; - tr:first-child { td { border: none; @@ -101,17 +164,16 @@ app-vault { vertical-align: middle; small { - display: block; color: $text-muted; } } td:first-child { - width: 25px; + width: 35px; } td:nth-child(2) { - width: 25px; + width: 45px; text-align: center; img { @@ -120,9 +182,17 @@ app-vault { } } + td:nth-child(3) { + line-height: 1; + } + td:last-child { - width: 65px; + width: 72px; text-align: right; + + .btn { + line-height: 1; + } .dropdown:not(.show) button { visibility: hidden; @@ -130,3 +200,64 @@ app-vault { } } } + +app-vault-groupings { + .card { + #search { + margin-bottom: 1rem; + } + + h3 { + font-weight: normal; + text-transform: uppercase; + color: $text-muted; + } + + ul:last-child { + margin-bottom: 0; + } + + a { + color: $body-color; + + &:hover { + &.text-muted { + color: $body-color !important; + } + } + } + + ul.fa-ul { + margin-left: 1.9em; + + .fa-li { + top: 4px; + } + + &.carets { + margin-left: 1.1em; + + .fa-li { + left: -24px; + } + } + } + + .show-active { + display: none; + } + + li.active { + .show-active { + display: inline; + } + } + + li.active { + a:first-child { + font-weight: bold; + color: theme-color("primary"); + } + } + } +} diff --git a/src/services/webPlatformUtils.service.ts b/src/services/webPlatformUtils.service.ts index 9f9c833ce14..b2c65b89318 100644 --- a/src/services/webPlatformUtils.service.ts +++ b/src/services/webPlatformUtils.service.ts @@ -4,72 +4,49 @@ import { MessagingService } from 'jslib/abstractions/messaging.service'; import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; import { AnalyticsIds } from 'jslib/misc/analytics'; - -const DialogPromiseExpiration = 600000; // 10 minutes +import { Utils } from 'jslib/misc/utils'; export class WebPlatformUtilsService implements PlatformUtilsService { identityClientId: string = 'web'; - private showDialogResolves = new Map void, date: Date }>(); - private deviceCache: DeviceType = null; - private analyticsIdCache: string = null; + private browserCache: string = null; constructor(private messagingService: MessagingService) { } getDevice(): DeviceType { - if (this.deviceCache) { - return this.deviceCache; - } - - if (navigator.userAgent.indexOf(' Firefox/') !== -1 || navigator.userAgent.indexOf(' Gecko/') !== -1) { - this.deviceCache = DeviceType.Firefox; - } else if (navigator.userAgent.indexOf(' OPR/') >= 0) { - this.deviceCache = DeviceType.Opera; - } else if (navigator.userAgent.indexOf(' Edge/') !== -1) { - this.deviceCache = DeviceType.Edge; - } else if (navigator.userAgent.indexOf(' Vivaldi/') !== -1) { - this.deviceCache = DeviceType.Vivaldi; - } else if (navigator.userAgent.indexOf(' Safari/') !== -1 && navigator.userAgent.indexOf('Chrome') === -1) { - this.deviceCache = DeviceType.Safari; - } else if ((window as any).chrome && navigator.userAgent.indexOf(' Chrome/') !== -1) { - this.deviceCache = DeviceType.Chrome; - } else if (navigator.userAgent.indexOf(' Trident/') !== -1) { - this.deviceCache = DeviceType.IE; - } - - return this.deviceCache; + return DeviceType.Web; } getDeviceString(): string { - return DeviceType[this.getDevice()].toLowerCase(); + return 'Web'; } isFirefox(): boolean { - return this.getDevice() === DeviceType.Firefox; + return this.getBrowserType() === 'firefox'; } isChrome(): boolean { - return this.getDevice() === DeviceType.Chrome; + return this.getBrowserType() === 'chrome'; } isEdge(): boolean { - return this.getDevice() === DeviceType.Edge; - } - - isIE(): boolean { - return this.getDevice() === DeviceType.IE; + return this.getBrowserType() === 'edge'; } isOpera(): boolean { - return this.getDevice() === DeviceType.Opera; + return this.getBrowserType() === 'opera'; } isVivaldi(): boolean { - return this.getDevice() === DeviceType.Vivaldi; + return this.getBrowserType() === 'vivaldi'; } isSafari(): boolean { - return this.getDevice() === DeviceType.Safari; + return this.getBrowserType() === 'safari'; + } + + isIE(): boolean { + return this.getBrowserType() === 'ie'; } isMacAppStore(): boolean { @@ -77,16 +54,11 @@ export class WebPlatformUtilsService implements PlatformUtilsService { } analyticsId(): string { - if (this.analyticsIdCache) { - return this.analyticsIdCache; - } - - this.analyticsIdCache = (AnalyticsIds as any)[this.getDevice()]; - return this.analyticsIdCache; + return 'UA-81915606-3'; } getDomain(uriString: string): string { - return uriString; + return Utils.getHostname(uriString); } isViewOpen(): boolean { @@ -94,7 +66,11 @@ export class WebPlatformUtilsService implements PlatformUtilsService { } launchUri(uri: string, options?: any): void { - // + const a = document.createElement('a'); + a.href = uri; + a.target = '_blank'; + a.rel = 'noreferrer noopener'; + a.click(); } saveFile(win: Window, blobData: any, blobOptions: any, fileName: string): void { @@ -122,18 +98,7 @@ export class WebPlatformUtilsService implements PlatformUtilsService { } showDialog(text: string, title?: string, confirmText?: string, cancelText?: string, type?: string) { - const dialogId = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER); - this.messagingService.send('showDialog', { - text: text, - title: title, - confirmText: confirmText, - cancelText: cancelText, - type: type, - dialogId: dialogId, - }); - return new Promise((resolve) => { - this.showDialogResolves.set(dialogId, { resolve: resolve, date: new Date() }); - }); + return Promise.resolve(false); } isDev(): boolean { @@ -165,23 +130,27 @@ export class WebPlatformUtilsService implements PlatformUtilsService { } } - resolveDialogPromise(dialogId: number, confirmed: boolean) { - if (this.showDialogResolves.has(dialogId)) { - const resolveObj = this.showDialogResolves.get(dialogId); - resolveObj.resolve(confirmed); - this.showDialogResolves.delete(dialogId); + private getBrowserType(): string { + if (this.browserCache != null) { + return this.browserCache; } - // Clean up old promises - const deleteIds: number[] = []; - this.showDialogResolves.forEach((val, key) => { - const age = new Date().getTime() - val.date.getTime(); - if (age > DialogPromiseExpiration) { - deleteIds.push(key); - } - }); - deleteIds.forEach((id) => { - this.showDialogResolves.delete(id); - }); + if (navigator.userAgent.indexOf(' Firefox/') !== -1 || navigator.userAgent.indexOf(' Gecko/') !== -1) { + this.browserCache = 'firefox'; + } else if (navigator.userAgent.indexOf(' OPR/') >= 0) { + this.browserCache = 'opera'; + } else if (navigator.userAgent.indexOf(' Edge/') !== -1) { + this.browserCache = 'edge'; + } else if (navigator.userAgent.indexOf(' Vivaldi/') !== -1) { + this.browserCache = 'vivaldi'; + } else if (navigator.userAgent.indexOf(' Safari/') !== -1 && navigator.userAgent.indexOf('Chrome') === -1) { + this.browserCache = 'safari'; + } else if ((window as any).chrome && navigator.userAgent.indexOf(' Chrome/') !== -1) { + this.browserCache = 'chrome'; + } else if (navigator.userAgent.indexOf(' Trident/') !== -1) { + this.browserCache = 'ie'; + } + + return this.browserCache; } }
- + + + - {{c.name}} - - - {{c.subTitle}} + + {{c.name}} + + +
+ {{c.subTitle}}
@@ -21,9 +22,26 @@
- Action - Another action - Something else here + + + {{'copyPassword' | i18n}} + + + + {{'attachments' | i18n}} + + + + {{'share' | i18n}} + + + + {{'collections' | i18n}} + + + + {{'delete' | i18n}} +