From c921982ae79632e52fd05ab58bfcf91840ec9f37 Mon Sep 17 00:00:00 2001
From: Jin <22962980+JYC333@users.noreply.github.com>
Date: Fri, 28 Mar 2025 03:02:03 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20set=20generate=20totp=20?=
 =?UTF-8?q?function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../options/multi_factor_authentication.ts    | 62 ++++++++++++-------
 src/public/translations/cn/translation.json   |  5 ++
 src/public/translations/en/translation.json   |  4 ++
 3 files changed, 49 insertions(+), 22 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 8ed38c2e8..3a03a639e 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
@@ -4,6 +4,7 @@ import OptionsWidget from "./options_widget.js";
 import type { OptionMap } from "../../../../../services/options_interface.js";
 import { t } from "../../../services/i18n.js";
 import utils from "../../../services/utils.js";
+import dialogService from "../../../services/dialog.js";
 
 const TPL_WEB = `
 <div class="options-section">
@@ -38,6 +39,11 @@ const TPL_WEB = `
             <hr />
 
             <h5>${t("multi_factor_authentication.totp_secret_title")}</h5>
+            <br />
+            <div class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">
+                ${t("multi_factor_authentication.totp_secret_description_warning")}
+            </div>
+
             <br />
             <button class="generate-totp btn btn-primary">
                 ${t("multi_factor_authentication.totp_secret_generate")}
@@ -47,7 +53,7 @@ const TPL_WEB = `
 
             <h5>${t("multi_factor_authentication.recovery_keys_title")}</h5>
             <p class="form-text">${t("multi_factor_authentication.recovery_keys_description")}</p>
-
+            <br />
             <div class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">
                 ${t("multi_factor_authentication.recovery_keys_description_warning")}
             </div>
@@ -112,7 +118,6 @@ interface OAuthStatus {
 
 interface TOTPStatus {
     set: boolean;
-    message: boolean;
 }
 
 interface RecoveryKeysResponse {
@@ -124,12 +129,9 @@ interface RecoveryKeysResponse {
 
 export default class MultiFactorAuthenticationOptions extends OptionsWidget {
     private $generateTotpButton!: JQuery<HTMLElement>;
-    private $totpSecret!: JQuery<HTMLElement>;
     private $generateRecoveryCodeButton!: JQuery<HTMLElement>;
     private $UserAccountName!: JQuery<HTMLElement>;
     private $UserAccountEmail!: JQuery<HTMLElement>;
-    private $envEnabledTOTP!: JQuery<HTMLElement>;
-    private $envEnabledOAuth!: JQuery<HTMLElement>;
     private $recoveryKeys: JQuery<HTMLElement>[] = [];
     private $protectedSessionTimeout!: JQuery<HTMLElement>;
     private $mfaEnabledCheckbox!: JQuery<HTMLElement>;
@@ -147,15 +149,12 @@ export default class MultiFactorAuthenticationOptions extends OptionsWidget {
             this.$mfaOptions = this.$widget.find(".mfa-options");
             this.$mfaMethodRadios = this.$widget.find(".mfa-method-radio");
             this.$totpOptions = this.$widget.find(".totp-options");
-            this.$oauthOptions = this.$widget.find(".oauth-options");
-
             this.$generateTotpButton = this.$widget.find(".generate-totp");
-            this.$totpSecret = this.$widget.find(".totp-secret");
             this.$generateRecoveryCodeButton = this.$widget.find(".generate-recovery-code");
+
+            this.$oauthOptions = this.$widget.find(".oauth-options");
             this.$UserAccountName = this.$widget.find(".user-account-name");
             this.$UserAccountEmail = this.$widget.find(".user-account-email");
-            this.$envEnabledTOTP = this.$widget.find(".env-totp-enabled");
-            this.$envEnabledOAuth = this.$widget.find(".env-oauth-enabled");
 
             this.$recoveryKeys = [];
             for (let i = 0; i < 8; i++) {
@@ -255,9 +254,33 @@ export default class MultiFactorAuthenticationOptions extends OptionsWidget {
     }
 
     async generateKey() {
+        const totpStatus = await server.get<TOTPStatus>("totp/status");
+
+        if (totpStatus.set) {
+            const confirmed = await dialogService.confirm(t("multi_factor_authentication.totp_secret_regenerate_confirm"));
+
+            if (!confirmed) {
+                return;
+            }
+        }
+
         const result = await server.get<{ success: boolean; message: string }>("totp/generate");
+
         if (result.success) {
-            this.$totpSecret.text(result.message);
+            await dialogService.prompt({
+                title: t("multi_factor_authentication.totp_secret_generated"),
+                message: t("multi_factor_authentication.totp_secret_warning"),
+                defaultValue: result.message,
+                shown: ({ $answer }) => {
+                    if ($answer) {
+                        $answer.prop('readonly', true);
+                    }
+                }
+            });
+
+            this.$generateTotpButton.text(t("multi_factor_authentication.totp_secret_regenerate"));
+
+            await this.setRecoveryKeys();
         } else {
             toastService.showError(result.message);
         }
@@ -278,17 +301,12 @@ export default class MultiFactorAuthenticationOptions extends OptionsWidget {
                 this.$oauthOptions.hide();
             }
 
-            // server.get<OAuthStatus>("oauth/status").then((result) => {
-            //     if (result.enabled) {
-            //         if (result.name) this.$UserAccountName.text(result.name);
-            //         if (result.email) this.$UserAccountEmail.text(result.email);
-
-            //         this.$envEnabledOAuth.hide();
-            //     } else {
-            //         this.$envEnabledOAuth.text(t("multi_factor_authentication.oauth_enable_description"));
-            //         this.$envEnabledOAuth.show();
-            //     }
-            // });
+            server.get<OAuthStatus>("oauth/status").then((result) => {
+                if (result.enabled) {
+                    if (result.name) this.$UserAccountName.text(result.name);
+                    if (result.email) this.$UserAccountEmail.text(result.email);
+                }
+            });
 
             server.get<TOTPStatus>("totp/status").then((result) => {
                 if (result.set) {
diff --git a/src/public/translations/cn/translation.json b/src/public/translations/cn/translation.json
index 62737058d..4fef624d0 100644
--- a/src/public/translations/cn/translation.json
+++ b/src/public/translations/cn/translation.json
@@ -1312,6 +1312,11 @@
     "totp_description": "TOTP（基于时间的一次性密码）是一种安全功能，它会生成一个每30秒变化的唯一临时代码。您需要使用这个代码和您的密码一起登录账户，这使得他人更难访问您的账户。",
     "totp_secret_title": "生成 TOTP 密钥",
     "totp_secret_generate": "生成 TOTP 密钥",
+    "totp_secret_regenerate": "重新生成 TOTP 密钥",
+    "totp_secret_description_warning": "生成新的 TOTP 密钥后，您需要使用新的 TOTP 密钥重新登录。",
+    "totp_secret_generated": "TOTP 密钥已生成",
+    "totp_secret_warning": "请将生成的密钥保存在安全的地方。它将不会再次显示。",
+    "totp_secret_regenerate_confirm": "您确定要重新生成 TOTP 密钥吗？这将使之前的 TOTP 密钥失效，并使所有现有的恢复代码失效。请将生成的密钥保存在安全的地方。它将不会再次显示。",
     "recovery_keys_title": "单点登录恢复密钥",
     "recovery_keys_description": "单点登录恢复密钥用于在无法访问您的认证器代码时登录。请将它们保存在安全的地方。",
     "recovery_keys_description_warning": "恢复密钥使用后将无法再次使用。",
diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json
index ee0722924..b5b524f59 100644
--- a/src/public/translations/en/translation.json
+++ b/src/public/translations/en/translation.json
@@ -1326,6 +1326,10 @@
     "totp_secret_title": "Generate TOTP Secret",
     "totp_secret_generate": "Generate TOTP Secret",
     "totp_secret_regenerate": "Regenerate TOTP Secret",
+    "totp_secret_description_warning": "After generating a new TOTP secret, you will be required to login again with the new TOTP secret.",
+    "totp_secret_generated": "TOTP Secret Generated",
+    "totp_secret_warning": "Please save the generated secret in a secure location. It will not be shown again.",
+    "totp_secret_regenerate_confirm": "Are you sure you want to regenerate the TOTP secret? This will invalidate previous TOTP secret and all existing recovery codes.",
     "recovery_keys_title": "Single Sign-on Recovery Keys",
     "recovery_keys_description": "Single sign-on recovery keys are used to login in the event you cannot access your Authenticator codes. Keep them somewhere safe and secure.",
     "recovery_keys_description_warning": "After a recovery key is used it cannot be used again.",