allow user to see their username in the options #934

src/public/javascripts/dialogs/options.js

@@ -14,7 +14,7 @@ export async function showDialog() {
         import('./options/advanced.js'),
         import('./options/appearance.js'),
         import('./options/code_notes.js'),
-        import('./options/change_password.js'),
+        import('./options/credentials.js'),
         import('./options/other.js'),
         import('./options/sync.js'),
         import('./options/keyboard_shortcuts.js'),

src/public/javascripts/dialogs/options/credentials.js

@@ -3,6 +3,11 @@ import protectedSessionHolder from "../../services/protected_session_holder.js";
 import toastService from "../../services/toast.js";
 
 const TPL = `
+<h3>Username</h3>
+
+<p>Your username is <strong id="credentials-username"></strong>.</p>
+
+<h3>Change password</h3>
 <form id="change-password-form">
     <div class="form-group">
         <label for="old-password">Old password</label>
@@ -24,8 +29,9 @@ const TPL = `
 
 export default class ChangePasswordOptions {
     constructor() {
-        $("#options-change-password").html(TPL);
+        $("#options-credentials").html(TPL);
 
+        this.$username = $("#credentials-username");
         this.$form = $("#change-password-form");
         this.$oldPassword = $("#old-password");
         this.$newPassword1 = $("#new-password1");
@@ -34,7 +40,9 @@ export default class ChangePasswordOptions {
         this.$form.on('submit', () => this.save());
     }
 
-    optionsLoaded(options) {}
+    optionsLoaded(options) {console.log(options);
+        this.$username.text(options.username);
+    }
 
     save() {
         const oldPassword = this.$oldPassword.val();

src/routes/api/options.js

@@ -6,6 +6,7 @@ const attributes = require('../../services/attributes');
 
 // options allowed to be updated directly in options dialog
 const ALLOWED_OPTIONS = new Set([
+    'username', // not exposed for update (not harmful anyway), needed for reading
     'eraseNotesAfterTimeInSeconds',
     'protectedSessionTimeout',
     'noteRevisionSnapshotTimeInterval',

src/views/dialogs/options.ejs

@@ -1,27 +1,3 @@
-<style>
-#widgets-configuration {
-    margin: 0;
-}
-
-#widgets-configuration h5 {
-    text-align: center;
-}
-
-#widgets-configuration .list-group-item {
-    background: var(--accented-background-color);
-    font-size: larger;
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 2px;
-    border-radius: 10px;
-}
-
-#widgets-configuration .handle {
-    margin-right: 20px;
-    display: inline-block;
-}
-</style>
-
 <div id="options-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg modal-dialog-scrollable" style="min-width: 1000px;" role="document">
         <div class="modal-content">
@@ -44,7 +20,7 @@
                             <a class="nav-link" data-toggle="tab" href="#options-code-notes">Code notes</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#options-change-password">Change password</a>
+                            <a class="nav-link" data-toggle="tab" href="#options-credentials">Username & password</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link" data-toggle="tab" href="#options-sync-setup">Sync</a>
@@ -61,7 +37,7 @@
                         <div id="options-appearance" class="tab-pane active"></div>
                         <div id="options-keyboard-shortcuts" class="tab-pane"></div>
                         <div id="options-code-notes" class="tab-pane"></div>
-                        <div id="options-change-password" class="tab-pane"></div>
+                        <div id="options-credentials" class="tab-pane"></div>
                         <div id="options-other" class="tab-pane"></div>
                         <div id="options-sync-setup" class="tab-pane"></div>
                         <div id="options-advanced" class="tab-pane"></div>