cannot edit note title when not in protected session

src/public/javascripts/services/note_detail.js

@@ -109,6 +109,10 @@ function onNoteChange(func) {
 async function saveNote() {
     const note = getCurrentNote();
 
+    if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
+        return;
+    }
+
     note.title = $noteTitle.val();
     note.content = getCurrentNoteContent(note);
 
@@ -223,6 +227,8 @@ async function loadNoteDetail(noteId) {
             return;
         }
 
+        $noteTitle.removeAttr("readonly"); // this can be set by protected session service
+
         await getComponent(currentNote.type).show();
     }
     finally {

src/public/javascripts/services/protected_session.js

@@ -15,6 +15,7 @@ const $protectButton = $("#protect-button");
 const $unprotectButton = $("#unprotect-button");
 const $enterProtectedSessionButton = $("#enter-protected-session-button");
 const $leaveProtectedSessionButton = $("#leave-protected-session-button");
+const $noteTitle = $("#note-title");
 
 let protectedSessionDeferred = null;
 
@@ -38,6 +39,9 @@ function ensureProtectedSession(requireProtectedSession, modal) {
         // using deferred instead of promise because it allows resolving from outside
         protectedSessionDeferred = dfd;
 
+        // user shouldn't be able to edit note title
+        $noteTitle.prop("readonly", true);
+
         if (modal) {
             if (treeService.getCurrentNode().data.isProtected) {
                 $noteDetailWrapper.hide();

src/public/stylesheets/mobile.css

@@ -83,4 +83,8 @@ html, body {
 
 .fancytree-node.fancytree-expanded .fancytree-expander:before {
     content: "\e9ba";
+}
+
+kbd {
+    display: none;
 }

src/public/stylesheets/style.css

@@ -57,6 +57,18 @@ body {
     grid-area: title;
 }
 
+#note-title {
+    margin-left: 15px;
+    font-size: x-large;
+    border: 0;
+    width: 5em;
+    flex-grow: 100;
+}
+
+#note-title[readonly] {
+    background: inherit;
+}
+
 .tdialog {
     display: none;
 }

src/views/index.ejs

@@ -112,7 +112,7 @@
                 </ul>
             </div>
 
-            <input autocomplete="off" value="" id="note-title" style="margin-left: 15px; font-size: x-large; border: 0; width: 5em; flex-grow: 100;" tabindex="1">
+            <input autocomplete="off" value="" id="note-title" tabindex="1">
 
             <div class="hide-toggle" style="display: flex; align-items: center;">
                 <span id="note-id-display" title="Note ID"></span>

src/views/mobile.ejs

@@ -35,6 +35,8 @@
             <% include details/image.ejs %>
 
             <% include details/relation_map.ejs %>
+
+            <% include details/protected_session_password.ejs %>
         </div>
     </div>