feat: enhance login logic with dynamic captcha display and add API for fetching authentication settings

Author: wxg0103

ui/src/api/system-settings/auth-setting.ts

@@ -50,11 +50,19 @@ const getLoginAuthSetting: (loading?: Ref<boolean>) => Promise<Result<any>> = (l
   return get(`login/auth/setting`, undefined, loading)
 }
 
+/**
+ * 获取认证设置
+ */
+const getLoginViewAuthSetting: (auth_type: string, loading?: Ref<boolean>) => Promise<Result<any>> = (auth_type, loading) => {
+  return get(`login/${prefix}/${auth_type}/detail`, undefined, loading)
+}
+
 export default {
   getAuthSetting,
   postAuthSetting,
   putAuthSetting,
   putLoginSetting,
   getLoginSetting,
-  getLoginAuthSetting
+  getLoginAuthSetting,
+  getLoginViewAuthSetting
 }

ui/src/views/chat/user-login/index.vue

@@ -66,6 +66,7 @@
                   size="large"
                   class="input-item"
                   v-model="loginForm.username"
+                  @blur="handleUsernameBlur(loginForm.username)"
                   :placeholder="$t('views.login.loginForm.username.placeholder')"
                 >
                 </el-input>
@@ -84,7 +85,7 @@
                 </el-input>
               </el-form-item>
             </div>
-            <div class="mb-24" v-if="loginMode !== 'LDAP'">
+            <div class="mb-24" v-if="loginMode !== 'LDAP'&& showCaptcha">
               <el-form-item prop="captcha">
                 <div class="flex-between w-full">
                   <el-input
@@ -100,7 +101,7 @@
                     alt=""
                     height="38"
                     class="ml-8 cursor border border-r-6"
-                    @click="makeCode"
+                    @click="makeCode(loginForm.username)"
                   />
                 </div>
               </el-form-item>
@@ -212,6 +213,7 @@ const loginForm = ref<LoginRequest>({
   captcha: '',
 })
 
+const max_attempts = ref<number>(1)  // 声明为 ref
 const rules = ref<FormRules<LoginRequest>>({
   username: [
     {
@@ -253,20 +255,30 @@ const loginHandle = () => {
           params: {accessToken: chatUser.accessToken},
           query: route.query,
         })
+        localStorage.removeItem('chat_' + loginForm.value.username)
+      }).catch(() => {
+        const username = loginForm.value.username
+        localStorage.setItem('chat_' + username, String(Number(localStorage.getItem('chat_' + username) || '0') + 1))
+        loading.value = false
+        loginForm.value.username = ''
+        loginForm.value.password = ''
+        const timestampKey = `${username}_chat_first_fail_timestamp`
+        if (!localStorage.getItem(timestampKey)) {
+          localStorage.setItem(timestampKey, Date.now().toString())
+        }
       })
     }
   })
 }
 
-function makeCode(userrname?: string) {
-  loginApi.getCaptcha(userrname).then((res: any) => {
+function makeCode(username?: string) {
+  loginApi.getCaptcha(username).then((res: any) => {
     identifyCode.value = res.data.captcha
   })
 }
 
 onBeforeMount(() => {
   locale.value = chatUser.getLanguage()
-  makeCode()
 })
 
 const modeList = ref<string[]>([])
@@ -365,7 +377,59 @@ function changeMode(val: string) {
   loginFormRef.value?.clearValidate()
 }
 
+const showCaptcha = computed<boolean>(() => {
+  // -1 表示一直不显示
+  if (max_attempts.value === -1) {
+    return false
+  }
+
+  // 0 表示一直显示
+  if (max_attempts.value === 0) {
+    return true
+  }
+
+  // 大于 0，根据登录失败次数决定
+  const username = loginForm.value.username?.trim()
+  if (!username) {
+    return false // 没有输入用户名时不显示
+  }
+
+  const timestampKey = `${username}_chat_first_fail_timestamp`
+  const firstFailTimestamp = localStorage.getItem(timestampKey)
+
+  if (firstFailTimestamp) {
+    const expirationTime = 60 * 60 * 1000 // 10分钟毫秒数
+    if (Date.now() - parseInt(firstFailTimestamp) > expirationTime) {
+      // 过期则清除记录
+      localStorage.removeItem('chat_' + username)
+      localStorage.removeItem(timestampKey)
+      return false
+    }
+  } else {
+    // 如果没有时间戳但有失败次数，可能是旧数据，清除失败次数
+    const failCount = Number(localStorage.getItem('chat_' + username) || '0')
+    if (failCount > 0) {
+      localStorage.removeItem('chat_' + username)
+      return false
+    }
+  }
+
+  const failCount = Number(localStorage.getItem('chat_' + username) || '0')
+  console.log('failCount', failCount)
+
+  return failCount >= max_attempts.value
+})
+
+function handleUsernameBlur(username: string) {
+  if (showCaptcha.value) {
+    makeCode(username)
+  }
+}
+
 onBeforeMount(() => {
+  if (chatUser.chat_profile?.max_attempts) {
+    max_attempts.value = chatUser.chat_profile.max_attempts
+  }
   if (chatUser.chat_profile?.login_value) {
     modeList.value = chatUser.chat_profile.login_value
     if (modeList.value.includes('LOCAL')) {