From 4959dbf12600afdf30e83a7929747a85dd9a1275 Mon Sep 17 00:00:00 2001
From: Jin <22962980+JYC333@users.noreply.github.com>
Date: Wed, 26 Mar 2025 03:22:57 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Improve=20TOTP=20setting?=
 =?UTF-8?q?=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../options/multi_factor_authentication.ts       | 16 +++++++---------
 src/public/translations/en/translation.json      |  2 +-
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/options/multi_factor_authentication.ts b/src/public/app/widgets/type_widgets/options/multi_factor_authentication.ts
index c6bfa5b6f..f4bfc0fdd 100644
--- a/src/public/app/widgets/type_widgets/options/multi_factor_authentication.ts
+++ b/src/public/app/widgets/type_widgets/options/multi_factor_authentication.ts
@@ -57,7 +57,7 @@ const TPL = `
         <div class="totp-secret">${t("multi_factor_authentication.totp_secret_description")}</div>
     </div>
 
-    <button class="regenerate-totp btn btn-primary"> ${t("multi_factor_authentication.totp_secret_generate")} </button>
+    <button class="generate-totp btn btn-primary"> ${t("multi_factor_authentication.totp_secret_generate")} </button>
 </div>
 
 <div class="options-section">
@@ -98,7 +98,7 @@ const TPL = `
 
     <br>
 
-    <button class="generate-recovery-code btn btn-primary" disabled="true"> Generate Recovery Keys </button>
+    <button class="generate-recovery-code btn btn-primary" disabled="true"> ${t("multi_factor_authentication.recovery_keys_generate")} </button>
 </div>
 `;
 
@@ -121,10 +121,9 @@ interface RecoveryKeysResponse {
 }
 
 export default class MultiFactorAuthenticationOptions extends OptionsWidget {
-    private $regenerateTotpButton!: JQuery<HTMLElement>;
+    private $generateTotpButton!: JQuery<HTMLElement>;
     private $totpEnabled!: JQuery<HTMLElement>;
     private $totpSecret!: JQuery<HTMLElement>;
-    private $authenticatorCode!: JQuery<HTMLElement>;
     private $generateRecoveryCodeButton!: JQuery<HTMLElement>;
     private $oAuthEnabledCheckbox!: JQuery<HTMLElement>;
     private $UserAccountName!: JQuery<HTMLElement>;
@@ -137,10 +136,9 @@ export default class MultiFactorAuthenticationOptions extends OptionsWidget {
     doRender() {
         this.$widget = $(TPL);
 
-        this.$regenerateTotpButton = this.$widget.find(".regenerate-totp");
+        this.$generateTotpButton = this.$widget.find(".generate-totp");
         this.$totpEnabled = this.$widget.find(".totp-enabled");
         this.$totpSecret = this.$widget.find(".totp-secret");
-        this.$authenticatorCode = this.$widget.find(".authenticator-code");
         this.$generateRecoveryCodeButton = this.$widget.find(".generate-recovery-code");
         this.$oAuthEnabledCheckbox = this.$widget.find(".oauth-enabled-checkbox");
         this.$UserAccountName = this.$widget.find(".user-account-name");
@@ -157,7 +155,7 @@ export default class MultiFactorAuthenticationOptions extends OptionsWidget {
             await this.setRecoveryKeys();
         });
 
-        this.$regenerateTotpButton.on("click", async () => {
+        this.$generateTotpButton.on("click", async () => {
             await this.generateKey();
         });
 
@@ -249,14 +247,14 @@ export default class MultiFactorAuthenticationOptions extends OptionsWidget {
         server.get<TOTPStatus>("totp/status").then((result) => {
             if (result.enabled) {
                 this.$totpEnabled.prop("checked", result.message);
-                this.$authenticatorCode.prop("disabled", !result.message);
+                this.$generateTotpButton.prop("disabled", !result.message);
                 this.$generateRecoveryCodeButton.prop("disabled", !result.message);
 
                 this.$envEnabledTOTP.hide();
             } else {
                 this.$totpEnabled.prop("checked", false);
                 this.$totpEnabled.prop("disabled", true);
-                this.$authenticatorCode.prop("disabled", true);
+                this.$generateTotpButton.prop("disabled", true);
                 this.$generateRecoveryCodeButton.prop("disabled", true);
 
                 this.$envEnabledTOTP.text(t("multi_factor_authentication.totp_enable_description"));
diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json
index 07fe05780..6b168a6b2 100644
--- a/src/public/translations/en/translation.json
+++ b/src/public/translations/en/translation.json
@@ -1319,7 +1319,7 @@
     "oauth_user_email": "User Email:",
     "oauth_user_not_logged_in": "Not logged in!",
     "oauth_description": "OpenID is a standardized way to let you log into websites using an account from another service, like Google, to verify your identity.",
-    "totp_title": "Time-based One-Time Password",
+    "totp_title": "Time-based One-Time Password (TOTP)",
     "totp_enabled": "TOTP Enabled",
     "totp_enable_description": "Set totpEnabled in config file or TRILIUM_TOTP_ENABLED environment variable to true to enable (Requires restart)",
     "totp_description": "TOTP (Time-Based One-Time Password) is a security feature that generates a unique, temporary code which changes every 30 seconds. You use this code, along with your password to log into your account, making it much harder for anyone else to access it.",