Select group when adding new credentials

keepassxc-browser/_locales/en/messages.json

@@ -307,6 +307,10 @@
         "message": "Please choose the credentials you want to update.",
         "description": "A popup message shown choosing what credentials user wants to update."
     },
+    "popupRememberChooseGroup": {
+        "message": "Please choose the group you want to add the new credentials.",
+        "description": "A popup message shown choosing what group user wants to use for new credentials."
+    },
     "popupLoginText": {
         "message": "Select the login information you would like to get entered into the page.",
         "description": "A popup message shown when one or multiple credentials are present."

keepassxc-browser/background/event.js

@@ -287,6 +287,7 @@ kpxcEvent.messageHandlers = {
     'check_update_keepassxc': kpxcEvent.onCheckUpdateKeePassXC,
     'generate_password': keepass.generatePassword,
     'get_connected_database': kpxcEvent.onGetConnectedDatabase,
+    'get_database_groups': keepass.getDatabaseGroups,
     'get_keepassxc_versions': kpxcEvent.onGetKeePassXCVersions,
     'get_status': kpxcEvent.onGetStatus,
     'get_tab_information': kpxcEvent.onGetTabInformation,

keepassxc-browser/background/keepass.js

@@ -33,7 +33,8 @@ const kpActions = {
     CHANGE_PUBLIC_KEYS: 'change-public-keys',
     LOCK_DATABASE: 'lock-database',
     DATABASE_LOCKED: 'database-locked',
-    DATABASE_UNLOCKED: 'database-unlocked'
+    DATABASE_UNLOCKED: 'database-unlocked',
+    GET_DATABASE_GROUPS: 'get-database-groups'
 };
 
 const kpErrors = {
@@ -127,11 +128,11 @@ keepass.sendNativeMessage = function(request, enableTimeout = false) {
     });
 };
 
-keepass.addCredentials = function(callback, tab, username, password, url) {
-    keepass.updateCredentials(callback, tab, null, username, password, url);
+keepass.addCredentials = function(callback, tab, username, password, url, group, groupUuid) {
+    keepass.updateCredentials(callback, tab, null, username, password, url, group, groupUuid);
 };
 
-keepass.updateCredentials = function(callback, tab, entryId, username, password, url) {
+keepass.updateCredentials = function(callback, tab, entryId, username, password, url, group, groupUuid) {
     page.debug('keepass.updateCredentials(callback, {1}, {2}, {3}, [password], {4})', tab.id, entryId, username, url);
     if (tab && page.tabs[tab.id]) {
         page.tabs[tab.id].errorMessage = null;
@@ -162,6 +163,11 @@ keepass.updateCredentials = function(callback, tab, entryId, username, password,
             messageData.uuid = entryId;
         }
 
+        if (group && groupUuid) {
+            messageData.group = group;
+            messageData.groupUuid = groupUuid;
+        }
+
         const request = {
             action: kpAction,
             message: keepass.encrypt(messageData, nonce),
@@ -696,6 +702,70 @@ keepass.lockDatabase = function(tab) {
     });
 };
 
+keepass.getDatabaseGroups = function(callback, tab) {
+    keepass.testAssociation((taResponse) => {
+        if (!taResponse) {
+            browserAction.showDefault(null, tab);
+            callback([]);
+            return;
+        }
+
+        if (tab && page.tabs[tab.id]) {
+            page.tabs[tab.id].errorMessage = null;
+        }
+
+        if (!keepass.isConnected) {
+            callback([]);
+            return;
+        }
+
+        let groups = [];
+        const kpAction = kpActions.GET_DATABASE_GROUPS;
+        const nonce = keepass.getNonce();
+        const incrementedNonce = keepass.incrementedNonce(nonce);
+
+        const messageData = {
+            action: kpAction
+        };
+
+        const request = {
+            action: kpAction,
+            message: keepass.encrypt(messageData, nonce),
+            nonce: nonce,
+            clientID: keepass.clientID
+        };
+
+        keepass.sendNativeMessage(request).then((response) => {
+            if (response.message && response.nonce) {
+                const res = keepass.decrypt(response.message, response.nonce);
+                if (!res) {
+                    keepass.handleError(tab, kpErrors.CANNOT_DECRYPT_MESSAGE);
+                    callback([]);
+                    return;
+                }
+
+                const message = nacl.util.encodeUTF8(res);
+                const parsed = JSON.parse(message);
+
+                if (keepass.verifyResponse(parsed, incrementedNonce)) {
+                    groups = parsed.groups;
+                    keepass.updateLastUsed(keepass.databaseHash);
+                    callback(groups);
+                } else {
+                    console.log('getDatabaseGroups rejected');
+                    callback([]);
+                }
+            } else if (response.error && response.errorCode) {
+                keepass.handleError(tab, response.errorCode, response.error);
+                callback([]);
+            } else {
+                browserAction.showDefault(null, tab);
+                callback([]);
+            }
+        });
+    }, tab, false);
+};
+
 keepass.generateNewKeyPair = function() {
     keepass.keyPair = nacl.box.keyPair();
     //console.log(nacl.util.encodeBase64(keepass.keyPair.publicKey) + ' ' + nacl.util.encodeBase64(keepass.keyPair.secretKey));

keepassxc-browser/popups/popup.css

@@ -46,6 +46,12 @@ body {
     font-size: 80%;
     color: #787878;
 }
+#list {
+    padding-left: 0px;
+}
+#child {
+    border-top: 0px;
+}
 #update-available {
     padding-top: 10px;
     margin-top: 10px;
@@ -64,9 +70,24 @@ body {
 }
 #login-filter {
 	outline:none;
-	border-radius: 4px 0 0 4px;
+	border-radius: 4px;
 	border: 1px solid #ccc;
 	margin-bottom: 5px;
 	padding: 2px 10px;
 	width: 100%;
-}
+}
+.credentials .groups {
+    display: none;
+    border-top: 1px solid #333;
+}
+.connected-database {
+    display: none;
+    font-size: 85%;
+    color: #787878;
+}
+.credentials .username-new {
+    display: none;
+}
+.credentials .username-exists {
+    display: none;
+}

keepassxc-browser/popups/popup_remember.html

@@ -10,15 +10,6 @@
     <script type="text/javascript" src="../options/bootstrap.min.js" /></script>
     <script type="text/javascript" src="popup_functions.js"></script>
     <script type="text/javascript" src="popup_remember.js"></script>
-    <style type="text/css">
-      .credentials {display: none; border-top: 1px solid #333;}
-      .connected-database {display: none; font-size: 85%; color: #787878;}
-      .credentials .username-new {display: none;}
-      .credentials .username-exists {display: none;}
-      .small { font-weight: bold; }
-      .small .normal { font-weight: normal; }
-      .info { font-weight: normal; }
-    </style>
   </head>
   <body>
     <div class="buttons">
@@ -41,11 +32,16 @@
       <p data-i18n="popupRememberSaving" i18n-placeholder="<span></span><em></em>"></p>
     </div>
 
-    <div class="credentials">
+    <div class="credentials" style="display: none;">
       <p class="username-new"><span data-i18n="popupRememberNewUsername" i18n-placeholder="<strong></strong>"></span></p>
       <p class="username-exists"><span data-i18n="popupRememberUsernameExists" i18n-placeholder="<strong></strong>"></span></p>
       <p data-i18n="popupRememberChooseCredentials"></p>
-      <ul id="list"></ul>
+      <ul id="list" class="list-group"></ul>
+    </div>
+
+    <div class="groups" style="display: none;">
+      <p data-i18n="popupRememberChooseGroup"></p>
+      <ul id="list" class="list-group"></ul>
     </div>
     <script type="text/javascript" src="../translate.js"></script>
   </body>

keepassxc-browser/popups/popup_remember.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const DEFAULT_BROWSER_GROUP = 'KeePassXC-Browser Passwords';
+
 var _tab;
 
 function _initialize(tab) {
@@ -27,28 +29,91 @@ function _initialize(tab) {
     $('.information-username:first').text(_tab.credentials.username);
 
     $('#btn-new').click(function(e) {
+        e.preventDefault();
+        $('.credentials').hide();
+        $('ul#list').empty();
+
+        // Get group listing from KeePassXC
         browser.runtime.sendMessage({
-            action: 'add_credentials',
-            args: [_tab.credentials.username, _tab.credentials.password, _tab.credentials.url]
-        }).then(_verifyResult);
+            action: 'get_database_groups'
+        }).then((result) => {
+            // Only the Root group and group for KeePassXC-Browser passwords -> save to default
+            if (result.groups === undefined ||
+                (result.groups.length > 1 && result.groups[0].children.length === 1 &&
+                    result.groups[0].children[0] === DEFAULT_BROWSER_GROUP)) {
+                browser.runtime.sendMessage({
+                    action: 'add_credentials',
+                    args: [ _tab.credentials.username, _tab.credentials.password, _tab.credentials.url ]
+                }).then(_verifyResult);
+            }
+
+            const addChildren = function(group, parentElement, depth) {
+                depth += 1;
+                const padding = depth * 20;
+
+                for (const child of group.children) {
+                    const a = createLink(child.name, child.uuid, child.children.length > 0);
+                    a.attr('id', 'child');
+                    a.css('cssText', 'padding-left: ' + String(padding) + 'px !important;');
+
+                    if (parentElement.attr('id') === 'root') {
+                        a.attr('id', 'root-child');
+                    }
+
+                    $('ul#list').append(a);
+                    addChildren(child, a, depth);
+                }
+            };
+
+            const createLink = function(group, groupUuid, hasChildren) {
+                const a = $('<a>')
+                    .attr('href', '#')
+                    .attr('class', 'list-group-item')
+                    .text(group)
+                    .click(function(ev) {
+                        ev.preventDefault();
+                        browser.runtime.sendMessage({
+                            action: 'add_credentials',
+                            args: [ _tab.credentials.username, _tab.credentials.password, _tab.credentials.url, group, groupUuid ]
+                        }).then(_verifyResult);
+                    });
+
+                if (hasChildren) {
+                    a.text('\u25BE ' + group);
+                }
+                return a;
+            };
+
+            let depth = 0;
+            for (const g of result.groups) {
+                const a = createLink(g.name, g.uuid, g.children.length > 0);
+                a.attr('id', 'root');
+
+                $('ul#list').append(a);
+                addChildren(g, a, depth);
+            }
+
+            $('.groups').show();
+        });
     });
 
     $('#btn-update').click(function(e) {
         e.preventDefault();
+        $('.groups').hide();
+        $('ul#list').empty();
 
         //  Only one entry which could be updated
-        if(_tab.credentials.list.length === 1) {
+        if (_tab.credentials.list.length === 1) {
             // Use the current username if it's empty
             if (!_tab.credentials.username) {
                 _tab.credentials.username = _tab.credentials.list[0].login;
             }
 
             browser.runtime.sendMessage({
                 action: 'update_credentials',
-                args: [_tab.credentials.list[0].uuid, _tab.credentials.username, _tab.credentials.password, _tab.credentials.url]
+                args: [ _tab.credentials.list[0].uuid, _tab.credentials.username, _tab.credentials.password, _tab.credentials.url ]
             }).then(_verifyResult);
-        }
-        else {
+        } else {
             $('.credentials:first .username-new:first strong:first').text(_tab.credentials.username);
             $('.credentials:first .username-exists:first strong:first').text(_tab.credentials.username);
 
@@ -62,8 +127,9 @@ function _initialize(tab) {
             }
 
             for (let i = 0; i < _tab.credentials.list.length; i++) {
-                let $a = $('<a>')
+                const $a = $('<a>')
                     .attr('href', '#')
+                    .attr('class', 'list-group-item')
                     .text(_tab.credentials.list[i].login + ' (' + _tab.credentials.list[i].name + ')')
                     .data('entryId', i)
                     .click(function(e) {
@@ -84,7 +150,7 @@ function _initialize(tab) {
                                 _verifyResult('error');
                                 return;
                             }
-                            
+
                             // Show a notification if the user tries to update credentials using the old password
                             if (credentials[entryId].password === _tab.credentials.password) {
                                 showNotification('Error: Credentials not updated. The password has not been changed.');
@@ -103,8 +169,7 @@ function _initialize(tab) {
                     $a.css('font-weight', 'bold');
                 }
 
-                const $li = $('<li class=\"list-group-item\">').append($a);
-                $('ul#list').append($li);
+                $('ul#list').append($a);
             }
 
             $('.credentials').show();
@@ -119,11 +184,11 @@ function _initialize(tab) {
     $('#btn-ignore').click(function(e) {
         browser.windows.getCurrent().then((win) => {
             browser.tabs.query({ 'active': true, 'currentWindow': true }).then((tabs) => {
-                const tab = tabs[0];
+                const currentTab = tabs[0];
                 browser.runtime.getBackgroundPage().then((global) => {
-                    browser.tabs.sendMessage(tab.id, {
+                    browser.tabs.sendMessage(currentTab.id, {
                         action: 'ignore-site',
-                        args: [_tab.credentials.url]
+                        args: [ currentTab.credentials.url ]
                     });
                     _close();
                 });
@@ -132,7 +197,7 @@ function _initialize(tab) {
     });
 }
 
-function _connected_database(db) {
+function _connectedDatabase(db) {
     if (db.count > 1 && db.identifier) {
         $('.connected-database:first em:first').text(db.identifier);
         $('.connected-database:first').show();
@@ -164,7 +229,7 @@ function _close() {
 $(function() {
     browser.runtime.sendMessage({
         action: 'stack_add',
-        args: ['icon_remember_red_background_19x19.png', 'popup_remember.html', 10, true, 0]
+        args: [ 'icon_remember_red_background_19x19.png', 'popup_remember.html', 10, true, 0 ]
     });
 
     browser.runtime.sendMessage({
@@ -173,5 +238,5 @@ $(function() {
 
     browser.runtime.sendMessage({
         action: 'get_connected_database'
-    }).then(_connected_database);
+    }).then(_connectedDatabase);
 });