add captcha

src/api/login.js

@@ -1,4 +1,4 @@
-import request from '@/utils/request';
+import request from '@/utils/request'
 
 export function loginOptions () {
   return request({
@@ -22,3 +22,10 @@ export function oidcQuery(params){
     params,
   })
 }
+
+export function captcha () {
+  return request({
+    url: '/captcha',
+    method: 'get',
+  })
+}

src/store/user.js

@@ -41,14 +41,15 @@ export const useUserStore = defineStore({
     },
 
     async login (form) {
-      const res = await login(form).catch(_ => false)
-      if (res) {
+      const res = await login(form).catch(e => e)
+      console.log('login', res)
+      if (!res.code) {
         useAppStore().loadConfig()
         const userData = res.data
         this.saveUserData(userData)
         return userData
       } else {
-        return false
+        return Promise.reject(res)
       }
     },
     async info () {

src/utils/i18n/en.json

@@ -465,5 +465,8 @@
   },
   "Second": {
     "One": "Second"
+  },
+  "Captcha": {
+    "One": "Captcha"
   }
 }

src/utils/i18n/es.json

@@ -468,5 +468,8 @@
   },
   "Second": {
     "One": "Segundo"
+  },
+  "Captcha": {
+    "One": "Captcha"
   }
 }

src/utils/i18n/ko.json

@@ -454,5 +454,8 @@
   },
   "Second": {
     "One": "초"
+  },
+  "Captcha": {
+    "One": "Captcha"
   }
 }

src/utils/i18n/ru.json

@@ -468,6 +468,9 @@
   },
   "Second": {
     "One": "Секунда"
+  },
+  "Captcha": {
+    "One": "Captcha"
   }
 }
 

src/utils/i18n/zh_CN.json

@@ -484,5 +484,8 @@
   },
   "Second": {
     "One": "秒"
+  },
+  "Captcha": {
+    "One": "验证码"
   }
 }

src/utils/request.js

@@ -73,7 +73,7 @@ service.interceptors.response.use(
         removeToken()
         window.location.reload()
       }
-      return Promise.reject(res.message || 'error')
+      return Promise.reject(res)
     } else {
       return res
     }

src/views/login/login.vue

@@ -12,7 +12,13 @@
           <el-input v-model="form.password" type="password" @keyup.enter.native="login" show-password
                     class="login-input"></el-input>
         </el-form-item>
-
+        <el-form-item :label="T('Captcha')" v-if="captchaCode">
+          <el-input v-model="form.captcha" @keyup.enter.native="login"  class="login-input captcha-input">
+            <template #append>
+              <img :src="captchaCode.b64" @click="loadCaptcha" class="captcha" alt="captcha"/>
+            </template>
+          </el-input>
+        </el-form-item>
         <el-form-item>
           <el-button @click="login" type="primary" class="login-button">{{ T('Login') }}</el-button>
           <el-button v-if="allowRegister" @click="register" class="login-button">{{ T('Register') }}</el-button>
@@ -36,19 +42,19 @@
 </template>
 
 <script setup>
-import { reactive, onMounted, ref } from 'vue';
+  import { reactive, onMounted, ref } from 'vue'
   import { useUserStore } from '@/store/user'
-import { ElMessage } from 'element-plus';
-import { T } from '@/utils/i18n';
-import { useRoute, useRouter } from 'vue-router';
-import { loginOptions } from '@/api/login';
+  import { ElMessage } from 'element-plus'
+  import { T } from '@/utils/i18n'
+  import { useRoute, useRouter } from 'vue-router'
+  import { loginOptions, captcha } from '@/api/login'
   import { getCode, removeCode } from '@/utils/auth'
 
   const oauthInfo = ref({})
   const userStore = useUserStore()
   const route = useRoute()
   const router = useRouter()
-const options = reactive([]); // 存储 OIDC 登录选项
+  const options = reactive([]) // 存储 OIDC 登录选项
 
   let platform = window.navigator.platform
   if (navigator.platform.indexOf('Mac') === 0) {
@@ -60,37 +66,49 @@ if (navigator.platform.indexOf('Mac') === 0) {
   } else if (navigator.platform.indexOf('Linux') === 0) {
     platform = 'linux'
   }
-const userAgent = navigator.userAgent;
-let browser = 'Unknown Browser';
-if (/chrome|crios/i.test(userAgent)) browser = 'Chrome';
-else if (/firefox|fxios/i.test(userAgent)) browser = 'Firefox';
-else if (/safari/i.test(userAgent) && !/chrome/i.test(userAgent)) browser = 'Safari';
-else if (/edg/i.test(userAgent)) browser = 'Edge';
+  const userAgent = navigator.userAgent
+  let browser = 'Unknown Browser'
+  if (/chrome|crios/i.test(userAgent)) browser = 'Chrome'
+  else if (/firefox|fxios/i.test(userAgent)) browser = 'Firefox'
+  else if (/safari/i.test(userAgent) && !/chrome/i.test(userAgent)) browser = 'Safari'
+  else if (/edg/i.test(userAgent)) browser = 'Edge'
 
   const form = reactive({
     username: '',
     password: '',
     platform: platform,
+    captcha: '',
   })
 
+  const captchaCode = ref('')
   const redirect = route.query?.redirect
   const login = async () => {
-  const res = await userStore.login(form)
-  if (res) {
+    const res = await userStore.login(form).catch(e => e)
+    if (!res.code) {
       ElMessage.success(T('LoginSuccess'))
       router.push({ path: redirect || '/', replace: true })
     }
+    if (res.code === 110 && captchaCode.value === '') {
+      // need captcha
+      loadCaptcha()
+    }
+  }
+
+  const loadCaptcha = async () => {
+    const captchaRes = await captcha().catch(_ => false)
+    console.log(captchaRes)
+    captchaCode.value = captchaRes.data.captcha
   }
 
   const handleOIDCLogin = (provider) => {
     userStore.oidc(provider, platform, browser)
-};
+  }
 
-import googleImage from '@/assets/google.png';
-import githubImage from '@/assets/github.png';
-import oidcImage from '@/assets/oidc.png';
-import webauthImage from '@/assets/webauth.png';
-import defaultImage from '@/assets/oidc.png';
+  import googleImage from '@/assets/google.png'
+  import githubImage from '@/assets/github.png'
+  import oidcImage from '@/assets/oidc.png'
+  import webauthImage from '@/assets/webauth.png'
+  import defaultImage from '@/assets/oidc.png'
 
   const providerImageMap = {
     google: googleImage,
@@ -98,26 +116,29 @@ const providerImageMap = {
     oidc: oidcImage,
     // WebAuth: webauthImage,
     default: defaultImage,
-};
+  }
 
   const getProviderImage = (provider) => {
-  return providerImageMap[provider.toLowerCase()] || providerImageMap.default;
-};
+    return providerImageMap[provider.toLowerCase()] || providerImageMap.default
+  }
 
   const allowRegister = ref(false)
   const loadLoginOptions = async () => {
     try {
-    const res = await loginOptions().catch(_ => false);
-    if(!res || !res.data) return console.error('No valid response received');
-    res.data.ops.map(option => (options.push({ name: option }))); // 创建新的对象数组
+      const res = await loginOptions().catch(_ => false)
+      if (!res || !res.data) return console.error('No valid response received')
+      res.data.ops.map(option => (options.push({ name: option }))) // 创建新的对象数组
       allowRegister.value = res.data.register
-  } catch (error) {
-    console.error('Error loading login options:', error.message);
+      if (res.data.need_captcha) {
+        loadCaptcha()
+      }
+    } catch (error) {
+      console.error('Error loading login options:', error.message)
+    }
   }
-};
 
   onMounted(async () => {
-  const code = getCode();
+    const code = getCode()
     if (code) {
       // 如果code存在，进行query获取user info
       const res = await userStore.query(code)
@@ -129,9 +150,9 @@ onMounted(async () => {
       }
     } else {
       // 如果code不存在, 现实登陆页面
-    loadLoginOptions(); // 组件挂载后调用登录选项加载函数
+      loadLoginOptions() // 组件挂载后调用登录选项加载函数
     }
-});
+  })
 
   const register = () => {
     router.push('/register')
@@ -170,6 +191,17 @@ h1 {
 
 .login-input {
   width: 100%;
+  .captcha{
+    cursor: pointer;
+    width: 150px;
+  }
+}
+.captcha-input{
+  :deep(.el-input-group__append) {
+    border-radius: 5px;
+    padding: 0;
+    overflow: hidden;
+  }
 }
 
 .login-button {