From a1f7e07f0941a77785cff806eac403060893b287 Mon Sep 17 00:00:00 2001 From: Oscar Hinton Date: Fri, 27 Aug 2021 15:27:22 +0200 Subject: [PATCH] Add password show/hide to reprompt (#1902) Co-authored-by: Addison Beck --- jslib | 2 +- src/popup/accounts/environment.component.html | 2 +- src/popup/accounts/two-factor.component.ts | 2 +- src/popup/app.component.ts | 28 -- src/popup/app.module.ts | 2 + .../password-reprompt.component.html | 38 ++ .../components/password-reprompt.component.ts | 8 + src/popup/scss/modal.scss | 351 ++++++++++++++++++ src/popup/scss/popup.scss | 1 + .../services/password-reprompt.service.ts | 11 + src/popup/services/services.module.ts | 8 +- src/services/browserPlatformUtils.service.ts | 27 -- 12 files changed, 418 insertions(+), 62 deletions(-) create mode 100644 src/popup/components/password-reprompt.component.html create mode 100644 src/popup/components/password-reprompt.component.ts create mode 100644 src/popup/scss/modal.scss create mode 100644 src/popup/services/password-reprompt.service.ts diff --git a/jslib b/jslib index 1f0127966e8..daa4f6f9a6d 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit 1f0127966e85aa29f9e50144de9b2a03b00de5d4 +Subproject commit daa4f6f9a6dc84d6cd9a937be6b5392d2cf51eca diff --git a/src/popup/accounts/environment.component.html b/src/popup/accounts/environment.component.html index 5654fdc367c..dbacca585a5 100644 --- a/src/popup/accounts/environment.component.html +++ b/src/popup/accounts/environment.component.html @@ -1,4 +1,4 @@ -
+
{{'close' | i18n}} diff --git a/src/popup/accounts/two-factor.component.ts b/src/popup/accounts/two-factor.component.ts index dd08cd5fbbe..65f210dc627 100644 --- a/src/popup/accounts/two-factor.component.ts +++ b/src/popup/accounts/two-factor.component.ts @@ -53,7 +53,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent { return syncService.fullSync(true).then(async () => { if (await this.userService.getForcePasswordReset()) { this.router.navigate(['update-temp-password']); - }; + } }); }; super.successRoute = '/tabs/vault'; diff --git a/src/popup/app.component.ts b/src/popup/app.component.ts index acc78d54ce7..b9551efb381 100644 --- a/src/popup/app.component.ts +++ b/src/popup/app.component.ts @@ -106,8 +106,6 @@ export class AppComponent implements OnInit { }); } else if (msg.command === 'showDialog') { await this.showDialog(msg); - } else if (msg.command === 'showPasswordDialog') { - await this.showPasswordDialog(msg); } else if (msg.command === 'showToast') { this.ngZone.run(() => { this.showToast(msg); @@ -251,30 +249,4 @@ export class AppComponent implements OnInit { confirmed: confirmed.value, }); } - - private async showPasswordDialog(msg: any) { - const platformUtils = this.platformUtilsService as BrowserPlatformUtilsService; - const result = await Swal.fire({ - heightAuto: false, - titleText: msg.title, - input: 'password', - text: msg.body, - confirmButtonText: this.i18nService.t('ok'), - showCancelButton: true, - cancelButtonText: this.i18nService.t('cancel'), - inputAttributes: { - autocapitalize: 'off', - autocorrect: 'off', - }, - inputValidator: async (value: string): Promise => { - if (await platformUtils.resolvePasswordDialogPromise(msg.dialogId, false, value)) { - return false; - } - - return this.i18nService.t('invalidMasterPassword'); - }, - }); - - platformUtils.resolvePasswordDialogPromise(msg.dialogId, true, null); - } } diff --git a/src/popup/app.module.ts b/src/popup/app.module.ts index 0972131644a..9702c567318 100644 --- a/src/popup/app.module.ts +++ b/src/popup/app.module.ts @@ -72,6 +72,7 @@ import { SearchCiphersPipe } from 'jslib-angular/pipes/search-ciphers.pipe'; import { ActionButtonsComponent } from './components/action-buttons.component'; import { CipherRowComponent } from './components/cipher-row.component'; +import { PasswordRepromptComponent } from './components/password-reprompt.component'; import { PopOutComponent } from './components/pop-out.component'; import { SendListComponent } from './components/send-list.component'; @@ -240,6 +241,7 @@ registerLocaleData(localeZhTw, 'zh-TW'); TwoFactorComponent, UpdateTempPasswordComponent, ViewComponent, + PasswordRepromptComponent, ], entryComponents: [], providers: [ diff --git a/src/popup/components/password-reprompt.component.html b/src/popup/components/password-reprompt.component.html new file mode 100644 index 00000000000..6a5e670dea4 --- /dev/null +++ b/src/popup/components/password-reprompt.component.html @@ -0,0 +1,38 @@ + diff --git a/src/popup/components/password-reprompt.component.ts b/src/popup/components/password-reprompt.component.ts new file mode 100644 index 00000000000..b3204f94222 --- /dev/null +++ b/src/popup/components/password-reprompt.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +import { PasswordRepromptComponent as BasePasswordRepromptComponent } from 'jslib-angular/components/password-reprompt.component'; + +@Component({ + templateUrl: 'password-reprompt.component.html', +}) +export class PasswordRepromptComponent extends BasePasswordRepromptComponent {} diff --git a/src/popup/scss/modal.scss b/src/popup/scss/modal.scss new file mode 100644 index 00000000000..d7ae2fa80c1 --- /dev/null +++ b/src/popup/scss/modal.scss @@ -0,0 +1,351 @@ +@import "variables.scss"; + +$white: white; +$black: black; +$line-height-base: 14px; +$border-radius-lg: $border-radius; + +// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss + +$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default; + +$zindex-modal-backdrop: 1040 !default; +$zindex-modal: 1050 !default; + +// Padding applied to the modal body +$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: $background-color-alt !default; +$modal-content-border-color: rgba($black, .2) !default; +$modal-content-border-width: 1px !default; +$modal-content-box-shadow-xs: none; +$modal-content-box-shadow-sm-up: none; + +$modal-backdrop-bg: $black !default; +$modal-backdrop-opacity: .5 !default; +$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: 12px !default; + +$modal-lg: 800px !default; +$modal-md: 500px !default; +$modal-sm: 300px !default; + +$modal-transition: transform .3s ease-out !default; + +$close-font-size: $font-size-base * 1.5 !default; +$close-font-weight: bold !default; +$close-color: $black !default; +$close-text-shadow: 0 1px 0 $white !default; + +// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss + +@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($name, $breakpoints); + + @if $min { + @media (min-width: $min) { + @content; + } + } + @else { + @content; + } +} + +@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { + $min: map-get($breakpoints, $name); + @return if($min != 0, $min, null); +} + +// Custom Added CSS animations + +@keyframes modalshow { + 0% { + opacity: 0; + transform: translate(0, -25%); + } + + 100% { + opacity: 1; + transform: translate(0, 0); + } +} + +@keyframes backdropshow { + 0% { + opacity: 0; + } + + 100% { + opacity: $modal-backdrop-opacity; + } +} + +// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_modal.scss + +// .modal-open - body class for killing the scroll +// .modal - container to scroll within +// .modal-dialog - positioning shell for the actual modal +// .modal-content - actual modal w/ bg and corners and stuff + + +// Kill the scroll on the body +.modal-open { + overflow: hidden; +} + +// Container that the modal scrolls within +.modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-modal; + //display: none; + overflow: hidden; + // Prevent Chrome on Windows from adding a focus outline. For details, see + // https://github.com/twbs/bootstrap/pull/10951. + outline: 0; + // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a + // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342 + // See also https://github.com/twbs/bootstrap/issues/17695 + .modal-open & { + overflow-x: hidden; + overflow-y: auto; + } +} + +// Shell div to position the modal with bottom padding +.modal-dialog { + position: relative; + width: auto; + margin: $modal-dialog-margin; + // allow clicks to pass through for custom click handling to close modal + pointer-events: none; + // When fading in the modal, animate it to slide down + .modal.fade & { + //@include transition($modal-transition); + //transform: translate(0, -25%); + animation: modalshow 0.3s ease-in; + } + //.modal.show & { + // transform: translate(0, 0); + //} + transform: translate(0, 0); +} + +.modal-dialog-centered { + display: flex; + align-items: center; + min-height: calc(100% - (#{$modal-dialog-margin} * 2)); +} + +// Actual modal +.modal-content { + position: relative; + display: flex; + flex-direction: column; + width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` + // counteract the pointer-events: none; in the .modal-dialog + pointer-events: auto; + //background-color: $modal-content-bg; + background-clip: padding-box; + border: $modal-content-border-width solid $modal-content-border-color; + //@include border-radius($border-radius-lg); + //@include box-shadow($modal-content-box-shadow-xs); + border-radius: $border-radius-lg; + box-shadow: $modal-content-box-shadow-xs; + // Remove focus outline from opened modal + outline: 0; + + @include themify($themes) { + background-color: themed('backgroundColorAlt'); + } +} + +// Modal background +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-modal-backdrop; + background-color: $modal-backdrop-bg; + // Fade for backdrop + &.fade { + //opacity: 0; + animation: backdropshow 0.1s ease-in; + } + //&.show { + // opacity: $modal-backdrop-opacity; + //} + opacity: $modal-backdrop-opacity; +} + +// Modal header +// Top section of the modal w/ title and dismiss +.modal-header { + 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 $modal-inner-padding; + border-bottom: $modal-header-border-width solid $modal-header-border-color; + //@include border-top-radius($border-radius-lg); + + @include themify($themes) { + border-bottom-color: themed('borderColor'); + } + + .close { + 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-inner-padding) (-$modal-header-padding) auto; + } + + h5 { + font-size: $font-size-base; + font-weight: bold; + display: flex; + align-items: center; + + .fa { + margin-right: 5px; + } + } +} + +// Title text within header +.modal-title { + margin-bottom: 0; + line-height: $modal-title-line-height; +} + +// Modal body +// Where all modal content resides (sibling of .modal-header and .modal-footer) +.modal-body { + position: relative; + // Enable `flex-grow: 1` so that the body take up as much space as possible + // when should there be a fixed height on `.modal-dialog`. + flex: 1 1 auto; + padding: $modal-inner-padding; +} + +// Footer (for actions) +.modal-footer { + display: flex; + align-items: center; // vertically center + //justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items + padding: $modal-inner-padding; + border-top: $modal-footer-border-width solid $modal-footer-border-color; + + @include themify($themes) { + border-top-color: themed('borderColor'); + } + + // Easily place margin between footer elements + button { + margin-right: 10px; + + &:last-child { + margin-right: 0; + } + } + + .right { + margin-left: auto; + display: flex; + } +} + +// Measure scrollbar width for padding body during modal show/hide +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +// Scale up the modal +@include media-breakpoint-up(sm) { + // Automatically set modal's width for larger viewports + .modal-dialog { + max-width: $modal-md; + margin: $modal-dialog-margin-y-sm-up auto; + } + + .modal-dialog-centered { + min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2)); + } + + .modal-content { + //@include box-shadow($modal-content-box-shadow-sm-up); + box-shadow: $modal-content-box-shadow-sm-up; + } + + .modal-sm { + max-width: $modal-sm; + } +} + +@include media-breakpoint-up(lg) { + .modal-lg { + max-width: $modal-lg; + } +} + +// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_close.scss + +.close { + float: right; + font-size: $close-font-size; + font-weight: $close-font-weight; + line-height: 1; + color: $close-color; + text-shadow: $close-text-shadow; + opacity: .5; + + &:hover, &:focus { + color: $close-color; + text-decoration: none; + opacity: .75; + } + // Opinionated: add "hand" cursor to non-disabled .close elements + &:not(:disabled):not(.disabled) { + cursor: pointer; + } +} + +// Additional properties for button version +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type +button.close { + padding: 0; + background-color: transparent; + border: 0; + -webkit-appearance: none; +} +// stylelint-enable + +// box + +.modal-content .box { + margin-top: 20px; + + &:first-child { + margin-top: 0; + } +} diff --git a/src/popup/scss/popup.scss b/src/popup/scss/popup.scss index fe77d09b0e1..ddeab56523d 100644 --- a/src/popup/scss/popup.scss +++ b/src/popup/scss/popup.scss @@ -4,6 +4,7 @@ @import "box.scss"; @import "buttons.scss"; @import "misc.scss"; +@import "modal.scss"; @import "plugins.scss"; @import "environment.scss"; @import "pages.scss"; diff --git a/src/popup/services/password-reprompt.service.ts b/src/popup/services/password-reprompt.service.ts new file mode 100644 index 00000000000..d59026e0aa6 --- /dev/null +++ b/src/popup/services/password-reprompt.service.ts @@ -0,0 +1,11 @@ + +import { Injectable } from '@angular/core'; + +import { PasswordRepromptService as BasePasswordRepromptService } from 'jslib-angular/services/passwordReprompt.service'; + +import { PasswordRepromptComponent } from '../components/password-reprompt.component'; + +@Injectable() +export class PasswordRepromptService extends BasePasswordRepromptService { + component = PasswordRepromptComponent; +} diff --git a/src/popup/services/services.module.ts b/src/popup/services/services.module.ts index 707c6a1ea82..4c6967d1547 100644 --- a/src/popup/services/services.module.ts +++ b/src/popup/services/services.module.ts @@ -9,10 +9,12 @@ import { ToasterModule } from 'angular2-toaster'; import { DebounceNavigationService } from './debounceNavigationService'; import { LaunchGuardService } from './launch-guard.service'; import { LockGuardService } from './lock-guard.service'; +import { PasswordRepromptService } from './password-reprompt.service'; import { UnauthGuardService } from './unauth-guard.service'; import { AuthGuardService } from 'jslib-angular/services/auth-guard.service'; import { BroadcasterService } from 'jslib-angular/services/broadcaster.service'; +import { ModalService } from 'jslib-angular/services/modal.service'; import { ValidationService } from 'jslib-angular/services/validation.service'; import { BrowserApi } from '../../browser/browserApi'; @@ -48,7 +50,6 @@ import { TokenService } from 'jslib-common/abstractions/token.service'; import { TotpService } from 'jslib-common/abstractions/totp.service'; import { UserService } from 'jslib-common/abstractions/user.service'; import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service'; -import { PasswordRepromptService } from 'jslib-common/services/passwordReprompt.service'; import { AutofillService } from '../../services/abstractions/autofill.service'; import BrowserMessagingService from '../../services/browserMessaging.service'; @@ -76,8 +77,6 @@ const messagingService = new BrowserMessagingService(); const searchService = isPrivateMode ? null : new PopupSearchService(getBgService('searchService')(), getBgService('cipherService')(), getBgService('consoleLogService')(), getBgService('i18nService')()); -const passwordRepromptService = isPrivateMode ? null : new PasswordRepromptService(getBgService('i18nService')(), - getBgService('cryptoService')(), getBgService('platformUtilsService')()); export function initFactory(platformUtilsService: PlatformUtilsService, i18nService: I18nService, storageService: StorageService, popupUtilsService: PopupUtilsService): Function { @@ -126,6 +125,7 @@ export function initFactory(platformUtilsService: PlatformUtilsService, i18nServ DebounceNavigationService, PopupUtilsService, BroadcasterService, + ModalService, { provide: MessagingService, useValue: messagingService }, { provide: AuthServiceAbstraction, useFactory: getBgService('authService'), deps: [] }, { provide: StateServiceAbstraction, useValue: stateService }, @@ -188,7 +188,7 @@ export function initFactory(platformUtilsService: PlatformUtilsService, i18nServ useFactory: () => isPrivateMode ? null : getBgService('i18nService')().translationLocale, deps: [], }, - { provide: PasswordRepromptServiceAbstraction, useValue: passwordRepromptService }, + { provide: PasswordRepromptServiceAbstraction, useClass: PasswordRepromptService }, ], }) export class ServicesModule { diff --git a/src/services/browserPlatformUtils.service.ts b/src/services/browserPlatformUtils.service.ts index d33d6e2d730..509a9c9f71e 100644 --- a/src/services/browserPlatformUtils.service.ts +++ b/src/services/browserPlatformUtils.service.ts @@ -150,33 +150,6 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService }); } - async showPasswordDialog(title: string, body: string, passwordValidation: (value: string) => Promise) { - const dialogId = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER); - - this.messagingService.send('showPasswordDialog', { - title: title, - body: body, - dialogId: dialogId, - }); - - return new Promise(resolve => { - this.passwordDialogResolves.set(dialogId, { - tryResolve: async (canceled: boolean, password: string) => { - if (canceled) { - resolve(false); - return false; - } - - if (await passwordValidation(password)) { - resolve(true); - return true; - } - }, - date: new Date(), - }); - }); - } - isDev(): boolean { return process.env.ENV === 'development'; }