$ git clone https://socialnetwork.ion.nu/socialnetwork-web.git
commit 875338c7354b42aaa84076f21ba2804603076cc5
Author: Alicia <...>
Date:   Fri Jul 7 11:37:17 2017 +0200

    Display the generated key in a modal window with an option to save it as a file.

diff --git a/websocial.html b/websocial.html
index 7688bf3..8491ae6 100644
--- a/websocial.html
+++ b/websocial.html
@@ -15,7 +15,6 @@
     <div id="login_privkey" style="display:none;">
       Paste your private key below, or leave empty to generate a new key<br />
       <textarea id="privkey"></textarea><br />
-      Note: generating a key takes a while, you may need to tell your browser to let the script continue.<br />
       <button onclick="initgui();">Continue</button>
     </div>
     <div id="login_account" style="display:none;">
@@ -37,6 +36,12 @@
       </div>
     </div>
   </div>
+  <div class="modal" id="key_window" style="display:none;">
+    <div id="key_generating">
+      Generating key...<br />
+      Note: generating a key takes a while, you may need to tell your browser to let the script continue.<br />
+    </div>
+  </div>
   <!-- Main interface -->
   <div class="menu">
     <a href="#">Feed</a><a href="#">Friends</a><a href="#">Self</a>
diff --git a/websocial.js b/websocial.js
index 14bc944..f39cbcf 100644
--- a/websocial.js
+++ b/websocial.js
@@ -7,12 +7,41 @@ function chdisplay(old,newview)
 function initgui()
 {
   var key=document.getElementById('privkey').value;
-  init(key);
-  chdisplay('login_window',false);
-  if(key=='')
+// TODO: some basic checks that 'key' at least looks like it might be a key, otherwise set to '' so we get the key window
+  chdisplay('login_window',(key=='')?'key_window':false);
+  // Delay the actual work a tiny bit to make sure the "have patience" message is rendered first
+  setTimeout(function()
   {
-    alert('Key:\n'+FS.readFile('privkey.pem', {'encoding':'utf8'}));
-// TODO: Display generated key in a nicer modal window, possibly with a fileblob download option
-  }
+    init(key);
+    key=FS.readFile('privkey.pem', {'encoding':'utf8'});
+    // Display generated (or supplied, but later) key in a modal window with a fileblob download option
+    chdisplay('key_generating', false);
+    var w=document.getElementById('key_window');
+    w.appendChild(document.createTextNode('Key:'));
+    w.appendChild(document.createElement('br'));
+    var text=document.createElement('textarea');
+    text.value=key;
+    text.readonly=true;
+    text.style.width='90%';
+    text.style.height='80%';
+    w.appendChild(text);
+    w.appendChild(document.createElement('br'));
+    w.style.textAlign='left';
+    w.style.padding='8px';
+    w.style.height='60%';
+    if(window.URL && URL.createObjectURL) // Unstable standard
+    {
+      var link=document.createElement('a');
+      link.href=URL.createObjectURL(new Blob([key], {type:'application/x-pem-file'}));
+      link.appendChild(document.createTextNode('Download'));
+      link.download='privkey.pem';
+      w.appendChild(link);
+    }
+    var button=document.createElement('button');
+    button.appendChild(document.createTextNode('OK'));
+    button.onclick=function(){chdisplay('key_window', false);};
+    button.style.float='right';
+    w.appendChild(button);
+  }, 0);
 // TODO: display any updates we may have (actually we probably won't have any yet, update when we get them, callback for 'updates' command?)
 }