From f2b883f2e934955a4bc5dd601ff704a42130f298 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 26 Apr 2024 12:36:59 +0800
Subject: [PATCH] feat: add verified badge for email field in profile detail
 page (#5783)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.15.x

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

在个人中心的个人资料页面添加邮箱已验证的标识，方便用户知晓。

<img width="596" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/77cd83e1-cefe-453c-ad12-689ee893c8ee">

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

```release-note
在个人中心的个人资料页面添加邮箱已验证的标识。
```
---
 .../modules/system/users/tabs/Detail.vue      | 24 +++++++++++++++++--
 ui/src/locales/en.yaml                        |  6 +++++
 ui/src/locales/zh-CN.yaml                     |  6 +++++
 ui/src/locales/zh-TW.yaml                     |  6 +++++
 ui/uc-src/modules/profile/tabs/Detail.vue     | 10 +++++++-
 5 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/ui/console-src/modules/system/users/tabs/Detail.vue b/ui/console-src/modules/system/users/tabs/Detail.vue
index cad29bc0e..06571b44a 100644
--- a/ui/console-src/modules/system/users/tabs/Detail.vue
+++ b/ui/console-src/modules/system/users/tabs/Detail.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import {
+  IconInformation,
   IconUserSettings,
   VDescription,
   VDescriptionItem,
@@ -8,6 +9,7 @@ import {
 import type { DetailedUser } from "@halo-dev/api-client";
 import { rbacAnnotations } from "@/constants/annotations";
 import { formatDatetime } from "@/utils/date";
+import RiVerifiedBadgeLine from "~icons/ri/verified-badge-line";
 
 withDefaults(defineProps<{ user?: DetailedUser }>(), {
   user: undefined,
@@ -28,9 +30,27 @@ withDefaults(defineProps<{ user?: DetailedUser }>(), {
       />
       <VDescriptionItem
         :label="$t('core.user.detail.fields.email')"
-        :content="user?.user.spec.email || $t('core.common.text.none')"
         class="!px-2"
-      />
+      >
+        <div v-if="user?.user.spec.email" class="flex items-center space-x-2">
+          <span>
+            {{ user?.user.spec.email }}
+          </span>
+          <RiVerifiedBadgeLine
+            v-if="user?.user.spec.emailVerified"
+            v-tooltip="$t('core.user.detail.fields.email_verified.tooltip')"
+            class="text-xs text-blue-600"
+          />
+          <IconInformation
+            v-else
+            v-tooltip="$t('core.user.detail.fields.email_not_verified.tooltip')"
+            class="text-xs text-red-500"
+          />
+        </div>
+        <span v-else>
+          {{ $t("core.common.text.none") }}
+        </span>
+      </VDescriptionItem>
       <VDescriptionItem
         :label="$t('core.user.detail.fields.roles')"
         class="!px-2"
diff --git a/ui/src/locales/en.yaml b/ui/src/locales/en.yaml
index 8b523e8eb..fae511a4f 100644
--- a/ui/src/locales/en.yaml
+++ b/ui/src/locales/en.yaml
@@ -975,6 +975,10 @@ core:
         bio: Bio
         creation_time: Creation time
         identity_authentication: Identity authentication
+        email_verified:
+          tooltip: Verified
+        email_not_verified:
+          tooltip: Not verified
   role:
     title: Roles
     common:
@@ -1079,6 +1083,8 @@ core:
           Your email address has not been verified yet, click the button below
           to verify it
         title: Verify email
+      email_verified:
+        tooltip: Verified
     pat:
       operations:
         delete:
diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
index 907f6bf08..2119ca256 100644
--- a/ui/src/locales/zh-CN.yaml
+++ b/ui/src/locales/zh-CN.yaml
@@ -928,6 +928,10 @@ core:
         bio: 描述
         creation_time: 注册时间
         identity_authentication: 登录方式
+        email_verified:
+          tooltip: 已验证
+        email_not_verified:
+          tooltip: 未验证
   role:
     title: 角色
     common:
@@ -1024,6 +1028,8 @@ core:
       email_not_verified:
         title: 验证电子邮箱
         description: 电子邮箱地址还未验证，点击下方按钮进行验证
+      email_verified:
+        tooltip: 已验证
     pat:
       operations:
         delete:
diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
index a75154822..33f78d657 100644
--- a/ui/src/locales/zh-TW.yaml
+++ b/ui/src/locales/zh-TW.yaml
@@ -908,6 +908,10 @@ core:
         bio: 描述
         creation_time: 註冊時間
         identity_authentication: 登入方式
+        email_verified:
+          tooltip: 已驗證
+        email_not_verified:
+          tooltip: 未驗證
   role:
     title: 角色
     common:
@@ -1004,6 +1008,8 @@ core:
       email_not_verified:
         description: 電子郵件地址尚未驗證，點擊下方按鈕進行驗證
         title: 驗證電子郵件信箱
+      email_verified:
+        tooltip: 已驗證
     pat:
       operations:
         delete:
diff --git a/ui/uc-src/modules/profile/tabs/Detail.vue b/ui/uc-src/modules/profile/tabs/Detail.vue
index 8f4bd2191..416545ae3 100644
--- a/ui/uc-src/modules/profile/tabs/Detail.vue
+++ b/ui/uc-src/modules/profile/tabs/Detail.vue
@@ -17,6 +17,7 @@ import { apiClient } from "@/utils/api-client";
 import axios from "axios";
 import { useI18n } from "vue-i18n";
 import EmailVerifyModal from "../components/EmailVerifyModal.vue";
+import RiVerifiedBadgeLine from "~icons/ri/verified-badge-line";
 
 withDefaults(defineProps<{ user?: DetailedUser }>(), { user: undefined });
 
@@ -103,7 +104,14 @@ const emailVerifyModal = ref(false);
           </VAlert>
 
           <div v-else>
-            <span>{{ user.user.spec.email }}</span>
+            <div class="flex items-center space-x-2">
+              <span>{{ user.user.spec.email }}</span>
+              <RiVerifiedBadgeLine
+                v-if="user.user.spec.emailVerified"
+                v-tooltip="$t('core.uc_profile.detail.email_verified.tooltip')"
+                class="text-xs text-blue-600"
+              />
+            </div>
             <div v-if="!user.user.spec.emailVerified" class="mt-3">
               <VAlert
                 :title="$t('core.uc_profile.detail.email_not_verified.title')"