Merge pull request #71 from segment-oj/add-captcha-ztl

Add captcha ztl

Author: szdytom

src/components/lib/AjaxTable.vue

@@ -44,7 +44,7 @@ export default {
           this.loading = false;
         })
         .catch(err => {
-          this.$SegmentMessage.error(this, '[Ajax Table] Request Failed.');
+          this.$SegmentMessage.error(this, '[Ajax Table] Request Failed');
           console.log(err);
         });
     }

src/components/lib/captcha.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="captcha">
+    <el-input v-model="captcha_answer" placeholder="Solve Captcha"></el-input>
+    <img class="captcha-img" v-if="loaded" @click="refresh_captcha();" :src="img_url" />
+  </div>
+</template>
+
+<script>
+import apiurl from './../../apiurl';
+
+export default {
+  name: 'captcha',
+  data() {
+    return {
+      img_url: null,
+      captcha_answer: '',
+      loaded: false
+    };
+  },
+  watch: {
+    captcha_answer(val) {
+      this.$store.commit('setAnswer', {
+        val: val
+      });
+    }
+  },
+  methods: {
+    refresh_captcha() {
+      this.img_url = apiurl('/captcha/' + this.$store.state.captcha.captchaKey + '?sfid=' + String(Math.random()));
+    }
+  },
+  mounted() {
+    this.$store.commit('newCaptcha');
+    this.img_url = apiurl('/captcha/' + this.$store.state.captcha.captchaKey + '?sfid=' + String(Math.random()));
+    this.loaded = true;
+  }
+};
+</script>
+
+<style scoped>
+.captcha {
+    display: flex;
+}
+
+.captcha-img {
+    margin-left: 10px;
+}
+
+.captcha-img:hover {
+    cursor: pointer;
+}
+</style>

src/components/problem/list.vue

@@ -67,7 +67,7 @@ export default {
         this.data_count = data.res;
       })
       .catch(err => {
-        this.$SegmentMessage.error(this, '[Problem List] Get List Length Failed.');
+        this.$SegmentMessage.error(this, '[Problem List] Get List Length Failed');
         console.log(err);
       });
   }

src/components/user/register.vue

@@ -18,6 +18,8 @@
         <el-form-item prop="email">
           <el-input type="email" v-model="ldata.email"></el-input>
         </el-form-item>
+        <div class="icon-lable form-required"><i class="el-icon-check" /> Captcha</div>
+        <captcha ref="captchaElement" class="margin-bottom" />
         <el-form-item>
           <el-button type="primary" v-on:click="onSubmit();" :loading="buttonLoading">Register</el-button>
           <el-button v-on:click="$store.state.user.showregister = false;">Cancel</el-button>
@@ -30,6 +32,7 @@
 
 <script>
 import apiurl from './../../apiurl';
+import captcha from './../lib/captcha.vue';
 
 export default {
   name: 'UserRegister',
@@ -93,13 +96,18 @@ export default {
     };
   },
   methods: {
+    refresh_captcha() {
+      this.$refs.captchaElement.refresh_captcha();
+    },
     submit() {
       this.buttonLoading = true;
       this.$axios
         .post(apiurl('/account'), {
           username: this.ldata.username,
           password: this.ldata.password,
-          email: this.ldata.email
+          email: this.ldata.email,
+          captcha_key: this.$store.state.captcha.captchaKey,
+          captcha_answer: this.$store.state.captcha.captchaAnswer
         })
         .then(() => {
           this.$store.state.user.showregister = false;
@@ -112,6 +120,9 @@ export default {
           if (err.request.status === 400) {
             // HTTP 400 Bad Request
             this.$SegmentMessage.error(this, JSON.parse(err.request.response).detail);
+          } else if (err.request.status === 406){
+            // HTTP 406 Not Acceptable
+            this.$SegmentMessage.error(this, JSON.parse(err.request.response).detail);
           } else if (err.request.status === 409) {
             // HTTP 409 Conflict
             this.$SegmentMessage.error(this, 'Username has been taken');
@@ -122,6 +133,7 @@ export default {
             // Unknown error
             this.$SegmentMessage.error(this, 'Unknown error');
           }
+          this.refresh_captcha();
           this.buttonLoading = false;
         });
     },
@@ -137,13 +149,19 @@ export default {
     reset() {
       this.$refs['register'].resetFields();
     }
+  },
+  components: {
+    captcha
   }
 };
 </script>
 
 <style scoped>
-.form-required::before {
-    content: "*";
-    color: #f56c6c;
+.form-required {
+    margin-bottom: 5px;
+}
+
+.margin-bottom {
+    margin-bottom: 20px;
 }
 </style>

src/sfconfig.js

@@ -1,6 +1,6 @@
 export default {
   api: {
-    server: 'http://172.32.5.25:8000/api'
+    server: 'http://172.32.1.144:8000/api'
   },
   markdown: {
     gfm: true,
@@ -9,5 +9,6 @@ export default {
     pedantic: false,
     smartLists: true,
     smartypants: false,
-  }
+  },
+  captchaKeyMax: 2000000000
 };

src/store/captcha.js

@@ -0,0 +1,18 @@
+import sfconfig from './../sfconfig';
+
+const captchastore = {
+  state: {
+    captchaKey: null,
+    captchaAnswer: null
+  },
+  mutations: {
+    newCaptcha(state) {
+      state.captchaKey = Math.floor(Math.random() * sfconfig.captchaKeyMax) + 1;
+    },
+    setAnswer(state, data) {
+      state.captchaAnswer = data.val;
+    }
+  }
+};
+
+export default captchastore;

src/store/store.js

@@ -4,9 +4,11 @@ import Vuex from 'vuex';
 Vue.use(Vuex);
 
 import userstore from './user';
+import captchastore from './captcha';
 
 export default new Vuex.Store({
   modules: {
-    user: userstore
+    user: userstore,
+    captcha: captchastore
   }
 });