jquery ui dialog for encryption password

src/templates/app.html

@@ -98,6 +98,17 @@
       </form>
     </div>
 
+    <div id="encryptionPasswordDialog" title="Enter password" style="display: none;">
+      <form id="encryptionPasswordForm">
+        <div class="form-group">
+          <label for="encryptionPassword">This note is encrypted. Enter password to show it:</label>
+          <input id="encryptionPassword" type="password">
+        </div>
+
+        <button class="btn btn-sm">Show</button>
+      </form>
+    </div>
+
     <script type="text/javascript">
       const baseUrl = '';
     </script>

static/js/init.js

@@ -4,6 +4,8 @@ $(function() {
 
         if (fancyTree.length) {
             fancyTree.height($(window).height() - fancyTree.offset().top - 10);
+
+            console.log("height: ", $(window).height() - fancyTree.offset().top - 10);
         }
 
         const noteEditable = $('div.note-editable');

static/js/note.js

@@ -67,9 +67,9 @@ function saveNoteIfChanged(callback) {
 
     updateNoteFromInputs(note);
 
-    encryptNoteIfNecessary(note).then(note => {
+    encryptNoteIfNecessary(note);
+
     saveNoteToServer(note, callback);
-    });
 }
 
 setInterval(saveNoteIfChanged, 5000);
@@ -154,6 +154,23 @@ function setNoteBackgroundIfEncrypted(note) {
     }
 }
 
+let globalEncryptionCallback = null;
+
+function handleEncryption(requireEncryption, callback) {
+    if (requireEncryption && globalEncryptionKey === null) {
+        globalEncryptionCallback = callback;
+
+        $("#noteDetailWrapper").hide();
+        $("#encryptionPasswordDialog").dialog({
+            modal: false,
+            width: 400
+        });
+    }
+    else {
+        callback();
+    }
+}
+
 function loadNote(noteId) {
     $.get(baseUrl + 'notes/' + noteId).then(function(note) {
         globalNote = note;
@@ -166,8 +183,16 @@ function loadNote(noteId) {
             $("#noteTitle").focus().select();
         }
 
-        decryptNoteIfNecessary(note).then(decrypted => {
-            note.detail.note_text = decrypted;
+        handleEncryption(note.detail.encryption > 0, () => {
+            $("#noteDetailWrapper").show();
+            try {
+                $("#encryptionPasswordDialog").dialog('close');
+            }
+            catch(e) {}
+
+            $("#encryptionPassword").val('');
+
+            note.detail.note_text = decryptNoteIfNecessary(note);
 
             let noteText = notecase2html(note);
 
@@ -256,27 +281,35 @@ function deriveEncryptionKey(password) {
     });
 }
 
-let globalEncryptionKeyPromise = null;
+let globalEncryptionKey = null;
 
-function getEncryptionKey() {
-    if (globalEncryptionKeyPromise === null) {
-        const password = prompt("Enter password for encryption");
+$("#encryptionPasswordForm").submit(function() {
+    const password = $("#encryptionPassword").val();
+    $("#encryptionPassword").val("");
 
-        globalEncryptionKeyPromise = deriveEncryptionKey(password);
+    deriveEncryptionKey(password).then(key => {
+        $("#noteDetailWrapper").show();
+        $("#encryptionPasswordDialog").dialog("close");
+
+        globalEncryptionKey = key;
+
+        if (globalEncryptionCallback !== null) {
+            globalEncryptionCallback();
+
+            globalEncryptionCallback = null;
         }
+    });
 
-    return globalEncryptionKeyPromise;
-}
+    return false;
+});
 
 function getAes() {
-    return getEncryptionKey().then(encryptionKey => {
-        return new aesjs.ModeOfOperation.ctr(encryptionKey, new aesjs.Counter(5));
-    });
+    return new aesjs.ModeOfOperation.ctr(globalEncryptionKey, new aesjs.Counter(5));
 }
 
 function encryptNoteIfNecessary(note) {
     if (note.detail.encryption === 0) {
-        return Promise.resolve(note);
+        return note;
     }
     else {
         return encryptNote(note);
@@ -284,7 +317,7 @@ function encryptNoteIfNecessary(note) {
 }
 
 function encryptNote(note) {
-    return getAes().then(aes => {
+    const aes = getAes();
     const noteJson = note.detail.note_text;
 
     const noteBytes = aesjs.utils.utf8.toBytes(noteJson);
@@ -295,13 +328,16 @@ function encryptNote(note) {
     note.detail.note_text = uint8ToBase64(encryptedBytes);
 
     return note;
-    });
 }
 
 function encryptNoteAndSendToServer() {
-    updateNoteFromInputs(globalNote);
+    handleEncryption(true, () => {
+        const note = globalNote;
+
+        updateNoteFromInputs(note);
+
+        encryptNote(note);
 
-    encryptNote(globalNote).then(note => {
         note.detail.encryption = 1;
 
         saveNoteToServer(note);
@@ -311,6 +347,7 @@ function encryptNoteAndSendToServer() {
 }
 
 function decryptNoteAndSendToServer() {
+    handleEncryption(true, () => {
         const note = globalNote;
 
         updateNoteFromInputs(note);
@@ -320,28 +357,25 @@ function decryptNoteAndSendToServer() {
         saveNoteToServer(note);
 
         setNoteBackgroundIfEncrypted(note);
+    });
 }
 
 function decryptNoteIfNecessary(note) {
-    let decryptPromise;
-
     if (note.detail.encryption === 1) {
-        decryptPromise = decryptNote(note.detail.note_text);
+        return decryptNote(note.detail.note_text);
     }
     else {
-        decryptPromise = Promise.resolve(note.detail.note_text);
+        return note.detail.note_text;
     }
-    return decryptPromise;
 }
 
 function decryptNote(encryptedBase64) {
-    return getAes().then(aes => {
+    const aes = getAes();
     const encryptedBytes = base64ToUint8Array(encryptedBase64);
 
     const decryptedBytes = aes.decrypt(encryptedBytes);
 
     return aesjs.utils.utf8.fromBytes(decryptedBytes);
-    });
 }
 
 function uint8ToBase64(u8Arr) {

static/js/tree.js

@@ -212,6 +212,8 @@ $(function(){
                 if (startNoteId) {
                     data.tree.activateKey(startNoteId);
                 }
+
+                $(window).resize();
             },
             hotkeys: {
                 keydown: keybindings