chore(client/ts): port options

src/public/app/services/dialog.ts

@@ -20,7 +20,7 @@ async function confirmDeleteNoteBoxWithNote(title: string) {
 }
 
 async function prompt(props: PromptDialogOptions) {
-    return new Promise((res) => appContext.triggerCommand("showPromptDialog", { ...props, callback: res }));
+    return new Promise<string | null>((res) => appContext.triggerCommand("showPromptDialog", { ...props, callback: res }));
 }
 
 export default {

src/public/app/widgets/dialogs/prompt.ts

@@ -31,15 +31,15 @@ export interface PromptDialogOptions {
     title?: string;
     message?: string;
     defaultValue?: string;
-    shown: PromptShownDialogCallback;
+    shown?: PromptShownDialogCallback;
-    callback: (value: unknown) => void;
+    callback?: (value: string | null) => void;
 }
 
 export type PromptShownDialogCallback = ((callback: ShownCallbackData) => void) | null;
 
 export default class PromptDialog extends BasicWidget {
-    private resolve: ((val: string | null) => void) | null;
+    private resolve?: ((value: string | null) => void) | undefined | null;
-    private shownCb: PromptShownDialogCallback;
+    private shownCb?: PromptShownDialogCallback | null;
 
     private modal!: bootstrap.Modal;
     private $dialogBody!: JQuery<HTMLElement>;

src/public/app/widgets/type_widgets/options/backup.ts

@@ -3,13 +3,14 @@ import { t } from "../../../services/i18n.js";
 import OptionsWidget from "./options_widget.js";
 import server from "../../../services/server.js";
 import toastService from "../../../services/toast.js";
+import type { OptionMap } from "../../../../../services/options_interface.js";
 
 const TPL = `
 <div class="options-section">
     <h4>${t("backup.automatic_backup")}</h4>
-    
+
     <p>${t("backup.automatic_backup_description")}</p>
-    
+
     <ul style="list-style: none">
         <li>
             <label>
@@ -17,7 +18,7 @@ const TPL = `
                 ${t("backup.enable_daily_backup")}
             </label>
         </li>
-        <li>    
+        <li>
             <label>
                 <input type="checkbox" class="weekly-backup-enabled form-check-input">
                 ${t("backup.enable_weekly_backup")}
@@ -30,19 +31,19 @@ const TPL = `
             </label>
         </li>
     </ul>
-    
+
     <p>${t("backup.backup_recommendation")}</p>
 </div>
 
 <div class="options-section">
     <h4>${t("backup.backup_now")}</h4>
-    
+
     <button class="backup-database-button btn">${t("backup.backup_database_now")}</button>
 </div>
 
 <div class="options-section">
     <h4>${t("backup.existing_backups")}</h4>
-    
+
     <table class="table table-stripped">
         <colgroup>
             <col width="33%" />
@@ -61,14 +62,32 @@ const TPL = `
 </div>
 `;
 
+// TODO: Deduplicate.
+interface PostDatabaseResponse {
+    backupFile: string;
+}
+
+// TODO: Deduplicate
+interface Backup {
+    filePath: string;
+    mtime: number;
+}
+
 export default class BackupOptions extends OptionsWidget {
+
+    private $backupDatabaseButton!: JQuery<HTMLElement>;
+    private $dailyBackupEnabled!: JQuery<HTMLElement>;
+    private $weeklyBackupEnabled!: JQuery<HTMLElement>;
+    private $monthlyBackupEnabled!: JQuery<HTMLElement>;
+    private $existingBackupList!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
 
         this.$backupDatabaseButton = this.$widget.find(".backup-database-button");
 
         this.$backupDatabaseButton.on("click", async () => {
-            const { backupFile } = await server.post("database/backup-database");
+            const { backupFile } = await server.post<PostDatabaseResponse>("database/backup-database");
 
             toastService.showMessage(t("backup.database_backed_up_to", { backupFilePath: backupFile }), 10000);
 
@@ -88,12 +107,12 @@ export default class BackupOptions extends OptionsWidget {
         this.$existingBackupList = this.$widget.find(".existing-backup-list-items");
     }
 
-    optionsLoaded(options) {
+    optionsLoaded(options: OptionMap) {
         this.setCheckboxState(this.$dailyBackupEnabled, options.dailyBackupEnabled);
         this.setCheckboxState(this.$weeklyBackupEnabled, options.weeklyBackupEnabled);
         this.setCheckboxState(this.$monthlyBackupEnabled, options.monthlyBackupEnabled);
 
-        server.get("database/backups").then((backupFiles) => {
+        server.get<Backup[]>("database/backups").then((backupFiles) => {
             this.$existingBackupList.empty();
 
             if (!backupFiles.length) {

src/public/app/widgets/type_widgets/options/etapi.ts

@@ -8,18 +8,18 @@ import toastService from "../../../services/toast.js";
 const TPL = `
 <div class="options-section">
     <h4>${t("etapi.title")}</h4>
-    
+
     <p>${t("etapi.description")} <br/>
        ${t("etapi.see_more")} <a href="https://triliumnext.github.io/Docs/Wiki/etapi.html">${t("etapi.wiki")}</a> ${t("etapi.and")} <a onclick="window.open('etapi/etapi.openapi.yaml')" href="etapi/etapi.openapi.yaml">${t("etapi.openapi_spec")}</a>.</p>
-    
+
     <button type="button" class="create-etapi-token btn btn-sm">${t("etapi.create_token")}</button>
 
     <hr />
 
     <h5>${t("etapi.existing_tokens")}</h5>
-    
+
     <div class="no-tokens-yet">${t("etapi.no_tokens_yet")}</div>
-    
+
     <div style="overflow: auto; height: 500px;">
         <table class="tokens-table table table-stripped">
         <thead>
@@ -44,13 +44,26 @@ const TPL = `
         border: 1px solid transparent;
         border-radius: var(--button-border-radius);
     }
-    
+
     .token-table-button:hover {
         border: 1px solid var(--button-border-color);
     }
 </style>`;
 
+// TODO: Deduplicate
+interface PostTokensResponse {
+    authToken: string;
+}
+
+// TODO: Deduplicate
+interface Token {
+    name: string;
+    utcDateCreated: number;
+    etapiTokenId: string;
+}
+
 export default class EtapiOptions extends OptionsWidget {
+
     doRender() {
         this.$widget = $(TPL);
 
@@ -61,12 +74,12 @@ export default class EtapiOptions extends OptionsWidget {
                 defaultValue: t("etapi.default_token_name")
             });
 
-            if (!tokenName.trim()) {
+            if (!tokenName?.trim()) {
                 toastService.showError(t("etapi.error_empty_name"));
                 return;
             }
 
-            const { authToken } = await server.post("etapi-tokens", { tokenName });
+            const { authToken } = await server.post<PostTokensResponse>("etapi-tokens", { tokenName });
 
             await dialogService.prompt({
                 title: t("etapi.token_created_title"),
@@ -84,7 +97,7 @@ export default class EtapiOptions extends OptionsWidget {
         const $noTokensYet = this.$widget.find(".no-tokens-yet");
         const $tokensTable = this.$widget.find(".tokens-table");
 
-        const tokens = await server.get("etapi-tokens");
+        const tokens = await server.get<Token[]>("etapi-tokens");
 
         $noTokensYet.toggle(tokens.length === 0);
         $tokensTable.toggle(tokens.length > 0);
@@ -107,7 +120,7 @@ export default class EtapiOptions extends OptionsWidget {
         }
     }
 
-    async renameToken(etapiTokenId, oldName) {
+    async renameToken(etapiTokenId: string, oldName: string) {
         const tokenName = await dialogService.prompt({
             title: t("etapi.rename_token_title"),
             message: t("etapi.rename_token_message"),
@@ -123,7 +136,7 @@ export default class EtapiOptions extends OptionsWidget {
         this.refreshTokens();
     }
 
-    async deleteToken(etapiTokenId, name) {
+    async deleteToken(etapiTokenId: string, name: string) {
         if (!(await dialogService.confirm(t("etapi.delete_token_confirmation", { name })))) {
             return;
         }

src/public/app/widgets/type_widgets/options/password.ts

@@ -3,31 +3,32 @@ import server from "../../../services/server.js";
 import protectedSessionHolder from "../../../services/protected_session_holder.js";
 import toastService from "../../../services/toast.js";
 import OptionsWidget from "./options_widget.js";
+import type { OptionMap } from "../../../../../services/options_interface.js";
 
 const TPL = `
 <div class="options-section">
     <h4 class="password-heading">${t("password.heading")}</h4>
-    
+
     <div class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">
       ${t("password.alert_message")} <a class="reset-password-button" href="javascript:">${t("password.reset_link")}</a>
     </div>
-    
+
     <form class="change-password-form">
         <div class="old-password-form-group form-group">
             <label for="old-password">${t("password.old_password")}</label>
             <input id="old-password" class="old-password form-control" type="password">
         </div>
-    
+
         <div class="form-group">
             <label for="new-password1">${t("password.new_password")}</label>
             <input id="new-password1" class="new-password1 form-control" type="password">
         </div>
-    
+
         <div class="form-group">
             <label for="new-password2">${t("password.new_password_confirmation")}</label>
             <input id="new-password2" class="new-password2 form-control" type="password">
         </div>
-    
+
         <button class="save-password-button btn btn-primary">${t("password.change_password")}</button>
     </form>
 </div>
@@ -43,7 +44,23 @@ const TPL = `
     </div>
 </div>`;
 
+// TODO: Deduplicate
+interface ChangePasswordResponse {
+    success: boolean;
+    message?: string;
+}
+
 export default class PasswordOptions extends OptionsWidget {
+
+    private $passwordHeading!: JQuery<HTMLElement>;
+    private $changePasswordForm!: JQuery<HTMLElement>;
+    private $oldPassword!: JQuery<HTMLElement>;
+    private $newPassword1!: JQuery<HTMLElement>;
+    private $newPassword2!: JQuery<HTMLElement>;
+    private $savePasswordButton!: JQuery<HTMLElement>;
+    private $resetPasswordButton!: JQuery<HTMLElement>;
+    private $protectedSessionTimeout!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
 
@@ -59,7 +76,7 @@ export default class PasswordOptions extends OptionsWidget {
             if (confirm(t("password.reset_confirmation"))) {
                 await server.post("password/reset?really=yesIReallyWantToResetPasswordAndLoseAccessToMyProtectedNotes");
 
-                const options = await server.get("options");
+                const options = await server.get<OptionMap>("options");
                 this.optionsLoaded(options);
 
                 toastService.showError(t("password.reset_success_message"));
@@ -72,7 +89,7 @@ export default class PasswordOptions extends OptionsWidget {
         this.$protectedSessionTimeout.on("change", () => this.updateOption("protectedSessionTimeout", this.$protectedSessionTimeout.val()));
     }
 
-    optionsLoaded(options) {
+    optionsLoaded(options: OptionMap) {
         const isPasswordSet = options.isPasswordSet === "true";
 
         this.$widget.find(".old-password-form-group").toggle(isPasswordSet);
@@ -96,7 +113,7 @@ export default class PasswordOptions extends OptionsWidget {
         }
 
         server
-            .post("password/change", {
+            .post<ChangePasswordResponse>("password/change", {
                 current_password: oldPassword,
                 new_password: newPassword1
             })
@@ -106,7 +123,7 @@ export default class PasswordOptions extends OptionsWidget {
 
                     // password changed so current protected session is invalid and needs to be cleared
                     protectedSessionHolder.resetProtectedSession();
-                } else {
+                } else if (result.message) {
                     toastService.showError(result.message);
                 }
             });

src/public/app/widgets/type_widgets/options/shortcuts.ts

@@ -3,40 +3,42 @@ import utils from "../../../services/utils.js";
 import dialogService from "../../../services/dialog.js";
 import OptionsWidget from "./options_widget.js";
 import { t } from "../../../services/i18n.js";
+import type { KeyboardShortcut } from "../../../../../services/keyboard_actions_interface.js";
+import type { OptionNames } from "../../../../../services/options_interface.js";
 
 const TPL = `
 <div class="options-section shortcuts-options-section">
     <style>
         .shortcuts-options-section {
-            display: flex; 
+            display: flex;
-            flex-direction: column; 
+            flex-direction: column;
             height: 100%;
         }
-    
+
         .shortcuts-table-container {
-            overflow: auto; 
+            overflow: auto;
-            flex-grow: 1; 
+            flex-grow: 1;
-            flex-shrink: 1; 
+            flex-shrink: 1;
-        }    
+        }
-        
+
         .shortcuts-options-buttons {
-            display: flex; 
+            display: flex;
             justify-content: space-between;
             margin: 15px 15px 0 15px;
         }
     </style>
 
     <h4>${t("shortcuts.keyboard_shortcuts")}</h4>
-    
+
     <p>
       ${t("shortcuts.multiple_shortcuts")}
       ${t("shortcuts.electron_documentation")}
     </p>
-    
+
     <div class="form-group">
         <input type="text" class="keyboard-shortcut-filter form-control" placeholder="${t("shortcuts.type_text_to_filter")}">
     </div>
-    
+
     <div class="shortcuts-table-container">
         <table class="keyboard-shortcut-table" cellpadding="10">
         <thead>
@@ -50,15 +52,15 @@ const TPL = `
         <tbody></tbody>
         </table>
     </div>
-    
+
     <div class="shortcuts-options-buttons">
         <button class="options-keyboard-shortcuts-reload-app btn btn-primary">${t("shortcuts.reload_app")}</button>
-        
+
         <button class="options-keyboard-shortcuts-set-all-to-default btn">${t("shortcuts.set_all_to_default")}</button>
     </div>
 </div>`;
 
-let globActions;
+let globActions: KeyboardShortcut[];
 
 export default class KeyboardShortcutsOptions extends OptionsWidget {
     doRender() {
@@ -68,7 +70,7 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
 
         const $table = this.$widget.find(".keyboard-shortcut-table tbody");
 
-        server.get("keyboard-actions").then((actions) => {
+        server.get<KeyboardShortcut[]>("keyboard-actions").then((actions) => {
             globActions = actions;
 
             for (const action of actions) {
@@ -76,18 +78,18 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
 
                 if (action.separator) {
                     $tr.append($('<td colspan="4">').attr("style", "background-color: var(--accented-background-color); font-weight: bold;").text(action.separator));
-                } else if (action.defaultShortcuts) {
+                } else if (action.defaultShortcuts && action.actionName) {
                     $tr.append($("<td>").text(action.actionName))
                         .append(
                             $("<td>").append(
                                 $(`<input type="text" class="form-control">`)
-                                    .val(action.effectiveShortcuts.join(", "))
+                                    .val((action.effectiveShortcuts ?? []).join(", "))
                                     .attr("data-keyboard-action-name", action.actionName)
                                     .attr("data-default-keyboard-shortcuts", action.defaultShortcuts.join(", "))
                             )
                         )
                         .append($("<td>").text(action.defaultShortcuts.join(", ")))
-                        .append($("<td>").text(action.description));
+                        .append($("<td>").text(action.description ?? ""));
                 }
 
                 $table.append($tr);
@@ -97,8 +99,11 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
         $table.on("change", "input.form-control", (e) => {
             const $input = this.$widget.find(e.target);
             const actionName = $input.attr("data-keyboard-action-name");
-            const shortcuts = $input
+            if (!actionName) {
-                .val()
+                return;
+            }
+
+            const shortcuts = ($input.val() as String)
                 .replace("+,", "+Comma")
                 .split(",")
                 .map((shortcut) => shortcut.replace("+Comma", "+,"))
@@ -106,7 +111,7 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
 
             const optionName = `keyboardShortcuts${actionName.substr(0, 1).toUpperCase()}${actionName.substr(1)}`;
 
-            this.updateOption(optionName, JSON.stringify(shortcuts));
+            this.updateOption(optionName as OptionNames, JSON.stringify(shortcuts));
         });
 
         this.$widget.find(".options-keyboard-shortcuts-set-all-to-default").on("click", async () => {
@@ -117,7 +122,7 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
             $table.find("input.form-control").each((_index, el) => {
                 const defaultShortcuts = this.$widget.find(el).attr("data-default-keyboard-shortcuts");
 
-                if (this.$widget.find(el).val() !== defaultShortcuts) {
+                if (defaultShortcuts && this.$widget.find(el).val() !== defaultShortcuts) {
                     this.$widget.find(el).val(defaultShortcuts).trigger("change");
                 }
             });
@@ -126,7 +131,7 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
         const $filter = this.$widget.find(".keyboard-shortcut-filter");
 
         $filter.on("keyup", () => {
-            const filter = $filter.val().trim().toLowerCase();
+            const filter = String($filter.val()).trim().toLowerCase();
 
             $table.find("tr").each((i, el) => {
                 if (!filter) {
@@ -143,7 +148,7 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
 
                 const action = globActions.find((act) => act.actionName === actionName);
 
-                if (!action) {
+                if (!action || !action.actionName) {
                     this.$widget.find(el).hide();
                     return;
                 }
@@ -153,8 +158,8 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
                     .toggle(
                         !!(
                             action.actionName.toLowerCase().includes(filter) ||
-                            action.defaultShortcuts.some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
+                            (action.defaultShortcuts ?? []).some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
-                            action.effectiveShortcuts.some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
+                            (action.effectiveShortcuts ?? []).some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
                             (action.description && action.description.toLowerCase().includes(filter))
                         )
                     );

src/public/app/widgets/type_widgets/options/spellcheck.ts

@@ -1,6 +1,7 @@
 import utils from "../../../services/utils.js";
 import OptionsWidget from "./options_widget.js";
 import { t } from "../../../services/i18n.js";
+import type { OptionMap } from "../../../../../services/options_interface.js";
 
 const TPL_WEB = `
 <div class="options-section">
@@ -29,11 +30,16 @@ const TPL_ELECTRON = `
     </div>
 
     <p>${t("spellcheck.multiple_languages_info")}</p>
-    
+
     <p><strong>${t("spellcheck.available_language_codes_label")} </strong> <span class="available-language-codes"></span></p>
 </div>`;
 
 export default class SpellcheckOptions extends OptionsWidget {
+
+    private $spellCheckEnabled!: JQuery<HTMLElement>;
+    private $spellCheckLanguageCode!: JQuery<HTMLElement>;
+    private $availableLanguageCodes!: JQuery<HTMLElement>;
+
     doRender() {
         const template = utils.isElectron() ? TPL_ELECTRON : TPL_WEB;
         this.$widget = $(template);
@@ -54,7 +60,7 @@ export default class SpellcheckOptions extends OptionsWidget {
         }
     }
 
-    optionsLoaded(options) {
+    optionsLoaded(options: OptionMap) {
         this.setCheckboxState(this.$spellCheckEnabled, options.spellCheckEnabled);
         this.$spellCheckLanguageCode.val(options.spellCheckLanguageCode);
     }

src/public/app/widgets/type_widgets/options/sync.ts

@@ -2,33 +2,34 @@ import server from "../../../services/server.js";
 import toastService from "../../../services/toast.js";
 import OptionsWidget from "./options_widget.js";
 import { t } from "../../../services/i18n.js";
+import type { OptionMap } from "../../../../../services/options_interface.js";
 
 const TPL = `
 <div class="options-section">
     <h4 style="margin-top: 0px;">${t("sync_2.config_title")}</h4>
-    
+
     <form class="sync-setup-form">
         <div class="form-group">
             <label for="sync-server-host" >${t("sync_2.server_address")}</label>
             <input id="sync-server-host" class="sync-server-host form-control" placeholder="https://<host>:<port>">
         </div>
-    
+
         <div class="form-group">
             <label for="sync-server-timeout" >${t("sync_2.timeout")}</label>
             <input id="sync-server-timeout" class="sync-server-timeout form-control" min="1" max="10000000" type="number" style="text-align: left;">
         </div>
-    
+
         <div class="form-group">
             <label for="sync-proxy form-control" >${t("sync_2.proxy_label")}</label>
             <input id="sync-proxy form-control" class="sync-proxy form-control" placeholder="https://<host>:<port>">
-    
+
             <p><strong>${t("sync_2.note")}:</strong> ${t("sync_2.note_description")}</p>
             <p>${t("sync_2.special_value_description")}</p>
         </div>
-    
+
         <div style="display: flex; justify-content: space-between;">
             <button class="btn btn-primary">${t("sync_2.save")}</button>
-    
+
             <button class="btn" type="button" data-help-page="synchronization.html">${t("sync_2.help")}</button>
         </div>
     </form>
@@ -36,13 +37,26 @@ const TPL = `
 
 <div class="options-section">
     <h4>${t("sync_2.test_title")}</h4>
-    
+
     <p>${t("sync_2.test_description")}</p>
-    
+
     <button class="test-sync-button btn">${t("sync_2.test_button")}</button>
 </div>`;
 
+// TODO: Deduplicate
+interface TestResponse {
+    success: boolean;
+    message: string;
+}
+
 export default class SyncOptions extends OptionsWidget {
+
+    private $form!: JQuery<HTMLElement>;
+    private $syncServerHost!: JQuery<HTMLElement>;
+    private $syncServerTimeout!: JQuery<HTMLElement>;
+    private $syncProxy!: JQuery<HTMLElement>;
+    private $testSyncButton!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
 
@@ -55,7 +69,7 @@ export default class SyncOptions extends OptionsWidget {
         this.$form.on("submit", () => this.save());
 
         this.$testSyncButton.on("click", async () => {
-            const result = await server.post("sync/test");
+            const result = await server.post<TestResponse>("sync/test");
 
             if (result.success) {
                 toastService.showMessage(result.message);
@@ -65,7 +79,7 @@ export default class SyncOptions extends OptionsWidget {
         });
     }
 
-    optionsLoaded(options) {
+    optionsLoaded(options: OptionMap) {
         this.$syncServerHost.val(options.syncServerHost);
         this.$syncServerTimeout.val(options.syncServerTimeout);
         this.$syncProxy.val(options.syncProxy);
@@ -73,9 +87,9 @@ export default class SyncOptions extends OptionsWidget {
 
     save() {
         this.updateMultipleOptions({
-            syncServerHost: this.$syncServerHost.val(),
+            syncServerHost: String(this.$syncServerHost.val()),
-            syncServerTimeout: this.$syncServerTimeout.val(),
+            syncServerTimeout: String(this.$syncServerTimeout.val()),
-            syncProxy: this.$syncProxy.val()
+            syncProxy: String(this.$syncProxy.val())
         });
 
         return false;

src/services/options_interface.ts

@@ -69,6 +69,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActi
     firstDayOfWeek: number;
 
     initialized: boolean;
+    isPasswordSet: boolean;
     overrideThemeFonts: boolean;
     spellCheckEnabled: boolean;
     autoFixConsistencyIssues: boolean;