Open login prompt as popout when vault is locked

src/background/main.background.ts

@@ -240,7 +240,7 @@ export default class MainBackground {
         this.runtimeBackground = new RuntimeBackground(this, this.autofillService, this.cipherService,
             this.platformUtilsService as BrowserPlatformUtilsService, this.storageService, this.i18nService,
             this.notificationsService, this.systemService, this.vaultTimeoutService,
-            this.environmentService, this.policyService, this.userService, this.messagingService, this.folderService);
+            this.environmentService, this.policyService, this.userService, this.messagingService, this.folderService, this.popupUtilsService);
         this.nativeMessagingBackground = new NativeMessagingBackground(this.storageService, this.cryptoService, this.cryptoFunctionService,
             this.vaultTimeoutService, this.runtimeBackground, this.i18nService, this.userService, this.messagingService, this.appIdService,
             this.platformUtilsService);

src/background/runtime.background.ts

@@ -16,6 +16,7 @@ import { SystemService } from 'jslib-common/abstractions/system.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
 import { ConstantsService } from 'jslib-common/services/constants.service';
+import { PopupUtilsService } from '../popup/services/popup-utils.service';
 import { AutofillService } from '../services/abstractions/autofill.service';
 import BrowserPlatformUtilsService from '../services/browserPlatformUtils.service';
 
@@ -43,7 +44,7 @@ export default class RuntimeBackground {
         private systemService: SystemService, private vaultTimeoutService: VaultTimeoutService,
         private environmentService: EnvironmentService, private policyService: PolicyService,
         private userService: UserService, private messagingService: MessagingService,
-        private folderService: FolderService) {
+        private folderService: FolderService, private popupUtilsService: PopupUtilsService) {
 
         // onInstalled listener must be wired up before anything else, so we do it in the ctor
         chrome.runtime.onInstalled.addListener((details: any) => {
@@ -82,6 +83,9 @@ export default class RuntimeBackground {
             case 'openPopup':
                 await this.main.openPopup();
                 break;
+            case 'openPopout':
+                await this.popupUtilsService.popOut(window, 'popup/index.html?uilocation=popout');
+                break;
             case 'showDialogResolve':
                 this.platformUtilsService.resolveDialogPromise(msg.dialogId, msg.confirmed);
                 break;

src/notification/bar.js

@@ -61,11 +61,21 @@ 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: 'openPopout'
+                    });
+                }
+
+                sendPlatformMessage(bgAddSaveMessage);
             });
 
             neverButton.addEventListener('click', (e) => {
@@ -92,9 +102,17 @@ document.addEventListener('DOMContentLoaded', () => {
             var changeButton = document.querySelector('#template-change-clone .change-save');
             changeButton.addEventListener('click', (e) => {
                 e.preventDefault();
-                sendPlatformMessage({
+
+                const bgChangeSaveMessage = {
                     command: 'bgChangeSave'
-                });
+                };
+
+                if (isVaultLocked) {
+                    sendPlatformMessage({
+                        command: 'openPopout'
+                    });
+                }
+                sendPlatformMessage(bgChangeSaveMessage);
             });
         } else if (getQueryVariable('info')) {
             setContent(document.getElementById('template-alert'));