fix setting "protected" class and background on note tree

public/javascripts/note_editor.js

@@ -79,18 +79,11 @@ const noteEditor = (function() {
     }
 
     function setNoteBackgroundIfProtected(note) {
-        if (note.detail.is_protected) {
+        const isProtected = !!note.detail.is_protected;
-            $("#note-detail-wrapper").addClass("protected");
-            protectButton.hide();
-            unprotectButton.show();
-        }
-        else {
-            $("#note-detail-wrapper").removeClass("protected");
-            protectButton.show();
-            unprotectButton.hide();
-        }
 
-        noteTree.setCurrentNoteTreeBasedOnProtectedStatus();
+        noteDetailWrapperEl.toggleClass("protected", isProtected);
+        protectButton.toggle(!isProtected);
+        unprotectButton.toggle(isProtected);
     }
 
     let isNewNoteCreated = false;
@@ -129,6 +122,7 @@ const noteEditor = (function() {
         noteChangeDisabled = false;
 
         setNoteBackgroundIfProtected(currentNote);
+        noteTree.setNoteTreeBackgroundBasedOnProtectedStatus(noteId);
 
         showAppIfHidden();
     }

public/javascripts/note_tree.js

@@ -617,8 +617,14 @@ const noteTree = (function() {
         }
     }
 
-    function setCurrentNoteTreeBasedOnProtectedStatus() {
+    function setNoteTreeBackgroundBasedOnProtectedStatus(noteId) {
-        getCurrentClones().map(node => node.toggleClass("protected", !!node.data.is_protected));
+        getNodesByNoteId(noteId).map(node => node.toggleClass("protected", !!node.data.is_protected));
+    }
+
+    function setProtected(noteId, isProtected) {
+        getNodesByNoteId(noteId).map(node => node.data.is_protected = isProtected);
+
+        setNoteTreeBackgroundBasedOnProtectedStatus(noteId);
     }
 
     function getAutocompleteItems(parentNoteId, notePath, titlePath) {
@@ -776,7 +782,8 @@ const noteTree = (function() {
         reload,
         collapseTree,
         scrollToCurrentNote,
-        setCurrentNoteTreeBasedOnProtectedStatus,
+        setNoteTreeBackgroundBasedOnProtectedStatus,
+        setProtected,
         getCurrentNode,
         activateNode,
         getCurrentNotePath,

public/javascripts/protected_session.js

@@ -115,6 +115,8 @@ const protected_session = (function() {
 
         await noteEditor.saveNoteToServer(note);
 
+        noteTree.setProtected(note.detail.note_id, note.detail.is_protected);
+
         noteEditor.setNoteBackgroundIfProtected(note);
     }
 
@@ -129,6 +131,8 @@ const protected_session = (function() {
 
         await noteEditor.saveNoteToServer(note);
 
+        noteTree.setProtected(note.detail.note_id, note.detail.is_protected);
+
         noteEditor.setNoteBackgroundIfProtected(note);
     }
 

views/index.ejs

@@ -171,9 +171,10 @@
       <form id="protected-session-password-form">
         <div class="form-group">
           <label for="protected-session-password">To proceed with requested action you need to enter protected session by entering password:</label>
-          <input id="protected-session-password" style="width: 250px;" type="password">
+          <input id="protected-session-password" class="form-control" type="password">
-          <button class="btn btn-sm">Show</button>
         </div>
+
+        <button class="btn btn-sm">Enter protected session</button>
       </form>
     </div>