Update apps/client/src/setup.ts

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

apps/client/package.json

@@ -59,7 +59,6 @@
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
     "katex": "0.16.38",
-    "knockout": "3.5.2",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
@@ -92,4 +91,4 @@
     "script-loader": "0.7.2",
     "vite-plugin-static-copy": "3.3.0"
   }
-}
+}

apps/client/src/setup.ts

@@ -1,68 +1,107 @@
 import "jquery";
 
-import ko from "knockout";
-
 import utils from "./services/utils.js";
 
-// TriliumNextTODO: properly make use of below types
-// type SetupModelSetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
-// type SetupModelStep = "sync-in-progress" | "setup-type" | "new-document-in-progress" | "sync-from-desktop";
+type SetupStep = "sync-in-progress" | "setup-type" | "new-document-in-progress" | "sync-from-desktop" | "sync-from-server";
+type SetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
 
-class SetupModel {
-    syncInProgress: boolean;
-    step: ko.Observable<string>;
-    setupType: ko.Observable<string>;
-    setupNewDocument: ko.Observable<boolean>;
-    setupSyncFromDesktop: ko.Observable<boolean>;
-    setupSyncFromServer: ko.Observable<boolean>;
-    syncServerHost: ko.Observable<string | undefined>;
-    syncProxy: ko.Observable<string | undefined>;
-    password: ko.Observable<string | undefined>;
+class SetupController {
+    private step: SetupStep;
+    private setupType: SetupType = "";
+    private syncPollIntervalId: number | null = null;
+    private rootNode: HTMLElement;
+    private setupTypeForm: HTMLFormElement;
+    private syncFromServerForm: HTMLFormElement;
+    private setupTypeNextButton: HTMLButtonElement;
+    private setupTypeInputs: HTMLInputElement[];
+    private syncServerHostInput: HTMLInputElement;
+    private syncProxyInput: HTMLInputElement;
+    private passwordInput: HTMLInputElement;
+    private sections: Record<SetupStep, HTMLElement>;
 
-    constructor(syncInProgress: boolean) {
-        this.syncInProgress = syncInProgress;
-        this.step = ko.observable(syncInProgress ? "sync-in-progress" : "setup-type");
-        this.setupType = ko.observable("");
-        this.setupNewDocument = ko.observable(false);
-        this.setupSyncFromDesktop = ko.observable(false);
-        this.setupSyncFromServer = ko.observable(false);
-        this.syncServerHost = ko.observable();
-        this.syncProxy = ko.observable();
-        this.password = ko.observable();
+    constructor(rootNode: HTMLElement, syncInProgress: boolean) {
+        this.rootNode = rootNode;
+        this.step = syncInProgress ? "sync-in-progress" : "setup-type";
+        this.setupTypeForm = mustGetElement("setup-type-form", HTMLFormElement);
+        this.syncFromServerForm = mustGetElement("sync-from-server-form", HTMLFormElement);
+        this.setupTypeNextButton = mustGetElement("setup-type-next", HTMLButtonElement);
+        this.setupTypeInputs = Array.from(document.querySelectorAll<HTMLInputElement>("input[name='setup-type']"));
+        this.syncServerHostInput = mustGetElement("sync-server-host", HTMLInputElement);
+        this.syncProxyInput = mustGetElement("sync-proxy", HTMLInputElement);
+        this.passwordInput = mustGetElement("password", HTMLInputElement);
+        this.sections = {
+            "setup-type": mustGetElement("setup-type-section", HTMLElement),
+            "new-document-in-progress": mustGetElement("new-document-in-progress-section", HTMLElement),
+            "sync-from-desktop": mustGetElement("sync-from-desktop-section", HTMLElement),
+            "sync-from-server": mustGetElement("sync-from-server-section", HTMLElement),
+            "sync-in-progress": mustGetElement("sync-in-progress-section", HTMLElement)
+        };
+    }
 
-        if (this.syncInProgress) {
-            setInterval(checkOutstandingSyncs, 1000);
+    init() {
+        this.setupTypeForm.addEventListener("submit", (event) => {
+            event.preventDefault();
+            void this.selectSetupType();
+        });
+
+        this.syncFromServerForm.addEventListener("submit", (event) => {
+            event.preventDefault();
+            void this.finish();
+        });
+
+        for (const input of this.setupTypeInputs) {
+            input.addEventListener("change", () => {
+                this.setupType = input.value as SetupType;
+                this.render();
+            });
         }
+
+        for (const backButton of document.querySelectorAll<HTMLElement>("[data-action='back']")) {
+            backButton.addEventListener("click", () => {
+                this.back();
+            });
+        }
+
         const serverAddress = `${location.protocol}//${location.host}`;
         $("#current-host").html(serverAddress);
+
+        if (this.step === "sync-in-progress") {
+            this.startSyncPolling();
+        }
+
+        this.render();
+        this.rootNode.style.display = "";
     }
 
-    // this is called in setup.ejs
-    setupTypeSelected() {
-        return !!this.setupType();
-    }
+    private async selectSetupType() {
+        if (this.setupType === "new-document") {
+            this.setStep("new-document-in-progress");
 
-    selectSetupType() {
-        if (this.setupType() === "new-document") {
-            this.step("new-document-in-progress");
+            await $.post("api/setup/new-document");
+            window.location.replace("./setup");
+            return;
+        }
 
-            $.post("api/setup/new-document").then(() => {
-                window.location.replace("./setup");
-            });
-        } else {
-            this.step(this.setupType());
+        if (this.setupType) {
+            this.setStep(this.setupType);
         }
     }
 
-    back() {
-        this.step("setup-type");
-        this.setupType("");
+    private back() {
+        this.setStep("setup-type");
+        this.setupType = "";
+
+        for (const input of this.setupTypeInputs) {
+            input.checked = false;
+        }
+
+        this.render();
     }
 
-    async finish() {
-        const syncServerHost = this.syncServerHost();
-        const syncProxy = this.syncProxy();
-        const password = this.password();
+    private async finish() {
+        const syncServerHost = this.syncServerHostInput.value.trim();
+        const syncProxy = this.syncProxyInput.value.trim();
+        const password = this.passwordInput.value;
 
         if (!syncServerHost) {
             showAlert("Trilium server address can't be empty");
@@ -82,15 +121,38 @@ class SetupModel {
         });
 
         if (resp.result === "success") {
-            this.step("sync-in-progress");
-
-            setInterval(checkOutstandingSyncs, 1000);
-
             hideAlert();
+            this.setStep("sync-in-progress");
+            this.startSyncPolling();
         } else {
             showAlert(`Sync setup failed: ${resp.error}`);
         }
     }
+
+    private setStep(step: SetupStep) {
+        this.step = step;
+        this.render();
+    }
+
+    private render() {
+        for (const [step, section] of Object.entries(this.sections) as [SetupStep, HTMLElement][]) {
+            section.style.display = step === this.step ? "" : "none";
+        }
+
+        this.setupTypeNextButton.disabled = !this.setupType;
+    }
+
+    private getSelectedSetupType(): SetupType {
+        return (this.setupTypeInputs.find((input) => input.checked)?.value ?? "") as SetupType;
+    }
+
+    private startSyncPolling() {
+        if (this.syncPollIntervalId !== null) {
+            return;
+        }
+
+        this.syncPollIntervalId = window.setInterval(checkOutstandingSyncs, 1000);
+    }
 }
 
 async function checkOutstandingSyncs() {
@@ -124,9 +186,19 @@ function getSyncInProgress() {
     return !!parseInt(el.content);
 }
 
+function mustGetElement<T extends typeof HTMLElement>(id: string, ctor: T): InstanceType<T> {
+    const element = document.getElementById(id);
+
+    if (!element || !(element instanceof ctor)) {
+        throw new Error(`Expected element #${id}`);
+    }
+
+    return element as InstanceType<T>;
+}
+
 addEventListener("DOMContentLoaded", (event) => {
     const rootNode = document.getElementById("setup-dialog");
-    if (!rootNode) return;
-    ko.applyBindings(new SetupModel(getSyncInProgress()), rootNode);
-    $("#setup-dialog").show();
+    if (!rootNode || !(rootNode instanceof HTMLElement)) return;
+
+    new SetupController(rootNode, getSyncInProgress()).init();
 });

apps/server/src/assets/views/setup.ejs

@@ -58,35 +58,35 @@
         <div class="alert alert-warning" id="alert" style="display: none;">
         </div>
 
-        <div id="setup-type" data-bind="visible: step() == 'setup-type'" style="margin-top: 20px;">
-            <form data-bind="submit: selectSetupType">
+        <div id="setup-type-section" style="margin-top: 20px;">
+            <form id="setup-type-form">
 
             <div class="radio" style="margin-bottom: 15px;">
                 <label class="tn-radio">
-                    <input type="radio" name="setup-type" value="new-document" data-bind="checked: setupType">
+                    <input type="radio" name="setup-type" value="new-document">
                     <%= t("setup.new-document") %>
                 </label>
             </div>
 
             <div class="radio" style="margin-bottom: 15px;">
                 <label class="tn-radio">
-                    <input type="radio" name="setup-type" value="sync-from-desktop" data-bind="checked: setupType">
+                    <input type="radio" name="setup-type" value="sync-from-desktop">
                     <%= t("setup.sync-from-desktop") %>
                 </label>
             </div>
 
             <div class="radio" style="margin-bottom: 15px;">
                 <label class="tn-radio">
-                    <input type="radio" name="setup-type" value="sync-from-server" data-bind="checked: setupType">
+                    <input type="radio" name="setup-type" value="sync-from-server">
                     <%= t("setup.sync-from-server") %>
                 </label>
             </div>
 
-              <button type="submit" data-bind="disable: !setupTypeSelected()" class="btn btn-primary"><%= t("setup.next") %></button>
+              <button type="submit" id="setup-type-next" class="btn btn-primary" disabled><%= t("setup.next") %></button>
             </form>
         </div>
 
-        <div data-bind="visible: step() == 'new-document-in-progress'">
+        <div id="new-document-in-progress-section">
             <h2><%= t("setup.init-in-progress") %></h2>
 
             <div style="display: flex; justify-content: flex-start; margin-top: 20px;">
@@ -103,7 +103,7 @@
             </div>
         </div>
 
-        <div data-bind="visible: step() == 'sync-from-desktop'">
+        <div id="sync-from-desktop-section">
             <h2><%= t("setup_sync-from-desktop.heading") %></h2>
 
             <p><%= t("setup_sync-from-desktop.description") %></p>
@@ -117,11 +117,11 @@
                 <li><%- t("setup_sync-from-desktop.step6", { link: `<a href="/">${t("setup_sync-from-desktop.step6-here")}</a>` }) %></li>
             </ol>
 
-            <button type="button" data-bind="click: back" class="btn btn-secondary">Back</button>
+            <button type="button" data-action="back" class="btn btn-secondary">Back</button>
         </div>
 
-        <div data-bind="visible: step() == 'sync-from-server'">
-          <form data-bind="submit: finish">
+        <div id="sync-from-server-section">
+          <form id="sync-from-server-form">
 
             <h2><%= t("setup_sync-from-server.heading") %></h2>
 
@@ -129,27 +129,27 @@
 
             <div class="form-group">
                 <label for="sync-server-host"><%= t("setup_sync-from-server.server-host") %></label>
-                <input type="text" id="syncServerHost" class="form-control" data-bind="value: syncServerHost" placeholder="<%= t("setup_sync-from-server.server-host-placeholder") %>">
+                <input type="text" id="sync-server-host" class="form-control" placeholder="<%= t("setup_sync-from-server.server-host-placeholder") %>">
             </div>
             <div class="form-group">
                 <label for="sync-proxy"><%= t("setup_sync-from-server.proxy-server") %></label>
-                <input type="text" id="sync-proxy" class="form-control" data-bind="value: syncProxy" placeholder="<%= t("setup_sync-from-server.proxy-server-placeholder") %>">
+                <input type="text" id="sync-proxy" class="form-control" placeholder="<%= t("setup_sync-from-server.proxy-server-placeholder") %>">
 
                 <p><strong><%= t("setup_sync-from-server.note") %></strong> <%= t("setup_sync-from-server.proxy-instruction") %></p>
             </div>
             <div class="form-group" style="margin-bottom: 8px;">
                 <label for="password"><%= t("setup_sync-from-server.password") %></label>
-                <input type="password" id="password" class="form-control" data-bind="value: password" placeholder="<%= t("setup_sync-from-server.password-placeholder") %>">
+                <input type="password" id="password" class="form-control" placeholder="<%= t("setup_sync-from-server.password-placeholder") %>">
             </div>
 
-            <button type="button" data-bind="click: back" class="btn btn-secondary"><%= t("setup_sync-from-server.back") %></button>
+            <button type="button" data-action="back" class="btn btn-secondary"><%= t("setup_sync-from-server.back") %></button>
 
             <button type="submit" class="btn btn-primary"><%= t("setup_sync-from-server.finish-setup") %></button>
           </form>
 
         </div>
 
-        <div data-bind="visible: step() == 'sync-in-progress'">
+        <div id="sync-in-progress-section">
             <h2><%= t("setup_sync-in-progress.heading") %></h2>
 
             <div class="alert alert-success"><%= t("setup_sync-in-progress.successful") %></div>

pnpm-lock.yaml

@@ -314,9 +314,6 @@ importers:
       katex:
         specifier: 0.16.38
         version: 0.16.38
-      knockout:
-        specifier: 3.5.2
-        version: 3.5.2
       leaflet:
         specifier: 1.9.4
         version: 1.9.4
@@ -11081,9 +11078,6 @@ packages:
     resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
     engines: {node: '>= 8'}
 
-  knockout@3.5.2:
-    resolution: {integrity: sha512-AcJS2PqsYspjtOAlnnVS8hAuBnHMEqRVEwdvmQTeXj/9zfjV//KHurzdYc8MtBd/Pu8bZLMGHc7x0cj8qUvKxQ==}
-
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
@@ -29164,8 +29158,6 @@ snapshots:
 
   klona@2.0.6: {}
 
-  knockout@3.5.2: {}
-
   kolorist@1.8.0: {}
 
   ky@1.14.2: {}