converted protected session password dialog to new pattern

This commit is contained in:
zadam 2022-06-16 15:28:51 +02:00
parent 3255607b09
commit e140daa952
7 changed files with 68 additions and 33 deletions

View File

@ -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());
}
}

View File

@ -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())
);
}
}

View File

@ -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();
@ -65,9 +65,9 @@ ws.subscribeToMessages(async message => {
appContext.triggerEvent('protectedSessionStarted');
if (protectedSessionDeferred !== null) {
import("../dialogs/protected_session.js").then(dialog => dialog.close());
appContext.triggerCommand("closeProtectedSessionPasswordDialog");
if (protectedSessionDeferred !== null) {
protectedSessionDeferred.resolve(true);
protectedSessionDeferred = null;
}

View File

@ -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');
}
}

View File

@ -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') %>

View File

@ -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>

View File

@ -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 */