add login captcha

Author: det101

web/src/assets/styles/login.scss

@@ -44,7 +44,6 @@
     }
     .login-main {
         width: 380px;
-        height: 300px;
         background-color: $body-background;
         margin-right: 9.5%;
         padding: 20px;
@@ -76,9 +75,15 @@
         }
     }
     .remember-user-name {
-        margin: 5px 0 0 10px;
+        margin: 0px 0 10px 10px;
     }
     .ivu-form-item {
         margin-bottom: 20px;
     }
+    .captcha-wp {
+        display: flex;
+        img{
+            height: 44px;
+        }
+    }
 }

web/src/commonData/i18n/common/en.json

@@ -800,7 +800,8 @@
             "password": "Please enter password！",
             "loginSuccess": "Login Success",
             "haveLogin": "You have already logged in, please do not login repeatedly",
-            "vaildFaild": "Authentication failed!"
+            "vaildFaild": "Authentication failed!",
+            "captcha": "Please enter captcha"
         },
         "userMenu": {
             "title": "Warning",

web/src/commonData/i18n/common/zh.json

@@ -800,7 +800,8 @@
             "password": "请输入密码！",
             "loginSuccess": "登录成功",
             "haveLogin": "您已经登录，请不要重复登录",
-            "vaildFaild": "验证未通过！"
+            "vaildFaild": "验证未通过！",
+            "captcha": "请输入验证码"
         },
         "userMenu": {
             "title": "警告",

web/src/js/view/login/index.vue

@@ -23,13 +23,23 @@
           <Input
             v-model="loginForm.password"
             type="password"
-            placeholder="请输入密码"
+            :placeholder="this.$t('message.login.password')"
             size="large" />
-          <Checkbox
-            v-model="rememberUserNameAndPass"
-            class="remember-user-name"
-            style="">{{$t('message.login.remenber')}}</Checkbox>
         </FormItem>
+        <FormItem prop="captcha" v-if="captImg">
+          <div class="captcha-wp">
+            <Input
+              v-model="loginForm.captcha"
+              type="text"
+              :placeholder="$t('message.login.captcha')"
+              size="large"/>
+            <div><img :src="captImg" @click="getCapt"></div>
+          </div>
+        </FormItem>
+        <Checkbox
+          v-model="rememberUserNameAndPass"
+          class="remember-user-name"
+          style="">{{$t('message.login.remenber')}}</Checkbox>
         <FormItem>
           <Button
             :loading="loading"
@@ -47,13 +57,17 @@
 import api from '@/js/service/api';
 import storage from '@/js/helper/storage';
 import socket from '@js/module/webSocket';
+import axios from 'axios';
 export default {
   data() {
     return {
       loading: false,
+      captImg: null,
+
       loginForm: {
         user: '',
         password: '',
+        captcha: ''
       },
       ruleInline: {
         user: [
@@ -64,6 +78,10 @@ export default {
           { required: true, message: this.$t('message.login.password'), trigger: 'blur' },
           // {type: 'string', pattern: /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,18}$/, message: '请输入6至12位的密码', trigger: 'change'},
         ],
+        captcha: [
+          { required: true, message: this.$t('message.login.captcha'), trigger: 'blur' }
+        ]
+
       },
       rememberUserNameAndPass: false,
     };
@@ -75,6 +93,7 @@ export default {
       this.loginForm.user = userNameAndPass.split('&')[0];
       this.loginForm.password = userNameAndPass.split('&')[1];
     }
+    this.getCapt();
   },
   mounted() {
     // 如果有登录状态，且用户手动跳转到login页，则判断登录态是否过期
@@ -85,6 +104,18 @@ export default {
     socket.methods.close();
   },
   methods: {
+    getCapt(){
+      axios.get('/api/rest_j/v1/user/captcha').then(data=>{
+        api.fetch('/user/captcha', 'get').then((data)=>{
+          this.captImg = data.image
+        }).catch(()=>{
+          this.captImg = null;        
+        })
+      }).catch(err=>{
+        this.captImg = null;
+        console.warn('err', err);
+      })
+    },
     getIfLogin() {
       api.fetch('/dss/getBaseInfo', 'get').then(() => {
         this.$router.push('/');
@@ -103,6 +134,7 @@ export default {
           const params = {
             userName: this.loginForm.user,
             password: this.loginForm.password,
+            captcha: this.loginForm.captcha,
           };
           api
             .fetch(`/user/login`, params)
@@ -133,6 +165,7 @@ export default {
           this.$Message.error(this.$t('message.login.vaildFaild'));
         }
       });
+      this.getCapt();
     },
     clearSession() {
       storage.clear();