Merge branch 'master' into feature/sso

src/popup/accounts/home.component.ts

@@ -13,43 +13,40 @@ import { Utils } from 'jslib/misc/utils';
     selector: 'app-home',
     templateUrl: 'home.component.html',
 })
-export class HomeComponent { 
-    constructor(
-        protected platformUtilsService: PlatformUtilsService, 
-        private passwordGenerationService : PasswordGenerationService,
-        private cryptoFunctionService: CryptoFunctionService, 
-        private environmentService: EnvironmentService,
-        private storageService : StorageService) { }
+export class HomeComponent {
+    constructor(protected platformUtilsService: PlatformUtilsService,
+        private passwordGenerationService: PasswordGenerationService, private storageService: StorageService,
+        private cryptoFunctionService: CryptoFunctionService, private environmentService: EnvironmentService) { }
 
-        async launchSsoBrowser() {
-            // Generate necessary sso params
-            const passwordOptions: any = {
-                type: 'password',
-                length: 64,
-                uppercase: true,
-                lowercase: true,
-                numbers: true,
-                special: false,
-            };
+    async launchSsoBrowser() {
+        // Generate necessary sso params
+        const passwordOptions: any = {
+            type: 'password',
+            length: 64,
+            uppercase: true,
+            lowercase: true,
+            numbers: true,
+            special: false,
+        };
 
-            const state = (await this.passwordGenerationService.generatePassword(passwordOptions)) + ':clientId=browser';
-            let codeVerifier = await this.passwordGenerationService.generatePassword(passwordOptions);
-            const codeVerifierHash = await this.cryptoFunctionService.hash(codeVerifier, 'sha256');
-            const codeChallenge = Utils.fromBufferToUrlB64(codeVerifierHash);
-    
-            await this.storageService.save(ConstantsService.ssoCodeVerifierKey, codeVerifier);
-            await this.storageService.save(ConstantsService.ssoStateKey, state);
+        const state = (await this.passwordGenerationService.generatePassword(passwordOptions)) + ':clientId=browser';
+        const codeVerifier = await this.passwordGenerationService.generatePassword(passwordOptions);
+        const codeVerifierHash = await this.cryptoFunctionService.hash(codeVerifier, 'sha256');
+        const codeChallenge = Utils.fromBufferToUrlB64(codeVerifierHash);
 
-            let url = this.environmentService.getWebVaultUrl();
-            if (url == null) {
-                url = 'https://vault.bitwarden.com';
-            }
+        await this.storageService.save(ConstantsService.ssoCodeVerifierKey, codeVerifier);
+        await this.storageService.save(ConstantsService.ssoStateKey, state);
 
-            const redirectUri = url + '/sso-connector.html';
-    
-            // Launch browser
-            this.platformUtilsService.launchUri(url + '/#/sso?clientId=browser' +
-                '&redirectUri=' + encodeURIComponent(redirectUri) +
-                '&state=' + state + '&codeChallenge=' + codeChallenge);
-        }   
+        let url = this.environmentService.getWebVaultUrl();
+        if (url == null) {
+            url = 'https://vault.bitwarden.com';
+        }
+
+        const redirectUri = url + '/sso-connector.html';
+
+        // Launch browser
+        this.platformUtilsService.launchUri(url + '/#/sso?clientId=browser' +
+            '&redirectUri=' + encodeURIComponent(redirectUri) +
+            '&state=' + state + '&codeChallenge=' + codeChallenge);
+    }
 }

src/popup/accounts/login.component.ts

@@ -22,8 +22,8 @@ export class LoginComponent extends BaseLoginComponent {
         protected platformUtilsService: PlatformUtilsService, protected i18nService: I18nService,
         protected stateService: StateService, protected environmentService: EnvironmentService,
         protected passwordGenerationService: PasswordGenerationService,
-        protected cryptoFunctionService: CryptoFunctionService, 
-        storageService: StorageService, syncService : SyncService) {
+        protected cryptoFunctionService: CryptoFunctionService, storageService: StorageService,
+        syncService: SyncService) {
         super(authService, router, platformUtilsService, i18nService, stateService, environmentService, passwordGenerationService, cryptoFunctionService, storageService);
         super.onSuccessfulLogin = () => {
             return syncService.fullSync(true);

src/popup/accounts/sso.component.ts

@@ -29,23 +29,23 @@ export class SsoComponent extends BaseSsoComponent {
         storageService: StorageService, stateService: StateService,
         platformUtilsService: PlatformUtilsService, apiService: ApiService,
         cryptoFunctionService: CryptoFunctionService, passwordGenerationService: PasswordGenerationService,
-        syncService: SyncService, private environmentService: EnvironmentService  ) {
+        syncService: SyncService, private environmentService: EnvironmentService) {
         super(authService, router, i18nService, route, storageService, stateService, platformUtilsService,
             apiService, cryptoFunctionService, passwordGenerationService);
-            
+
         let url = this.environmentService.getWebVaultUrl();
         if (url == null) {
             url = 'https://vault.bitwarden.com';
         }
-            
+
         this.redirectUri = url + '/sso-connector.html';
         this.clientId = 'browser';
-        
+
         super.onSuccessfulLogin = () => {
-                BrowserApi.reloadOpenWindows();
-                const thisWindow = window.open('', '_self');
-                thisWindow.close();
-                return syncService.fullSync(true);
+            BrowserApi.reloadOpenWindows();
+            const thisWindow = window.open('', '_self');
+            thisWindow.close();
+            return syncService.fullSync(true);
         };
     }
 }

src/popup/vault/view.component.html

@@ -17,7 +17,7 @@
         <div class="box-content">
             <div class="box-content-row">
                 <span class="row-label">{{'name' | i18n}}</span>
-                <input type="text" [value]="cipher.name" readonly aria-readonly="true"/>
+                <input type="text" [value]="cipher.name" readonly aria-readonly="true" />
             </div>
             <!-- Login -->
             <div *ngIf="cipher.login">
@@ -60,8 +60,7 @@
                                 [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </a>
                         <a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyPassword' | i18n}}"
-                            (click)="copy(cipher.login.password, 'password', 'Password')"
-                            *ngIf="cipher.viewPassword">
+                            (click)="copy(cipher.login.password, 'password', 'Password')" *ngIf="cipher.viewPassword">
                             <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
                         </a>
                     </div>
@@ -238,7 +237,8 @@
                 </div>
                 <div class="action-buttons">
                     <a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
-                        *ngIf="field.type === fieldType.Hidden && cipher.viewPassword" (click)="toggleFieldValue(field)">
+                        *ngIf="field.type === fieldType.Hidden && cipher.viewPassword"
+                        (click)="toggleFieldValue(field)">
                         <i class="fa fa-lg" aria-hidden="true"
                             [ngClass]="{'fa-eye': !field.showValue, 'fa-eye-slash': field.showValue}"></i>
                     </a>
@@ -268,7 +268,25 @@
     </div>
     <div class="box list">
         <div class="box-content single-line">
-            <a class="box-content-row" href="#" appStopClick appBlurClick (click)="clone()" 
+            <a class="box-content-row" href="#" appStopClick appBlurClick (click)="fillCipher()"
+                *ngIf="!cipher.isDeleted && !inPopout">
+                <div class="row-main text-primary">
+                    <div class="icon text-primary" aria-hidden="true">
+                        <i class="fa fa-pencil-square-o fa-lg fa-fw"></i>
+                    </div>
+                    <span>{{'autoFill' | i18n}}</span>
+                </div>
+            </a>
+            <a class="box-content-row" href="#" appStopClick appBlurClick (click)="fillCipherAndSave()"
+                *ngIf="!cipher.isDeleted && !inPopout">
+                <div class="row-main text-primary">
+                    <div class="icon text-primary" aria-hidden="true">
+                        <i class="fa fa-bookmark fa-lg fa-fw"></i>
+                    </div>
+                    <span>{{'autoFillAndSave' | i18n}}</span>
+                </div>
+            </a>
+            <a class="box-content-row" href="#" appStopClick appBlurClick (click)="clone()"
                 *ngIf="!cipher.organizationId && !cipher.isDeleted">
                 <div class="row-main text-primary">
                     <div class="icon text-primary" aria-hidden="true">

src/popup/vault/view.component.ts

@@ -14,14 +14,22 @@ import { CipherService } from 'jslib/abstractions/cipher.service';
 import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { EventService } from 'jslib/abstractions/event.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { TokenService } from 'jslib/abstractions/token.service';
 import { TotpService } from 'jslib/abstractions/totp.service';
 import { UserService } from 'jslib/abstractions/user.service';
+import { Cipher } from 'jslib/models/domain';
+import { LoginUriView } from 'jslib/models/view';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
 
 import { ViewComponent as BaseViewComponent } from 'jslib/angular/components/view.component';
+import { BrowserApi } from '../../browser/browserApi';
+import { AutofillService } from '../../services/abstractions/autofill.service';
+import { PopupUtilsService } from '../services/popup-utils.service';
+
+const BroadcasterSubscriptionId = 'ChildViewComponent';
 
 @Component({
     selector: 'app-vault-view',
@@ -29,6 +37,10 @@ import { ViewComponent as BaseViewComponent } from 'jslib/angular/components/vie
 })
 export class ViewComponent extends BaseViewComponent {
     showAttachments = true;
+    pageDetails: any[] = [];
+    tab: any;
+    loadPageDetailsTimeout: number;
+    inPopout = false;
 
     constructor(cipherService: CipherService, totpService: TotpService,
         tokenService: TokenService, i18nService: I18nService,
@@ -37,13 +49,15 @@ export class ViewComponent extends BaseViewComponent {
         private router: Router, private location: Location,
         broadcasterService: BroadcasterService, ngZone: NgZone,
         changeDetectorRef: ChangeDetectorRef, userService: UserService,
-        eventService: EventService) {
+        eventService: EventService, private autofillService: AutofillService,
+        private messagingService: MessagingService, private popupUtilsService: PopupUtilsService) {
         super(cipherService, totpService, tokenService, i18nService, cryptoService, platformUtilsService,
             auditService, window, broadcasterService, ngZone, changeDetectorRef, userService, eventService);
     }
 
     ngOnInit() {
         this.showAttachments = !this.platformUtilsService.isEdge();
+        this.inPopout = this.popupUtilsService.inPopout(window);
         const queryParamsSub = this.route.queryParams.subscribe(async (params) => {
             if (params.cipherId) {
                 this.cipherId = params.cipherId;
@@ -56,7 +70,43 @@ export class ViewComponent extends BaseViewComponent {
                 queryParamsSub.unsubscribe();
             }
         });
+
         super.ngOnInit();
+
+        this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
+            this.ngZone.run(async () => {
+                switch (message.command) {
+                    case 'collectPageDetailsResponse':
+                        if (message.sender === BroadcasterSubscriptionId) {
+                            this.pageDetails.push({
+                                frameId: message.webExtSender.frameId,
+                                tab: message.tab,
+                                details: message.details,
+                            });
+                        }
+                        break;
+                    case 'tabChanged':
+                    case 'windowChanged':
+                        if (this.loadPageDetailsTimeout != null) {
+                            window.clearTimeout(this.loadPageDetailsTimeout);
+                        }
+                        this.loadPageDetailsTimeout = window.setTimeout(() => this.loadPageDetails(), 500);
+                        break;
+                    default:
+                        break;
+                }
+            });
+        });
+    }
+
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+    }
+
+    async load() {
+        await super.load();
+        await this.loadPageDetails();
     }
 
     edit() {
@@ -80,6 +130,49 @@ export class ViewComponent extends BaseViewComponent {
         });
     }
 
+    async fillCipher() {
+        const didAutofill = await this.doAutofill();
+        if (didAutofill) {
+            this.platformUtilsService.showToast('success', null,
+                this.i18nService.t('autoFillSuccess'));
+        }
+    }
+
+    async fillCipherAndSave() {
+        const didAutofill = await this.doAutofill();
+
+        if (didAutofill) {
+            if (this.tab == null) {
+                throw new Error('No tab found.');
+            }
+
+            if (this.cipher.login.uris == null) {
+                this.cipher.login.uris = [];
+            } else {
+                if (this.cipher.login.uris.some((uri) => uri.uri === this.tab.url)) {
+                    this.platformUtilsService.showToast('success', null,
+                        this.i18nService.t('autoFillSuccessAndSavedUri'));
+                    return;
+                }
+            }
+
+            const loginUri = new LoginUriView();
+            loginUri.uri = this.tab.url;
+            this.cipher.login.uris.push(loginUri);
+
+            try {
+                const cipher: Cipher = await this.cipherService.encrypt(this.cipher);
+                await this.cipherService.saveWithServer(cipher);
+                this.platformUtilsService.showToast('success', null,
+                    this.i18nService.t('autoFillSuccessAndSavedUri'));
+                this.messagingService.send('editedCipher');
+            } catch {
+                this.platformUtilsService.showToast('error', null,
+                    this.i18nService.t('unexpectedError'));
+            }
+        }
+    }
+
     async restore() {
         if (!this.cipher.isDeleted) {
             return false;
@@ -102,4 +195,43 @@ export class ViewComponent extends BaseViewComponent {
     close() {
         this.location.back();
     }
+
+    private async loadPageDetails() {
+        this.pageDetails = [];
+        this.tab = await BrowserApi.getTabFromCurrentWindow();
+        if (this.tab == null) {
+            return;
+        }
+        BrowserApi.tabSendMessage(this.tab, {
+            command: 'collectPageDetails',
+            tab: this.tab,
+            sender: BroadcasterSubscriptionId,
+        });
+    }
+
+    private async doAutofill() {
+        if (this.pageDetails == null || this.pageDetails.length === 0) {
+            this.platformUtilsService.showToast('error', null,
+                this.i18nService.t('autofillError'));
+            return false;
+        }
+
+        try {
+            this.totpCode = await this.autofillService.doAutoFill({
+                cipher: this.cipher,
+                pageDetails: this.pageDetails,
+                doc: window.document,
+            });
+            if (this.totpCode != null) {
+                this.platformUtilsService.copyToClipboard(this.totpCode, { window: window });
+            }
+        } catch {
+            this.platformUtilsService.showToast('error', null,
+                this.i18nService.t('autofillError'));
+            this.changeDetectorRef.detectChanges();
+            return false;
+        }
+
+        return true;
+    }
 }