converted protected session password dialog to new pattern

src/public/app/layouts/desktop_layout.js

@@ -68,6 +68,7 @@ import MoveToDialog from "../widgets/dialogs/move_to.js";
 import ImportDialog from "../widgets/dialogs/import.js";
 import ExportDialog from "../widgets/dialogs/export.js";
 import MarkdownImportDialog from "../widgets/dialogs/markdown_import.js";
+import ProtectedSessionPasswordDialog from "../widgets/dialogs/protected_session_password.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -210,6 +211,7 @@ export default class DesktopLayout {
             .child(new MoveToDialog())
             .child(new ImportDialog())
             .child(new ExportDialog())
-            .child(new MarkdownImportDialog());
+            .child(new MarkdownImportDialog())
+            .child(new ProtectedSessionPasswordDialog());
     }
 }

src/public/app/layouts/mobile_layout.js

@@ -8,6 +8,7 @@ import CloseDetailButtonWidget from "../widgets/mobile_widgets/close_detail_butt
 import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
+import ProtectedSessionPasswordDialog from "../widgets/dialogs/protected_session_password.js";
 
 const MOBILE_CSS = `
 <style>
@@ -128,6 +129,7 @@ export default class MobileLayout {
                                 .css('padding', '5px 20px 10px 0')
                         )
                 )
+                .child(new ProtectedSessionPasswordDialog())
             );
     }
 }

src/public/app/services/protected_session.js

@@ -31,7 +31,7 @@ function enterProtectedSession() {
         // using deferred instead of promise because it allows resolving from outside
         protectedSessionDeferred = dfd;
 
-        import("../dialogs/protected_session.js").then(dialog => dialog.show());
+        appContext.triggerCommand("showProtectedSessionPasswordDialog");
     }
 
     return dfd.promise();
@@ -61,13 +61,13 @@ ws.subscribeToMessages(async message => {
     if (message.type === 'protectedSessionLogin') {
         await reloadData();
 
-    await appContext.triggerEvent('frocaReloaded');
+        await appContext.triggerEvent('frocaReloaded');
 
         appContext.triggerEvent('protectedSessionStarted');
 
-        if (protectedSessionDeferred !== null) {
+        appContext.triggerCommand("closeProtectedSessionPasswordDialog");
-            import("../dialogs/protected_session.js").then(dialog => dialog.close());
 
+        if (protectedSessionDeferred !== null) {
             protectedSessionDeferred.resolve(true);
             protectedSessionDeferred = null;
         }

src/public/app/widgets/dialogs/protected_session_password.js

@@ -0,0 +1,59 @@
+import protectedSessionService from "../../services/protected_session.js";
+import utils from "../../services/utils.js";
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<div class="protected-session-password-dialog modal mx-auto" data-backdrop="false" tabindex="-1" role="dialog">
+    <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>
+
+                <button class="help-button" type="button" data-help-page="Protected-notes" title="Help on Protected notes">?</button>
+
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <form class="protected-session-password-form">
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label>
+                            To proceed with requested action you need to start protected session by entering password:
+                            <input class="form-control protected-session-password" type="password">
+                        </label>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-primary">Start protected session <kbd>enter</kbd></button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>`;
+
+export default class ProtectedSessionPasswordDialog extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$passwordForm = this.$widget.find(".protected-session-password-form");
+        this.$passwordInput = this.$widget.find(".protected-session-password");
+        this.$passwordForm.on('submit', () => {
+            const password = this.$passwordInput.val();
+            this.$passwordInput.val("");
+
+            protectedSessionService.setupProtectedSession(password);
+
+            return false;
+        });
+    }
+
+    showProtectedSessionPasswordDialogEvent() {
+        utils.openDialog(this.$widget);
+
+        this.$passwordInput.trigger('focus');
+    }
+
+    closeProtectedSessionPasswordDialogEvent() {
+        this.$widget.modal('hide');
+    }
+}

src/views/desktop.ejs

@@ -19,7 +19,6 @@
 
 <%- include('dialogs/note_revisions.ejs') %>
 <%- include('dialogs/options.ejs') %>
-<%- include('dialogs/protected_session_password.ejs') %>
 <%- include('dialogs/info.ejs') %>
 <%- include('dialogs/prompt.ejs') %>
 <%- include('dialogs/confirm.ejs') %>

src/views/dialogs/protected_session_password.ejs

@@ -1,26 +0,0 @@
-<div id="protected-session-password-dialog" class="modal mx-auto" data-backdrop="false" tabindex="-1" role="dialog">
-    <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>
-
-                <button class="help-button" type="button" data-help-page="Protected-notes" title="Help on Protected notes">?</button>
-
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <form class="protected-session-password-form">
-                <div class="modal-body">
-                    <div class="form-group">
-                        <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">
-                    <button class="btn btn-primary">Start protected session <kbd>enter</kbd></button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>

src/views/mobile.ejs

@@ -103,7 +103,6 @@
 <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
 
 <%- include('dialogs/confirm.ejs') %>
-<%- include('dialogs/protected_session_password.ejs') %>
 
 <script type="text/javascript">
     global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */