Zone selection dropdown improvements.

Added starting functionality to set domain owners (disabled for now).

src/webview/index.html

@@ -107,6 +107,9 @@
             <div class="control">
                 <div class="buttons has-addons">
                     <button id="add_record_button" class="button is-info is-light" onclick="showNewRecordDialog();" title="Domain is nothing without good DNS records">Add record</button>
+                    <button disabled id="owners_button" class="button is-info is-light" onclick="showOwnersDialog();" title="You can change domain owners. Leave empty to be yours only.">
+                        <span>Set owners</span><span id="owners_count" class="tag is-info is-hidden ml-2">0</span>
+                    </button>
                     <button id="new_domain_button" class="button is-info" onclick="createDomain();" title="Start mining">Mine domain</button>
                 </div>
             </div>
@@ -216,6 +219,28 @@
     </div>
 </div>
 
+<div id="owners_dialog" class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-content">
+        <div class="box">
+            <div class="field">
+                <label class="label">Public keys</label>
+                <div class="control">
+                    <textarea class="textarea" id="owners_text"></textarea>
+                </div>
+            </div>
+            <p class="help mb-3">Domains can be owned by several people.
+                You need to add their public keys in this text field, separated by new line.
+                If you don't include your own key, then domain will be completely transferred to entered owners.
+                If you wish to own domain by yourself, just leave this space empty.</p>
+            <div class="buttons is-grouped is-centered">
+                <button class="button is-link" id="owners_positive_button" onclick="ownersPositiveButton();">Ok</button>
+                <button class="button is-link is-light" id="owners_negative_button" onclick="ownersCancelButton();">Cancel</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div id="new_record_dialog" class="modal">
     <div class="modal-background"></div>
     <div class="modal-content">

src/webview/scripts.js

@@ -1,4 +1,5 @@
 var recordsBuffer = [];
+var ownersBuffer = [];
 var availableZones = [];
 var myDomains = [];
 var currentZone;
@@ -331,6 +332,49 @@ function showModalDialog(text, callback) {
     dialog.className = "modal is-active";
 }
 
+function showOwnersDialog() {
+    var dialog = document.getElementById("owners_dialog");
+    dialog.className = "modal is-active";
+}
+
+function isValidOwner(text) {
+    if (text.length != 64) {
+        return false;
+    }
+    var regexp = /^[0-9A-F]{64}$/i;
+    return regexp.test(text);
+}
+
+function ownersPositiveButton() {
+    var text = document.getElementById("owners_text").value;
+    if (text != "") {
+        ownersBuffer = [];
+        var wrong = false;
+        var lines = text.split("\n");
+        lines.forEach(function(value, index, array) {
+            if (wrong) {
+                return;
+            }
+            if (isValidOwner(value)) {
+                ownersBuffer.push(value);
+            } else {
+                alert("Wrong owner '{}'!".replace("{}", value));
+                wrong = true;
+                return;
+            }
+        });
+    }
+    if (!wrong) {
+        var dialog = document.getElementById("owners_dialog");
+        dialog.className = "modal";
+    }
+}
+
+function ownersCancelButton() {
+    var dialog = document.getElementById("owners_dialog");
+    dialog.className = "modal";
+}
+
 function showWarning(text) {
     var warning = document.getElementById("notification_warning");
     var message = document.getElementById("warning_text");
@@ -433,10 +477,10 @@ function keystoreChanged(path, pub_key, hash) {
 }
 
 function closeZonesDropdown() {
-    // If we close this right on blur we loose item clicks
-    setTimeout(function(){
+    var active = document.activeElement;
+    if (active == null || active.id != 'zones-menu') {
         document.getElementById("zones-dropdown").className = "dropdown";
-    }, 100);
+    }
 }
 
 function refreshZonesList() {
@@ -473,7 +517,6 @@ function refreshZonesList() {
 
 function zonesChanged(text) {
     availableZones = JSON.parse(text);
-    currentZone = availableZones[0];
     refreshZonesList();
 }
 

src/webview/styles.css

@@ -46,6 +46,10 @@ body {
   margin: 10pt;
 }
 
+.textarea {
+  overflow-y: auto;
+}
+
 .message {
   min-height: 2rem;
 }