Add API token fetching and copying functionality in General settings. (…

…#522) * Add API token fetching and copying functionality in General settings. * Refactor locale files: remove unused bot and admin translations, add common and setting translations for API Token.
swuecho · Sep 7, 2024 · 130a9fa · 130a9fa
1 parent a3dcccb
commit 130a9fa
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 42 deletions.
diff --git a/web/src/components/common/Setting/General.vue b/web/src/components/common/Setting/General.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { NButton, NInput, useMessage } from 'naive-ui'
 import type { Theme } from '@/store/modules/app/helper'
 import { SvgIcon } from '@/components/common'
 import { useAppStore, useUserStore } from '@/store'
 import type { UserInfo } from '@/store/modules/user/helper'
 import { t } from '@/locales'
+import request from '@/utils/request/axios'
+
 
 const appStore = useAppStore()
 const userStore = useUserStore()
@@ -38,6 +40,31 @@ const themeOptions: { label: string; key: Theme; icon: string }[] = [
   },
 ]
 
+const apiToken = ref('')
+
+function copyToClipboard() {
+  if (apiToken.value) {
+    navigator.clipboard.writeText(apiToken.value)
+      .then(() => ms.success(t('setting.apiTokenCopied')))
+      .catch(() => ms.error(t('setting.apiTokenCopyFailed')))
+  }
+}
+
+onMounted(async () => {
+  try {
+    const response = await request.get('/token_10years')
+    console.log(response)
+    if (response.status=== 200) {
+      apiToken.value = response.data.accessToken
+    }
+    else {
+      ms.error('Failed to fetch API token')
+    }
+  } catch (error) {
+    ms.error('Error fetching API token')
+  }
+})
+
 function updateUserInfo(options: Partial<UserInfo>) {
   userStore.updateUserInfo(options)
   ms.success(t('common.success'))
@@ -69,7 +96,8 @@ function updateUserInfo(options: Partial<UserInfo>) {
         <span class="flex-shrink-0 w-[100px]">{{ $t('setting.theme') }}</span>
         <div class="flex flex-wrap items-center gap-4">
           <template v-for="item of themeOptions" :key="item.key">
-            <NButton size="small" :type="item.key === theme ? 'primary' : undefined" @click="appStore.setTheme(item.key)">
+            <NButton size="small" :type="item.key === theme ? 'primary' : undefined"
+              @click="appStore.setTheme(item.key)">
               <template #icon>
                 <SvgIcon :icon="item.icon" />
               </template>
@@ -83,6 +111,12 @@ function updateUserInfo(options: Partial<UserInfo>) {
           <a href="/#/snapshot_all" target="_blank" class="text-blue-500"> 点击打开 </a>
         </div>
       </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.apiToken') }}</span>
+        <div class="flex-1">
+          <NInput v-model:value="apiToken" readonly @click="copyToClipboard" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/web/src/locales/en-US-more.json b/web/src/locales/en-US-more.json
@@ -1,21 +1,10 @@
 {
-        "bot": {
-          "list": "Robot List",
-          "all": {
-            "title": "Robot List"
-          }
-        },
-        "chat": {
-          "chatSettings": "Chat Settings",
-          "uploadFiles": "Upload Files",
-          "createBot": "Create Bot"
-        },
-        "admin": {
-          "chat_model": {
-            "enablePerModeRatelimit": "Enable Rate Limit Per Mode",
-            "isEnable": "Is Enabled"
-          }
-        }
-      }
-
-
+  "common": {
+    "cancel": "Cancel"
+  },
+  "setting": {
+    "apiToken": "API Token",
+    "apiTokenCopied": "API Token copied",
+    "apiTokenCopyFailed": "Failed to copy API Token"
+  }
+}
diff --git a/web/src/locales/en-US.json b/web/src/locales/en-US.json
@@ -121,6 +121,7 @@
     },
     "common": {
         "ask_user_register": "Please register, only registered accounts can continue the conversation",
+        "cancel": "Cancel",
         "clear": "Clear",
         "confirm": "Confirm",
         "delete": "Delete",
@@ -176,6 +177,9 @@
     "setting": {
         "admin": "Admin",
         "api": "API",
+        "apiToken": "API Token",
+        "apiTokenCopied": "API Token copied",
+        "apiTokenCopyFailed": "Failed to copy API Token",
         "avatarLink": "Avatar Link",
         "chatHistory": "Chat History",
         "config": "Configuration",

diff --git a/web/src/locales/zh-CN.json b/web/src/locales/zh-CN.json
@@ -165,6 +165,7 @@
     "defaultName": "你",
     "defaultDesc": "签名",
     "snapshotLink": "会话集",
+    "apiToken": "API Token",
     "description": "描述",
     "resetUserInfo": "重置用户信息",
     "chatHistory": "聊天记录",
@@ -174,7 +175,9 @@
     "api": "API",
     "reverseProxy": "反向代理",
     "timeout": "超时",
-    "socks": "Socks"
+    "socks": "Socks",
+    "apiTokenCopied": "API Token 已复制",
+    "apiTokenCopyFailed": "无法复制 API Token"
   },
   "error": {
     "system_message_notice": "第一条是系统消息已经是收到, 请继续输入信息开始会话",

diff --git a/web/src/locales/zh-TW-more.json b/web/src/locales/zh-TW-more.json
@@ -1,20 +1,10 @@
 {
-        "bot": {
-            "list": "機器人列表",
-            "all": {
-                "title": "機器人列表"
-            }
-        },
-        "chat": {
-            "chatSettings": "對話設定",
-            "uploadFiles": "上傳檔案",
-            "createBot": "建立機器人"
-        },
-        "admin": {
-            "chat_model": {
-                "enablePerModeRatelimit": "是否單獨流控",
-                "isEnable": "是否啟用"
-            }
-        }
-    }
-
+  "common": {
+    "cancel": "取消"
+  },
+  "setting": {
+    "apiToken": "API Token",
+    "apiTokenCopied": "API Token 已複製",
+    "apiTokenCopyFailed": "無法複製 API Token"
+  }
+}
diff --git a/web/src/locales/zh-TW.json b/web/src/locales/zh-TW.json
@@ -121,6 +121,7 @@
     },
     "common": {
         "ask_user_register": "請註冊, 只有註冊帳號才能繼續對話",
+        "cancel": "取消",
         "clear": "清空",
         "confirm": "確認",
         "delete": "刪除",
@@ -176,6 +177,9 @@
     "setting": {
         "admin": "管理",
         "api": "API",
+        "apiToken": "API Token",
+        "apiTokenCopied": "API Token 已複製",
+        "apiTokenCopyFailed": "無法複製 API Token",
         "avatarLink": "頭像鏈接",
         "chatHistory": "聊天記錄",
         "config": "配置",