fix: ui display problem(Close #357, #358)

Kerwin · Kerwin · commit 4e376d231067 · 2023-11-05T11:16:05.000+08:00
diff --git a/README.en.md b/README.en.md
@@ -9,7 +9,7 @@
 ## Introduction
 > **This project is forked from [Chanzhaoyu/chatgpt-web](https://github.com/Chanzhaoyu/chatgpt-web), some unique features have been added:**
 
-[✓] Register & Login & Reset Password
+[✓] Register & Login & Reset Password & 2FA
 
 [✓] Sync chat history 
 
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 ## 说明
 > **此项目 Fork 自 [Chanzhaoyu/chatgpt-web](https://github.com/Chanzhaoyu/chatgpt-web), 新增了部分特色功能:**
 
-[✓] 注册&登录&重置密码
+[✓] 注册 & 登录 & 重置密码 & 2FA
 
 [✓] 同步历史会话
 
diff --git a/src/components/common/Setting/TwoFA.vue b/src/components/common/Setting/TwoFA.vue
@@ -65,10 +65,10 @@ onMounted(() => {
       <div class="space-y-6">
         <div class="flex items-center space-x-4">
           <div class="flex-1">
-            两步验证是一个额外的验证步骤，可让您的登录体验更加安全。开启两步验证后，每次您要登录到您的帐户时，系统均提示您输入动态验证码。
-            <br> 当前状态 ：
-            <span v-if="!config || !config.enaled" style="color: red;">关闭</span>
-            <span v-if="config && config.enaled" style="color: rgb(22, 183, 65);">已开启</span>
+            {{ $t('setting.info2FA') }}
+            <br> {{ $t('setting.status2FA') }} ：
+            <span v-if="!config || !config.enaled" style="color: red;">{{ $t('setting.status2FAClosed') }}</span>
+            <span v-if="config && config.enaled" style="color: rgb(22, 183, 65);">{{ $t('setting.status2FAOpened') }}</span>
           </div>
         </div>
         <div v-if="config && config.enaled" class="flex items-center space-x-4">
@@ -94,21 +94,21 @@ onMounted(() => {
           <div class="flex-1">
             <NSteps vertical>
               <NStep
-                title="安装身份验证器App"
-                description="安装身份验证器App，例如Google Authenticator、Microsoft Authenticator、Authy等"
+                :title="$t('setting.info2FAStep1')"
+                :description="$t('setting.info2FAStep1Desc')"
               />
               <NStep
-                title="配置生成验证码"
+                :title="$t('setting.info2FAStep2')"
               >
-                打开身份验证器 App，点击「扫描二维码」扫描二维码。
+                {{ $t('setting.info2FAStep2Desc') }}
                 <br><br>
                 <QrcodeVue :value="config?.otpauthUrl" :size="150" level="H" />
-                <br>注意： 身份验证器不能扫描验证码？ 手动添加以下账户：<br> 账户 ：{{ config?.userName }}<br> 密钥 ：{{ config?.secretKey }}
+                <br>{{ $t('setting.info2FAStep2Tip') }}：<br> {{ $t('setting.info2FAStep2TipAccount') }} ：{{ config?.userName }}<br> {{ $t('setting.info2FAStep2TipSecret') }} ：{{ config?.secretKey }}
               </NStep>
               <NStep
-                title="验证并开启"
+                :title="$t('setting.info2FAStep3')"
               >
-                请输入身份验证器 App 生成的 6 位动态验证码，开启两步验证。
+                {{ $t('setting.info2FAStep3Desc') }}
                 <br>
                 <div class="flex items-center space-x-4">
                   <div class="w-[200px]">
@@ -125,7 +125,9 @@ onMounted(() => {
                     </NButton>
                   </div>
                 </div>
-                <br>注意：如何关闭两步验证？<br>1. 登录后，在 两步验证 页面使用两步验证码关闭。<br>2. 联系管理员重置密码来关闭两步验证。
+                <br>{{ $t('setting.info2FAStep3Tip1') }}
+                <br>{{ $t('setting.info2FAStep3Tip2') }}
+                <br>{{ $t('setting.info2FAStep3Tip3') }}
               </NStep>
             </NSteps>
           </div>
diff --git a/src/components/common/Setting/User.vue b/src/components/common/Setting/User.vue
@@ -27,12 +27,12 @@ const columns = [
   {
     title: 'Register Time',
     key: 'createTime',
-    width: 220,
+    width: 200,
   },
   {
     title: 'Verify Time',
     key: 'verifyTime',
-    width: 220,
+    width: 200,
   },
   {
     title: 'Roles',
@@ -60,7 +60,7 @@ const columns = [
   {
     title: 'Status',
     key: 'status',
-    width: 200,
+    width: 80,
     render(row: any) {
       return Status[row.status]
     },
@@ -188,8 +188,8 @@ async function handleUpdateUserStatus(userId: string, status: Status) {
 
 async function handleDisable2FA(userId: string) {
   dialog.warning({
-    title: t('chat.deleteUser'),
-    content: t('chat.deleteUserConfirm'),
+    title: t('chat.disable2FA'),
+    content: t('chat.disable2FAConfirm'),
     positiveText: t('common.yes'),
     negativeText: t('common.no'),
     onPositiveClick: async () => {
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
@@ -71,6 +71,8 @@ export default {
     deleteKey: 'Delete Key',
     editKeyButton: 'Edit Key',
     deleteKeyConfirm: 'Are you sure to delete this key?',
+    disable2FA: 'Disable 2FA',
+    disable2FAConfirm: 'Are you sure to disable 2FA for this user?',
   },
   setting: {
     setting: 'Setting',
@@ -149,6 +151,22 @@ export default {
     twoFAConfig: '2FA',
     disable2FA: 'Disable 2FA',
     enable2FA: 'Enable 2FA',
+    info2FA: 'Two-step verification is an additional authentication step that enhances the security of your login experience. After enabling two-step verification, every time you log in to your account, the system will prompt you to enter a dynamic verification code.',
+    status2FA: 'Current status',
+    status2FAClosed: 'Closed',
+    status2FAOpened: 'Opened',
+    info2FAStep1: 'Install the Authenticator App',
+    info2FAStep1Desc: 'Install the authentication app, for example: Google Authenticator、Microsoft Authenticator、Authy',
+    info2FAStep2: 'Generate verification code for configuration.',
+    info2FAStep2Desc: 'Open the Authenticator App and click "Scan QR Code" to scan the QR code.',
+    info2FAStep2Tip: 'Note: The authenticator cannot scan the verification code? Please manually add the following account.',
+    info2FAStep2TipAccount: 'Account',
+    info2FAStep2TipSecret: 'Secret',
+    info2FAStep3: 'Verify and enable',
+    info2FAStep3Desc: 'Please enter the 6-digit dynamic verification code generated by the authentication app to enable two-step verification.',
+    info2FAStep3Tip1: 'Note: How to turn off two-step verification?',
+    info2FAStep3Tip2: '1. After logging in, use the two-step verification on the Two-Step Verification page to disable it.',
+    info2FAStep3Tip3: '2. Contact the administrator to disable two-step verification.',
   },
   store: {
     siderButton: 'Prompt Store',
diff --git a/src/locales/ko-KR.ts b/src/locales/ko-KR.ts
@@ -71,6 +71,8 @@ export default {
     deleteKey: 'Delete Key',
     editKeyButton: 'Edit Key',
     deleteKeyConfirm: 'Are you sure to delete this key?',
+    disable2FA: 'Disable 2FA',
+    disable2FAConfirm: 'Are you sure to disable 2FA for this user?',
   },
   setting: {
     setting: '설정',
@@ -147,6 +149,22 @@ export default {
     twoFAConfig: '2FA',
     disable2FA: 'Disable 2FA',
     enable2FA: 'Enable 2FA',
+    info2FA: 'Two-step verification is an additional authentication step that enhances the security of your login experience. After enabling two-step verification, every time you log in to your account, the system will prompt you to enter a dynamic verification code.',
+    status2FA: 'Current status',
+    status2FAClosed: 'Closed',
+    status2FAOpened: 'Opened',
+    info2FAStep1: 'Install the Authenticator App',
+    info2FAStep1Desc: 'Install the authentication app, for example: Google Authenticator、Microsoft Authenticator、Authy',
+    info2FAStep2: 'Generate verification code for configuration.',
+    info2FAStep2Desc: 'Open the Authenticator App and click "Scan QR Code" to scan the QR code.',
+    info2FAStep2Tip: 'Note: The authenticator cannot scan the verification code? Please manually add the following account.',
+    info2FAStep2TipAccount: 'Account',
+    info2FAStep2TipSecret: 'Secret',
+    info2FAStep3: 'Verify and enable',
+    info2FAStep3Desc: 'Please enter the 6-digit dynamic verification code generated by the authentication app to enable two-step verification.',
+    info2FAStep3Tip1: 'Note: How to turn off two-step verification?',
+    info2FAStep3Tip2: '1. After logging in, use the two-step verification on the Two-Step Verification page to disable it.',
+    info2FAStep3Tip3: '2. Contact the administrator to disable two-step verification.',
   },
   store: {
     siderButton: '프롬프트 스토어',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
@@ -71,6 +71,8 @@ export default {
     deleteKey: '删除 Key',
     editKeyButton: '编辑 Key',
     deleteKeyConfirm: '你确定要删除这个 key 吗?',
+    disable2FA: '禁用 2FA',
+    disable2FAConfirm: '您确定要为此用户禁用两步验证吗？?',
   },
   setting: {
     setting: '设置',
@@ -149,6 +151,22 @@ export default {
     twoFAConfig: '两步验证',
     disable2FA: '禁用 2FA',
     enable2FA: '开启 2FA',
+    info2FA: '两步验证是一个额外的验证步骤，可让您的登录体验更加安全。开启两步验证后，每次您要登录到您的帐户时，系统均提示您输入动态验证码。',
+    status2FA: '当前状态',
+    status2FAClosed: '关闭',
+    status2FAOpened: '已开启',
+    info2FAStep1: '安装身份验证器App',
+    info2FAStep1Desc: '安装身份验证器App，例如Google Authenticator、Microsoft Authenticator、Authy等',
+    info2FAStep2: '配置生成验证码',
+    info2FAStep2Desc: '打开身份验证器 App，点击「扫描二维码」扫描二维码。',
+    info2FAStep2Tip: '注意： 身份验证器不能扫描验证码？ 手动添加以下账户',
+    info2FAStep2TipAccount: '账户',
+    info2FAStep2TipSecret: '密钥',
+    info2FAStep3: '验证并开启',
+    info2FAStep3Desc: '请输入身份验证器 App 生成的 6 位动态验证码，开启两步验证。',
+    info2FAStep3Tip1: '注意：如何关闭两步验证？',
+    info2FAStep3Tip2: '1. 登录后，在 两步验证 页面使用两步验证码关闭。',
+    info2FAStep3Tip3: '2. 联系管理员来关闭两步验证。',
   },
   store: {
     siderButton: '提示词商店',
diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts
@@ -71,6 +71,8 @@ export default {
     deleteKey: '刪除 Key',
     editKeyButton: '編輯 Key',
     deleteKeyConfirm: '你確定要刪除這個 key 嗎?',
+    disable2FA: '禁用 2FA',
+    disable2FAConfirm: '您确定要为此用户禁用两步验证吗？?',
   },
   setting: {
     setting: '設定',
@@ -149,6 +151,22 @@ export default {
     twoFAConfig: '两步验证',
     disable2FA: '禁用 2FA',
     enable2FA: '开启 2FA',
+    info2FA: '两步验证是一个额外的验证步骤，可让您的登录体验更加安全。开启两步验证后，每次您要登录到您的帐户时，系统均提示您输入动态验证码。',
+    status2FA: '当前状态',
+    status2FAClosed: '关闭',
+    status2FAOpened: '已开启',
+    info2FAStep1: '安装身份验证器App',
+    info2FAStep1Desc: '安装身份验证器App，例如Google Authenticator、Microsoft Authenticator、Authy等',
+    info2FAStep2: '配置生成验证码',
+    info2FAStep2Desc: '打开身份验证器 App，点击「扫描二维码」扫描二维码。',
+    info2FAStep2Tip: '注意： 身份验证器不能扫描验证码？ 手动添加以下账户',
+    info2FAStep2TipAccount: '账户',
+    info2FAStep2TipSecret: '密钥',
+    info2FAStep3: '验证并开启',
+    info2FAStep3Desc: '请输入身份验证器 App 生成的 6 位动态验证码，开启两步验证。',
+    info2FAStep3Tip1: '注意：如何关闭两步验证？',
+    info2FAStep3Tip2: '1. 登录后，在 两步验证 页面使用两步验证码关闭。',
+    info2FAStep3Tip3: '2. 联系管理员来关闭两步验证。',
   },
   store: {
     siderButton: '提示詞商店',
