feat: add TOTP input field to sync-from-server setup UI

Author: JYC333

apps/client/src/setup.ts

@@ -1,7 +1,9 @@
 import "jquery";
-import utils from "./services/utils.js";
+
 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";
@@ -16,6 +18,8 @@ class SetupModel {
     syncServerHost: ko.Observable<string | undefined>;
     syncProxy: ko.Observable<string | undefined>;
     password: ko.Observable<string | undefined>;
+    totpToken: ko.Observable<string | undefined>;
+    totpEnabled: ko.Observable<boolean>;
 
     constructor(syncInProgress: boolean) {
         this.syncInProgress = syncInProgress;
@@ -27,6 +31,8 @@ class SetupModel {
         this.syncServerHost = ko.observable();
         this.syncProxy = ko.observable();
         this.password = ko.observable();
+        this.totpToken = ko.observable();
+        this.totpEnabled = ko.observable(false);
 
         if (this.syncInProgress) {
             setInterval(checkOutstandingSyncs, 1000);
@@ -40,7 +46,7 @@ class SetupModel {
         return !!this.setupType();
     }
 
-    selectSetupType() {
+    async selectSetupType() {
         if (this.setupType() === "new-document") {
             this.step("new-document-in-progress");
 
@@ -52,6 +58,24 @@ class SetupModel {
         }
     }
 
+    async checkTotpStatus() {
+        const syncServerHost = this.syncServerHost();
+        if (!syncServerHost) {
+            this.totpEnabled(false);
+            return;
+        }
+
+        try {
+            const resp = await $.post("api/setup/check-server-totp", {
+                syncServerHost
+            });
+            this.totpEnabled(!!resp.totpEnabled);
+        } catch {
+            // If we can't reach the server, don't show TOTP field yet
+            this.totpEnabled(false);
+        }
+    }
+
     back() {
         this.step("setup-type");
         this.setupType("");
@@ -72,11 +96,22 @@ class SetupModel {
             return;
         }
 
+        // Check TOTP status before submitting (in case it wasn't checked yet)
+        await this.checkTotpStatus();
+
+        const totpToken = this.totpToken();
+
+        if (this.totpEnabled() && !totpToken) {
+            showAlert("TOTP token can't be empty when two-factor authentication is enabled");
+            return;
+        }
+
         // not using server.js because it loads too many dependencies
         const resp = await $.post("api/setup/sync-from-server", {
-            syncServerHost: syncServerHost,
-            syncProxy: syncProxy,
-            password: password
+            syncServerHost,
+            syncProxy,
+            password,
+            totpToken
         });
 
         if (resp.result === "success") {

apps/server/src/assets/translations/cn/server.json

@@ -155,6 +155,8 @@
     "proxy-instruction": "如果您将代理设置留空，将使用系统代理（仅适用于桌面应用）",
     "password": "密码",
     "password-placeholder": "密码",
+    "totp-token": "TOTP 验证码",
+    "totp-token-placeholder": "请输入 TOTP 验证码",
     "back": "返回",
     "finish-setup": "完成设置"
   },

apps/server/src/assets/translations/en/server.json

@@ -252,6 +252,8 @@
     "proxy-instruction": "If you leave proxy setting blank, system proxy will be used (applies to the desktop application only)",
     "password": "Password",
     "password-placeholder": "Password",
+    "totp-token": "TOTP Token",
+    "totp-token-placeholder": "Enter your TOTP code",
     "back": "Back",
     "finish-setup": "Finish setup"
   },

apps/server/src/assets/translations/tw/server.json

@@ -155,6 +155,8 @@
     "proxy-instruction": "如果您將代理設定留空，將使用系統代理（僅適用於桌面版）",
     "password": "密碼",
     "password-placeholder": "密碼",
+    "totp-token": "TOTP 驗證碼",
+    "totp-token-placeholder": "請輸入 TOTP 驗證碼",
     "back": "返回",
     "finish-setup": "完成設定"
   },

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

@@ -129,7 +129,7 @@
 
             <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="syncServerHost" class="form-control" data-bind="value: syncServerHost, event: { blur: checkTotpStatus }" 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>
@@ -141,6 +141,10 @@
                 <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") %>">
             </div>
+            <div class="form-group" style="margin-bottom: 8px;" data-bind="visible: totpEnabled">
+                <label for="totpToken"><%= t("setup_sync-from-server.totp-token") %></label>
+                <input type="text" id="totpToken" class="form-control" data-bind="value: totpToken" placeholder="<%= t("setup_sync-from-server.totp-token-placeholder") %>" autocomplete="one-time-code">
+            </div>
 
             <button type="button" data-bind="click: back" class="btn btn-secondary"><%= t("setup_sync-from-server.back") %></button>