From 577dc1ce0617529d593526e8672328974219e5e8 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 7 Mar 2025 14:46:59 +0800
Subject: [PATCH] feat: add device loss warning tips in 2FA setup page (#7272)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind feature
/milestone 2.20.x

#### What this PR does / why we need it:

<img width="519" alt="image" src="https://github.com/user-attachments/assets/7c1f5636-ef85-489e-80ac-5199acf234a3" />

#### Which issue(s) this PR fixes:

Fixes #7260

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?

```release-note
在两步验证配置界面添加设备丢失相关的提示
```
---
 ui/src/locales/_missing_translations_es.yaml         |  5 +----
 ui/src/locales/en.yaml                               |  6 ++++++
 ui/src/locales/zh-CN.yaml                            |  2 ++
 ui/src/locales/zh-TW.yaml                            |  1 +
 .../profile/tabs/components/TotpConfigureModal.vue   | 12 ++++++++++--
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/ui/src/locales/_missing_translations_es.yaml b/ui/src/locales/_missing_translations_es.yaml
index d469b1a2e..43b4220f3 100644
--- a/ui/src/locales/_missing_translations_es.yaml
+++ b/ui/src/locales/_missing_translations_es.yaml
@@ -350,6 +350,7 @@ core:
                 manual:
                   label: If you can't scan the QR code, click to view the alternative steps.
                   help: "Manually configure the validator application with the following code:"
+              tips: Please keep your two-step verification device safe. If the device is lost or damaged, you will not be able to log in. It is recommended that you install the authenticator app on multiple devices or keep a backup of the key in case the primary device cannot be used.
     pat:
       operations:
         delete:
@@ -462,10 +463,6 @@ core:
         revoke:
           title: Revoke device
           description: Are you sure you want to revoke this device? After revoking, this device will be logged out
-        revoke_others:
-          title: Revoke all other devices
-          description: Are you sure you want to revoke all other devices? After you revoke, other devices will be logged out
-          toast_success: Login status of other devices has been revoked
   uc_notification:
     title: Notifications
     tabs:
diff --git a/ui/src/locales/en.yaml b/ui/src/locales/en.yaml
index 44d716649..20bf08b5e 100644
--- a/ui/src/locales/en.yaml
+++ b/ui/src/locales/en.yaml
@@ -1254,6 +1254,12 @@ core:
                   help: >-
                     Manually configure the validator application with the
                     following code:
+              tips: >-
+                Please keep your two-step verification device safe. If the
+                device is lost or damaged, you will not be able to log in. It is
+                recommended that you install the authenticator app on multiple
+                devices or keep a backup of the key in case the primary device
+                cannot be used.
     pat:
       operations:
         delete:
diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
index d8cc65bae..3a70b38d1 100644
--- a/ui/src/locales/zh-CN.yaml
+++ b/ui/src/locales/zh-CN.yaml
@@ -1170,6 +1170,8 @@ core:
                 manual:
                   label: 如果无法扫描二维码，点击查看代替步骤
                   help: 使用以下代码手动配置验证器应用：
+              tips: >-
+                请妥善保管您的两步验证设备，如果设备丢失或损坏，你将无法登录系统。建议你在多个设备上安装验证器应用，或保存好密钥的备份，以防主要设备无法使用。
     pat:
       operations:
         delete:
diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
index 2a6ce9982..e91a48423 100644
--- a/ui/src/locales/zh-TW.yaml
+++ b/ui/src/locales/zh-TW.yaml
@@ -1155,6 +1155,7 @@ core:
                 manual:
                   label: 如果您無法掃描二維碼，請按一下查看替代步驟。
                   help: 使用以下程式碼手動配置驗證器應用程式：
+              tips: 請妥善保管您的兩步驟驗證裝置，如果裝置遺失或損壞，您將無法登入系統。建議您在多個裝置上安裝驗證器應用程式，或保存好金鑰的備份，以防主要裝置無法使用。
     pat:
       operations:
         delete:
diff --git a/ui/uc-src/modules/profile/tabs/components/TotpConfigureModal.vue b/ui/uc-src/modules/profile/tabs/components/TotpConfigureModal.vue
index 69f5c4c97..ab65d46f5 100644
--- a/ui/uc-src/modules/profile/tabs/components/TotpConfigureModal.vue
+++ b/ui/uc-src/modules/profile/tabs/components/TotpConfigureModal.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { TotpRequest } from "@halo-dev/api-client";
 import { ucApiClient } from "@halo-dev/api-client";
-import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
+import { Toast, VAlert, VButton, VModal, VSpace } from "@halo-dev/components";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import { useQRCode } from "@vueuse/integrations/useQRCode";
 import { computed, ref } from "vue";
@@ -54,7 +54,15 @@ function onSubmit(data: TotpRequest) {
     @close="emit('close')"
   >
     <div>
-      <div class="mb-4 space-y-3 border-b border-gray-100 pb-4 text-gray-900">
+      <VAlert
+        :title="$t('core.common.text.tip')"
+        :description="
+          $t('core.uc_profile.2fa.methods.totp.operations.configure.tips')
+        "
+        type="warning"
+        :closable="false"
+      ></VAlert>
+      <div class="my-4 space-y-3 border-b border-gray-100 pb-4 text-gray-900">
         <div class="text-sm font-semibold">
           {{
             $t(