fix: Unable to log in with Chinese username

Author: shaohuzhang1

ui/src/views/login/index.vue

@@ -80,7 +80,7 @@
         </div>
       </div>
       <div v-if="showQrCodeTab">
-        <QrCodeTab :tabs="orgOptions" :default-tab="defaultQrTab"/>
+        <QrCodeTab :tabs="orgOptions" :default-tab="defaultQrTab" />
       </div>
       <div class="login-gradient-divider lighter mt-24" v-if="modeList.length > 1">
         <span>{{ $t('views.login.moreMethod') }}</span>
@@ -99,7 +99,7 @@
                 'font-size': item === 'OAUTH2' ? '8px' : '10px',
                 color: theme.themeInfo?.theme,
               }"
-            >{{ item }}</span
+              >{{ item }}</span
             >
           </el-button>
           <el-button
@@ -109,7 +109,7 @@
             class="login-button-circle color-secondary"
             @click="changeMode('QR_CODE')"
           >
-            <img src="@/assets/icon_qr_outlined.svg" width="25px"/>
+            <img src="@/assets/icon_qr_outlined.svg" width="25px" />
           </el-button>
           <el-button
             v-if="item === '' && loginMode !== ''"
@@ -126,26 +126,26 @@
   </login-layout>
 </template>
 <script setup lang="ts">
-import {computed, onBeforeMount, onMounted, ref} from 'vue'
-import {useRoute, useRouter} from 'vue-router'
-import type {FormInstance, FormRules} from 'element-plus'
-import type {LoginRequest} from '@/api/type/login'
+import { computed, onBeforeMount, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { LoginRequest } from '@/api/type/login'
 import LoginContainer from '@/layout/login-layout/LoginContainer.vue'
 import LoginLayout from '@/layout/login-layout/LoginLayout.vue'
 import loginApi from '@/api/user/login'
 import authApi from '@/api/system-settings/auth-setting'
-import {getBrowserLang, t} from '@/locales'
+import { getBrowserLang, t } from '@/locales'
 import useStore from '@/stores'
-import {useI18n} from 'vue-i18n'
+import { useI18n } from 'vue-i18n'
 import QrCodeTab from '@/views/login/scanCompinents/QrCodeTab.vue'
-import {MsgConfirm, MsgError} from '@/utils/message.ts'
+import { MsgConfirm, MsgError } from '@/utils/message.ts'
 import * as dd from 'dingtalk-jsapi'
-import {loadScript} from '@/utils/common'
-import forge from 'node-forge';
+import { loadScript } from '@/utils/common'
+import forge from 'node-forge'
 
 const router = useRouter()
-const {login, user, theme} = useStore()
-const {locale} = useI18n({useScope: 'global'})
+const { login, user, theme } = useStore()
+const { locale } = useI18n({ useScope: 'global' })
 const loading = ref<boolean>(false)
 const route = useRoute()
 const identifyCode = ref<string>('')
@@ -194,21 +194,24 @@ const loginHandle = () => {
           .asyncLdapLogin(loginForm.value)
           .then(() => {
             locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
-            router.push({name: 'home'})
+            router.push({ name: 'home' })
           })
           .catch(() => {
             loading.value = false
           })
       } else {
-        const publicKey = forge.pki.publicKeyFromPem(user.rasKey);
-        const encrypted = publicKey.encrypt(JSON.stringify(loginForm.value), 'RSAES-PKCS1-V1_5');
-        const encryptedBase64 = forge.util.encode64(encrypted);
+        const publicKey = forge.pki.publicKeyFromPem(user.rasKey)
+        const encrypted = publicKey.encrypt(
+          forge.util.encodeUtf8(JSON.stringify(loginForm.value)),
+          'RSAES-PKCS1-V1_5',
+        )
+        const encryptedBase64 = forge.util.encode64(encrypted)
         login
-          .asyncLogin({encryptedData: encryptedBase64, username: loginForm.value.username})
+          .asyncLogin({ encryptedData: encryptedBase64, username: loginForm.value.username })
           .then(() => {
             locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
             localStorage.setItem('workspace_id', 'default')
-            router.push({name: 'home'})
+            router.push({ name: 'home' })
           })
           .catch(() => {
             const username = loginForm.value.username
@@ -221,13 +224,16 @@ const loginHandle = () => {
 }
 
 function makeCode(username?: string) {
-  loginApi.getCaptcha(username).then((res: any) => {
-    if (res && res.data && res.data.captcha) {
-      identifyCode.value = res.data.captcha
-    }
-  }).catch((error) => {
-    console.error('Failed to get captcha:', error)
-  })
+  loginApi
+    .getCaptcha(username)
+    .then((res: any) => {
+      if (res && res.data && res.data.captcha) {
+        identifyCode.value = res.data.captcha
+      }
+    })
+    .catch((error) => {
+      console.error('Failed to get captcha:', error)
+    })
 }
 
 function handleUsernameBlur(username: string) {
@@ -240,7 +246,7 @@ onBeforeMount(() => {
     if (user.isPE() || user.isEE()) {
       authApi.getLoginAuthSetting().then((res) => {
         if (Object.keys(res.data).length > 0) {
-          authSetting.value = res.data;
+          authSetting.value = res.data
         } else {
           authSetting.value = {
             max_attempts: 1,
@@ -339,8 +345,7 @@ function redirectAuth(authType: string, needMessage: boolean = true) {
         .then(() => {
           window.location.href = url
         })
-        .catch(() => {
-        })
+        .catch(() => {})
     } else {
       console.log('url', url)
       window.location.href = url
@@ -418,10 +423,10 @@ onMounted(() => {
   const handleDingTalk = () => {
     const code = params.get('corpId')
     if (code) {
-      dd.runtime.permission.requestAuthCode({corpId: code}).then((res) => {
+      dd.runtime.permission.requestAuthCode({ corpId: code }).then((res) => {
         console.log('DingTalk client request success:', res)
         login.dingOauth2Callback(res.code).then(() => {
-          router.push({name: 'home'})
+          router.push({ name: 'home' })
         })
       })
     }
@@ -434,7 +439,7 @@ onMounted(() => {
         appId: appId,
         success: (res: any) => {
           login.larkCallback(res.code).then(() => {
-            router.push({name: 'home'})
+            router.push({ name: 'home' })
           })
         },
         fail: (error: any) => {
@@ -454,11 +459,11 @@ onMounted(() => {
             scopeList: [],
             success: (res: any) => {
               login.larkCallback(res.code).then(() => {
-                router.push({name: 'home'})
+                router.push({ name: 'home' })
               })
             },
             fail: (error: any) => {
-              const {errno} = error
+              const { errno } = error
               if (errno === 103) {
                 callRequestAuthCode()
               }