Merge pull request #2094 from bitwarden/add-login-with-locked-vault

Show save/update password prompt and save credentials even when vault is locked

src/background/main.background.ts

@@ -374,10 +374,6 @@ export default class MainBackground {
             return;
         }
 
-        if (await this.vaultTimeoutService.isLocked()) {
-            return;
-        }
-
         const options: any = {};
         if (frameId != null) {
             options.frameId = frameId;
@@ -680,13 +676,20 @@ export default class MainBackground {
             if (this.notificationQueue[i].tabId !== tab.id || this.notificationQueue[i].domain !== tabDomain) {
                 continue;
             }
+
             if (this.notificationQueue[i].type === 'addLogin') {
                 BrowserApi.tabSendMessageData(tab, 'openNotificationBar', {
                     type: 'add',
+                    typeData: {
+                        isVaultLocked: this.notificationQueue[i].wasVaultLocked,
+                    },
                 });
             } else if (this.notificationQueue[i].type === 'changePassword') {
                 BrowserApi.tabSendMessageData(tab, 'openNotificationBar', {
                     type: 'change',
+                    typeData: {
+                        isVaultLocked: this.notificationQueue[i].wasVaultLocked,
+                    },
                 });
             }
             break;

src/background/models/addChangePasswordQueueMessage.ts

@@ -0,0 +1,9 @@
+export default class AddChangePasswordQueueMessage {
+    type: string;
+    cipherId: string;
+    newPassword: string;
+    domain: string;
+    tabId: string;
+    expires: Date;
+    wasVaultLocked: boolean;
+}

src/background/models/addLoginQueueMessage.ts

@@ -0,0 +1,10 @@
+export default class AddLoginQueueMessage {
+    type: string;
+    username: string;
+    password: string;
+    domain: string;
+    uri: string;
+    tabId: string;
+    expires: Date;
+    wasVaultLocked: boolean;
+}

src/background/runtime.background.ts

@@ -27,12 +27,17 @@ import { Utils } from 'jslib-common/misc/utils';
 
 import { PolicyType } from 'jslib-common/enums/policyType';
 
+import AddChangePasswordQueueMessage from './models/addChangePasswordQueueMessage';
+import AddLoginQueueMessage from './models/addLoginQueueMessage';
+
 export default class RuntimeBackground {
     private runtime: any;
     private autofillTimeout: any;
     private pageDetailsToAutoFill: any[] = [];
     private onInstalledReason: string = null;
 
+    private lockedVaultPendingNotifications: any[] = [];
+
     constructor(private main: MainBackground, private autofillService: AutofillService,
         private cipherService: CipherService, private platformUtilsService: BrowserPlatformUtilsService,
         private storageService: StorageService, private i18nService: I18nService,
@@ -67,6 +72,24 @@ export default class RuntimeBackground {
                 await this.main.refreshBadgeAndMenu(false);
                 this.notificationsService.updateConnection(msg.command === 'unlocked');
                 this.systemService.cancelProcessReload();
+
+                if (this.lockedVaultPendingNotifications.length > 0) {
+                    const retryItem = this.lockedVaultPendingNotifications.pop();
+                    await this.processMessage(retryItem.msg, retryItem.sender, null);
+
+                    await BrowserApi.closeLoginTab();
+
+                    if (retryItem?.sender?.tab?.id) {
+                        await BrowserApi.focusSpecifiedTab(retryItem.sender.tab.id);
+                    }
+                }
+                break;
+            case 'addToLockedVaultPendingNotifications':
+                const retryMessage = {
+                    msg: msg.retryItem,
+                    sender: sender,
+                };
+                this.lockedVaultPendingNotifications.push(retryMessage);
                 break;
             case 'logout':
                 await this.main.logout(msg.expired);
@@ -79,15 +102,15 @@ export default class RuntimeBackground {
             case 'openPopup':
                 await this.main.openPopup();
                 break;
+            case 'promptForLogin':
+                await BrowserApi.createNewTab('popup/index.html?uilocation=popout', true, true);
+                break;
             case 'showDialogResolve':
                 this.platformUtilsService.resolveDialogPromise(msg.dialogId, msg.confirmed);
                 break;
             case 'bgGetDataForTab':
                 await this.getDataForTab(sender.tab, msg.responseCommand);
                 break;
-            case 'bgOpenNotificationBar':
-                await BrowserApi.tabSendMessageData(sender.tab, 'openNotificationBar', msg.data);
-                break;
             case 'bgCloseNotificationBar':
                 await BrowserApi.tabSendMessageData(sender.tab, 'closeNotificationBar');
                 break;
@@ -108,10 +131,8 @@ export default class RuntimeBackground {
                 this.removeTabFromNotificationQueue(sender.tab);
                 break;
             case 'bgAddSave':
-                await this.saveAddLogin(sender.tab, msg.folder);
-                break;
             case 'bgChangeSave':
-                await this.saveChangePassword(sender.tab);
+                await this.saveOrUpdateCredentials(sender.tab, msg.folder);
                 break;
             case 'bgNeverSave':
                 await this.saveNever(sender.tab);
@@ -126,9 +147,6 @@ export default class RuntimeBackground {
                 await this.main.reseedStorage();
                 break;
             case 'collectPageDetailsResponse':
-                if (await this.vaultTimeoutService.isLocked()) {
-                    return;
-                }
                 switch (msg.sender) {
                     case 'notificationBar':
                         const forms = this.autofillService.getFormsWithPasswordFields(msg.details);
@@ -219,14 +237,11 @@ export default class RuntimeBackground {
         this.pageDetailsToAutoFill = [];
     }
 
-    private async saveAddLogin(tab: any, folderId: string) {
+    private async saveOrUpdateCredentials(tab: any, folderId?: string) {
-        if (await this.vaultTimeoutService.isLocked()) {
-            return;
-        }
-
         for (let i = this.main.notificationQueue.length - 1; i >= 0; i--) {
             const queueMessage = this.main.notificationQueue[i];
-            if (queueMessage.tabId !== tab.id || queueMessage.type !== 'addLogin') {
+            if (queueMessage.tabId !== tab.id ||
+                (queueMessage.type !== 'addLogin' && queueMessage.type !== 'changePassword')) {
                 continue;
             }
 
@@ -238,56 +253,74 @@ export default class RuntimeBackground {
             this.main.notificationQueue.splice(i, 1);
             BrowserApi.tabSendMessageData(tab, 'closeNotificationBar');
 
-            const loginModel = new LoginView();
+            if (queueMessage.type === 'changePassword') {
-            const loginUri = new LoginUriView();
+                const message = (queueMessage as AddChangePasswordQueueMessage);
-            loginUri.uri = queueMessage.uri;
+                const cipher = await this.getDecryptedCipherById(message.cipherId);
-            loginModel.uris = [loginUri];
+                if (cipher == null) {
-            loginModel.username = queueMessage.username;
+                    return;
-            loginModel.password = queueMessage.password;
-            const model = new CipherView();
-            model.name = Utils.getHostname(queueMessage.uri) || queueMessage.domain;
-            model.name = model.name.replace(/^www\./, '');
-            model.type = CipherType.Login;
-            model.login = loginModel;
-
-            if (!Utils.isNullOrWhitespace(folderId)) {
-                const folders = await this.folderService.getAllDecrypted();
-                if (folders.some(x => x.id === folderId)) {
-                    model.folderId = folderId;
                 }
+                await this.updateCipher(cipher, message.newPassword);
+                return;
             }
 
-            const cipher = await this.cipherService.encrypt(model);
+            if (!queueMessage.wasVaultLocked) {
-            await this.cipherService.saveWithServer(cipher);
+                await this.createNewCipher(queueMessage, folderId);
+            }
+
+            // If the vault was locked, check if a cipher needs updating instead of creating a new one
+            if (queueMessage.type === 'addLogin' && queueMessage.wasVaultLocked === true) {
+                const message = (queueMessage as AddLoginQueueMessage);
+                const ciphers = await this.cipherService.getAllDecryptedForUrl(message.uri);
+                const usernameMatches = ciphers.filter(c => c.login.username != null &&
+                    c.login.username.toLowerCase() === message.username);
+
+                if (usernameMatches.length >= 1) {
+                    await this.updateCipher(usernameMatches[0], message.password);
+                    return;
+                }
+
+                await this.createNewCipher(message, folderId);
+            }
         }
     }
 
-    private async saveChangePassword(tab: any) {
+    private async createNewCipher(queueMessage: AddLoginQueueMessage, folderId: string) {
-        if (await this.vaultTimeoutService.isLocked()) {
+        const loginModel = new LoginView();
-            return;
+        const loginUri = new LoginUriView();
+        loginUri.uri = queueMessage.uri;
+        loginModel.uris = [loginUri];
+        loginModel.username = queueMessage.username;
+        loginModel.password = queueMessage.password;
+        const model = new CipherView();
+        model.name = Utils.getHostname(queueMessage.uri) || queueMessage.domain;
+        model.name = model.name.replace(/^www\./, '');
+        model.type = CipherType.Login;
+        model.login = loginModel;
+
+        if (!Utils.isNullOrWhitespace(folderId)) {
+            const folders = await this.folderService.getAllDecrypted();
+            if (folders.some(x => x.id === folderId)) {
+                model.folderId = folderId;
+            }
         }
 
-        for (let i = this.main.notificationQueue.length - 1; i >= 0; i--) {
+        const cipher = await this.cipherService.encrypt(model);
-            const queueMessage = this.main.notificationQueue[i];
+        await this.cipherService.saveWithServer(cipher);
-            if (queueMessage.tabId !== tab.id || queueMessage.type !== 'changePassword') {
+    }
-                continue;
-            }
 
-            const tabDomain = Utils.getDomain(tab.url);
+    private async getDecryptedCipherById(cipherId: string) {
-            if (tabDomain != null && tabDomain !== queueMessage.domain) {
+        const cipher = await this.cipherService.get(cipherId);
-                continue;
+        if (cipher != null && cipher.type === CipherType.Login) {
-            }
+            return await cipher.decrypt();
+        }
+        return null;
+    }
 
-            this.main.notificationQueue.splice(i, 1);
+    private async updateCipher(cipher: CipherView, newPassword: string) {
-            BrowserApi.tabSendMessageData(tab, 'closeNotificationBar');
+        if (cipher != null && cipher.type === CipherType.Login) {
-
+            cipher.login.password = newPassword;
-            const cipher = await this.cipherService.get(queueMessage.cipherId);
+            const newCipher = await this.cipherService.encrypt(cipher);
-            if (cipher != null && cipher.type === CipherType.Login) {
+            await this.cipherService.saveWithServer(newCipher);
-                const model = await cipher.decrypt();
-                model.login.password = queueMessage.newPassword;
-                const newCipher = await this.cipherService.encrypt(model);
-                await this.cipherService.saveWithServer(newCipher);
-            }
         }
     }
 
@@ -312,10 +345,6 @@ export default class RuntimeBackground {
     }
 
     private async addLogin(loginInfo: any, tab: any) {
-        if (await this.vaultTimeoutService.isLocked()) {
-            return;
-        }
-
         const loginDomain = Utils.getDomain(loginInfo.url);
         if (loginDomain == null) {
             return;
@@ -326,6 +355,11 @@ export default class RuntimeBackground {
             normalizedUsername = normalizedUsername.toLowerCase();
         }
 
+        if (await this.vaultTimeoutService.isLocked()) {
+            this.pushAddLoginToQueue(loginDomain, loginInfo, tab, true);
+            return;
+        }
+
         const ciphers = await this.cipherService.getAllDecryptedForUrl(loginInfo.url);
         const usernameMatches = ciphers.filter(c =>
             c.login.username != null && c.login.username.toLowerCase() === normalizedUsername);
@@ -340,35 +374,43 @@ export default class RuntimeBackground {
                 return;
             }
 
-            // remove any old messages for this tab
+            this.pushAddLoginToQueue(loginDomain, loginInfo, tab);
-            this.removeTabFromNotificationQueue(tab);
+
-            this.main.notificationQueue.push({
-                type: 'addLogin',
-                username: loginInfo.username,
-                password: loginInfo.password,
-                domain: loginDomain,
-                uri: loginInfo.url,
-                tabId: tab.id,
-                expires: new Date((new Date()).getTime() + 30 * 60000), // 30 minutes
-            });
-            await this.main.checkNotificationQueue(tab);
         } else if (usernameMatches.length === 1 && usernameMatches[0].login.password !== loginInfo.password) {
             const disabledChangePassword = await this.storageService.get<boolean>(
                 ConstantsService.disableChangedPasswordNotificationKey);
             if (disabledChangePassword) {
                 return;
             }
-            this.addChangedPasswordToQueue(usernameMatches[0].id, loginDomain, loginInfo.password, tab);
+            this.pushChangePasswordToQueue(usernameMatches[0].id, loginDomain, loginInfo.password, tab);
         }
     }
 
+    private async pushAddLoginToQueue(loginDomain: string, loginInfo: any, tab: any, isVaultLocked: boolean = false) {
+        // remove any old messages for this tab
+        this.removeTabFromNotificationQueue(tab);
+        const message: AddLoginQueueMessage = {
+            type: 'addLogin',
+            username: loginInfo.username,
+            password: loginInfo.password,
+            domain: loginDomain,
+            uri: loginInfo.url,
+            tabId: tab.id,
+            expires: new Date((new Date()).getTime() + 5 * 60000), // 5 minutes
+            wasVaultLocked: isVaultLocked,
+        };
+        this.main.notificationQueue.push(message);
+        await this.main.checkNotificationQueue(tab);
+    }
+
     private async changedPassword(changeData: any, tab: any) {
-        if (await this.vaultTimeoutService.isLocked()) {
+        const loginDomain = Utils.getDomain(changeData.url);
+        if (loginDomain == null) {
             return;
         }
 
-        const loginDomain = Utils.getDomain(changeData.url);
+        if (await this.vaultTimeoutService.isLocked()) {
-        if (loginDomain == null) {
+            this.pushChangePasswordToQueue(null, loginDomain, changeData.newPassword, tab, true);
             return;
         }
 
@@ -383,21 +425,23 @@ export default class RuntimeBackground {
             id = ciphers[0].id;
         }
         if (id != null) {
-            this.addChangedPasswordToQueue(id, loginDomain, changeData.newPassword, tab);
+            this.pushChangePasswordToQueue(id, loginDomain, changeData.newPassword, tab);
         }
     }
 
-    private async addChangedPasswordToQueue(cipherId: string, loginDomain: string, newPassword: string, tab: any) {
+    private async pushChangePasswordToQueue(cipherId: string, loginDomain: string, newPassword: string, tab: any, isVaultLocked: boolean = false) {
         // remove any old messages for this tab
         this.removeTabFromNotificationQueue(tab);
-        this.main.notificationQueue.push({
+        const message: AddChangePasswordQueueMessage = {
             type: 'changePassword',
             cipherId: cipherId,
             newPassword: newPassword,
             domain: loginDomain,
             tabId: tab.id,
-            expires: new Date((new Date()).getTime() + 30 * 60000), // 30 minutes
+            expires: new Date((new Date()).getTime() + 5 * 60000), // 5 minutes
-        });
+            wasVaultLocked: isVaultLocked,
+        };
+        this.main.notificationQueue.push(message);
         await this.main.checkNotificationQueue(tab);
     }
 
@@ -438,29 +482,7 @@ export default class RuntimeBackground {
 
     private async getDataForTab(tab: any, responseCommand: string) {
         const responseData: any = {};
-        if (responseCommand === 'notificationBarDataResponse') {
+        if (responseCommand === 'notificationBarGetFoldersList') {
-            responseData.neverDomains = await this.storageService.get<any>(ConstantsService.neverDomainsKey);
-            const disableAddLoginFromOptions = await this.storageService.get<boolean>(
-                ConstantsService.disableAddLoginNotificationKey);
-            responseData.disabledAddLoginNotification = disableAddLoginFromOptions || !(await this.allowPersonalOwnership());
-            responseData.disabledChangedPasswordNotification = await this.storageService.get<boolean>(
-                ConstantsService.disableChangedPasswordNotificationKey);
-        } else if (responseCommand === 'autofillerAutofillOnPageLoadEnabledResponse') {
-            responseData.autofillEnabled = await this.storageService.get<boolean>(
-                ConstantsService.enableAutoFillOnPageLoadKey);
-        } else if (responseCommand === 'notificationBarFrameDataResponse') {
-            responseData.i18n = {
-                appName: this.i18nService.t('appName'),
-                close: this.i18nService.t('close'),
-                yes: this.i18nService.t('yes'),
-                never: this.i18nService.t('never'),
-                notificationAddSave: this.i18nService.t('notificationAddSave'),
-                notificationNeverSave: this.i18nService.t('notificationNeverSave'),
-                notificationAddDesc: this.i18nService.t('notificationAddDesc'),
-                notificationChangeSave: this.i18nService.t('notificationChangeSave'),
-                notificationChangeDesc: this.i18nService.t('notificationChangeDesc'),
-            };
-        } else if (responseCommand === 'notificationBarGetFoldersList') {
             responseData.folders = await this.folderService.getAllDecrypted();
         }
 

src/browser/browserApi.ts

@@ -11,27 +11,27 @@ export class BrowserApi {
     static isFirefoxOnAndroid: boolean = navigator.userAgent.indexOf('Firefox/') !== -1 &&
         navigator.userAgent.indexOf('Android') !== -1;
 
-    static async getTabFromCurrentWindowId(): Promise<any> {
+    static async getTabFromCurrentWindowId(): Promise<chrome.tabs.Tab> | null {
         return await BrowserApi.tabsQueryFirst({
             active: true,
             windowId: chrome.windows.WINDOW_ID_CURRENT,
         });
     }
 
-    static async getTabFromCurrentWindow(): Promise<any> {
+    static async getTabFromCurrentWindow(): Promise<chrome.tabs.Tab> | null {
         return await BrowserApi.tabsQueryFirst({
             active: true,
             currentWindow: true,
         });
     }
 
-    static async getActiveTabs(): Promise<any[]> {
+    static async getActiveTabs(): Promise<chrome.tabs.Tab[]> {
         return await BrowserApi.tabsQuery({
             active: true,
         });
     }
 
-    static async tabsQuery(options: any): Promise<any[]> {
+    static async tabsQuery(options: chrome.tabs.QueryInfo): Promise<chrome.tabs.Tab[]> {
         return new Promise(resolve => {
             chrome.tabs.query(options, (tabs: any[]) => {
                 resolve(tabs);
@@ -39,7 +39,7 @@ export class BrowserApi {
         });
     }
 
-    static async tabsQueryFirst(options: any): Promise<any> {
+    static async tabsQueryFirst(options: chrome.tabs.QueryInfo): Promise<chrome.tabs.Tab> | null {
         const tabs = await BrowserApi.tabsQuery(options);
         if (tabs.length > 0) {
             return tabs[0];
@@ -97,6 +97,26 @@ export class BrowserApi {
         });
     }
 
+    static async closeLoginTab() {
+        const tabs = await BrowserApi.tabsQuery({
+            active: true,
+            title: 'Bitwarden',
+            windowType: 'normal',
+            currentWindow: true,
+        });
+
+        if (tabs.length === 0) {
+            return;
+        }
+
+        const tabToClose = tabs[tabs.length - 1].id;
+        chrome.tabs.remove(tabToClose);
+    }
+
+    static async focusSpecifiedTab(tabId: number) {
+        chrome.tabs.update(tabId, { active: true, highlighted: true });
+    }
+
     static closePopup(win: Window) {
         if (BrowserApi.isWebExtensionsApi && BrowserApi.isFirefoxOnAndroid) {
             // Reactivating the active tab dismisses the popup tab. The promise final

src/content/notificationBar.ts

@@ -431,23 +431,11 @@ document.addEventListener('DOMContentLoaded', event => {
     function closeExistingAndOpenBar(type: string, typeData: any) {
         let barPage = 'notification/bar.html';
         switch (type) {
-            case 'info':
-                barPage = barPage + '?info=' + typeData.text;
-                break;
-            case 'warning':
-                barPage = barPage + '?warning=' + typeData.text;
-                break;
-            case 'error':
-                barPage = barPage + '?error=' + typeData.text;
-                break;
-            case 'success':
-                barPage = barPage + '?success=' + typeData.text;
-                break;
             case 'add':
-                barPage = barPage + '?add=1';
+                barPage = barPage + '?add=1&isVaultLocked=' + typeData.isVaultLocked;
                 break;
             case 'change':
-                barPage = barPage + '?change=1';
+                barPage = barPage + '?change=1&isVaultLocked=' + typeData.isVaultLocked;
                 break;
             default:
                 break;

src/manifest.json

@@ -128,7 +128,10 @@
     }
   },
   "web_accessible_resources": [
-    "notification/bar.html"
+    "notification/bar.html",
+    "images/icon38.png",
+    "images/icon38_locked.png",
+    "images/close.png"
   ],
   "applications": {
     "gecko": {

src/notification/bar.html

@@ -1,20 +1,22 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>Bitwarden</title>
     <meta charset="utf-8" />
 </head>
+
 <body>
     <div class="outer-wrapper">
         <div class="logo">
             <a href="https://vault.bitwarden.com" target="_blank" id="logo-link">
-                <img id="logo" alt="Bitwarden" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVBQTFRFAAAAMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzjZa7EAAAAHB0Uk5TAGOSmJRPBP/wZ5ygx4CC4ZDDBsWdD86RJeX5dF7+3j4Hq78Rj/pY824x2B7tJoS7mgIc2Rqhyid69g6V/FQFe/sN0RTAGcxO4rwVickfrlDIpRsKeZdI94UD6tXmZCO1/TAIWulwn+zumy8B0DPPwmJoSmgAAAFHSURBVHicY2AAAkYmZsKAhZWNAQbYiQIcnCRqYOciVQM3VTXw8CIDPn6CGgQYkAGb4KiGUQ2jGoaTBiFhkJgI8RpExUBi4sRrkJAECklJE69BRhYoJCcP50sS0KCgCBJSUoYLqKji16CmDhSR1UAIaGrh1aCtAxKR1EUS0sOngU0fLGJgiKTByBi3BhNTsICZObIjDS0scWmwsgZL2djaoYSblb0sdg3m3A5gvrUhAypwdMKqwdkFot7JlQEdmLhhamBz94DwPJ0x1DMweLmgaxD1toFwfHyxqAcmGD8bZA1s/gGQ+JQNDMKqnoEhOEQdriE0LDAcwpKMCMahnoEhki8KpiE6BsrgiBXCqR4I4uITUEMrMBGfciBISo5CUp6SSkA5CCSmpUOVZ2RmZROhgYFNPgesXjjXjrBiCDC0zQvP52TDKgcAwC5BBQq6zvAAAAAASUVORK5CYII=" />
+                <img id="logo" alt="Bitwarden" />
             </a>
         </div>
         <div id="content"></div>
         <div>
             <button type="button" class="neutral" id="close-button">
-                <img id="close" alt="X" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAABJQTFRFAAAAMzMzMzMzMzMzMzMzMzMzbxxq5QAAAAZ0Uk5TAECg/2CfwOuXQgAAAJVJREFUeJxVkdEJwzAMRNXgAQpZINAu0Fz7b3AHyP7T1MrppNQfMuI9sE42s7vp3Lws7+zHMcsDPdqGz8SAhAEctgIhNDhiDYyNVw+8p5ZYgrCExBS+iSmgMIXCEhJTKMy+Yobf//BF0Hv9gp8lcPKRAifPPSiYBAULoXJTWHNyJy/f917vbv4fCtZOslSwcZLKMf/zB2MLKtNp5GuwAAAAAElFTkSuQmCC" />
+                <img id="close" alt="Close" />
             </button>
         </div>
     </div>
@@ -33,7 +35,7 @@
                 <button class="change-save"></button>
             </div>
         </div>
-        <div id="template-alert"></div>
     </div>
 </body>
+
 </html>

src/notification/bar.js

@@ -20,6 +20,14 @@ document.addEventListener('DOMContentLoaded', () => {
     setTimeout(load, 50);
 
     function load() {
+        const isVaultLocked = getQueryVariable('isVaultLocked') == 'true';
+        document.getElementById('logo').src = isVaultLocked
+            ? chrome.runtime.getURL('images/icon38_locked.png')
+            : chrome.runtime.getURL('images/icon38.png');
+
+        document.getElementById('close').src = chrome.runtime.getURL('images/close.png');
+        document.getElementById('close').alt = i18n.close;
+
         var closeButton = document.getElementById('close-button'),
             body = document.querySelector('body'),
             bodyRect = body.getBoundingClientRect();
@@ -39,7 +47,7 @@ document.addEventListener('DOMContentLoaded', () => {
         } else {
             document.querySelector('#template-add .add-save').textContent = i18n.notificationAddSave;
             document.querySelector('#template-add .never-save').textContent = i18n.notificationNeverSave;
-            document.querySelector('#template-add .select-folder').style.display = 'initial';
+            document.querySelector('#template-add .select-folder').style.display = isVaultLocked ? 'none' : 'initial';
             document.querySelector('#template-add .select-folder').setAttribute('aria-label', i18n.folder);
             document.querySelector('#template-change .change-save').textContent = i18n.notificationChangeSave;
         }
@@ -55,11 +63,27 @@ document.addEventListener('DOMContentLoaded', () => {
 
             addButton.addEventListener('click', (e) => {
                 e.preventDefault();
+
                 const folderId = document.querySelector('#template-add-clone .select-folder').value;
-                sendPlatformMessage({
+
+                const bgAddSaveMessage = {
                     command: 'bgAddSave',
                     folder: folderId,
-                });
+                };
+
+                if (isVaultLocked) {
+                    sendPlatformMessage({
+                        command: 'promptForLogin'
+                    });
+
+                    sendPlatformMessage({
+                        command: 'addToLockedVaultPendingNotifications',
+                        retryItem: bgAddSaveMessage
+                    });
+                    return;
+                }
+
+                sendPlatformMessage(bgAddSaveMessage);
             });
 
             neverButton.addEventListener('click', (e) => {
@@ -69,28 +93,41 @@ document.addEventListener('DOMContentLoaded', () => {
                 });
             });
 
-            const responseFoldersCommand = 'notificationBarGetFoldersList';
+            if (!isVaultLocked) {
-            chrome.runtime.onMessage.addListener((msg) => {
+                const responseFoldersCommand = 'notificationBarGetFoldersList';
-                if (msg.command === responseFoldersCommand && msg.data) {
+                chrome.runtime.onMessage.addListener((msg) => {
-                    fillSelectorWithFolders(msg.data.folders);
+                    if (msg.command === responseFoldersCommand && msg.data) {
-                }
+                        fillSelectorWithFolders(msg.data.folders);
-            });
+                    }
-            sendPlatformMessage({
+                });
-                command: 'bgGetDataForTab',
+                sendPlatformMessage({
-                responseCommand: responseFoldersCommand
+                    command: 'bgGetDataForTab',
-            });
+                    responseCommand: responseFoldersCommand
+                });
+            }
         } else if (getQueryVariable('change')) {
             setContent(document.getElementById('template-change'));
             var changeButton = document.querySelector('#template-change-clone .change-save');
             changeButton.addEventListener('click', (e) => {
                 e.preventDefault();
-                sendPlatformMessage({
+
+                const bgChangeSaveMessage = {
                     command: 'bgChangeSave'
-                });
+                };
+
+                if (isVaultLocked) {
+                    sendPlatformMessage({
+                        command: 'promptForLogin'
+                    });
+
+                    sendPlatformMessage({
+                        command: 'addToLockedVaultPendingNotifications',
+                        retryItem: bgChangeSaveMessage,
+                    });
+                    return;
+                }
+                sendPlatformMessage(bgChangeSaveMessage);
             });
-        } else if (getQueryVariable('info')) {
-            setContent(document.getElementById('template-alert'));
-            document.getElementById('template-alert-clone').textContent = getQueryVariable('info');
         }
 
         closeButton.addEventListener('click', (e) => {

src/popup/scss/base.scss

@@ -346,6 +346,16 @@ app-root {
     }
 }
 
+@media only screen and (min-width: 601px) {
+    app-lock header {
+        padding: 0 calc((100% - 500px) / 2);
+    }
+
+    app-lock content {
+        padding: 0 calc((100% - 500px) / 2);
+    }
+}
+
 content {
     position: absolute;
     top: 44px;