From d42b839c32fe8cc11c574c7361ca9d1d154d7a1d Mon Sep 17 00:00:00 2001
From: Jin <22962980+JYC333@users.noreply.github.com>
Date: Fri, 28 Mar 2025 00:39:59 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20init=20move=20mfa=20opti?=
 =?UTF-8?q?on?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../options/multi_factor_authentication.ts    | 206 +++++++++++-------
 src/public/translations/en/translation.json   |   2 +
 2 files changed, 131 insertions(+), 77 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 1923d8597..860378f71 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
@@ -9,97 +9,124 @@ const TPL_WEB = `
 <div class="options-section">
     <h4>${t("multi_factor_authentication.title")}</h4>
     <p class="form-text">${t("multi_factor_authentication.description")}</p>
-</div>
-
-<div class="options-section">
-    <h4>${t("multi_factor_authentication.oauth_title")}</h4>
 
     <div class="form-group row">
         <div class="col-md-6 side-checkbox">
             <label class="form-check tn-checkbox">
-                <input type="checkbox" class="oauth-enabled-checkbox form-check-input" disabled />
-                <b>${t("multi_factor_authentication.oauth_enabled")}</b>
+                <input type="checkbox" class="mfa-enabled-checkbox form-check-input" checked/>
+                ${t("multi_factor_authentication.mfa_enabled")}
             </label>
         </div>
     </div>
 
-    <div class="alert alert-warning env-oauth-enabled" role="alert" style="font-weight: bold; color: red !important;"></div>
+    <div class="mfa-options" style="display: none;">
+        <div class="form-group row">
+            <div class="col-md-6">
+                <label class="form-label"><b>${t("multi_factor_authentication.mfa_method")}</b></label>
+                <div class="form-check">
+                    <input type="radio" class="form-check-input auth-method-radio" name="mfaMethod" value="totp" checked />
+                    <label class="form-check-label">${t("multi_factor_authentication.totp_title")}</label>
+                </div>
+                <div class="form-check">
+                    <input type="radio" class="form-check-input auth-method-radio" name="mfaMethod" value="oauth" />
+                    <label class="form-check-label">${t("multi_factor_authentication.oauth_title")}</label>
+                </div>
+            </div>
+        </div>
 
-    <div class="col-md-6">
-        <span><b>${t("multi_factor_authentication.oauth_user_account")}</b></span><span class="user-account-name"> ${t("multi_factor_authentication.oauth_user_not_logged_in")}</span>
-        <br>
-        <span><b>${t("multi_factor_authentication.oauth_user_email")}</b></span><span class="user-account-email"> ${t("multi_factor_authentication.oauth_user_not_logged_in")}</span>
-    </div>
+        <div class="totp-options" style="display: none;">
+            <div class="form-group row">
+                <div class="col-md-6 side-checkbox">
+                    <label class="form-check tn-checkbox">
+                        <input type="checkbox" class="totp-enabled form-check-input" disabled />
+                        <b>${t("multi_factor_authentication.totp_enabled")}</b>
+                    </label>
+                </div>
+            </div>
 
-    <p class="form-text">${t("multi_factor_authentication.oauth_description")}</p>
-</div>
+            <div class="alert alert-warning env-totp-enabled" role="alert" style="font-weight: bold; color: red !important;"></div>
 
-<div class="options-section">
-    <h4>${t("multi_factor_authentication.totp_title")}</h4>
+            <p class="form-text">${t("multi_factor_authentication.totp_description")}</p>
 
-    <div class="form-group row">
-        <div class="col-md-6 side-checkbox">
-            <label class="form-check tn-checkbox">
-                <input type="checkbox" class="totp-enabled form-check-input" disabled />
-                <b>${t("multi_factor_authentication.totp_enabled")}</b>
-            </label>
+            <div class="form-group">
+                <div class="totp-secret">${t("multi_factor_authentication.totp_secret_description")}</div>
+            </div>
+
+            <button class="generate-totp btn btn-primary"> ${t("multi_factor_authentication.totp_secret_generate")} </button>
+
+            <div class="options-section">
+                <h4>${t("multi_factor_authentication.totp_secret_title")}</h4>
+
+                <div class="form-group">
+                    <div class="totp-secret">${t("multi_factor_authentication.totp_secret_description")}</div>
+                </div>
+
+                <button class="generate-totp btn btn-primary"> ${t("multi_factor_authentication.totp_secret_generate")} </button>
+            </div>
+
+            <div class="options-section">
+                <h4>${t("multi_factor_authentication.recovery_keys_title")}</h4>
+
+                <p class="form-text">${t("multi_factor_authentication.recovery_keys_description")}</p>
+
+                <div class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">
+                    ${t("multi_factor_authentication.recovery_keys_description_warning")}
+                </div>
+
+                <br>
+
+                <table style="border: 0px solid white">
+                    <tbody>
+                        <tr>
+                            <td class="key_0"></td>
+                            <td style="width: 20px" />
+                            <td class="key_1"></td>
+                        </tr>
+                        <tr>
+                            <td class="key_2"></td>
+                            <td />
+                            <td class="key_3"></td>
+                        </tr>
+                        <tr>
+                            <td class="key_4"></td>
+                            <td />
+                            <td class="key_5"></td>
+                        </tr>
+                        <tr>
+                            <td class="key_6"></td>
+                            <td />
+                            <td class="key_7"></td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <br>
+
+                <button class="generate-recovery-code btn btn-primary" disabled="true"> ${t("multi_factor_authentication.recovery_keys_generate")} </button>
+            </div>
+        </div>
+
+        <div class="oauth-options" style="display: none;">
+            <div class="form-group row">
+                <div class="col-md-6 side-checkbox">
+                    <label class="form-check tn-checkbox">
+                        <input type="checkbox" class="oauth-enabled-checkbox form-check-input" disabled />
+                        <b>${t("multi_factor_authentication.oauth_enabled")}</b>
+                    </label>
+                </div>
+            </div>
+
+            <div class="alert alert-warning env-oauth-enabled" role="alert" style="font-weight: bold; color: red !important;"></div>
+
+            <div class="col-md-6">
+                <span><b>${t("multi_factor_authentication.oauth_user_account")}</b></span><span class="user-account-name"> ${t("multi_factor_authentication.oauth_user_not_logged_in")}</span>
+                <br>
+                <span><b>${t("multi_factor_authentication.oauth_user_email")}</b></span><span class="user-account-email"> ${t("multi_factor_authentication.oauth_user_not_logged_in")}</span>
+            </div>
+
+            <p class="form-text">${t("multi_factor_authentication.oauth_description")}</p>
         </div>
     </div>
-
-    <div class="alert alert-warning env-totp-enabled" role="alert" style="font-weight: bold; color: red !important;"></div>
-
-    <p class="form-text">${t("multi_factor_authentication.totp_description")}</p>
-</div>
-
-<div class="options-section">
-    <h4>${t("multi_factor_authentication.totp_secret_title")}</h4>
-
-    <div class="form-group">
-        <div class="totp-secret">${t("multi_factor_authentication.totp_secret_description")}</div>
-    </div>
-
-    <button class="generate-totp btn btn-primary"> ${t("multi_factor_authentication.totp_secret_generate")} </button>
-</div>
-
-<div class="options-section">
-    <h4>${t("multi_factor_authentication.recovery_keys_title")}</h4>
-
-    <p class="form-text">${t("multi_factor_authentication.recovery_keys_description")}</p>
-
-    <div class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">
-        ${t("multi_factor_authentication.recovery_keys_description_warning")}
-    </div>
-
-    <br>
-
-    <table style="border: 0px solid white">
-        <tbody>
-            <tr>
-                <td class="key_0"></td>
-                <td style="width: 20px" />
-                <td class="key_1"></td>
-            </tr>
-            <tr>
-                <td class="key_2"></td>
-                <td />
-                <td class="key_3"></td>
-            </tr>
-            <tr>
-                <td class="key_4"></td>
-                <td />
-                <td class="key_5"></td>
-            </tr>
-            <tr>
-                <td class="key_6"></td>
-                <td />
-                <td class="key_7"></td>
-            </tr>
-        </tbody>
-    </table>
-
-    <br>
-
-    <button class="generate-recovery-code btn btn-primary" disabled="true"> ${t("multi_factor_authentication.recovery_keys_generate")} </button>
 </div>
 `;
 
@@ -140,12 +167,23 @@ export default class MultiFactorAuthenticationOptions extends OptionsWidget {
     private $envEnabledOAuth!: JQuery<HTMLElement>;
     private $recoveryKeys: JQuery<HTMLElement>[] = [];
     private $protectedSessionTimeout!: JQuery<HTMLElement>;
+    private $mfaEnabledCheckbox!: JQuery<HTMLElement>;
+    private $mfaOptions!: JQuery<HTMLElement>;
+    private $authMethodRadios!: JQuery<HTMLElement>;
+    private $totpOptions!: JQuery<HTMLElement>;
+    private $oauthOptions!: JQuery<HTMLElement>;
 
     doRender() {
         const template = utils.isElectron() ? TPL_ELECTRON : TPL_WEB;
         this.$widget = $(template);
 
         if (!utils.isElectron()) {
+            this.$mfaEnabledCheckbox = this.$widget.find(".mfa-enabled-checkbox");
+            this.$mfaOptions = this.$widget.find(".mfa-options");
+            this.$authMethodRadios = this.$widget.find(".auth-method-radio");
+            this.$totpOptions = this.$widget.find(".totp-options");
+            this.$oauthOptions = this.$widget.find(".oauth-options");
+
             this.$generateTotpButton = this.$widget.find(".generate-totp");
             this.$totpEnabled = this.$widget.find(".totp-enabled");
             this.$totpSecret = this.$widget.find(".totp-secret");
@@ -175,6 +213,20 @@ export default class MultiFactorAuthenticationOptions extends OptionsWidget {
             });
 
             this.displayRecoveryKeys();
+
+            this.$mfaEnabledCheckbox.on("change", () => {
+                this.$mfaOptions.toggle(this.$mfaEnabledCheckbox.is(":checked"));
+                if (!this.$mfaEnabledCheckbox.is(":checked")) {
+                    this.$totpOptions.hide();
+                    this.$oauthOptions.hide();
+                }
+            });
+
+            this.$authMethodRadios.on("change", () => {
+                const selectedMethod = this.$authMethodRadios.filter(":checked").val();
+                this.$totpOptions.toggle(selectedMethod === "totp");
+                this.$oauthOptions.toggle(selectedMethod === "oauth");
+            });
         }
     }
 
diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json
index 52609a05e..21e5874c4 100644
--- a/src/public/translations/en/translation.json
+++ b/src/public/translations/en/translation.json
@@ -1313,6 +1313,8 @@
   "multi_factor_authentication": {
     "title": "Multi-Factor Authentication",
     "description": "Multi-Factor Authentication (MFA) adds an extra layer of security to your account. Instead of just entering a password to log in, MFA requires you to provide one or more additional pieces of evidence to verify your identity. This way, even if someone gets hold of your password, they still can't access your account without the second piece of information. It's like adding an extra lock to your door, making it much harder for anyone else to break in.",
+    "mfa_enabled": "Enable Multi-Factor Authentication",
+    "mfa_method": "MFA Method",
     "electron_disabled": "Multi-Factor Authentication is not supported in the desktop build currently.",
     "oauth_title": "OAuth/OpenID",
     "oauth_enabled": "OAuth/OpenID Enabled",