From 61696f0287eb1f1581865a8ffd9e028e2d197f03 Mon Sep 17 00:00:00 2001 From: zadam Date: Sun, 5 May 2019 19:48:30 +0200 Subject: [PATCH] protected session in a component now works --- .../javascripts/services/note_context.js | 20 +++++++-- .../javascripts/services/note_detail.js | 24 +---------- .../services/note_detail_protected_session.js | 42 +++++++++++++++---- .../javascripts/services/protected_session.js | 39 ++--------------- src/public/stylesheets/style.css | 5 +++ 5 files changed, 61 insertions(+), 69 deletions(-) diff --git a/src/public/javascripts/services/note_context.js b/src/public/javascripts/services/note_context.js index cf34ff7f5..f577158d4 100644 --- a/src/public/javascripts/services/note_context.js +++ b/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)) { diff --git a/src/public/javascripts/services/note_detail.js b/src/public/javascripts/services/note_detail.js index cd7be2094..33ccc88dd 100644 --- a/src/public/javascripts/services/note_detail.js +++ b/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(); diff --git a/src/public/javascripts/services/note_detail_protected_session.js b/src/public/javascripts/services/note_detail_protected_session.js index d0335e968..8a30df0e2 100644 --- a/src/public/javascripts/services/note_detail_protected_session.js +++ b/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(); } -} \ No newline at end of file + + getContent() {} + + focus() {} + + onNoteChange() {} + + cleanup() {} + + scrollToTop() { + this.$component.scrollTop(0); + } +} + +export default NoteDetailProtectedSession; \ No newline at end of file diff --git a/src/public/javascripts/services/protected_session.js b/src/public/javascripts/services/protected_session.js index 1319fbb68..90450649c 100644 --- a/src/public/javascripts/services/protected_session.js +++ b/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 }; \ No newline at end of file diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index aefcc7e69..49fc9e175 100644 --- a/src/public/stylesheets/style.css +++ b/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; } \ No newline at end of file