Password reprompt (#929)

* Use passwordRepromptService

* Rename passwordPrompt to reprompt. Protect bulk actions

* Change card to hidden, minor refactor.

* Explicit reprompt value check

* Ensure locales are the same on all platforms

* Move showPasswordDialog to platformutils

* Fix sweet alert validation message margin

* Update locale to be the same as browser

src/app/organizations/vault/ciphers.component.ts

@@ -10,6 +10,7 @@ import { ApiService } from 'jslib/abstractions/api.service';
 import { CipherService } from 'jslib/abstractions/cipher.service';
 import { EventService } from 'jslib/abstractions/event.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PasswordRepromptService } from 'jslib/abstractions/passwordReprompt.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SearchService } from 'jslib/abstractions/search.service';
 import { TotpService } from 'jslib/abstractions/totp.service';
@@ -34,9 +35,10 @@ export class CiphersComponent extends BaseCiphersComponent {
 
     constructor(searchService: SearchService, toasterService: ToasterService, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, cipherService: CipherService,
-        private apiService: ApiService, eventService: EventService, totpService: TotpService, userService: UserService) {
+        private apiService: ApiService, eventService: EventService, totpService: TotpService,
+        userService: UserService, passwordRepromptService: PasswordRepromptService) {
         super(searchService, toasterService, i18nService, platformUtilsService, cipherService,
-            eventService, totpService, userService);
+            eventService, totpService, userService, passwordRepromptService);
     }
 
     async load(filter: (cipher: CipherView) => boolean = null) {

src/app/services/services.module.ts

@@ -54,7 +54,6 @@ import { VaultTimeoutService } from 'jslib/services/vaultTimeout.service';
 import { WebCryptoFunctionService } from 'jslib/services/webCryptoFunction.service';
 
 import { ApiService as ApiServiceAbstraction } from 'jslib/abstractions/api.service';
-import { AppIdService as AppIdServiceAbstraction } from 'jslib/abstractions/appId.service';
 import { AuditService as AuditServiceAbstraction } from 'jslib/abstractions/audit.service';
 import { AuthService as AuthServiceAbstraction } from 'jslib/abstractions/auth.service';
 import { CipherService as CipherServiceAbstraction } from 'jslib/abstractions/cipher.service';
@@ -68,12 +67,12 @@ import { FileUploadService as FileUploadServiceAbstraction }  from 'jslib/abstra
 import { FolderService as FolderServiceAbstraction } from 'jslib/abstractions/folder.service';
 import { I18nService as I18nServiceAbstraction } from 'jslib/abstractions/i18n.service';
 import { ImportService as ImportServiceAbstraction } from 'jslib/abstractions/import.service';
-import { LogService as LogServiceAbstraction } from 'jslib/abstractions/log.service';
 import { MessagingService as MessagingServiceAbstraction } from 'jslib/abstractions/messaging.service';
 import { NotificationsService as NotificationsServiceAbstraction } from 'jslib/abstractions/notifications.service';
 import {
     PasswordGenerationService as PasswordGenerationServiceAbstraction,
 } from 'jslib/abstractions/passwordGeneration.service';
+import { PasswordRepromptService as PasswordRepromptServiceAbstraction } from 'jslib/abstractions/passwordReprompt.service';
 import { PlatformUtilsService as PlatformUtilsServiceAbstraction } from 'jslib/abstractions/platformUtils.service';
 import { PolicyService as PolicyServiceAbstraction } from 'jslib/abstractions/policy.service';
 import { SearchService as SearchServiceAbstraction } from 'jslib/abstractions/search.service';
@@ -86,6 +85,7 @@ import { TokenService as TokenServiceAbstraction } from 'jslib/abstractions/toke
 import { TotpService as TotpServiceAbstraction } from 'jslib/abstractions/totp.service';
 import { UserService as UserServiceAbstraction } from 'jslib/abstractions/user.service';
 import { VaultTimeoutService as VaultTimeoutServiceAbstraction } from 'jslib/abstractions/vaultTimeout.service';
+import { PasswordRepromptService } from 'jslib/services/passwordReprompt.service';
 
 const i18nService = new I18nService(window.navigator.language, 'locales');
 const stateService = new StateService();
@@ -137,6 +137,7 @@ const notificationsService = new NotificationsService(userService, syncService,
 const environmentService = new EnvironmentService(apiService, storageService, notificationsService);
 const auditService = new AuditService(cryptoFunctionService, apiService);
 const eventLoggingService = new EventLoggingService(storageService, apiService, userService, cipherService);
+const passwordRepromptService = new PasswordRepromptService(i18nService, cryptoService, platformUtilsService);
 
 containerService.attachToWindow(window);
 
@@ -222,6 +223,7 @@ export function initFactory(): Function {
         { provide: EventLoggingServiceAbstraction, useValue: eventLoggingService },
         { provide: PolicyServiceAbstraction, useValue: policyService },
         { provide: SendServiceAbstraction, useValue: sendService },
+        { provide: PasswordRepromptServiceAbstraction, useValue: passwordRepromptService },
         {
             provide: APP_INITIALIZER,
             useFactory: initFactory,

src/app/vault/add-edit.component.html

@@ -209,10 +209,16 @@
                         <div class="col-6 form-group">
                             <label for="cardNumber">{{'number' | i18n}}</label>
                             <div class="input-group">
-                                <input id="cardNumber" class="form-control" type="text" name="Card.Number"
+                                <input id="cardNumber" class="form-control text-monospace"
-                                    [(ngModel)]="cipher.card.number" appInputVerbatim
+                                    type="{{showCardNumber ? 'text' : 'password'}}" name="Card.Number"
+                                    [(ngModel)]="cipher.card.number" appInputVerbatim autocomplete="new-password"
                                     [disabled]="cipher.isDeleted || viewOnly">
                                 <div class="input-group-append">
+                                    <button type="button" class="btn btn-outline-secondary"
+                                        appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardNumber()">
+                                        <i class="fa fa-lg" aria-hidden="true"
+                                            [ngClass]="{'fa-eye': !showCardNumber, 'fa-eye-slash': showCardNumber}"></i>
+                                    </button>
                                     <button type="button" class="btn btn-outline-secondary"
                                         appA11yTitle="{{'copyNumber' | i18n}}"
                                         (click)="copy(cipher.card.number, 'number', 'Number')">
@@ -512,6 +518,14 @@
                         </div>
                     </div>
                 </ng-container>
+                <ng-container>
+                    <h3 class="mt-4">{{'options' | i18n}}</h3>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" [ngModel]="reprompt" (change)="repromptChanged()"
+                                id="passwordPrompt" name="passwordPrompt" [disabled]="cipher.isDeleted || viewOnly">
+                            <label class="form-check-label" for="passwordPrompt">{{'passwordPrompt' | i18n}}</label>
+                    </div>
+                </ng-container>
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading" *ngIf="!viewOnly">

src/app/vault/bulk-actions.component.ts

@@ -8,6 +8,8 @@ import {
 import { ToasterService } from 'angular2-toaster';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PasswordRepromptService } from 'jslib/abstractions/passwordReprompt.service';
+import { CipherRepromptType } from 'jslib/enums/cipherRepromptType';
 
 import { Organization } from 'jslib/models/domain/organization';
 
@@ -36,9 +38,14 @@ export class BulkActionsComponent {
 
     constructor(private toasterService: ToasterService,
         private i18nService: I18nService,
-        private componentFactoryResolver: ComponentFactoryResolver) { }
+        private componentFactoryResolver: ComponentFactoryResolver,
+        private passwordRepromptService: PasswordRepromptService) { }
+
+    async bulkDelete() {
+        if (!await this.promptPassword()) {
+            return;
+        }
 
-    bulkDelete() {
         const selectedIds = this.ciphersComponent.getSelectedIds();
         if (selectedIds.length === 0) {
             this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
@@ -67,7 +74,11 @@ export class BulkActionsComponent {
         });
     }
 
-    bulkRestore() {
+    async bulkRestore() {
+        if (!await this.promptPassword()) {
+            return;
+        }
+
         const selectedIds = this.ciphersComponent.getSelectedIds();
         if (selectedIds.length === 0) {
             this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
@@ -94,7 +105,11 @@ export class BulkActionsComponent {
         });
     }
 
-    bulkShare() {
+    async bulkShare() {
+        if (!await this.promptPassword()) {
+            return;
+        }
+
         const selectedCiphers = this.ciphersComponent.getSelected();
         if (selectedCiphers.length === 0) {
             this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
@@ -121,7 +136,11 @@ export class BulkActionsComponent {
         });
     }
 
-    bulkMove() {
+    async bulkMove() {
+        if (!await this.promptPassword()) {
+            return;
+        }
+
         const selectedIds = this.ciphersComponent.getSelectedIds();
         if (selectedIds.length === 0) {
             this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
@@ -151,4 +170,11 @@ export class BulkActionsComponent {
     selectAll(select: boolean) {
         this.ciphersComponent.selectAll(select);
     }
+
+    private async promptPassword() {
+        const selectedCiphers = this.ciphersComponent.getSelected();
+        const notProtected = !selectedCiphers.find(cipher => cipher.reprompt !== CipherRepromptType.None);
+
+        return notProtected || await this.passwordRepromptService.showPasswordPrompt();
+    }
 }

src/app/vault/ciphers.component.html

@@ -38,12 +38,12 @@
                         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                             <ng-container *ngIf="c.type === cipherType.Login && !c.isDeleted">
                                 <a class="dropdown-item" href="#" appStopClick
-                                    (click)="copy(c, c.login.username, 'username', 'username')">
+                                    (click)="copy(c, c.login.username, 'username', 'Username')">
                                     <i class="fa fa-fw fa-clone" aria-hidden="true"></i>
                                     {{'copyUsername' | i18n}}
                                 </a>
                                 <a class="dropdown-item" href="#" appStopClick
-                                    (click)="copy(c, c.login.password, 'password', 'password')" *ngIf="c.viewPassword">
+                                    (click)="copy(c, c.login.password, 'password', 'Password')" *ngIf="c.viewPassword">
                                     <i class="fa fa-fw fa-clone" aria-hidden="true"></i>
                                     {{'copyPassword' | i18n}}
                                 </a>

src/app/vault/ciphers.component.ts

@@ -11,6 +11,7 @@ import { ToasterService } from 'angular2-toaster';
 import { CipherService } from 'jslib/abstractions/cipher.service';
 import { EventService } from 'jslib/abstractions/event.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PasswordRepromptService } from 'jslib/abstractions/passwordReprompt.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SearchService } from 'jslib/abstractions/search.service';
 import { TotpService } from 'jslib/abstractions/totp.service';
@@ -18,6 +19,7 @@ import { UserService } from 'jslib/abstractions/user.service';
 
 import { CiphersComponent as BaseCiphersComponent } from 'jslib/angular/components/ciphers.component';
 
+import { CipherRepromptType } from 'jslib/enums/cipherRepromptType';
 import { CipherType } from 'jslib/enums/cipherType';
 import { EventType } from 'jslib/enums/eventType';
 
@@ -43,7 +45,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
     constructor(searchService: SearchService, protected toasterService: ToasterService,
         protected i18nService: I18nService, protected platformUtilsService: PlatformUtilsService,
         protected cipherService: CipherService, protected eventService: EventService,
-        protected totpService: TotpService, protected userService: UserService) {
+        protected totpService: TotpService, protected userService: UserService,
+        protected passwordRepromptService: PasswordRepromptService) {
         super(searchService);
         this.pageSize = 200;
     }
@@ -60,11 +63,17 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
         this.platformUtilsService.launchUri(uri);
     }
 
-    attachments(c: CipherView) {
+    async attachments(c: CipherView) {
+        if (!await this.repromptCipher(c)) {
+            return;
+        }
         this.onAttachmentsClicked.emit(c);
     }
 
-    share(c: CipherView) {
+    async share(c: CipherView) {
+        if (!await this.repromptCipher(c)) {
+            return;
+        }
         this.onShareClicked.emit(c);
     }
 
@@ -72,11 +81,17 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
         this.onCollectionsClicked.emit(c);
     }
 
-    clone(c: CipherView) {
+    async clone(c: CipherView) {
+        if (!await this.repromptCipher(c)) {
+            return;
+        }
         this.onCloneClicked.emit(c);
     }
 
     async delete(c: CipherView): Promise<boolean> {
+        if (!await this.repromptCipher(c)) {
+            return;
+        }
         if (this.actionPromise != null) {
             return;
         }
@@ -121,12 +136,20 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
     }
 
     async copy(cipher: CipherView, value: string, typeI18nKey: string, aType: string) {
+        if (this.passwordRepromptService.protectedFields().includes(aType) && !await this.repromptCipher(cipher)) {
+            return;
+        }
+
         if (value == null || aType === 'TOTP' && !this.displayTotpCopyButton(cipher)) {
             return;
         } else if (value === cipher.login.totp) {
             value = await this.totpService.getCode(value);
         }
 
+        if (!cipher.viewPassword) {
+            return;
+        }
+
         this.platformUtilsService.copyToClipboard(value, { window: window });
         this.toasterService.popAsync('info', null,
             this.i18nService.t('valueCopied', this.i18nService.t(typeI18nKey)));
@@ -170,6 +193,12 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
             (cipher.organizationUseTotp || this.userHasPremiumAccess);
     }
 
+    async selectCipher(cipher: CipherView) {
+        if (await this.repromptCipher(cipher)) {
+            super.selectCipher(cipher);
+        }
+    }
+
     protected deleteCipher(id: string, permanent: boolean) {
         return permanent ? this.cipherService.deleteWithServer(id) : this.cipherService.softDeleteWithServer(id);
     }
@@ -177,4 +206,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
     protected showFixOldAttachments(c: CipherView) {
         return c.hasOldAttachments && c.organizationId == null;
     }
+
+    protected async repromptCipher(c: CipherView) {
+        return c.reprompt === CipherRepromptType.None || await this.passwordRepromptService.showPasswordPrompt();
+    }
 }

src/locales/en/messages.json

@@ -3881,5 +3881,14 @@
   },
   "trashCleanupWarningSelfHosted": {
     "message": "Ciphers that have been in Trash for a while will be automatically deleted."
+  },
+  "passwordPrompt": {
+    "message": "Master password re-prompt"
+  },
+  "passwordConfirmation": {
+    "message": "Master password confirmation"
+  },
+  "passwordConfirmationDesc": {
+    "message": "This action is protected. To continue, please re-enter your master password to verify your identity."
   }
 }

src/scss/plugins.scss

@@ -162,6 +162,10 @@ $fa-font-path: "~font-awesome/fonts";
             }
         }
     }
+
+    .swal2-validation-message {
+        margin: 0 -15px;
+    }
 }
 
 date-input-polyfill {

src/services/webPlatformUtils.service.ts

@@ -211,6 +211,32 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
         return confirmed.value;
     }
 
+    async showPasswordDialog(title: string, body: string, passwordValidation: (value: string) => Promise<boolean>):
+        Promise<boolean> {
+        const result = await Swal.fire({
+            heightAuto: false,
+            title: title,
+            input: 'password',
+            text: body,
+            confirmButtonText: this.i18nService.t('ok'),
+            showCancelButton: true,
+            cancelButtonText: this.i18nService.t('cancel'),
+            inputAttributes: {
+                autocapitalize: 'off',
+                autocorrect: 'off',
+            },
+            inputValidator: async (value: string): Promise<any> => {
+                if (await passwordValidation(value)) {
+                    return false;
+                }
+
+                return this.i18nService.t('invalidMasterPassword');
+            },
+        });
+
+        return result.isConfirmed;
+    }
+
     isDev(): boolean {
         return process.env.ENV === 'development';
     }