finish autofill from view, other misc cleanup (#1368)

* finish autofill from view, other misc cleanup

* compare hostnames for authResult

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,7 @@
     </div>
     <div class="box list">
         <div class="box-content single-line">
-            <a class="box-content-row" href="#" appStopClick appBlurClick (click)="fillCipher()" 
+            <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">
@@ -277,7 +277,7 @@
                     <span>{{'autoFill' | i18n}}</span>
                 </div>
             </a>
-            <a class="box-content-row" href="#" appStopClick appBlurClick (click)="fillCipherAndSave()" 
+            <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">
@@ -286,7 +286,7 @@
                     <span>{{'autoFillAndSave' | i18n}}</span>
                 </div>
             </a>
-            <a class="box-content-row" href="#" appStopClick appBlurClick (click)="clone()" 
+            <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

@@ -38,7 +38,9 @@ const BroadcasterSubscriptionId = 'ChildViewComponent';
 export class ViewComponent extends BaseViewComponent {
     showAttachments = true;
     pageDetails: any[] = [];
-    inPopout: boolean = false;
+    tab: any;
+    loadPageDetailsTimeout: number;
+    inPopout = false;
 
     constructor(cipherService: CipherService, totpService: TotpService,
         tokenService: TokenService, i18nService: I18nService,
@@ -68,6 +70,7 @@ export class ViewComponent extends BaseViewComponent {
                 queryParamsSub.unsubscribe();
             }
         });
+
         super.ngOnInit();
 
         this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
@@ -82,6 +85,13 @@ export class ViewComponent extends BaseViewComponent {
                             });
                         }
                         break;
+                    case 'tabChanged':
+                    case 'windowChanged':
+                        if (this.loadPageDetailsTimeout != null) {
+                            window.clearTimeout(this.loadPageDetailsTimeout);
+                        }
+                        this.loadPageDetailsTimeout = window.setTimeout(() => this.loadPageDetails(), 500);
+                        break;
                     default:
                         break;
                 }
@@ -90,8 +100,13 @@ export class ViewComponent extends BaseViewComponent {
     }
 
     ngOnDestroy() {
-        this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
         super.ngOnDestroy();
+        this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+    }
+
+    async load() {
+        await super.load();
+        await this.loadPageDetails();
     }
 
     edit() {
@@ -116,43 +131,40 @@ export class ViewComponent extends BaseViewComponent {
     }
 
     async fillCipher() {
-        const didAutofill: boolean = await this.doAutofill();
+        const didAutofill = await this.doAutofill();
         if (didAutofill) {
             this.platformUtilsService.showToast('success', null,
                 this.i18nService.t('autoFillSuccess'));
-        }        
+        }
     }
 
     async fillCipherAndSave() {
-        const didAutofill: boolean = await this.doAutofill();
+        const didAutofill = await this.doAutofill();
 
         if (didAutofill) {
-            const tab = await BrowserApi.getTabFromCurrentWindow();
-            if (!tab) {
+            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 === tab.url)) {
+                if (this.cipher.login.uris.some((uri) => uri.uri === this.tab.url)) {
                     this.platformUtilsService.showToast('success', null,
-                        this.i18nService.t('savedURI'));
+                        this.i18nService.t('autoFillSuccessAndSavedUri'));
                     return;
                 }
             }
 
-            const loginUri: LoginUriView = new LoginUriView();
-            loginUri.uri = tab.url;
+            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.cipher.id = cipher.id;
-
                 this.platformUtilsService.showToast('success', null,
-                    this.i18nService.t('savedURI'));
+                    this.i18nService.t('autoFillSuccessAndSavedUri'));
                 this.messagingService.send('editedCipher');
             } catch {
                 this.platformUtilsService.showToast('error', null,
@@ -161,45 +173,6 @@ export class ViewComponent extends BaseViewComponent {
         }
     }
 
-    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;
-    }
-
-    async load() {
-        await super.load();
-
-        const tab = await BrowserApi.getTabFromCurrentWindow();
-
-        this.pageDetails = [];
-        BrowserApi.tabSendMessage(tab, {
-            command: 'collectPageDetails',
-            tab: tab,
-            sender: BroadcasterSubscriptionId,
-        });
-    }
-
     async restore() {
         if (!this.cipher.isDeleted) {
             return false;
@@ -222,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;
+    }
 }