From f20003e6193da046e3d4b6288c5b461f866d34f9 Mon Sep 17 00:00:00 2001
From: lejianwen <84855512@qq.com>
Date: Wed, 18 Dec 2024 12:42:55 +0800
Subject: [PATCH] add captcha

---
 src/api/login.js          |  15 ++-
 src/store/user.js         |   7 +-
 src/utils/i18n/en.json    |   3 +
 src/utils/i18n/es.json    |   3 +
 src/utils/i18n/ko.json    |   3 +
 src/utils/i18n/ru.json    |   3 +
 src/utils/i18n/zh_CN.json |   3 +
 src/utils/request.js      |   2 +-
 src/views/login/login.vue | 220 ++++++++++++++++++++++----------------
 9 files changed, 157 insertions(+), 102 deletions(-)

diff --git a/src/api/login.js b/src/api/login.js
index 8dab90c..cb8114d 100644
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -1,6 +1,6 @@
-import request from '@/utils/request';
+import request from '@/utils/request'
 
-export function loginOptions() {
+export function loginOptions () {
   return request({
     url: '/login-options',
     method: 'get',
@@ -15,10 +15,17 @@ export function oidcAuth (data) {
   })
 }
 
-export function oidcQuery(params){
+export function oidcQuery (params) {
   return request({
     url: '/oidc/auth-query',
     method: 'get',
     params,
   })
-}
\ No newline at end of file
+}
+
+export function captcha () {
+  return request({
+    url: '/captcha',
+    method: 'get',
+  })
+}
diff --git a/src/store/user.js b/src/store/user.js
index 28f5a7e..5eaeba9 100644
--- a/src/store/user.js
+++ b/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 () {
diff --git a/src/utils/i18n/en.json b/src/utils/i18n/en.json
index 91be188..b0d59b5 100644
--- a/src/utils/i18n/en.json
+++ b/src/utils/i18n/en.json
@@ -465,5 +465,8 @@
   },
   "Second": {
     "One": "Second"
+  },
+  "Captcha": {
+    "One": "Captcha"
   }
 }
diff --git a/src/utils/i18n/es.json b/src/utils/i18n/es.json
index 893794d..ded0758 100644
--- a/src/utils/i18n/es.json
+++ b/src/utils/i18n/es.json
@@ -468,5 +468,8 @@
   },
   "Second": {
     "One": "Segundo"
+  },
+  "Captcha": {
+    "One": "Captcha"
   }
 }
diff --git a/src/utils/i18n/ko.json b/src/utils/i18n/ko.json
index 34f4c5f..6cbf00b 100644
--- a/src/utils/i18n/ko.json
+++ b/src/utils/i18n/ko.json
@@ -454,5 +454,8 @@
   },
   "Second": {
     "One": "초"
+  },
+  "Captcha": {
+    "One": "Captcha"
   }
 }
diff --git a/src/utils/i18n/ru.json b/src/utils/i18n/ru.json
index 1804be2..5607e21 100644
--- a/src/utils/i18n/ru.json
+++ b/src/utils/i18n/ru.json
@@ -468,6 +468,9 @@
   },
   "Second": {
     "One": "Секунда"
+  },
+  "Captcha": {
+    "One": "Captcha"
   }
 }
 
diff --git a/src/utils/i18n/zh_CN.json b/src/utils/i18n/zh_CN.json
index b087842..abb4c20 100644
--- a/src/utils/i18n/zh_CN.json
+++ b/src/utils/i18n/zh_CN.json
@@ -484,5 +484,8 @@
   },
   "Second": {
     "One": "秒"
+  },
+  "Captcha": {
+    "One": "验证码"
   }
 }
diff --git a/src/utils/request.js b/src/utils/request.js
index 3b4fb9a..01aa639 100644
--- a/src/utils/request.js
+++ b/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
     }
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index 138cb7c..354c315 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="login-container">
     <div class="login-card">
-      <img src="@/assets/logo.png" alt="logo" class="login-logo" />
+      <img src="@/assets/logo.png" alt="logo" class="login-logo"/>
 
       <el-form label-position="top" class="login-form">
         <el-form-item :label="T('Username')">
@@ -10,9 +10,15 @@
 
         <el-form-item :label="T('Password')">
           <el-input v-model="form.password" type="password" @keyup.enter.native="login" show-password
-            class="login-input"></el-input>
+                    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>
@@ -26,7 +32,7 @@
       <div class="oidc-options">
         <div v-for="(option, index) in options" :key="index" class="oidc-option">
           <el-button @click="handleOIDCLogin(option.name)" class="oidc-btn">
-            <img :src="getProviderImage(option.name)" alt="provider" class="oidc-icon" />
+            <img :src="getProviderImage(option.name)" alt="provider" class="oidc-icon"/>
             <span>{{ T(option.name) }}</span>
           </el-button>
         </div>
@@ -36,106 +42,121 @@
 </template>
 
 <script setup>
-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 { getCode, removeCode } from '@/utils/auth'
+  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, 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 oauthInfo = ref({})
+  const userStore = useUserStore()
+  const route = useRoute()
+  const router = useRouter()
+  const options = reactive([]) // 存储 OIDC 登录选项
 
-let platform = window.navigator.platform
-if (navigator.platform.indexOf('Mac') === 0) {
-  platform = 'mac'
-} else if (navigator.platform.indexOf('Win') === 0) {
-  platform = 'windows'
-} else if (navigator.platform.indexOf('Linux armv') === 0) {
-  platform = 'android'
-} 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 form = reactive({
-  username: '',
-  password: '',
-  platform: platform,
-})
-
-const redirect = route.query?.redirect
-const login = async () => {
-  const res = await userStore.login(form)
-  if (res) {
-    ElMessage.success(T('LoginSuccess'))
-    router.push({ path: redirect || '/', replace: true })
+  let platform = window.navigator.platform
+  if (navigator.platform.indexOf('Mac') === 0) {
+    platform = 'mac'
+  } else if (navigator.platform.indexOf('Win') === 0) {
+    platform = 'windows'
+  } else if (navigator.platform.indexOf('Linux armv') === 0) {
+    platform = 'android'
+  } 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 handleOIDCLogin = (provider) => {
-  userStore.oidc(provider, platform, browser)
-};
+  const form = reactive({
+    username: '',
+    password: '',
+    platform: platform,
+    captcha: '',
+  })
 
-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,
-  github: githubImage,
-  oidc: oidcImage,
-  // WebAuth: webauthImage,
-  default: defaultImage,
-};
-
-const getProviderImage = (provider) => {
-  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 }))); // 创建新的对象数组
-    allowRegister.value = res.data.register
-  } catch (error) {
-    console.error('Error loading login options:', error.message);
-  }
-};
-
-onMounted(async () => {
-  const code = getCode();
-  if (code) {
-    // 如果code存在，进行query获取user info
-    const res = await userStore.query(code)
-    if (res) {
-      // 删除code，确保跳转之前对code进行清楚
-      removeCode()
+  const captchaCode = ref('')
+  const redirect = route.query?.redirect
+  const login = async () => {
+    const res = await userStore.login(form).catch(e => e)
+    if (!res.code) {
       ElMessage.success(T('LoginSuccess'))
       router.push({ path: redirect || '/', replace: true })
     }
-  } else {
-    // 如果code不存在, 现实登陆页面
-    loadLoginOptions(); // 组件挂载后调用登录选项加载函数
+    if (res.code === 110 && captchaCode.value === '') {
+      // need captcha
+      loadCaptcha()
+    }
   }
-});
 
-const register = () => {
-  router.push('/register')
-}
+  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'
+
+  const providerImageMap = {
+    google: googleImage,
+    github: githubImage,
+    oidc: oidcImage,
+    // WebAuth: webauthImage,
+    default: defaultImage,
+  }
+
+  const getProviderImage = (provider) => {
+    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 }))) // 创建新的对象数组
+      allowRegister.value = res.data.register
+      if (res.data.need_captcha) {
+        loadCaptcha()
+      }
+    } catch (error) {
+      console.error('Error loading login options:', error.message)
+    }
+  }
+
+  onMounted(async () => {
+    const code = getCode()
+    if (code) {
+      // 如果code存在，进行query获取user info
+      const res = await userStore.query(code)
+      if (res) {
+        // 删除code，确保跳转之前对code进行清楚
+        removeCode()
+        ElMessage.success(T('LoginSuccess'))
+        router.push({ path: redirect || '/', replace: true })
+      }
+    } else {
+      // 如果code不存在, 现实登陆页面
+      loadLoginOptions() // 组件挂载后调用登录选项加载函数
+    }
+  })
+
+  const register = () => {
+    router.push('/register')
+  }
 </script>
 
 <style scoped lang="scss">
@@ -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 {