protected session in a component now works

src/public/javascripts/services/note_context.js

@@ -14,6 +14,7 @@ import noteDetailImage from "./note_detail_image.js";
 import noteDetailSearch from "./note_detail_search.js";
 import noteDetailRender from "./note_detail_render.js";
 import noteDetailRelationMap from "./note_detail_relation_map.js";
+import noteDetailProtectedSession from "./note_detail_protected_session.js";
 
 const $noteTabContentsContainer = $("#note-tab-container");
 
@@ -24,7 +25,8 @@ const componentClasses = {
     'image': noteDetailImage,
     'search': noteDetailSearch,
     'render': noteDetailRender,
-    'relation-map': noteDetailRelationMap
+    'relation-map': noteDetailRelationMap,
+    'protected-session': noteDetailProtectedSession
 };
 
 let tabIdCounter = 1;
@@ -89,9 +91,19 @@ class NoteContext {
         console.log(`Switched tab ${this.tabId} to ${this.noteId}`);
     }
 
-    getComponent(type) {
-        if (!type) {
-            type = this.note.type;
+    getComponent() {
+        let type = this.note.type;
+
+        if (this.note.isProtected) {
+            if (protectedSessionHolder.isProtectedSessionAvailable()) {
+                protectedSessionHolder.touchProtectedSession();
+            }
+            else {
+                type = 'protected-session';
+
+                // user shouldn't be able to edit note title
+                this.$noteTitle.prop("readonly", true);
+            }
         }
 
         if (!(type in this.components)) {

src/public/javascripts/services/note_detail.js

@@ -73,20 +73,6 @@ async function saveNotesIfChanged() {
     $savedIndicator.fadeIn();
 }
 
-async function handleProtectedSession() {
-    const newSessionCreated = await protectedSessionService.ensureProtectedSession(getActiveNote().isProtected, false);
-
-    if (getActiveNote().isProtected) {
-        protectedSessionHolder.touchProtectedSession();
-    }
-
-    // this might be important if we focused on protected note when not in protected note and we got a dialog
-    // to login, but we chose instead to come to another node - at that point the dialog is still visible and this will close it.
-    protectedSessionService.ensureDialogIsClosed();
-
-    return newSessionCreated;
-}
-
 /** @type {NoteContext[]} */
 let noteContexts = [];
 
@@ -175,15 +161,9 @@ async function loadNoteDetail(noteId, newTab = false) {
 
         ctx.$noteDetailComponents.hide();
 
-        const newSessionCreated = await handleProtectedSession();
-        if (newSessionCreated) {
-            // in such case we're reloading note anyway so no need to continue here.
-            return;
-        }
-
         ctx.$noteTitle.removeAttr("readonly"); // this can be set by protected session service
 
-        await ctx.getComponent(ctx.note.type).show(ctx);
+        await ctx.getComponent().show(ctx);
     }
     finally {
         ctx.noteChangeDisabled = false;
@@ -192,7 +172,7 @@ async function loadNoteDetail(noteId, newTab = false) {
     treeService.setBranchBackgroundBasedOnProtectedStatus(noteId);
 
     // after loading new note make sure editor is scrolled to the top
-    ctx.getComponent(ctx.note.type).scrollToTop();
+    ctx.getComponent().scrollToTop();
 
     fireDetailLoaded();
 

src/public/javascripts/services/note_detail_protected_session.js

@@ -1,18 +1,46 @@
-class NoteDetailImage {
+import protectedSessionService from './protected_session.js';
+
+class NoteDetailProtectedSession {
     /**
      * @param {NoteContext} ctx
      */
     constructor(ctx) {
         this.ctx = ctx;
         this.$component = ctx.$noteTabContent.find(".protected-session-password-component");
-        const $passwordForms = ctx.$noteTabContent.find(".protected-session-password-form");
-        const $passwordInputs = ctx.$noteTabContent.find(".protected-session-password");
-        const $passwordInModal = ctx.$noteTabContent.find(".protected-session-password-in-modal");
-        const $protectButton = ctx.$noteTabContent.find(".protect-button");
-        const $unprotectButton = ctx.$noteTabContent.find(".unprotect-button");
+        this.$passwordForm = ctx.$noteTabContent.find(".protected-session-password-form");
+        this.$passwordInput = ctx.$noteTabContent.find(".protected-session-password");
+
+        this.$protectButton = ctx.$noteTabContent.find(".protect-button");
+        this.$protectButton.click(protectedSessionService.protectNoteAndSendToServer);
+
+        this.$unprotectButton = ctx.$noteTabContent.find(".unprotect-button");
+        this.$unprotectButton.click(protectedSessionService.unprotectNoteAndSendToServer);
+
+        this.$passwordForm.submit(() => {
+            const password = this.$passwordInput.val();
+            this.$passwordInput.val("");
+
+            protectedSessionService.setupProtectedSession(password);
+
+            return false;
+        });
     }
 
     show() {
         this.$component.show();
     }
-}
+
+    getContent() {}
+
+    focus() {}
+
+    onNoteChange() {}
+
+    cleanup() {}
+
+    scrollToTop() {
+        this.$component.scrollTop(0);
+    }
+}
+
+export default NoteDetailProtectedSession;

src/public/javascripts/services/protected_session.js

@@ -5,17 +5,8 @@ import server from './server.js';
 import protectedSessionHolder from './protected_session_holder.js';
 import infoService from "./info.js";
 
-const $dialog = $("#protected-session-password-dialog");
-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 $tabContent = $(".note-tab-content");
-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;
 
@@ -39,14 +30,7 @@ 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.getActiveNode().data.isProtected) {
-                $tabContent.hide();
-            }
-
             $dialog.modal();
         }
         else {
@@ -61,8 +45,6 @@ function ensureProtectedSession(requireProtectedSession, modal) {
 }
 
 async function setupProtectedSession(password) {
-    $passwordInputs.val("");
-
     const response = await enterProtectedSessionOnServer(password);
 
     if (!response.success) {
@@ -72,8 +54,6 @@ async function setupProtectedSession(password) {
 
     protectedSessionHolder.setProtectedSessionId(response.protectedSessionId);
 
-    $dialog.modal("hide");
-
     await treeService.reload();
 
     // it's important that tree has been already reloaded at this point
@@ -83,8 +63,6 @@ async function setupProtectedSession(password) {
     if (protectedSessionDeferred !== null) {
         ensureDialogIsClosed();
 
-        $tabContent.show();
-
         protectedSessionDeferred.resolve(true);
         protectedSessionDeferred = null;
 
@@ -166,24 +144,13 @@ async function protectSubtree(noteId, protect) {
     noteDetailService.reload();
 }
 
-$passwordForms.submit(function() { // needs to stay as function
-    const password = $(this).find(".protected-session-password").val();
-
-    setupProtectedSession(password);
-
-    return false;
-});
-
-$protectButton.click(protectNoteAndSendToServer);
-$unprotectButton.click(unprotectNoteAndSendToServer);
-
-$dialog.on("shown.bs.modal", e => $passwordInModal.focus());
-
 export default {
     ensureProtectedSession,
     protectSubtree,
     ensureDialogIsClosed,
     enterProtectedSession,
     leaveProtectedSession,
-    protectNoteAndSendToServer
+    protectNoteAndSendToServer,
+    unprotectNoteAndSendToServer,
+    setupProtectedSession
 };

src/public/stylesheets/style.css

@@ -826,4 +826,9 @@ a.external:after, a[href^="http://"]:after, a[href^="https://"]:after {
 .jam-empty {
     width: 1em;
     display: inline-block;
+}
+
+.protected-session-password-component {
+    width: 300px;
+    margin: 30px auto auto;
 }