non-modal protected session password form is now done separately as a kind of detail component. Also reworked branch prefix dialog input

src/public/javascripts/dialogs/branch_prefix.js

@@ -24,7 +24,7 @@ async function showDialog() {
 
     const noteTitle = await treeUtils.getNoteTitle(currentNode.data.noteId);
 
-    $noteTitle.html(noteTitle);
+    $noteTitle.text(" - " + noteTitle);
 }
 
 async function savePrefix() {

src/public/javascripts/services/protected_session.js

@@ -6,8 +6,10 @@ import protectedSessionHolder from './protected_session_holder.js';
 import infoService from "./info.js";
 
 const $dialog = $("#protected-session-password-dialog");
-const $passwordForm = $("#protected-session-password-form");
-const $password = $("#protected-session-password");
+const $component = $("#protected-session-password-component");
+const $passwordForms = $(".protected-session-password-form");
+const $passwordInputs = $(".protected-session-password");
+const $passwordInModal = $("#protected-session-password-in-modal");
 const $noteDetailWrapper = $("#note-detail-wrapper");
 const $protectButton = $("#protect-button");
 const $unprotectButton = $("#unprotect-button");
@@ -36,12 +38,16 @@ function ensureProtectedSession(requireProtectedSession, modal) {
         // using deferred instead of promise because it allows resolving from outside
         protectedSessionDeferred = dfd;
 
-        if (treeService.getCurrentNode().data.isProtected) {
-            $noteDetailWrapper.hide();
-        }
+        if (modal) {
+            if (treeService.getCurrentNode().data.isProtected) {
+                $noteDetailWrapper.hide();
+            }
 
-        $dialog.toggleClass("modalless", !modal);
-        $dialog.modal();
+            $dialog.modal();
+        }
+        else {
+            $component.show();
+        }
     }
     else {
         dfd.resolve(false);
@@ -50,9 +56,8 @@ function ensureProtectedSession(requireProtectedSession, modal) {
     return dfd.promise();
 }
 
-async function setupProtectedSession() {
-    const password = $password.val();
-    $password.val("");
+async function setupProtectedSession(password) {
+    $passwordInputs.val("");
 
     const response = await enterProtectedSessionOnServer(password);
 
@@ -72,7 +77,7 @@ async function setupProtectedSession() {
     await noteDetailService.reload();
 
     if (protectedSessionDeferred !== null) {
-        ensureDialogIsClosed($dialog, $password);
+        ensureDialogIsClosed();
 
         $noteDetailWrapper.show();
 
@@ -93,7 +98,7 @@ function ensureDialogIsClosed() {
     }
     catch (e) {}
 
-    $password.val('');
+    $passwordInputs.val('');
 }
 
 async function enterProtectedSessionOnServer(password) {
@@ -116,7 +121,7 @@ async function protectNoteAndSendToServer() {
 
     treeService.setProtected(note.noteId, note.isProtected);
 
-    noteDetailService.setNoteBackgroundIfProtected(note);console.log(note);
+    noteDetailService.setNoteBackgroundIfProtected(note);
 }
 
 async function unprotectNoteAndSendToServer() {
@@ -157,27 +162,18 @@ async function protectSubtree(noteId, protect) {
     noteDetailService.reload();
 }
 
-$passwordForm.submit(() => {
-    setupProtectedSession();
+$passwordForms.submit(function() { // needs to stay as function
+    const password = $(this).find(".protected-session-password").val();
 
-    return false;
-});
+    setupProtectedSession(password);
 
-// this doesn't work, event is not triggered :/
-$dialog.on("show.bs.modal", e => function() {
-    if ($(this).hasClass("modalless")) {
-        // return "stolen" focus to tree
-        treeService.getCurrentNode().setFocus();
-    }
-    else {
-        $password.focus();
-    }
+    return false;
 });
 
 $protectButton.click(protectNoteAndSendToServer);
 $unprotectButton.click(unprotectNoteAndSendToServer);
 
-$dialog.on("shown.bs.modal", e => $password.focus());
+$dialog.on("shown.bs.modal", e => $passwordInModal.focus());
 
 export default {
     ensureProtectedSession,

src/public/stylesheets/style.css

@@ -619,13 +619,6 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
     cursor: pointer;
 }
 
-/*.modalless {*/
-    /*top: 15%;*/
-    /*left: 40%;*/
-    /*bottom: auto;*/
-    /*right: auto;*/
-/*}*/
-
 .multiplicity {
     font-size: 1.3em;
 }
@@ -703,4 +696,10 @@ div[data-notify="container"] {
     text-decoration: underline !important;
     color: blue !important;
     cursor: pointer !important;
+}
+
+#protected-session-password-component {
+    max-width: 450px;
+    margin: auto;
+    padding-top: 50px;
 }

src/views/details/detail.ejs

@@ -21,6 +21,8 @@
 
         <% include relation_map.ejs %>
 
+        <% include protected_session_password.ejs %>
+
         <div id="children-overview"></div>
     </div>
 

src/views/details/protected_session_password.ejs

@@ -0,0 +1,10 @@
+<div id="protected-session-password-component" class="note-detail-component">
+    <form class="protected-session-password-form">
+        <div class="form-group">
+            <label for="protected-session-password-in-detail">Showing protected note requires entering your password:</label>
+            <input id="protected-session-password-in-detail" class="form-control protected-session-password" type="password">
+        </div>
+
+        <button class="btn btn-primary">Start protected session <kbd>enter</kbd></button>
+    </form>
+</div>

src/views/dialogs/branch_prefix.ejs

@@ -13,7 +13,14 @@
             <div class="modal-body">
                 <div class="form-group">
                     <label for="branch-prefix-input">Prefix: </label> &nbsp;
-                    <input id="branch-prefix-input" style="width: 20em;"> - <span id="branch-prefix-note-title"></span>
+
+                    <div class="input-group">
+                        <input id="branch-prefix-input" class="form-control">
+
+                        <div class="input-group-append">
+                            <div id="branch-prefix-note-title" class="input-group-text"></div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="modal-footer">

src/views/dialogs/protected_session_password.ejs

@@ -1,5 +1,5 @@
 <div id="protected-session-password-dialog" class="modal mx-auto" data-backdrop="false" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-dialog modal-md" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title mr-auto">Protected session</h5>
@@ -10,11 +10,11 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <form id="protected-session-password-form">
+            <form class="protected-session-password-form">
                 <div class="modal-body">
                     <div class="form-group">
-                        <label for="protected-session-password">Enter password to start protected session:</label>
-                        <input id="protected-session-password" class="form-control" type="password">
+                        <label for="protected-session-password-in-modal">To proceed with requested action you need to start protected session by entering password:</label>
+                        <input id="protected-session-password-in-modal" class="form-control protected-session-password" type="password">
                     </div>
                 </div>
                 <div class="modal-footer">