Implemented support for multiple keys.

src/webview/index.html

@@ -57,6 +57,24 @@
                     <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"></path></svg>
                 </span>
             </div>
+
+            <div class="control">
+                <div class="dropdown" id="keys_dropdown" onclick="toggle(this, event);">
+                    <div class="dropdown-trigger">
+                        <button class="button" aria-haspopup="true" aria-controls="keys_menu">
+                            <span id="keys_current_name">No keys</span>
+                            <span class="icon is-small">
+                                    <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
+                                </span>
+                        </button>
+                    </div>
+                    <div class="dropdown-menu" id="keys_menu" role="menu">
+                        <div class="dropdown-content" id="keys_links">
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <div class="buttons has-addons">
                 <button class="button is-link is-light" onclick="loadKey();" title="Load keypair from file">Load key</button>
                 <button class="button is-link is-light" id="save_key" onclick="saveKey();" disabled title="Save current keypair to file">Save key</button>

src/webview/scripts.js

@@ -4,6 +4,8 @@ var ownerEncryption = "";
 var availableZones = [];
 var myDomains = [];
 var currentZone;
+var currentSelectedKey = -1;
+var keysLoaded = [];
 
 document.addEventListener('click', function (event) {
     closeDropdowns();
@@ -576,4 +578,50 @@ function changeZone(zone, event) {
         }
     });
     refreshZonesList();
+}
+
+function refreshKeysMenu() {
+    var buf = "";
+    keysLoaded.forEach(function(value, index, array) {
+        var file_name = value.file_name;
+        if (file_name == "") {
+            file_name = "[Not saved]";
+        }
+        var public = value.public;
+
+        var add_class = "";
+        if (currentSelectedKey == index) {
+            add_class = "is-active";
+        }
+        buf += "<a id=\"key-{id}\" class=\"dropdown-item {class}\" onclick=\"selectKey({index}, event);\" title=\"{title}\">{name}</a>"
+            .replace("{id}", index)
+            .replace("{index}", index)
+            .replace("{class}", add_class)
+            .replace("{title}", public)
+            .replace("{name}", file_name);
+    });
+    var links = document.getElementById("keys_links");
+    links.innerHTML = buf;
+    if (currentSelectedKey >= 0) {
+        var cur_name = document.getElementById("keys_current_name");
+        cur_name.innerHTML = keysLoaded[currentSelectedKey].file_name;
+    }
+}
+
+function keysChanged(json) {
+    keysLoaded = JSON.parse(json);
+    refreshKeysMenu();
+}
+
+function selectKey(index, event) {
+    event.stopPropagation();
+    closeDropdowns();
+    if (currentSelectedKey != index) {
+        external.invoke(JSON.stringify({cmd: 'selectKey', index: parseInt(index)}));
+    }
+}
+
+function keySelected(index) {
+    currentSelectedKey = index;
+    refreshKeysMenu();
 }