feat: add login settings management and captcha display logic

Author: wxg0103

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

@@ -30,9 +30,31 @@ const putAuthSetting: (auth_type: string, data: any, loading?: Ref<boolean>) =>
 ) => {
   return put(`${prefix}/${auth_type}/info`, data, undefined, loading)
 }
+/**
+ * 登录设置
+ */
+const putLoginSetting: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return put(`${prefix}/setting`, data, undefined, loading)
+}
+/**
+ * 获取登录设置
+ */
+const getLoginSetting: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get(`${prefix}/setting`, undefined, loading)
+}
+
+const getLoginAuthSetting: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get(`login/auth/setting`, undefined, loading)
+}
 
 export default {
   getAuthSetting,
   postAuthSetting,
-  putAuthSetting
+  putAuthSetting,
+  putLoginSetting,
+  getLoginSetting,
+  getLoginAuthSetting
 }

ui/src/api/user/login.ts

@@ -38,8 +38,8 @@ const logout: (loading?: Ref<boolean>) => Promise<Result<boolean>> = (loading) =
  * 获取验证码
  * @param loading 接口加载器
  */
-const getCaptcha: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
-  return get('/user/captcha', undefined, loading)
+const getCaptcha: (username?: string, loading?: Ref<boolean>) => Promise<Result<any>> = (username, loading) => {
+  return get('/user/captcha', {username}, loading)
 }
 
 /**

ui/src/locales/lang/en-US/views/system.ts

@@ -130,4 +130,9 @@ export default {
     type: 'Type',
     management: 'management',
   },
+    default_login: 'Default Login Method',
+  display_code: 'Display verification code when login fails',
+  display_codeTip: 'When the value is -1, the verification code is not displayed',
+  time: 'Times',
+  setting: 'Login Setting',
 }

ui/src/locales/lang/zh-CN/views/system.ts

@@ -131,4 +131,9 @@ export default {
     type: '类型',
     management: '管理',
   },
+  default_login: '默认登录方式',
+  display_code: '登录失败显示验证码',
+  display_codeTip: '值为-1时，不显示验证码',
+  time: '次',
+  setting: '登录设置',
 }

ui/src/locales/lang/zh-Hant/views/system.ts

@@ -130,4 +130,9 @@ export default {
     type: '類型',
     management: '管理',
   },
+    default_login: '預設登入方式',
+  display_code: '登入失敗顯示驗證碼',
+  display_codeTip: '值為-1時，不顯示驗證碼',
+  time: '次',
+  setting: '登录設置',
 }

ui/src/views/application-overview/xpack-component/XPackLimitDrawer.vue

@@ -23,8 +23,8 @@
           step-strictly
         />
         <span class="ml-4">{{
-          $t('views.applicationOverview.appInfo.LimitDialog.timesDays')
-        }}</span>
+            $t('views.applicationOverview.appInfo.LimitDialog.timesDays')
+          }}</span>
       </el-form-item>
       <!--     身份验证 -->
       <el-form-item
@@ -74,7 +74,7 @@
                     style="margin: 0 4px 0 0 !important"
                   >
                     <el-icon>
-                      <RefreshRight />
+                      <RefreshRight/>
                     </el-icon>
                   </el-button>
                 </el-tooltip>
@@ -111,10 +111,32 @@
           >
             <el-checkbox-group v-model="form.authentication_value.login_value">
               <template v-for="t in auth_list" :key="t.value">
-                <el-checkbox :label="t.label" :value="t.value" />
+                <el-checkbox :label="t.label" :value="t.value"/>
               </template>
             </el-checkbox-group>
           </el-form-item>
+          <el-form-item
+            :label="$t('views.system.display_code')"
+            :rules="[
+              {
+                required: true,
+                message: $t('views.applicationOverview.appInfo.LimitDialog.displayCodeRequired'),
+                trigger: 'change',
+              },
+            ]"
+            prop="authentication_value.max_attempts"
+          >
+            <el-input-number
+              v-model="form.authentication_value.max_attempts"
+              :min="-1"
+              :max="10"
+              :step="1"
+              controls-position="right"
+            />
+            <span style="margin-left: 8px; color: #909399; font-size: 12px;">
+      {{ $t('views.system.display_codeTip') }}
+    </span>
+          </el-form-item>
         </el-card>
       </el-radio-group>
 
@@ -144,18 +166,18 @@
   </el-drawer>
 </template>
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import type { FormInstance, FormRules } from 'element-plus'
-import { MsgSuccess } from '@/utils/message'
-import { t } from '@/locales'
-import { copyClick } from '@/utils/clipboard'
-import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
+import {ref, watch, computed} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
+import type {FormInstance, FormRules} from 'element-plus'
+import {MsgSuccess} from '@/utils/message'
+import {t} from '@/locales'
+import {copyClick} from '@/utils/clipboard'
+import {loadSharedApi} from '@/utils/dynamics-api/shared-api'
 
 const router = useRouter()
 const route = useRoute()
 const {
-  params: { id },
+  params: {id},
 } = route
 
 const apiType = computed(() => {
@@ -174,6 +196,7 @@ const form = ref<any>({
   white_list: '',
   authentication_value: {
     type: 'password',
+    max_attempts: 1,
   },
   authentication: false,
 })
@@ -197,6 +220,9 @@ const open = (data: any) => {
   form.value.authentication_value = data.authentication_value || {
     type: 'password',
   }
+  if (!form.value.authentication_value.max_attempts) {
+    form.value.authentication_value.max_attempts = 1
+  }
   if (
     form.value.authentication_value.type === 'password' &&
     !form.value.authentication_value.password_value
@@ -205,7 +231,7 @@ const open = (data: any) => {
   }
   form.value.authentication = data.authentication
   dialogVisible.value = true
-  loadSharedApi({ type: 'application', systemType: apiType.value })
+  loadSharedApi({type: 'application', systemType: apiType.value})
     .getChatUserAuthType()
     .then((ok: any) => {
       auth_list.value = ok.data
@@ -223,7 +249,7 @@ const submit = async (formEl: FormInstance | undefined) => {
         authentication: form.value.authentication,
         authentication_value: form.value.authentication_value,
       }
-      loadSharedApi({ type: 'application', systemType: apiType.value })
+      loadSharedApi({type: 'application', systemType: apiType.value})
         .putAccessToken(id as string, obj, loading)
         .then(() => {
           emit('refresh')
@@ -256,7 +282,7 @@ function firstGeneration() {
   }
 }
 
-defineExpose({ open })
+defineExpose({open})
 </script>
 <style lang="scss" scoped>
 .authentication-append-input {

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

@@ -229,7 +229,7 @@ const rules = ref<FormRules<LoginRequest>>({
   ],
   captcha: [
     {
-      required: true,
+      required: false,
       message: t('views.login.loginForm.captcha.requiredMessage'),
       trigger: 'blur',
     },
@@ -258,8 +258,8 @@ const loginHandle = () => {
   })
 }
 
-function makeCode() {
-  loginApi.getCaptcha().then((res: any) => {
+function makeCode(userrname?: string) {
+  loginApi.getCaptcha(userrname).then((res: any) => {
     identifyCode.value = res.data.captcha
   })
 }