feat: 🎸 restyle option page

src/public/app/widgets/type_widgets/options/multi_factor_authentication.ts

@@ -10,15 +10,15 @@ const TPL_WEB = `
     <h4>${t("multi_factor_authentication.title")}</h4>
     <p class="form-text">${t("multi_factor_authentication.description")}</p>
 
-    <div class="form-group row">
+    <div class="col-md-6 side-checkbox">
-        <div class="col-md-6 side-checkbox">
+        <label class="form-check tn-checkbox">
-            <label class="form-check tn-checkbox">
+            <input type="checkbox" class="mfa-enabled-checkbox form-check-input" />
-                <input type="checkbox" class="mfa-enabled-checkbox form-check-input" />
+            ${t("multi_factor_authentication.mfa_enabled")}
-                ${t("multi_factor_authentication.mfa_enabled")}
+        </label>
-            </label>
-        </div>
     </div>
 
+    <hr />
+
     <div class="mfa-options" style="display: none;">
         <label class="form-label"><b>${t("multi_factor_authentication.mfa_method")}</b></label>
         <div role="group">
@@ -35,62 +35,53 @@ const TPL_WEB = `
         <div class="totp-options" style="display: none;">
             <p class="form-text">${t("multi_factor_authentication.totp_description")}</p>
 
-            <div class="form-group">
+            <hr />
-                <div class="totp-secret">${t("multi_factor_authentication.totp_secret_description")}</div>
+
+            <h5>${t("multi_factor_authentication.totp_secret_title")}</h5>
+            <br />
+            <button class="generate-totp btn btn-primary">
+                ${t("multi_factor_authentication.totp_secret_generate")}
+            </button>
+
+            <hr />
+
+            <h5>${t("multi_factor_authentication.recovery_keys_title")}</h5>
+            <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>
 
-            <button class="generate-totp btn btn-primary"> ${t("multi_factor_authentication.totp_secret_generate")} </button>
+            <br>
 
-            <div class="options-section">
+            <table style="border: 0px solid white">
-                <h4>${t("multi_factor_authentication.totp_secret_title")}</h4>
+                <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>
 
-                <div class="form-group">
+            <br>
-                    <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>
+            <button class="generate-recovery-code btn btn-primary"> ${t("multi_factor_authentication.recovery_keys_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;">

src/public/translations/cn/translation.json

@@ -1304,18 +1304,13 @@
     "description": "多因素认证（MFA）为您的账户添加了额外的安全层。除了输入密码登录外，MFA还要求您提供一个或多个额外的验证信息来验证您的身份。这样，即使有人获得了您的密码，没有第二个验证信息他们也无法访问您的账户。这就像给您的门添加了一把额外的锁，让他人更难闯入。",
     "electron_disabled": "当前桌面版本不支持多因素认证。",
     "oauth_title": "OAuth/OpenID 认证",
-    "oauth_enabled": "OAuth/OpenID 已启用",
-    "oauth_enable_description": "在配置文件中设置 ssoEnabled 或环境变量 TRILIUM_SSO_ENABLED 为 true 以启用（需要重启）",
     "oauth_user_account": "用户账号：",
     "oauth_user_email": "用户邮箱：",
     "oauth_user_not_logged_in": "未登录！",
     "oauth_description": "OpenID 是一种标准化的方式，允许您使用其他服务（如 Google）的账号来登录网站，以验证您的身份。",
     "totp_title": "基于时间的一次性密码（TOTP）",
-    "totp_enabled": "TOTP 已启用",
-    "totp_enable_description": "在配置文件中设置 totpEnabled 或环境变量 TRILIUM_TOTP_ENABLED 为 true 以启用（需要重启）",
     "totp_description": "TOTP（基于时间的一次性密码）是一种安全功能，它会生成一个每30秒变化的唯一临时代码。您需要使用这个代码和您的密码一起登录账户，这使得他人更难访问您的账户。",
     "totp_secret_title": "生成 TOTP 密钥",
-    "totp_secret_description": "TOTP 密钥",
     "totp_secret_generate": "生成 TOTP 密钥",
     "recovery_keys_title": "单点登录恢复密钥",
     "recovery_keys_description": "单点登录恢复密钥用于在无法访问您的认证器代码时登录。请将它们保存在安全的地方。",

src/public/translations/en/translation.json

@@ -1317,19 +1317,15 @@
     "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",
-    "oauth_enable_description": "Set ssoEnabled in config file or TRILIUM_SSO_ENABLED environment variable to true to enable (Requires restart)",
     "oauth_user_account": "User Account:",
     "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)",
-    "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.",
     "totp_secret_title": "Generate TOTP Secret",
-    "totp_secret_description": "TOTP Secret Key",
     "totp_secret_generate": "Generate TOTP Secret",
+    "totp_secret_regenerate": "Regenerate TOTP Secret",
     "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.",