chore(client/ts): port options

2025-11-01 10:55:55 +01:00 · 2025-01-11 11:40:22 +02:00
parent 7e61af1cc3
commit 05529b84ab
9 changed files with 150 additions and 75 deletions
--- a/src/public/app/services/dialog.ts
+++ b/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 {
--- a/src/public/app/widgets/dialogs/prompt.ts
+++ b/src/public/app/widgets/dialogs/prompt.ts
@@ -31,15 +31,15 @@ export interface PromptDialogOptions {
    title?: string;
    message?: string;
    defaultValue?: string;
-    shown: PromptShownDialogCallback;
-    callback: (value: unknown) => void;
+    shown?: PromptShownDialogCallback;
+    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 shownCb: PromptShownDialogCallback;
+    private resolve?: ((value: string | null) => void) | undefined | null;
+    private shownCb?: PromptShownDialogCallback | null;

    private modal!: bootstrap.Modal;
    private $dialogBody!: JQuery<HTMLElement>;
--- a/src/public/app/widgets/type_widgets/options/backup.ts
+++ b/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) {
--- a/src/public/app/widgets/type_widgets/options/etapi.ts
+++ b/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;
        }
--- a/src/public/app/widgets/type_widgets/options/password.ts
+++ b/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);
                }
            });
--- a/src/public/app/widgets/type_widgets/options/shortcuts.ts
+++ b/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
-                .val()
+            if (!actionName) {
+                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.effectiveShortcuts.some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
+                            (action.defaultShortcuts ?? []).some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
+                            (action.effectiveShortcuts ?? []).some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
                            (action.description && action.description.toLowerCase().includes(filter))
                        )
                    );
--- a/src/public/app/widgets/type_widgets/options/spellcheck.ts
+++ b/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);
    }
--- a/src/public/app/widgets/type_widgets/options/sync.ts
+++ b/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(),
-            syncServerTimeout: this.$syncServerTimeout.val(),
-            syncProxy: this.$syncProxy.val()
+            syncServerHost: String(this.$syncServerHost.val()),
+            syncServerTimeout: String(this.$syncServerTimeout.val()),
+            syncProxy: String(this.$syncProxy.val())
        });

        return false;
--- a/src/services/options_interface.ts
+++ b/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;