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,6 +3,7 @@ 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">
@@ -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

@@ -50,7 +50,20 @@ const TPL = `
     }
 </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,6 +3,7 @@ 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">
@@ -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,6 +3,8 @@ 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">
@@ -58,7 +60,7 @@ const TPL = `
     </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">
@@ -34,6 +35,11 @@ const TPL_ELECTRON = `
 </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,6 +2,7 @@ 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">
@@ -42,7 +43,20 @@ const TPL = `
     <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;