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/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"
-                                    [(ngModel)]="cipher.card.number" appInputVerbatim
+                                <input id="cardNumber" class="form-control text-monospace"
+                                    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();
+    }
 }